Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

JavaScript Unit Testing

Slide deck for my Unit Testing JavaScript talk given at London's Calling and the London Salesforce Developer's February Meetup. Includes links to the demo application and Github repository.

  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

JavaScript Unit Testing

  1. 1. Unit Testing JavaScript Keir Bowden CTO, BrightGen @bob_buzzard Unit Tests – They’re not just for Apex
  2. 2. • Introduction • Tools • Visualforce • Lightning Components • Q & A What we’ll cover
  3. 3. Introduction
  4. 4. Why write unit tests • Give confidence • Reduce cost of bugs • Produce testable code • Promote refactoring Introduction
  5. 5. No test context for client • Changes aren’t rolled back Side effects • DOM manipulation • Server calls Challenges JavaScript on Salesforce
  6. 6. Unobtrusive JavaScript Avoid anonymous functions Functional decomposition • Function to decide on action • Function to take the action Writing Testable Code function redirectToURL(url) { if (“#”===url.charAt(0)) { window.location.hash=url; } else if (“/”===url.charAt(0)) window.location.pathname=url; } ....
  7. 7. Github: bobbuzz.me.uk/JSUTSF Public Site • Jobs: • bobbuzz.me.uk/1Ad25OG • Tests: • bobbuzz.me.uk/1PvhII3 Demo App
  8. 8. Tools
  9. 9. Pure JavaScript Unit Test Framework Executes in-browser From the developers of jQuery QUnit <apex:includeScript value="{!$Resource.qunitJS}"/> <apex:stylesheet value="{!$Resource.qunitCSS}"/> <div id="qunit"></div> <div id="qunit-fixture"></div> Test markup container
  10. 10. Module – group of tests Test – single test Assert – confirm behaviour Concepts QUnit QUnit.module("JOBLIST", { beforeEach: function(assert) { // setup code }, afterEach : function(assert) { // teardown code } }); QUnit.test("Show Progress", function( assert ) { jobCtrl.showProgress(); }); assert.equal(jobCtrl.progressCount, 1, "Progress count is one");
  11. 11. Pure JavaScript Works with any test framework Three key concepts • Spies – records execution, parameters • Stubs – Spies + replace functions • Mocks – Stubs + expected behaviour Sinon.JS
  12. 12. Sinon Stub this.searchStub = sinon.stub(jobCtrl, "doSearch"); var jobCtrl={ doSearch : function(ev) { // remote call to server } }; jobCtrl.doSearch(event); doSearch : function() { // sinon stub code } assert.equal(this.searchStub.callCount,1, "search called once"); this.searchStub.restore(); doSearch : function(ev) { // remote call to server } $('#searchbtn').on("click", jobCtrl.doSearch);
  13. 13. Code coverage! Pure JavaScript Works with QUnit, Mocha and Jasmine JavaScript must be external Blanket.JS <apex:includeScript value="{!$Resource.blanketJS}"/> <script src="{!$Resource.JobsJS}" data-cover="true"></script>
  14. 14. Blanket.JS
  15. 15. Visualforce
  16. 16. Dedicated test page Replicate markup as required Include JavaScript to be tested Can capture coverage Demo Visualforce
  17. 17. Lightning Components
  18. 18. Components are isolated JavaScript in controller + helper Cannot capture coverage Markup is fixed How to trigger tests? Challenges Lightning Components
  19. 19. Qunit tests in helper function • Controller method to execute helper function Lightning test application (page equivalent) Tests executed via event • Fired by application • Handled by component under test Demo My Solution! Lightning Components
  20. 20. Unobtrusive JavaScript Functional decomposition Avoid anonymous functions No client-side test context Stubs are your best friend Takeaways
  21. 21. Q & A Keir Bowden CTO, BrightGen @bob_buzzard

×