Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Unit Testing Lightning Components with Jasmine

1,891 views

Published on

Slide deck for my Dreamforce 16 talk on unit testing your lightning components JavaScript with the Jasmine library.

Published in: Technology
  • Be the first to comment

Unit Testing Lightning Components with Jasmine

  1. 1. Keir Bowden CTO, BrightGen @bob_buzzard Unit Testing Lightning Components With Jasmine
  2. 2. Keir Bowden @bob_buzzard CTO, BrightGen PLACE COMPANY LOGO HERE
  3. 3. Introduction ● Give confidence ● Reduce cost of bugs ● Produce Testable Code ● Promote refactoring Why Write Unit Tests
  4. 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. 5. Techniques ● Use unobtrusive JavaScript ● Avoid anonymous functions ○ Can't test in isolation ○ Have to execute action Write Testable Code
  6. 6. Techniques ● Decompose functions ○ Function to decide on action ○ Function to execute the action Write Testable Code
  7. 7. Demo App Github repository http://bobbuzz.me.uk/UTLCJSM Job Board
  8. 8. Jasmine
  9. 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. 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. 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. 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. 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. 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. 15. Testing Lightning Components
  16. 16. Locker Service ● Delete from Jasmine JavaScript: ● Can't spy framework methods
  17. 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. 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. 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. 20. Key Takeaways ● Front end code deserves unit tests ● Decompose functions ● Isolate framework calls ● It's probably not the locker service!
  21. 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. 22. Thank Y u

×