Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Unit Testing TypeScript

3,463 views

Published on

Slides from my talk in the second Dublin TypeScript meeting about unit testing TypeScript.

Published in: Software
  • I like this service ⇒ www.WritePaper.info ⇐ from Academic Writers. I don't have enough time write it by myself.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Writing a good research paper isn't easy and it's the fruit of hard work. For help you can check writing expert. Check out, please ⇒ www.HelpWriting.net ⇐ I think they are the best
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/3KXWD ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Jeevan's revision guide has helped understand questions which I did not understand before in class. It has really helped me learn things the easy way. It's straightforward and shows you how to get a top grade in GCSE maths, in a step-by-step format... ★★★ http://t.cn/AirrSv7D
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Unit Testing TypeScript

  1. 1. DANIEL JIMENEZ GARCIA UNIT TESTING TYPESCRIPT
  2. 2. Daniel Jimenez | 2015-11-01 | Page 2 uSING… › Qunit (Test Framework) – Alternatives: Jasmine (BDD) Mocha (Node.js) › Sinon (Mocking Framework) – Alternative: Jasmine spies › Grunt (JS Task Runner) – Alternative: Gulp
  3. 3. Daniel Jimenez | 2015-11-01 | Page 3 1. Introduction 2. Writing Typescript tests using QUnit and Sinon.js › Writing Qunit tests › Basic mocking › Mocking with Sinon.js › Advanced tips 3. Unit testing workflows › Manual workflow › Automated workflow using grunt › Scaffold html runner files using grunt › External modules Agenda
  4. 4. 1. INTRODUCTION
  5. 5. Daniel Jimenez | 2015-11-01 | Page 5 Qunit basics (1) Visit: http://qunitjs.com/ Qunit requires the following pieces Transform The production code One or more JavaScript files Code to be tested Defines the tests The tests to be run Usually one JavaScript file Runs the tests A test runner HTML file. References QUnit library, production code and test code Test runner Prod code Test code
  6. 6. Daniel Jimenez | 2015-11-01 | Page 6 › Running a test requires a browser – Open HTML file in browser that includes: › QUnit JS file › QUnit CSS file › Production JS files › Test JS files – Results are displayed in the html page › Reload or click rerun after changes › A JS task runner like Grunt can run the tests without a browser Qunit basics (2)
  7. 7. Daniel Jimenez | 2015-11-01 | Page 7 › When testing TypeScript – Compile TypeScript code into JavaScript – Reference compiled JavaScript in the HTML runner file – Use a declaration file to reference libraries like QUnit in your test TypeScript code › Download .d.ts files from: http://definitelytyped.org/ › A JS task runner like Grunt can be used to compile TS code. › Some editors and IDE (like VS) can also compile the TS code. Qunit basics (3)
  8. 8. Daniel Jimenez | 2015-11-01 | Page 8 DEMO: QUNIT BASICS
  9. 9. 2. WRITING Typescript tests using QUnit and Sinon.js
  10. 10. Daniel Jimenez | 2015-11-01 | Page 10 Writing qunit tests (1) • Reference declarations for Qunit, Sinon, etc • Reference source code • Import libraries in html • Create test module • Allows common setup and teardown • Add tests to the module using QUnit test function • Test logic goes in the inline function
  11. 11. Daniel Jimenez | 2015-11-01 | Page 11 Writing qunit tests (2) • Use module setup and teardown • Create common dependencies and data in setup. • Perform any cleanup between tests in teardown. • Use appropriated QUnit assertions to your test. • Avoid overusing ok assertion • Don’t use equal when you need deepEqual Familiarize with the range of assertions: http://api.qunitjs.com/category/assert/
  12. 12. Daniel Jimenez | 2015-11-01 | Page 12 › Take advantage of structural typing – Structural typing is a way of relating types based solely on their members › Need a stub of a class or interface? – Create empty object literal – Cast it as the class/interface › Need a mock of a class or interface? – Create an object literal with just the members needed – Cast it as the class/interface › You can cast as any but you will lose compiler support. BASIC MOCKING (1)
  13. 13. Daniel Jimenez | 2015-11-01 | Page 13 › Any object or member can be mocked – Mock method in existing object – Mock getter in singleton without setter › Be careful if changing prototypes – At least restore them › Try to avoid accessing private members – Anything accessible with the brackets notation can be mocked – This includes TS private members › Use this with hard to test code. Then refactor your code and your tests BASIC MOCKING (2)
  14. 14. Daniel Jimenez | 2015-11-01 | Page 14 › Create spies to verify interactions – Let you assert when a particular method was called, how many times, with which arguments, etc – Can wrap an existing method, but the method will still be called – If you need to control what the method will return, use a stub › http://sinonjs.org/docs/#spies MOCKING WITH SINON (1)
  15. 15. Daniel Jimenez | 2015-11-01 | Page 15 › Create stubs to replace method implementations with mocked ones – Existing methods are replaced, the original implementation is not executed – Let you specify the return values of a particular method. – Allows complex setup like: › a return value for the Nth call › a return value for specific arguments › Stubs are also spies – When possible choose spies over stubs › http://sinonjs.org/docs/#stubs MOCKING WITH SINON (2)
  16. 16. Daniel Jimenez | 2015-11-01 | Page 16 Advanced tips (1) • Create a sinon sandbox in test setup • Sinon stubs/spies in test setup are created using the sandbox • Restore the sandbox in test teardown • Move common test references and type definitions to its own file. • Reference this file in your test files
  17. 17. Daniel Jimenez | 2015-11-01 | Page 17 Advanced tips (2) • Try to avoid QUnit asynchronous tests! • Use stubs to return resolved/rejected promises • Use a spy to verify done/fail callbacks • Avoid time-dependent tests! • Use sinon FakeTimers to control Date, setInterval and setTimeout • Use a sandbox to restore the clock between tests
  18. 18. Daniel Jimenez | 2015-11-01 | Page 18 Advanced tips (3) • Use object builder pattern with fluent syntax • Useful not only when creating test data but also creating classes under test • Test will support refactorings better • Use sinon matchers and assertions • Test code is more expressive • Avoid checking more than is needed
  19. 19. Daniel Jimenez | 2015-11-01 | Page 19 DEMO: writing tests using QUNIT and sinon
  20. 20. 3. Unit testing workflows
  21. 21. Daniel Jimenez | 2015-11-01 | Page 21 MANUAL WORKFLOW You can run unit tests just by compiling typescript and using a browser Might be enough for small projects Create tests Write TypeScript tests Create QUnit html test runners Manually manage dependencies by adding scripts in the test runner html file Manually manage paths to the compiled files Compile TS Compile TypeScript code and tests into JavaScript. Some IDE and editors can compile TypeScript automatically You can also manually compile using tsc.exe or Node.js Run in browser Manually open QUnit test runner html files in the browser Every html file has to be opened independently Requires someone to run the tests and interpret the results
  22. 22. Daniel Jimenez | 2015-11-01 | Page 22 AUTOMATing the WORKFLOW USING Grunt is a JS Task Runner that can automate tasks like bundling or minification There are hundreds of plugins, including TS compilation and running QUnit tests STEP 4 Text Create tests Write TypeScript tests Create QUnit html test runners Manually manage dependencies by adding scripts in the test runner html file Manually manage paths to the compiled files in the folder Configure Grunt Install grunt-ts for compiling TypeScript Install grunt-contrib-qunit for running QUnit tests Add tasks in your gruntfile for: 1. Clean a temp folder 2. Compile into temp folder 3. Copy html files into temp folder 4. Run QUnit tests Run Grunt Add a “test” task in the gruntfile . It will run the tasks in the full process Run grunt either from the command line (installing grunt-cli) or from an IDE like Visual Studio The full process can be run with a single command, will report test results and the exit code will be non zero if failed http://gruntjs.com/ https://github.com/grunt js/grunt-contrib-qunit https://github.com/Type Strong/grunt-ts
  23. 23. Daniel Jimenez | 2015-11-01 | Page 23 SCAFFOLD QUNIT HTML FILES USING You can create your own grunt plugins and tasks Create a task that searches for ///< reference tags and scaffolds the html file STEP 4 Text Create tests Write TypeScript tests Configure Grunt Create task to scaffold QUnit html files Update the tasks in your grunt file as : 1. Clean temp folder 2. Compile into temp folder 3. Scaffold html files into temp folder 4. Run QUnit tests Run Grunt Add a “test” task in the gruntfile . It will run the tasks in the full process Run grunt either from the command line (installing grunt-cli) or from an IDE like Visual Studio The full process can be run with a single command, will report test results and the exit code will be non zero if failed Check example in: https://github.com/DaniJG /TypeScriptUTWorkflows
  24. 24. Daniel Jimenez | 2015-11-01 | Page 24 USING EXTERNAL MODULES WITH • Write TypeScript code using external modules via export and import (including your tests) • Specify the module option when compiling TypeScript • Dependencies are loaded by the module system (require.js or common.js) instead of script tags. • Using require.js needs to adjust test startup
  25. 25. Daniel Jimenez | 2015-11-01 | Page 25 DEMO: unit testing workflows

×