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
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
16. Fix code
18. Refactorings
19. Where does start?
20. Make your life easy
21. Component Avoid Inheritance
22. Logic in Avoid Components
23. Big Avoid Components
24. Patterns Establish
25. Thresholds Establish
49. Jest
58. { "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
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 "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
64. $ ng g component toTest
66. 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
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
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