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 adapted 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 lighting 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 behavior 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 how to install the LTS unmanaged package manually.
Install the Lightning Testing Service Unmanaged Package Manually
- Log in to your Org. We recommend that you create a new DE org for evaluating the LTS.
- Go to the project Releases page, and click the package installation URL for the latest release.
- Authenticate again with the credentials for your DE org.
- 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
- Now we need to create a Javascript file containing Jasmine test method and upload it as a static resource.
*****************************************************************************************************************
<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
CEO | Founder
Ajay Dubedi, the founder and CEO of Cloud Analogy, is a prominent Salesforce Sales, Service, and Marketing cloud Consultant with a rich expertise in handling challenging business models. Ajay has assisted and implemented solutions in industries comprising Banking, Health Care, Networking, Education, Telecommunication and Manufacturing. Ajay is globally acclaimed for his extensive experience in APEX Programming, VisualForce pages, Triggers, Workflows, Page Layouts, Roles, Profiles, Reports & Dashboards.Hire the best Salesforce Implementation Partner. Choose Cloud Analogy, the world's most preferred Salesforce Implementation Company that provides custom CRM Implementation services.
