1. JavaScript Unit Test by MinHo Kim (Dexter Developer Guide)

2. Contents 1. Why 2. How 3. What 4. BDD / TDD 5. Assertion: Chai 6. Test Double: Sinon 7. Test Framework: Mocha 8. Test Runner: Karma 9. All in One for Dexter WEB

3. 3 https://dexter.atlassian.net 1. Why Multi-purpose for one function Hard to analyze, debug, and test One change impact others Hard to change and improve code Only manual test and eye-check Hard to deploy Slow Development

4. 4 https://dexter.atlassian.net 2. How Create Small Function by TDD/BDD One Purpose for one Function Run Test Automatically with Tools Detect Impact from one Change Continuously Integration and Delivery Reduce Human Errors on Test Fast and Safe Development

5. 5 https://dexter.atlassian.net Build/Run : Gulp 3. What Test Runner(Karma) Test Framework(Mocha) Assertion(Chai) Test Double(Sinon) Node

6. 6 https://dexter.atlassian.net 4. BDD / TDD Requirements and Features Write a Failing Acceptance Test Write a Failing Acceptance Test Write a Failing Unit Test Write a Failing Unit Test Make the Test Pass Make the Test Pass Refactor divide BDD TDD Pass User Developer Detailed Design or Codes

7. 7 https://dexter.atlassian.net 4. BDD / TDD Write a Failing Acceptance Test Write a Failing Acceptance Test Write a Failing Unit Test Write a Failing Unit Test Refactor divide BDD TDD Pass User As an administrator of Dexter, I want to find a User by ID NoFeatures 1 Manage User Info 2 Search User Info By ID NoUser Stories 1 Find User By ID 2… Make the Test Pass Make the Test Pass

8. 8 https://dexter.atlassian.net 5. Assertion: Chai support node and browser support BDD/TDD Style support any JS Test Fwk. support Should, Expect, Assert style v2.1.0 Should ExpectAssert refer to http://chaijs.com/ npm install –g chai

9. 9 https://dexter.atlassian.net 5. Assertion: Chai refer to http://jsfiddle.net/MinHo/sn0wqona/ Should & Expect (1)

10. 10 https://dexter.atlassian.net 5. Assertion: Chai refer to http://chaijs.com/api/bdd/ Should & Expect (2)

11. 11 https://dexter.atlassian.net 5. Assertion: Chai refer to http://chaijs.com/api/assert/ Assert

12. 12 https://dexter.atlassian.net 6. Test Double: Sinon Test Double Spy StubMockFake Timer Stunt Object for Test Subject refer to http://sinonjs.org/ an example: http://elijahmanor.com/unit-test-like-a-secret-agent-with-sinon-js/ examples in this document: http://jsfiddle.net/MinHo/snLs35yq/ npm install sinon –save-dev

13. 13 https://dexter.atlassian.net 6. Test Double: Sinon Sinon Spy a fake method(= spy) recode args, return value, exceptions and ‘this’ value refer to http://sinonjs.org/docs/#spies TypesExamples Creation var spy = sinon.spy() var spy = sinon.spy(myFunction); var spy = sinon.spy(object, “method”); special args spy.withArgs(aSpecialArg); spy.withArgs(aSpecialArg).called spy.calledWith(arg1, arg2, …); spy.calledWithExactly(…); spy.calledWithMatch(…); Calling var spyCall = spy.getCall(n); spy.thisValues/args/exceptions/returnValues Call Count spy.callCount, spy.called, spy.calledOnce, / Twice / Thrice Order calledBefore(anotherSpy); calledAfter(anotherSpy); Excepton spy.threw(); spy.threw(“TypeError”); Return spy.returned(obj);  Spy APIs

14. 14 https://dexter.atlassian.net 6. Test Double: Sinon Sinon Stub a function with pre-programmed behavior (= predefined behavior) can be anonymous and wrap existing function refer to http://sinonjs.org/docs/#stubs TypesExamples Creation var stub = sinon.stub(); var stub = sinon.stub(obj, “method”); var stub = sinon.stub(o, “m”, func); special args stub.withArgs(arg1, …).returns(v); Calling stub.onCall(n).returns(v);.onFirstCall,.onSecondCall() Return stub.returns(obj);.returnsThis(); Yield stub.yields(arg1, …); stub.yieldsOn(context, arg1, …); stub.yieldsTo(property, arg1, …); Excepton stub.throws(); stub.throws(obj); Return stub.withArgs(arg1, …).throws(e);  Stub APIs

15. 15 https://dexter.atlassian.net 6. Test Double: Sinon Sinon Mock a fake method(= spy) and a pre-programmed behavior(= stub) pre-programmed expectations(mock!) especially orders or call-times of a function need call verify() refer to http://sinonjs.org/docs/#stubs StepsExamples Creation var mock = sinon.mock(obj); Expectation var exp = mock.expects(“method”); Calling mock.method(); Restoring mock.restore() Verifying mock.verify(); // has.restore() TypesAPIs Calling- times.atLeast(number).atMost(number).once().twice().thrice().exactly(number).never() argument.withArgs(a1, …).withExactArgs(…)  Mock APIs  Expectation APIs

16. 16 https://dexter.atlassian.net 6. Test Double: Sinon Sinon Fake Timer a synchronous implementation of setTimeout() clock object : use for passing time refer to http://sinonjs.org/docs/#stubs StepsExamples Creation var clock = sinon.useFakeTimers(); or sinon.useFakeTImers(now); Passing Time clock.tick(ms); restore clock.restore();  Fake Timer APIs source: http://elijahmanor.com/unit-test-like-a-secret-agent-with-sinon-js/

