[FullStack NYC 2019] Effective Unit Tests for JavaScript
0 likes489 views
The document discusses code coverage and mutation testing tools for JavaScript. It introduces karma-coverage as a code coverage plugin that can be used with Karma test runner. Traditional code coverage only measures executed code and does not guarantee tests will fail on logic changes. Mutation testing seeds code with faults to evaluate test strength by whether faults are killed by tests. The document demonstrates Stryker, a mutation testing tool for JavaScript that works with popular frameworks and provides test reports. It provides sample URLs and recommends using Stryker with Angular CLI 6.1+.
![[FullStack NYC 2019] Effective Unit Tests for JavaScript](https://image.slidesharecdn.com/effectiveunittestsforjavascript-190607225853/85/FullStack-NYC-2019-Effective-Unit-Tests-for-JavaScript-6-320.jpg)
[FullStack NYC 2019] Effective Unit Tests for JavaScript
- 1. Hazem Saleh Software Architect @Viacom New York
- 2. Integration. Traditional Code Coverage Overview JavaScript Stryker Demo. Code Coverage Tools in JavaScript. What about JavaScript frameworks? Code Coverage Demo. Current challenges of traditional code coverage. Angular Stryker Demo. Mutation Testing 101. Q & A. What and Why Stryker? 1 2 3 4 5 6 7 8 9 10 11
- 3. § Code Coverage represents the amount of source code which will be executed when test cases run. § In order to measure the amount of tested source code, there are popular coverage criteria: Statement coverage Function coverage Branch coverage
- 4. § There are many code coverage tools in JavaScript space. § If we are using Karma as a test runner for JavaScript unit tests, then we can absolutely use karma-coverage plugin: § Karma-coverage is based on the popular Istanbul tool: https://github.com/karma-runner/karma-coverage https://github.com/gotwarlost/istanbul
- 5. § To install karma-coverage, simply:
- 7. Sample URL: https://github.com/hazems/helloworld-stryker Demo
- 8. Challenges Only measure the amount of executed code. Does not guarantee that unit tests will fail, if there is a change in a logic that was not asserted before. Does not show how strong your unit tests are. Does not detect code faults. TCC
- 9. § Mutation testing is about seeding app source code with faults (mutations). § After seeding, unit tests execute: § If a unit test fails, then a mutation is killed (and means that your unit test is strong enough to face this mutation). § If a unit test succeeds, then a mutation is lived (and means that your unit test needs modification to be stronger). § In mutation testing, the quality of the test can be measured by the percentage of the killed mutations.
- 10. § One of the mutation testing tools for JavaScript. § It has the following advantages: Powered by CLI Compatible with: Active project. Easy to configure. Provides easy to read test reports. ReactAngular JavaScript/ TypeScript Vue.js
- 11. 1 2 3 Arithmetic Operator Array Declaration Operator Block Statement Operator
- 12. 4 5 6 Assignment Expression Operator Conditional Expression Operator Boolean Literal Operator
- 13. 7 8 9 Equality Operator String Literal Operator Logical Operator
- 15. § Install Stryker CLI in your project root directory § Then § Then Answer the questionnaire npm install -g stryker-cli stryker init
- 16. § Checkout stryker.conf.js file.
- 17. § Check the mutation results by executing the following command: > stryker run
- 18. Sample URL: https://github.com/hazems/helloworld-stryker Demo
- 19. § Fortunately, Stryker can work perfectly with the most popular JavaScript frameworks/libraries. § You can use Stryker with the following
- 20. Sample URL: https://github.com/hazems/ng-stryker-github- sample Demo It is recommended to use Stryker with Angular CLI 6.1.0 or above.
- 21. Q & A Further Resources: • Stryker for JavaScript: https://github.com/stryker-mutator/stryker Session Samples: • Stryker for JavaScript Demo: https://github.com/hazems/helloworld-stryker • Stryker for Angular Demo: https://github.com/hazems/ng-stryker-github-sample Twitter: @hazems