JavaScript Unit Testing
Download as PPTX, PDF0 likes708 views
The document discusses the importance and methodology of unit testing in JavaScript, particularly within the context of Salesforce applications. It covers tools such as QUnit and Sinon.js, emphasizing the need for testable code, managing dependencies, and the challenges faced when testing Lightning components. Key takeaways include promoting functional decomposition and the use of unobtrusive JavaScript to facilitate testing.
JavaScript Unit Testing
- 1. Unit Testing JavaScript Keir Bowden CTO, BrightGen @bob_buzzard Unit Tests – They’re not just for Apex
- 2. • Introduction • Tools • Visualforce • Lightning Components • Q & A What we’ll cover
- 3. Introduction
- 4. Why write unit tests • Give confidence • Reduce cost of bugs • Produce testable code • Promote refactoring Introduction
- 5. No test context for client • Changes aren’t rolled back Side effects • DOM manipulation • Server calls Challenges JavaScript on Salesforce
- 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. Github: bobbuzz.me.uk/JSUTSF Public Site • Jobs: • bobbuzz.me.uk/1Ad25OG • Tests: • bobbuzz.me.uk/1PvhII3 Demo App
- 8. Tools
- 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. 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. 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. 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. 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. Blanket.JS
- 15. Visualforce
- 16. Dedicated test page Replicate markup as required Include JavaScript to be tested Can capture coverage Demo Visualforce
- 18. Components are isolated JavaScript in controller + helper Cannot capture coverage Markup is fixed How to trigger tests? Challenges Lightning Components
- 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. Unobtrusive JavaScript Functional decomposition Avoid anonymous functions No client-side test context Stubs are your best friend Takeaways
- 21. Q & A Keir Bowden CTO, BrightGen @bob_buzzard