The document discusses unit testing for Lightning components using Jasmine, emphasizing the importance of unit tests for confidence, bug cost reduction, and code testability. It outlines techniques for writing testable JavaScript code, explains Jasmine's features, and details the testing workflow for Lightning components. Key takeaways include the necessity of unit tests for front-end code, function decomposition, and isolation of framework calls.

1. Keir Bowden
CTO, BrightGen
@bob_buzzard
Unit Testing Lightning Components
With Jasmine

2. Keir Bowden
@bob_buzzard
CTO, BrightGen
PLACE COMPANY LOGO
HERE

3. Introduction
● Give confidence
● Reduce cost of bugs
● Produce Testable Code
● Promote refactoring
Why Write Unit Tests

4. 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

5. Techniques
● Use unobtrusive JavaScript
● Avoid anonymous functions
○ Can't test in isolation
○ Have to execute action
Write Testable Code

6. Techniques
● Decompose functions
○ Function to decide on action
○ Function to execute the action
Write Testable Code

7. Demo App
Github repository
http://bobbuzz.me.uk/UTLCJSM
Job Board

8. Jasmine

9. 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

10. Jasmine
● Behaviour-driven development testing framework
○ Given the job page is open
When the user searches for jobs
Then the search method should be invoked
● Also known as Setup (Given) - Exercise (When) - Verify (Then)
Overview

11. 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

12. 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

13. Jasmine
Spies
Reset when spec/suite completes
doSearch function
calls getJobs
getJobs executes
server side action
spy on the getJobs function
Jasmine spy code replaces getJobs
implementation - no server side action
interrogate spy to confirm behaviour

14. 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

15. Testing Lightning
Components

16. Locker Service
● Delete from Jasmine JavaScript:
● Can't spy framework methods

17. How to Trigger Tests?
Test
Application
Reporter
Component
Jasmine
Testable
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

18. Triggering Tests
1. The test application creates the Jasmine instance
The 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 initialize
This 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 Jasmine
The 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 event
The application knows how many responses to expect.

19. Triggering Tests
6. Each testable component receives the event and queues their tests with Jasmine
The tests are not run at this point!
7. Each testable component fires an event to indicate it has queued its tests
The test application knows how many responses to expect.
8. The test application invokes the Jasmine execute method
This executes the queued tests
9. As tests execute, they notify the reporter(s) of the outcomes
The sample reporters record this information but take no action
10. The application notifies the reporter(s) that all tests are complete
The sample reporters take appropriate action once all tests are complete.
Posting to chatter, for example.

20. Key Takeaways
● Front end code deserves unit tests
● Decompose functions
● Isolate framework calls
● It's probably not the locker service!

21. Useful Links
Jasmine source
https://github.com/jasmine/jasmine
Jasmine introduction
http://jasmine.github.io/2.4/introduction.html
Jasmine JavaScript Testing (Book)
https://www.packtpub.com/web-development/jasmine-javascript-testing-second-edition
Jasmine Reporters
https://github.com/larrymyers/jasmine-reporters

22. Thank Y u