Angular Testing with Jest and Cypress

Again and again, testing in the frontend is put on the back burner. Yet for a modern business application, it is inevitable to write reasonable tests in the frontend as well. In the development of Angular, testability was part of the concept from the very beginning. In this workshop, Fabian Gosebrink shows how to put your Angular applications through their paces. We will take a look at the tools and the different possibilities of testing, so that in the end no case remains untested.

Transcript

1. with
2. Fabian Gosebrink
5. Why do we test?
6. Why don't we test?
7. https://twitter.com/SwissDevJobs/status/1496386345169793027
8. Why do we test?
10. Avoid Bugs
13. Why do we test?
14. Documentation
15. Be faster
17. Refactorings
40. Jest
50. { "projects": { "my-app": { "architect": { "test": { "builder": "@angular-devkit/build-angular:jest", "options": { "tsConfig": "tsconfig.spec.json", "polyfills": ["zone.js", "zone.js/testing"] } } } } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
51. { "projects": { "my-app": { "architect": { "test": { "builder": "@angular-devkit/build-angular:jest", "options": { "tsConfig": "tsconfig.spec.json", "polyfills": ["zone.js", "zone.js/testing"] } } } } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 "builder": "@angular-devkit/build-angular:jest", { 1 "projects": { 2 "my-app": { 3 "architect": { 4 "test": { 5 6 "options": { 7 "tsConfig": "tsconfig.spec.json", 8 "polyfills": ["zone.js", "zone.js/testing"] 9 } 10 } 11 } 12 } 13 } 14 } 15
56. $ ng g component toTest
61. Code
62. Code Pipes Spies Testbed Snapshots
67. https://bit.ly/3BiOtBJ
68. Cypress example
69. Cypress example
70. Cypress example
71. Cypress example
72. Cypress example
73. Cypress example
74. Cypress example
75. Cypress example
76. Cypress example
77. Cypress example
80. @FabianGosebrink