Angular Testing made easy with Jest and Cypress

Time and again, the testing in the frontend is put on the back burner. For a modern business application, it is inevitable to write reasonable tests in the frontend as well. When developing Angular, testability was part of the concept right from the start. In this workshop, Fabian Gosebrink shows how to put his Angular applications through their paces. A look is taken at the tools and the different possibilities of testing, so that no case is left untested in the end.

Transcript

1. with
2. Fabian Gosebrink https://offering.solutions
3. Tim Honermann https://honte.ch Blog: https://tim-honermann.com Senior Software Engineer & Consultant Angular & TypeScript Trainer
6. Why do we test?
7. Why don't we test?
8. https://twitter.com/SwissDevJobs/status/1496386345169793027
9. Why do we test?
11. Avoid Bugs
14. Why do we test?
15. Documentation
16. Be faster
17. Fix code
19. Refactorings
20. Where does start?
21. Make your life easy
22. Component Inheritance
23. Logic in Components
24. Big Components
25. Patterns
26. Thresholds
50. Jest
59. { "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
60. { "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
65. $ ng g component toTest
67. describe('WithInputComponent', () => { let component: WithInputComponent; let fixture: ComponentFixture<WithInputComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [WithInputComponent], }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(WithInputComponent); component = fixture.componentInstance; }); test('should create', () => { expect(component).toBeTruthy(); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
68. describe('WithInputComponent', () => { let component: WithInputComponent; let fixture: ComponentFixture<WithInputComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [WithInputComponent], }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(WithInputComponent); component = fixture.componentInstance; }); test('should create', () => { expect(component).toBeTruthy(); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
69. describe('WithInputComponent', () => { let component: WithInputComponent; let fixture: ComponentFixture<WithInputComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [WithInputComponent], }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(WithInputComponent); component = fixture.componentInstance; }); test('should create', () => { expect(component).toBeTruthy(); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
73. Cypress example
74. Cypress example
75. Cypress example
76. Cypress example
77. Cypress example
78. Cypress example
79. Cypress example
80. Cypress example
81. Cypress example
82. Cypress example
85. @FabianGosebrink