Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's Get Testable: An Introduction to Unit Tes...

Let's Get Testable: An Introduction to Unit Testing

Presented at :
CSS Dev Conf New Orleans, 2014
Javascript Summit 2015

Front-end unit testing is beginning to emerge as a best practice for building Javascript-heavy web applications. Testing can seem daunting or a bit confusing at first for some developers, but once understood it becomes an invaluable tool for building stable applications.

- What are unit tests?
- Why should I be writing tests?
- What tools do I have available for writing front-end unit tests?
- I love it! How do I get started?

Alicia Sedlock

October 13, 2014
Tweet

More Decks by Alicia Sedlock

Other Decks in Programming

Transcript

  1. Popular Tools • Jasmine (http://jasmine.github.io/) • Mocha (http://visionmedia.github.io/mocha/) • QUnit

    (http://qunitjs.com/) • CasperJS (http://casperjs.org/) • …and others!
  2. Write A Test Description describe(“Calculator Operations”, function () {! !

    ! it(“Should add two numbers”, function () {! ! ! });! ! });
  3. Expectations and Matchers describe(“Calculator Operations”, function () {! ! !

    it(“Should add two numbers”, function () {! ! ! ! Calculator.init();! ! ! ! ! ! var result = Calculator.addNumbers(7,3);! ! ! ! expect(result).toBe(10);! ! ! });! ! });
  4. Expectations and Matchers describe(“Calculator Operations”, function () {! ! !

    it(“Should add two numbers”, function () {! ! ! ! Calculator.init();! ! ! ! ! ! var result = Calculator.addNumbers(7,3);! ! ! ! expect(result).toBe(10);! ! ! expect(result).not.toBe(null);! ! ! });! ! });
  5. Add More Tests … ! it(“Should add two numbers”, function

    () {! ! ! Calculator.init();! ! ! ! var result = Calculator.addNumbers(7,3);! ! ! ! expect(result).toBe(10);! ! ! expect(result).not.toBe(null);! ! });! ! ! it(“Should subtract two numbers”, function () {! ! ! Calculator.init();! ! ! ! var result = Calculator.subtractNumbers(20,4);! ! ! ! expect(result).toBe(16);! ! ! expect(result).not.toBe(null);! ! });! …
  6. Hmm… … ! it(“Should add two numbers”, function () {!

    ! ! Calculator.init();! ! ! ! var result = Calculator.addNumbers(7,3);! ! ! ! expect(result).toBe(10);! ! ! expect(result).not.toBe(null);! ! });! ! ! it(“Should subtract two numbers”, function () {! ! ! Calculator.init();! ! ! ! var result = Calculator.subtractNumbers(20,4);! ! ! ! expect(result).toBe(16);! ! ! expect(result).not.toBe(null);! ! });! …
  7. Setup and Breakdown describe(“Calculator Operations”, function () {! ! !

    beforeEach(function () {! ! ! ! ! ! Calculator.init();! ! ! });! ! });
  8. Setup and Breakdown describe(“Calculator Operations”, function () {! ! !

    beforeEach(function () {! ! ! ! ! ! Calculator.init();! ! ! });! ! ! afterEach(function () {! ! ! ! ! ! Calculator.remove();! ! ! });! ! });
  9. Spies … ! it(“Should store the results of operations”, function

    () {! ! ! ! expect(Calculator.currentValue).toBe(0);! ! ! });! …
  10. Spies … ! it(“Should store the results of operations”, function

    () {! ! ! ! expect(Calculator.currentValue).toBe(0);! ! ! ! spyOn(Calculator, “updateCurrentValue”);! ! ! });! …
  11. Spies … ! it(“Should store the results of operations”, function

    () {! ! ! ! expect(Calculator.currentValue).toBe(0);! ! ! ! spyOn(Calculator, “updateCurrentValue”);! ! ! ! Calculator.addNumbers(7,10);! ! ! ! expect(Calculator.updateCurrentValue).toHaveBeenCalled();! ! ! });! …
  12. Spies … ! it(“Should store the results of operations”, function

    () {! ! ! ! expect(Calculator.currentValue).toBe(0);! ! ! ! spyOn(Calculator, “updateCurrentValue”);! ! ! ! Calculator.addNumbers(7,10);! ! ! ! expect(Calculator.updateCurrentValue).toHaveBeenCalled();! ! ! ! ! ! expect(Calculator.updateCurrentValue)! ! ! ! ! .toHaveBeenCalledWith(17);! ! ! });! …
  13. Spies … ! it(“Should store the results of operations”, function

    () {! ! ! ! expect(Calculator.currentValue).toBe(0);! ! ! ! spyOn(Calculator, “updateCurrentValue”);! ! ! ! Calculator.addNumbers(7,10);! ! ! ! expect(Calculator.updateCurrentValue).toHaveBeenCalled();! ! ! ! ! ! expect(Calculator.updateCurrentValue)! ! ! ! ! .toHaveBeenCalledWith(17);! ! ! ! expect(Calculator.currentValue).toBe(17);! ! ! });! …
  14. .done() … ! it(“Should test async”, function (done) {! !

    ! ! ! ! var foo = 0;! ! ! foo++;! ! ! ! setTimeout(function () {! ! ! ! expect(foo).toBe(1);! ! ! ! done();! ! ! }, 100);! ! ! });! …
  15. .done() … ! ! ! beforeEach(function (done) {! ! !

    ! ! ! Calculator.setUserInfo(“aliciasedlock”);! ! ! ! setTimeout(function () {! ! ! ! done();! ! ! }, 4000);! ! ! });! ! ! it(“Should set the user information”, function () {! ! ! ! ! ! expect(Calculator.user).toBe(“Alicia”);! ! ! });! …
  16. .done() … ! ! ! beforeEach(function (done) {! ! !

    ! ! ! jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;! ! ! ! ! Calculator.setUserInfo(“aliciasedlock”);! ! ! ! setTimeout(function () {! ! ! ! done();! ! ! }, 9000);! ! ! });! ! ! it(“Should set the user information”, function () {! ! ! ! ! ! expect(Calculator.user).toBe(“Alicia”);! ! ! });! …
  17. … ! it(“Should store the results of operations”, function ()

    {! ! ! ! expect(Calculator.currentValue).toBe(0);! ! ! ! spyOn(Calculator, “updateCurrentValue”);! ! ! ! Calculator.addNumbers(7,10);! ! ! ! expect(Calculator.updateCurrentValue).toHaveBeenCalled();! ! ! ! ! ! expect(Calculator.updateCurrentValue)! ! ! ! ! .toHaveBeenCalledWith(17);! ! ! ! expect(Calculator.currentValue).toBe(17);! ! ! });! …
  18. … ! it(“Should store the results of operations”, function ()

    {! ! ! ! expect(Calculator.currentValue).toBe(0);! ! ! ! spyOn(Calculator, “updateCurrentValue”);! ! ! ! Calculator.addNumbers(7,10);! ! ! ! var result = $(“span#result”).text();! ! ! ! expect(result).toBe(“17”);! ! });! …
  19. • As your modify code, write a test. • Adding

    new features? Write tests! • Incorporate into code reviews.
  20. Malformed/unused CSS • CSS code styling guide (http://cssguidelin.es/) • CSS

    Lint (https://github.com/CSSLint/csslint) • UnCSS (https://github.com/giakki/uncss)