Front-End Testing with Mocha

A presentation I gave at the July 26, 2014 meeting of the Charlotte, NC, Front-End Developers Meetup

Transcript

1. @vanwilson TEST FRAMEWORK SHOWDOWN, Part 2
2. The Lineup May: Jasmine June: Mocha July: QUnit
3. Who am I?
12. And now for something completely different
13. “Immature poets imitate; mature poets steal.” -T.S. Elliot, “The Sacred Wood: Essays on Poetry and Criticism”
16. Types of Tests TESTS. LOTS OF TESTS. • SMOKE TESTS • INTEGRATION TESTS • USER ACCEPTANCE TESTS • REGRESSION TESTS • UNIT TESTS
17. Types of Tests TESTS. LOTS OF TESTS. • SMOKE TESTS • INTEGRATION TESTS • USER ACCEPTANCE TESTS • REGRESSION TESTS • UNIT TESTS
18. Unit Tests TESTS. LOTS OF TESTS. ENSURE YOU BUILD THE THING RIGHT
19. Unit Tests TESTS. LOTS OF TESTS. ENSURE YOU BUILD THE THING RIGHT • code functions as designed
20. Unit Tests TESTS. LOTS OF TESTS. ENSURE YOU BUILD THE THING RIGHT • code functions as designed • run when code it compiled
21. Unit Tests TESTS. LOTS OF TESTS. ENSURE YOU BUILD THE THING RIGHT • code functions as designed • run when code it compiled • run as a suite of tests
22. Unit Tests TESTS. LOTS OF TESTS. ENSURE YOU BUILD THE THING RIGHT • code functions as designed • run when code it compiled • run as a suite of tests • better documentation
23. Unit Tests TESTS. LOTS OF TESTS. ENSURE YOU BUILD THE THING RIGHT • code functions as designed • run when code it compiled • run as a suite of tests • better documentation • uncover bugs pre-QA
24. TDD TDD vs BDD
25. TDD TDD vs BDD Test-Driven Development
26. TDD TDD vs BDD 1. Write tests
27. TDD TDD vs BDD 1. Write tests 2. Tests fail
28. TDD TDD vs BDD 1. Write tests 2. Tests fail 3. Write code
29. TDD TDD vs BDD 1. Write tests 2. Tests fail 3. Write code 4. Tests pass
30. TDD TDD vs BDD 1. Write tests 2. Tests fail 3. Write code 4. Tests pass 5. Refactor
31. TDD TDD vs BDD 1. Write tests 2. Tests fail 3. Write code 4. Tests pass 5. Refactor 6. Repeat
32. BDD TDD vs BDD
33. BDD TDD vs BDD Behavior-Driven Development
34. BDD TDD vs BDD 1. Establish goals/vision
35. BDD TDD vs BDD 1. Establish goals/vision 2. Involves team to describe the behavior of an app.
36. BDD TDD vs BDD 1. Establish goals/vision 2. Involves team to describe the behavior of an app 3. Create code based on the behavior descriptions
37. BDD TDD vs BDD 1. Establish goals/vision 2. Involves team to describe the behavior of an app 3. Create code based on the behavior descriptions 4. Automate the testing of your code (feedback/ regression testing)
38. 1. Describe Behaviors (STAKEHOLDER + TEAM) 2. Write Scenarios/Specs (DEVELOPERS) 3. Run Tests (TESTS FAIL) 4. Write Code for Tests to Pass 5. Run Tests (TESTS PASS) FAIL PASS REFACTOR
39. The hardest single part of building a software system is deciding precisely what to build. - Fred Brooks
41. TEST FRAMEWORK ASSERTION LIBRARY
44. It’s a floor wax and a dessert topping
45. • Install mocha as a node module and let it build a skeleton npm install -g mocha; mocha init . or • Just download files from the repositories https://raw.githubusercontent.com/visionmedia/mocha/ master/mocha.css https://raw.githubusercontent.com/visionmedia/mocha/ master/mocha.js
46. Then, you need an assertion library. • Grab the browser version right from the website: http://chaijs.com/chai.js
47. Write a test suite. • Mocha will automatic run tests in these places: tests.js /test/*.js
48. Suites MOCHA and CHAI ANATOMY describe (“Hello”, function(){ . . . });
49. Specifications MOCHA and CHAI ANATOMY describe (“Hello”, function(){ it(“Says hello to everybody”, function(){ . . . }); });
50. Chai Matchers MOCHA and CHAI ANATOMY var expect = chai.expect; describe ( "Hello", function(){ it( "Says hello to everybody", function(){ expect( hello() ).to.be.equal( "Hello World!" ); }); });
51. More Matchers MOCHA and CHAI ANATOMY • ok • to / be / is / a ... • true • include • true • false • exist • undefined • null • empty • equals • above • below • (and many more...) For all the BDD matchers, see: http://chaijs.com/api/bdd/ For the TDD-style matchers, see: http://chaijs.com/api/assert/
52. Multiple Test Cases MOCHA and CHAI ANATOMY var expect = chai.expect; describe ( "Hello", function(){ it( "Says hello to everybody", function(){ expect( hello() ).to.be.equal( "Hello World!" ); }); it( "Says hello to a specific person", function(){ expect( hello( "Dolly" ) ).to.be.equal( "Hello Dolly!" ); }); });
53. Now that we’ve written our test, let’s code the function.
54. JavaScript MOCHA and CHAI ANATOMY function hello( greetee ) { if ( greetee === undefined ) { return "Hello World!"; } else { return "Hello " + greetee + "!"; } }
55. Pull it all together into an HTML page to view in a browser.
56. Test Runner MOCHA and CHAI ANATOMY <!DOCTYPE html> <html> <head> <title>Mocha - Expect</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="mocha.css" /> </head> <body> <div id="mocha"></div> <script src="mocha.js"></script> <script src="chai.js"></script> <script src="main.js"></script> <script>mocha.setup('bdd')</script> <script src="tests.js"></script> <script> mocha.run(); </script> </body> </html>
57. Test Runner MOCHA and CHAI ANATOMY <!DOCTYPE html> <html> <head> <title>Mocha - Expect</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="mocha.css" /> </head> <body> <div id="mocha"></div> <script src="mocha.js"></script> <script src="chai.js"></script> <script src="main.js"></script> <script>mocha.setup('bdd')</script> <script src="tests.js"></script> <script> mocha.run(); </script> </body> </html>
58. Test Runner MOCHA and CHAI ANATOMY <!DOCTYPE html> <html> <head> <title>Mocha - Expect</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="mocha.css" /> </head> <body> <div id="mocha"></div> <script src="mocha.js"></script> <script src="chai.js"></script> <script src="main.js"></script> <script>mocha.setup('bdd')</script> <script src="tests.js"></script> <script> mocha.run(); </script> </body> </html>
59. Test Runner MOCHA and CHAI ANATOMY <!DOCTYPE html> <html> <head> <title>Mocha - Expect</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="mocha.css" /> </head> <body> <div id="mocha"></div> <script src="mocha.js"></script> <script src="chai.js"></script> <script src="main.js"></script> <script>mocha.setup('bdd')</script> <script src="tests.js"></script> <script> mocha.run(); </script> </body> </html>
60. Test Runner MOCHA and CHAI ANATOMY <!DOCTYPE html> <html> <head> <title>Mocha - Expect</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="mocha.css" /> </head> <body> <div id="mocha"></div> <script src="mocha.js"></script> <script src="chai.js"></script> <script src="main.js"></script> <script>mocha.setup('bdd')</script> <script src="tests.js"></script> <script> mocha.run(); </script> </body> </html>
61. Test Runner MOCHA and CHAI ANATOMY <!DOCTYPE html> <html> <head> <title>Mocha - Expect</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="mocha.css" /> </head> <body> <div id="mocha"></div> <script src="mocha.js"></script> <script src="chai.js"></script> <script src="main.js"></script> <script>mocha.setup('bdd')</script> <script src="tests.js"></script> <script> mocha.run(); </script> </body> </html>
62. Test Runner MOCHA and CHAI ANATOMY <!DOCTYPE html> <html> <head> <title>Mocha - Expect</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="mocha.css" /> </head> <body> <div id="mocha"></div> <script src="mocha.js"></script> <script src="chai.js"></script> <script src="main.js"></script> <script>mocha.setup('bdd')</script> <script src="tests.js"></script> <script> mocha.run(); </script> </body> </html>
64. Mocha Utilities MOCHA and CHAI ANATOMY • before() • beforeEach() • after() • afterEach()
65. beforeEach() MOCHA and CHAI ANATOMY var runnerWideFoo = []; beforeEach(function () { runnerWideFoo.push('runner'); }); describe('some suite', function () { beforeEach(function () { runnerWideFoo.push('suite'); }); it('should equal bar', function () { expect(runnerWideFoo).to.be.equal(['runner', 'suite']); }); });
66. afterEach() MOCHA and CHAI ANATOMY describe('some suite', function () { var suiteWideFoo = 1; afterEach(function () { suiteWideFoo = 0; }); it('should equal 1', function () { expect(suiteWideFoo).to.be.equal(1); }); it('should equal 0 after', function () { expect(suiteWideFoo).to.be.equal(0); }); });
67. Spies, and Stubs, and Mocks BEYOND MOCHA and CHAI
68. Spies, and Stubs, and Mocks BEYOND MOCHA and CHAI “Oh my!”
69. Enter... BEYOND MOCHA and CHAI
70. Enter... Sinon BEYOND MOCHA and CHAI
71. Enter... Sinon BEYOND MOCHA and CHAI Through these tricks and the skill of perjured Sinon, the thing was credited, and we were trapped, by his wiliness, and false tears, we, who were not conquered by Diomede, or Larissan Achilles, nor by the ten years of war, nor those thousand ships. -Vergil, Aeneid II:195-199
72. Stubs - Matchers BEYOND MOCHA and CHAI • toHaveBeenCalled() • toHaveBeenCalledWith() • andCallThrough() • andReturn() • andThrow() • andCallFake()
73. Code Example
76. Writing Specs BENEFITS & BEST PRACTICES TO GET THE MOST OUT OF MOCHA & BDD
77. Improve team communication BENEFITS
78. Encourages discussions among all team members BENEFITS
79. Better integration & acceptance testing BENEFITS
80. Describe specs, not a sequence of actions BEST PRACTICES
81. Keep specs at a high level BEST PRACTICES
82. Hide complexity in the implementation of the specs BEST PRACTICES
83. Test the most important/risky pieces of the system first BEST PRACTICES
84. Write tests until the remaining risk isn't worth the time & money to address BEST PRACTICES
85. You should not be afraid to delete tests that are no longer providing value, no matter whether you originally planned to keep them or not. We tend to treat tests as these holy creatures that live blameless, irreproachable lives once they have sprung into existence. Not so. The maintenance required to keep a test running weighs against its value in further development. Sometimes these lines cross, and the test simply becomes a burden on the project. Having the skill and experience to recognize a burdensome test is something we should be bringing to our clients, as well as the fortitude to rewrite it, rethink it, or delete it. - Adam Milligan, Pivotal Labs
86. Finis. @VANWILSON