jest-wdc-19

Slides for Web Developer Conference 2019 in Hamburg: https://www.web-developer-conference.de/programm/#/talk/jest-the-boost-for-the-angular-testing-platform

Code https://github.com/GregOnNet/jest-playground

Transcript

1. Jest for Angular Boost your testing platform co-IT.eu GmbH Inspire To Change
2. Testing is no discipline. It is a MINDSET.
3. Tests build trust in your system.
4. Build apps your users ❤ to use.
5. Gregor Woiwode medium.com/@gregor.woiwode twitter.com/@GregOnNet Developer, Trainer & Speaker
6. Show me the code GITHUB https://github.com/GregOnNet/jest-playground
7. START
8. Background START - maintains Jest - Jasmine is used under the hood - Git is used to improve test runs - Open Source
9. PARALLEL TEST EXECUTION
10. JSDOM START
11. Configuration START OR PAC KAGE .JSON JE ST.C ON F IG .JS
12. Configuration START module.exports = { verbose: true, testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'], transform: { '^.+\\.(ts|js|html)$': 'ts-jest', }, testEnvironment: 'jest-environment-jsdom-fourteen', moduleFileExtensions: ['ts', 'js', 'html'], coverageReporters: ['html'], };
13. Jest builder for Angular START https://github.com/meltedspark/angular-builders
14. Jest builder for Angular START @angular-builders/jest jest.config.js tsconfig.spec.json ts-jest jest-preset-angular reads
15. Jest builder for Angular START angular.json "test": { + "builder": "@angular-builders/jest:run", - "builder": "@angular-devkit/build-angular:karma", "options": { "configPath": "src/jest.config.js" } }
16. JEST CLI
17. Improving Development Experience CLI
18. Watch mode CLI jest --wach
19. BYE BYE fit xdescribe xit fdescribe
20. Haste Map CLI Failed > Duration > Size Tests
21. RIGHT EXPECTATIONS
22. any(constructor) RIGHT EXPECTATIONS expect.any(constructor); Assert a certain type of the given property.
23. anything() RIGHT EXPECTATIONS expect.anything(); Assert that anything is defined.
24. arrayContaining([]) RIGHT EXPECTATIONS Check subset of the given collection. [ // … { ??? }, { ??? } //… ]
25. objectContaining({}) RIGHT EXPECTATIONS Check subset of the given object. { // … a: ???, b: ??? //… }
26. REPITITION DONE RIGHT
27. it.each REPITITION DONE RIGHT it.each([['.huskyrc.json'], ['.huskyrc.js']])( ' should warn if detected in %s', (file: string) => { project.create(file, JSON.stringify({})); runner.runSchematic('prettier', {}, project); expect(warn).toHaveBeenCalledWith( `Found competing husky configuration in ${file}.` ); });
28. it.each REPITITION DONE RIGHT it.each([['.huskyrc.json'], ['.huskyrc.js']])( ' should warn if detected in %s', (file: string) => { project.create(file, JSON.stringify({})); runner.runSchematic('prettier', {}, project); expect(warn).toHaveBeenCalledWith( `Found competing husky configuration in ${file}.` ); });
29. it.each REPITITION DONE RIGHT it.each([['.huskyrc.json'], ['.huskyrc.js']])( ' should warn if detected in %s', (file: string) => { project.create(file, JSON.stringify({})); runner.runSchematic('prettier', {}, project); expect(warn).toHaveBeenCalledWith( `Found competing husky configuration in ${file}.` ); });
30. it.each using a tagged template REPITITION DONE RIGHT it.each` compilerOption | expected ${'strict‘} | ${true} ${'noUnusedParameters'} | ${true} ${'noUnusedLocals‘} | ${true} ${'noImplicitAny‘} | ${true} ` ( 'should set $compilerOption to default value of schema ($expected)‘, ({ compilerOption, expected }) => { // ... expect(tsconfig.compilerOptions[option]).toBe(expected); } );
31. it.each`` it.each` compilerOption | expected ${'strict‘} | ${true} ${'noUnusedParameters'} | ${true} ${'noUnusedLocals‘} | ${true} ${'noImplicitAny‘} | ${true} ` ( 'should set $compilerOption to default value of schema ($expected)‘, ({ compilerOption, expected }) => { // ... expect(tsconfig.compilerOptions[option]).toBe(expected); } ); REPITITION DONE RIGHT
32. SNAPSHOT TESTING
33. Process SNAPSHOT TESTING Generation Maintenance Create Check Update
34. Anathomy SNAPSHOT TESTING exports[`<app-root> When the application starts displays the welcome message 1`] = ` <p> Welcome to the playground, you will find all testing samples in <code>*.spec.ts</code> files. </p> `; __snapshots__/*.spec.ts.snap
35. Anathomy SNAPSHOT TESTING exports[`<app-root> When the application starts displays the welcome message 1`] = ` <p> Welcome to the playground, you will find all testing samples in <code>*.spec.ts</code> files. </p> `; __snapshots__/*.spec.ts.snap
36. Test in isolation
37. jest.fn TEST IN ISOLATION const mock = jest.fn();
38. https://jestjs.io/
40. @co-it/schematics
41. @co-it/schematics:jest AUTOMATE EVERYTHING ng generate @co-it/schematics:jest --hook
42. … really everything AUTOMATE EVERYTHING ng generate @co-it/schematics:jest ng generate @co-it/schematics:commitlint ng generate @co-it/schematics:cypress ng generate @co-it/schematics:tsconfig ng generate @co-it/schematics:prettier
43. Summary JEST it.each simplify generation of test cases jest.fn is used for mocking depencencies expect.??? contains usefule additions @co-IT/schematics configure Jest automatically
44. medium.com/@gregor.woiwode @GregOnNet co-IT.eu GmbH Inspire to change Thank you for listening. http://speakerdeck.com/gregonnet/jest-wdc-19
45. Images & Icons CREDITS - , , made by Freepik from flaticon.com - Photos by - Jakob Owens - Andreas Wagner - Shiro hatori - Josue Valencia - Jonathan Chng - Ivars Krutainis - on Unsplash