Angular testing made easy with Jest and Cypress

Despite its importance, testing is often neglected in software development. In this workshop, Fabian Gosebrink will demonstrate how to make Angular testing easy using the powerful testing frameworks Jest and Cypress.

Participants will learn how to write effective tests for their Angular applications and ensure that they are thoroughly tested and reliable.

By the end of the workshop, participants will have a solid understanding of Angular testing best practices and be able to apply these skills to their own projects.

Transcript

1. Angular Testing Ensure the reliability of your Angular applications with robust unit and integration testing strategies using testing tools.
2. https://honte.ch Blog: https://tim-honermann.com Senior Software Engineer & Consultant Angular & TypeScript Trainer Tim Honermann
3. fabiangosebrink.bsky.social Fabian Gosebrink GDE for Angular, Microsoft MVP, Nx Champion
4. Types of testing
5. Types of testing Unit Testing
6. Types of testing Unit Testing Shallow Testing
7. Types of testing Unit Testing Shallow Testing Integration Testing
8. Types of testing Unit Testing Shallow Testing Integration Testing End to End Testing
9. Testing Strategies
10. Testing Strategies Smallest as possible
11. Testing Strategies Smallest as possible Readable
12. Testing Strategies Smallest as possible Readable Mocking friendly
13. Testing Strategies Smallest as possible Readable Mocking friendly Test driven
14. Testing Tools
15. describe(...) // summarizes multiple tests test(...) // declares a test it(...) // declares a test beforeEach(...) // runs before every test afterEach(...) // runs after every test Testing Syntax
16. describe('1st tests', () => { it('true is true', () => { expect(true).toBe(true); }); }); Testing Syntax
17. import { FilterPipe } from './filter.pipe'; describe('FilterPipe', () => { let filterPipe: FilterPipe; // synchronous beforeEach beforeEach(() => { filterPipe = new FilterPipe(); }); it('filterPipe should be instanciated', () => { // ... }); it('filterPipe should filter', () => { // ... }); }); Testing Example - Pipe
18. Arrange Act Assert
19. expect(…).toBe(…); // Assert // Matcher toBe toBeDefined toBeTruthy toEqual toMatch toContain toThrow ... Testing Assertions
20. const mySpy = jest.spyOn(service, 'getAllFood') .mockReturnValue(...); comp.updateFood(); expect(mySpy).toHaveBeenCalledTimes(1); Spies Testing with Spies
21. beforeEach(async(() => { await TestBed.configureTestingModule({ imports: [HomeComponent], providers: [ { provide: FoodDataService, useClass: FoodServiceMock } ] }).compileComponents(); })); Testing Example - Testbed
22. import { MockProvider } from 'ng-mocks'; beforeEach(async(() => { await TestBed.configureTestingModule({ imports: [HomeComponent], providers: [ MockProvider(FoodDataService) ] }).compileComponents(); })); 1 2 3 4 5 6 7 8 9 10 Testing Example - Testbed
23. import { MockProvider } from 'ng-mocks'; beforeEach(async(() => { await TestBed.configureTestingModule({ imports: [HomeComponent], providers: [ MockProvider(FoodDataService) ] }).compileComponents(); })); 1 2 3 4 5 6 7 8 9 10 import { MockProvider } from 'ng-mocks'; 1 2 beforeEach(async(() => { 3 await TestBed.configureTestingModule({ 4 imports: [HomeComponent], 5 providers: [ 6 MockProvider(FoodDataService) 7 ] 8 }).compileComponents(); 9 })); 10 Testing Example - Testbed
24. import { MockProvider } from 'ng-mocks'; beforeEach(async(() => { await TestBed.configureTestingModule({ imports: [HomeComponent], providers: [ MockProvider(FoodDataService) ] }).compileComponents(); })); 1 2 3 4 5 6 7 8 9 10 import { MockProvider } from 'ng-mocks'; 1 2 beforeEach(async(() => { 3 await TestBed.configureTestingModule({ 4 imports: [HomeComponent], 5 providers: [ 6 MockProvider(FoodDataService) 7 ] 8 }).compileComponents(); 9 })); 10 MockProvider(FoodDataService) import { MockProvider } from 'ng-mocks'; 1 2 beforeEach(async(() => { 3 await TestBed.configureTestingModule({ 4 imports: [HomeComponent], 5 providers: [ 6 7 ] 8 }).compileComponents(); 9 })); 10 Testing Example - Testbed
25. import { MockProvider } from 'ng-mocks'; beforeEach(async(() => { await TestBed.configureTestingModule({ imports: [HomeComponent], providers: [ MockProvider(FoodDataService) ] }).compileComponents(); })); 1 2 3 4 5 6 7 8 9 10 import { MockProvider } from 'ng-mocks'; 1 2 beforeEach(async(() => { 3 await TestBed.configureTestingModule({ 4 imports: [HomeComponent], 5 providers: [ 6 MockProvider(FoodDataService) 7 ] 8 }).compileComponents(); 9 })); 10 MockProvider(FoodDataService) import { MockProvider } from 'ng-mocks'; 1 2 beforeEach(async(() => { 3 await TestBed.configureTestingModule({ 4 imports: [HomeComponent], 5 providers: [ 6 7 ] 8 }).compileComponents(); 9 })); 10 beforeEach(async(() => { await TestBed.configureTestingModule({ }).compileComponents(); import { MockProvider } from 'ng-mocks'; 1 2 3 4 imports: [HomeComponent], 5 providers: [ 6 MockProvider(FoodDataService) 7 ] 8 9 })); 10 Testing Example - Testbed
26. import { MockProvider } from 'ng-mocks'; beforeEach(async(() => { await TestBed.configureTestingModule({ imports: [HomeComponent], providers: [ MockProvider(FoodDataService) ] }).compileComponents(); })); 1 2 3 4 5 6 7 8 9 10 import { MockProvider } from 'ng-mocks'; 1 2 beforeEach(async(() => { 3 await TestBed.configureTestingModule({ 4 imports: [HomeComponent], 5 providers: [ 6 MockProvider(FoodDataService) 7 ] 8 }).compileComponents(); 9 })); 10 MockProvider(FoodDataService) import { MockProvider } from 'ng-mocks'; 1 2 beforeEach(async(() => { 3 await TestBed.configureTestingModule({ 4 imports: [HomeComponent], 5 providers: [ 6 7 ] 8 }).compileComponents(); 9 })); 10 beforeEach(async(() => { await TestBed.configureTestingModule({ }).compileComponents(); import { MockProvider } from 'ng-mocks'; 1 2 3 4 imports: [HomeComponent], 5 providers: [ 6 MockProvider(FoodDataService) 7 ] 8 9 })); 10 import { MockProvider } from 'ng-mocks'; beforeEach(async(() => { await TestBed.configureTestingModule({ imports: [HomeComponent], providers: [ MockProvider(FoodDataService) ] }).compileComponents(); })); 1 2 3 4 5 6 7 8 9 10 Testing Example - Testbed
27. it('should load todos', () => { // arrange const response = [ /* ...*/ ]; const getSpy = jest .spyOn(httpClient, 'get') .mockReturnValue(of(response)); // act const result$ = service.loadTodos(); // assert result$.subscribe((result) => { expect(result).toEqual(response); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Testing Example - Async
28. it('should load todos', waitForAsync(() => { // arrange const response = [ /* ...*/ ]; const getSpy = jest .spyOn(httpClient, 'get') .mockReturnValue(of(response)); // act const result$ = service.loadTodos(); // assert result$.subscribe((result) => { expect(result).toEqual(response); }); })); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Testing Example - Async
29. it('should load todos', waitForAsync(() => { // arrange const response = [ /* ...*/ ]; const getSpy = jest .spyOn(httpClient, 'get') .mockReturnValue(of(response)); // act const result$ = service.loadTodos(); // assert result$.subscribe((result) => { expect(result).toEqual(response); }); })); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 it('should load todos', waitForAsync(() => { })); 1 // arrange 2 const response = [ /* ...*/ ]; 3 const getSpy = jest 4 .spyOn(httpClient, 'get') 5 .mockReturnValue(of(response)); 6 7 // act 8 const result$ = service.loadTodos(); 9 10 // assert 11 result$.subscribe((result) => { 12 expect(result).toEqual(response); 13 }); 14 15 Testing Example - Async
30. it('should load todos', waitForAsync(() => { // arrange const response = [ /* ...*/ ]; const getSpy = jest .spyOn(httpClient, 'get') .mockReturnValue(of(response)); // act const result$ = service.loadTodos(); // assert result$.subscribe((result) => { expect(result).toEqual(response); }); })); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 it('should load todos', waitForAsync(() => { })); 1 // arrange 2 const response = [ /* ...*/ ]; 3 const getSpy = jest 4 .spyOn(httpClient, 'get') 5 .mockReturnValue(of(response)); 6 7 // act 8 const result$ = service.loadTodos(); 9 10 // assert 11 result$.subscribe((result) => { 12 expect(result).toEqual(response); 13 }); 14 15 it('should load todos', waitForAsync(() => { // arrange const response = [ /* ...*/ ]; const getSpy = jest .spyOn(httpClient, 'get') .mockReturnValue(of(response)); // act const result$ = service.loadTodos(); // assert result$.subscribe((result) => { expect(result).toEqual(response); }); })); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Testing Example - Async
31. it('should load todos', fakeAsync(() => { // arrange // ... // act // ... tick(5000); // assert // ... })); 1 2 3 4 5 6 7 8 9 10 11 Testing Example - Async
32. it('should load todos', fakeAsync(() => { // arrange // ... // act // ... tick(5000); // assert // ... })); 1 2 3 4 5 6 7 8 9 10 11 it('should load todos', fakeAsync(() => { tick(5000); 1 // arrange 2 // ... 3 4 // act 5 // ... 6 7 8 // assert 9 // ... 10 })); 11 Testing Example - Async
33. it('should load todos', fakeAsync(() => { // arrange // ... // act // ... tick(5000); // assert // ... })); 1 2 3 4 5 6 7 8 9 10 11 it('should load todos', fakeAsync(() => { tick(5000); 1 // arrange 2 // ... 3 4 // act 5 // ... 6 7 8 // assert 9 // ... 10 })); 11 it('should load todos', fakeAsync(() => { // arrange // ... // act // ... tick(5000); // assert // ... })); 1 2 3 4 5 6 7 8 9 10 11 Testing Example - Async
34. Demo & Tasks Lets code !