Menu

Lightning Component Testing With Jasmine

Before we start to provide you with some insights testing Lightning components with Jasmine, first and foremost, what comes to our mind is “What is Jasmine?”. Jasmine is a behavior-driven development framework – that is used for the purpose of testing Javascript code. If Jasmine is adopted for testing of Lightning components, then there are obviously some advantages for this. Let us throw some light on the advantages:

What are the Advantages?

Some advantages that Jasmine offers are:

  • It is built easy to set up and it is possible to set up in any scenario
  • It has no requirement for DOM
  • It has no dependency on any other Javascript framework
  • It helps to write tests in easy steps because it comes with clean syntax

In this post, we will provide you with some insights on how Jasmine is used for testing the Lightning components. But to begin with we need to understand “What is Lightning Test Services ?”.

What is Lightning Test Services?

Lightning Testing Service is an amazing framework to test your lightning components. Jasmine and Mocha are widely accepted all throughout the Javascript world. Salesforce has come with a new concept Lightning Test Services(LTS). LTS is a set of tools and services – that create test suites for these Lightning components. It helps in the validation of the client-side behaviour of these components. You can install LTS in your Salesforce org in the following two ways:

  • As an unmanaged package
  • Install LTS by using a command in Salesforce Developer Experience(SFDX)

If you’re not using Salesforce DX, you can manually install the unmanaged package.In this post we discuss that how to install the LTS unmanaged package manually.

Install the Lightning Testing Service Unmanaged Package Manually

  1. Log in to your org. We recommend that you create a new DE org for evaluating the LTS.
  2. Go to the project Releases page, and click the package installation URL for the latest release.
  3. Authenticate again with the credentials for your DE org.
  4. Follow the normal package installation prompts. We recommend installing the package for admins only.

Read Also : Is Salesforce Good For Start-Ups

Steps for using Jasmine for Testing Lightning Component

  • These are the steps for testing:
    • We have already shown the installation of Jasmine. Once the installation is completed, you can start to navigate in your browser – so as to open the Jasmine test runner page.
    • Next, Lightning component is to be used by Lightning Test Service (LTS).
    • Lightning:datatable component is used by the

*****************************************************************************************************************

<aura:application extends=”force:slds”>

<c:PersonDemo />

</aura:application>

*****************************************************************

<aura:component>

<aura:attribute name=”personObj” type=”Object” />

<aura:attribute name=”personList” type=”Object[]” />

<aura:attribute name=”columns” type=”Object” />

<aura:handler name=”init” value=”{!this}” action=”{!c.init}”/>

<div class=”slds-grid slds-gutters slds-p-top_xx-large”>

<div class=”slds-col”> </div>

<div class=”slds-col”>

<div class=”slds-box”>

<lightning:input name=”inFirstName” label=”First Name” value=”{!v.personObj.firstName}” />

<lightning:input name=”inLastName” label=”Last Name” value=”{!v.personObj.lastName}” />

<lightning:input name=”inAge” label=”Age” value=”{!v.personObj.age}” />

<lightning:input name=”inEyeColor” label=”Eye Color” value=”{!v.personObj.eyeColor}” />

<br />

<p>

<lightning:button variant=”brand” label=”Add” title=”Add Person” onclick=”{! c.addPerson }” />

</p>

</div>

</div>

<div class=”slds-col”> </div>

</div>

<div class=”slds-box”>

<lightning:datatable

keyField=”firstName”

data=”{! v.personList }”

columns=”{! v.columns }”

hideCheckboxColumn=”true”/>

</div>

</aura:component>

************************************************************

({

addPerson : function(component, event, helper) {

helper.addPerson(component, event, helper);

},

init : function(component, event, helper) {

helper.init(component, event, helper);

},

})

************************************************************

({

addPerson : function(component, event, helper) {

var personData = component.get(“v.personObj”);

var personList = component.get(“v.personList”);

var person = {

firstName : personData.firstName,

lastName : personData.lastName,

age : personData.age,

eyeColor : personData.eyeColor

};

personList.push(person) ;

component.set(“v.personList”,personList);

component.set(“v.personObj”,{});

},

init : function(component, event, helper) {

component.set(“v.personObj”,{});

component.set(“v.columns”,[

{label : ‘First Name’,fieldName : ‘firstName’, type : “text”,sortable:”false”},

{label : ‘Last Name’,fieldName : ‘lastName’, type : “text”,sortable:”false”},

{label : ‘Age’,fieldName : ‘age’, type : “text”,sortable:”false”},

{label : ‘Eye Color’,fieldName : ‘eyeColor’, type : “text”,sortable:”false”}

]);

}

})

******************************************************************************************************************************

  • Now we need to create a Javascript file containing Jasmine test method and upload it as a static resource.

*****************************************************************************************************************************

describe(“Lightning Component Testing Examples”, function(){

   afterEach(function() {

       // Each spec (test) renders its components into the same div,

       // so we need to clear that div out at the end of each spec.

       $T.clearRenderedTestComponents();

   });

   describe(‘c:PersonDemo’, function(){

       it(‘Is Datatable Populated’, function(done) {

           var personListObj = [];

           var p = {

                   firstName : “John”,

                   lastName : “Doe”,

                   age : “28”,

                   eyeColor : “Green”} ;

                   personListObj.push(p);

 

           var attributes = {

               personList:personListObj  

           };

           $T.createComponent(“c:PersonDemo”, attributes, true)

           .then(function(component) {

               var totalRecords = component.get(“v.personList”);

               expect(totalRecords.length).toEqual(1);

               done();

           }).catch(function(e) {

               // end this spec as a failure

               done.fail(e);

           });

       });

   });

});

*****************************************************************************

  • This static resource then gets uploaded in Salesforce named as JasmineTest Datatable. The reference to this app has to be added to the static resource in JasmineTests.app

*****************************************************************************

<aura:application >

   <c:lts_jasmineRunner testFiles=”{!join(‘,’,

    $Resource.jasmineHelloWorldTests,

     $Resource.JasmineTestDatatable                             

   )}” />

</aura:application>

********************************************************************************************************************************************************

  • Finally, the Jasmine Test Runner is opened when we preview this above lightning  application.

This will show the output of the testing in the form of which test passed and which of the tests failed.

Summary

As of now we write lots of Apex code and use classes for testing Lightning components in Salesforce. This is more so because of the absence of any testing framework for Salesforce and this is the reason for which, we can currently use Jasmine JS framework for testing the components.

Ajay Dubedi

Ajay Dubedi

Founder CEO | Salesforce Expert

” More than 11 years of industry experience. Responsible for strategy, vision, and project delivery at Cloud Analogy “

Please follow and like us:
Social media & sharing icons powered by UltimatelySocial

Enjoy this blog? Please spread the word :)