17. 17 https://dexter.atlassian.net 7. Mocha Mocha is a feature-rich JavaScript test framework running on Node.js and the browser, making asynchronous testing simple and fun.Node.js Initial release (2011/10/22 ) last Release: v2.1.0 (2014/11/23) http://mochajs.org/ refer to http://mochajs.org/ a guide: http://unitjs.com/guide/mocha.html

18. 18 https://dexter.atlassian.net 7. Mocha $ npm install –g mocha $ mkdir test $ vim test/test.js $ mocha

19. 19 https://dexter.atlassian.net 7. Test Framework: Mocha Command Line Options usage: mocha [debug] [options] [files] short options full options description -h --helpoutput usage information -V --versionoutput the version number -A --async-onlyforce all tests to take a callback (async) -d --debugenable node’s debugger -g --grep only run tests matching -i --invertinverts –grep -s --slow “slow” test threshold in milliseconds [75] -t --timeout set test-case timeout in milliseconds [2000] -w --watchwatch files for changes --check-leakscheck for global variable leaks --full-tracedisplay the full stack trace --harmonyeanble all harmony features(except typeof) --harmony-*collections, generators, proxies, arrow_functions, classes, _proxies,_shipping --no-timeoutsdisables timeouts --recursiveinclude sub directories

20. 20 https://dexter.atlassian.net describe (‘feature/user story description’, function() { }); describe (‘feature/user story description’, function() { }); 7. Test Framework: Mocha Basic Structure – BDD style describe (‘feature/user story description’, function() { }); describe (‘feature/user story description’, function() { }); it(‘should do something’, function([done]) { }); it(‘should do something’, function([done]) { }); assertion statements: assert/should/expect test doubles: spy/stub/mock/fake assertion statements: assert/should/expect test doubles: spy/stub/mock/fake it(‘should do something’, function([done]) { }); it(‘should do something’, function([done]) { }); assert.equal(expected value, real value); var stub = sinon.stub(); assert.equal(expected value, real value); var stub = sinon.stub(); before(function(){ // run before all tests }); before(function(){ // run before all tests }); after(function(){ // run after all tests }); after(function(){ // run after all tests }); beforeEach(function(){ // run before each tests }); beforeEach(function(){ // run before each tests }); afterEach(function(){ // run after each tests }); afterEach(function(){ // run after each tests });

21. 21 https://dexter.atlassian.net suite (‘a set of sub-suites’, function() { }); suite (‘a set of sub-suites’, function() { }); 7. Test Framework: Mocha Basic Structure – TDD style suite (‘a set of test-cases’, function() { }); suite (‘a set of test-cases’, function() { }); test(‘should do something’, function([done]) { }); test(‘should do something’, function([done]) { }); assertion statements: assert/should/expect test doubles: spy/stub/mock/fake assertion statements: assert/should/expect test doubles: spy/stub/mock/fake test(‘should do something’, function([done]) { }); test(‘should do something’, function([done]) { }); assert.equal(expected value, real value); var stub = sinon.stub(); assert.equal(expected value, real value); var stub = sinon.stub(); suiteSetup(function(){ // run before all tests }); suiteSetup(function(){ // run before all tests }); suiteTeardown( function(){ // run after all tests }); suiteTeardown( function(){ // run after all tests }); setup(function(){ // run before each tests }); setup(function(){ // run before each tests }); teardown(function(){ // run after each tests }); teardown(function(){ // run after each tests });

22. 22 https://dexter.atlassian.net 7. Test Framework: Mocha Report Types HTMLDOC Min Json Progress List Landing Strip Nyan refer to http://jsfiddle.net/MinHo/xe8vs2nr/

23. 23 https://dexter.atlassian.net 7. Test Framework: Mocha Synchronous Code Asynchronous Code refer to http://jsfiddle.net/MinHo/xe8vs2nr/

24. 24 https://dexter.atlassian.net 7. Test Framework: Mocha only() & skip() refer to http://jsfiddle.net/MinHo/xe8vs2nr/

25. 25 https://dexter.atlassian.net 7. Test Framework: Mocha Dynamically Generating Tests refer to http://jsfiddle.net/MinHo/xe8vs2nr/

26. 26 https://dexter.atlassian.net 7. Test Framework: Mocha Timeout refer to http://jsfiddle.net/MinHo/xe8vs2nr/

27. 27 https://dexter.atlassian.net 8. Test Runner: Karma refer to http://karma-runner.github.io/0.13/index.html Run Test with Mocha, QUnit, etc. Front-end Test support IE, Chrome, Firefox Use with AngularJS $ npm install –g karma an example: http://blog.outsider.ne.kr/1020 $ npm install –g karma $ karma init // create karma.conf.js file // create test codes $ karma start // start karma server $ karma run // execute tests

28. 28 https://dexter.atlassian.net 8. Test Runner: Karma an example: http://blog.outsider.ne.kr/1020 karma-mocha $ npm install karma --save-dev

29. 29 https://dexter.atlassian.net 9. All in one for Dexter WEB front-end create test file in the dexter-server project: dexter-server/test/front-end/test-AngularControllerName.js write test code: 1 ①write a description with angular app name ②load your angular app ③declare variables for controller and scope for angular ④inject and create the scope and the controller variables ⑤write test codes with using the controller and the scope variables ⑥run test codes with gulp or karma 2 3 4 5 $ gulp watch-test $ karma start $ karma run $ gulp test-front-end

30. 30 https://dexter.atlassian.net 9. All in one for Dexter WEB back-end create test file in the dexter-server project: dexter-server/test/back-end/test-ModuleName.js write test code: ①create a describe and it function for tests ②explain what you test ③use ‘done’, if you test asynchronously ④assert logics ⑤run test codes with gulp $ gulp watch-test $ gulp test-back-end 1 2 3 4

31. 31 https://dexter.atlassian.net 9. All in one for Dexter WEB Demo & Pair Programming