unit testing lightning components with jasmine
TRANSCRIPT
![Page 1: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/1.jpg)
Keir BowdenCTO, BrightGen
@bob_buzzard
Unit Testing Lightning ComponentsWith Jasmine
![Page 2: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/2.jpg)
Keir Bowden@bob_buzzard
CTO, BrightGen
PLACE COMPANY LOGO HERE
![Page 3: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/3.jpg)
Introduction
● Give confidence
● Reduce cost of bugs
● Produce Testable Code
● Promote refactoring
Why Write Unit Tests
![Page 4: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/4.jpg)
JavaScript Testing on Salesforce
● No test context for client
○ Changes aren't rolled back
● Side effects
○ DOM manipulation
○ Server side actions
● You don't have to!
Challenges
![Page 5: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/5.jpg)
Techniques
● Use unobtrusive JavaScript
● Avoid anonymous functions
○ Can't test in isolation
○ Have to execute action
Write Testable Code
![Page 6: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/6.jpg)
Techniques
● Decompose functions
○ Function to decide on action
○ Function to execute the action
Write Testable Code
![Page 7: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/7.jpg)
Demo App
Github repository
http://bobbuzz.me.uk/UTLCJSM
Job Board
![Page 8: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/8.jpg)
Jasmine
![Page 9: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/9.jpg)
Jasmine
● Pure JavaScript testing framework
● Executes in-browser
○ Execute tests from anywhere
○ Lightning Component JavaScript only executable from browser
● Open source : http://bobbuzz.me.uk/2bVjTEr
● Minor changes for locker service
Overview
![Page 10: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/10.jpg)
Jasmine
● Behaviour-driven development testing framework
○ Given the job page is openWhen the user searches for jobsThen the search method should be invoked
● Also known as Setup (Given) - Exercise (When) - Verify (Then)
Overview
![Page 11: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/11.jpg)
Jasmine
● Suite
○ Collection of tests○ describe function
● Spec
○ Single test○ it function
● Expectation
○ Verifies behaviour (equivalent of assert in Apex)○ expect function○ Chained with matcher function
Features
![Page 12: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/12.jpg)
Jasmine
● Setup/Teardown
○ beforeAll - called once, before first spec○ afterAll - called once, after last spec○ beforeEach - called before each spec○ afterEach - called after each spec
● Spies
○ Stubs function○ Tracks calls○ Tracks arguments
Features
![Page 13: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/13.jpg)
JasmineSpies
Reset when spec/suite completes
doSearch function calls getJobs
getJobs executes server side action
spy on the getJobs functionJasmine spy code replaces getJobs implementation - no server side action
interrogate spy to confirm behaviour
![Page 14: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/14.jpg)
Jasmine
● Object with functions to handle Jasmine events
○ e.g. JasmineStarted, specStarted, specDone
● HTML reporter included
○ Disabled in the github repository○ Replaced with SLDS version
● Console reporter available
○ But deprecated!
Reporter
![Page 15: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/15.jpg)
Testing Lightning Components
![Page 16: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/16.jpg)
Locker Service
● Delete from Jasmine JavaScript:
● Can't spy framework methods
![Page 17: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/17.jpg)
How to Trigger Tests?
TestApplication
ReporterComponent
JasmineTestable
Component
1 create
2 Initialise
5 queue tests
6 queue tests
4 Initialised
7 tests queued
8 execute
9 notify
10 Complete
3 register
Lightning component
Jasmine
Lightning event
Attribute change event
JavaScript function
Key
![Page 18: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/18.jpg)
Triggering Tests
1. The test application creates the Jasmine instanceThe Jasmine instance is visible to all components in the same namespace.This includes all testable components.
2. The application fires an event asking the reporters to initializeThis is an application event that can be received by any component with an appropriate handler
3. Each reporter registers an object to receive notifications with JasmineThe object can take action on each event, but my samples simply capture the information as the tests progress and then take action once all are complete.
4. Each reporter fires an event to indicate it has completed initialization
5. Once all reporters have initialised, the application fires a queue tests eventThe application knows how many responses to expect.
![Page 19: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/19.jpg)
Triggering Tests
6. Each testable component receives the event and queues their tests with JasmineThe tests are not run at this point!
7. Each testable component fires an event to indicate it has queued its testsThe test application knows how many responses to expect.
8. The test application invokes the Jasmine execute methodThis executes the queued tests
9. As tests execute, they notify the reporter(s) of the outcomesThe sample reporters record this information but take no action
10. The application notifies the reporter(s) that all tests are completeThe sample reporters take appropriate action once all tests are complete.Posting to chatter, for example.
![Page 20: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/20.jpg)
Key Takeaways
● Front end code deserves unit tests
● Decompose functions
● Isolate framework calls
● It's probably not the locker service!
![Page 21: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/21.jpg)
Useful LinksJasmine source
https://github.com/jasmine/jasmine
Jasmine introductionhttp://jasmine.github.io/2.4/introduction.html
Jasmine JavaScript Testing (Book)https://www.packtpub.com/web-development/jasmine-javascript-testing-second-edition
Jasmine Reportershttps://github.com/larrymyers/jasmine-reporters
![Page 22: Unit Testing Lightning Components with Jasmine](https://reader033.vdocuments.mx/reader033/viewer/2022042619/587325851a28ab596c8b48f3/html5/thumbnails/22.jpg)
Thank Y u