Jest DWX 19

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. Jest builder for Angular START https://github.com/meltedspark/angular-builders
13. Jest builder for Angular START @angular-builders/jest jest.config.js tsconfig.spec.json ts-jest jest-preset-angular reads
14. Jest builder for Angular START "test": { + "builder": "@angular-builders/jest:run", - "builder": "@angular-devkit/build-angular:karma", "options": { "configPath": "src/jest.config.js" } } a n g u l a r . j s o n
15. JEST CLI
16. Improving Development Experience CLI
17. Haste Map CLI Failed > Duration > Size Tests
18. Watch mode CLI jest --wach
19. RIGHT EXPECTATIONS
20. any(constructor) RIGHT EXPECTATIONS expect.any(constructor); Assert a certain type of the given property.
21. anything() RIGHT EXPECTATIONS expect.anything(); Assert that anything is defined.
22. arrayContaining([]) RIGHT EXPECTATIONS Check subset of the given collection. [ // … { ??? }, { ??? } //… ]
23. objectContaining({}) RIGHT EXPECTATIONS Check subset of the given object. { // … a: ???, b: ??? //… }
24. REPITITION DONE RIGHT
25. 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}.` ); });
26. 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}.` ); });
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 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); } );
29. 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
30. SNAPSHOT TESTING
31. Process SNAPSHOT TESTING Generation Maintenance Create Check Update
32. 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
33. 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
34. Test in isolation
35. jest.fn TEST IN ISOLATION const mock = jest.fn();
37. @co-it/schematics
38. @co-it/schematics:jest AUTOMATE EVERYTHING ng generate @co-it/schematics:jest --hook
39. … 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
40. https://jestjs.io/
41. 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
42. medium.com/@gregor.woiwode @GregOnNet co-IT.eu GmbH Inspire to change Thank you for listening. http://speakerdeck.com/gregonnet/jest-dwx-19
43. 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