What the HTML? - The Holy Grail
2 likes2,341 views
Unit testing JavaScript code requires changing how code is written to enable automated testing, validation, and refactoring. Key aspects include: 1. Tests should run quickly in real browsers and output code coverage data to integrate with continuous integration systems. 2. Popular tools like Karma and Jasmine allow defining test suites with descriptions, asynchronous behavior, and assertions to validate code works as expected across browsers. 3. Jasmine defines tests using describe, it, expect functions and matches actual vs expected output to validate functionality. Well-written tests provide reliable, fast execution and protection during refactoring.
What the HTML? - The Holy Grail
- 5. Documents & Defines the expected input and output of your code Makes it Easier to Refactor. Helps you write Better, re-usable code. Enables Automated testing.
- 6. Unit Testing requires you change the way you write your code. (But this is good);
- 7. JavaScript is interpreted at runtime. Across a variety of different browsers. Mutable , Loosely-typed ,, Global scope. SUDDEN DEATH Mode
- 8. Tests should:: ● Run in a real browser environment ● Run in any & all browsers ● Integrate with our CI setup ● Output code coverage metrics ● Easy to write ● Be reliable, execute fast
- 12. 1. Karma runs a server 2. Real-world browsers connect 3. Karma serves your tests 4. Browsers execute tests 5. Karma collates the output
- 13. > karma init karma.config.js > karma start
- 14. ● Tests written in JavaScript ● BDD syntax ● Anything you can do with JavaScript, you can test with JavaScript
- 15. describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); expect(true).not.toBe(false); }); });
- 16. ● describe(name, function) ● it(name, function) ● beforeEach(function) / afterEach(function) ● expect(condition).toBe(value); ● expect(condition).not.toBe(value); ● .toEqual() / .toBeTruthy() / .toBeFalsy() ● waitsFor(function) / runs(function) Writing tests in Jasmine
- 17. it('checks that the Quicknav control navigates to a page', function() { loadFixtures('simple-fixture.html'); var activeTextInstance = new ActiveText(...); waitsFor(function() { return activeTextInstance.ready; }, 500); runs(function() { var element = $('.quicknav input'); element.focus(); element.val("5"); var e = jQuery.Event("keydown"); e.which = ActiveText.Keymap.ENTER; $(element).trigger(e); e = jQuery.Event("keyup"); e.which = ActiveText.Keymap.ENTER; $(element).trigger(e); expect(element.val()).toBe("Pages 4–5 of 26"); expect(activeTextInstance.model.getCurrentIndex()).toBe(3); expect(activeTextInstance.model.getCurrentPageNumber()).toBe(4); }); });
- 18. Console Output;
- 19. CI Integration;
- 20. LCOV Output;