Angular Testing Ensure the reliability of your Angular applications with robust unit and integration testing strategies using testing tools. 

https://honte.ch Blog: https://tim-honermann.com Senior Software Engineer & Consultant Angular & TypeScript Trainer Tim Honermann 

fabiangosebrink.bsky.social Fabian Gosebrink GDE for Angular, Microsoft MVP, Nx Champion 

Types of testing 

Types of testing Unit Testing 

Types of testing Unit Testing Shallow Testing 

Types of testing Unit Testing Shallow Testing Integration Testing 

Types of testing Unit Testing Shallow Testing Integration Testing End to End Testing 

Testing Strategies 

Testing Strategies Smallest as possible 

Testing Strategies Smallest as possible Readable 

Testing Strategies Smallest as possible Readable Mocking friendly 

Testing Strategies Smallest as possible Readable Mocking friendly Test driven 

Testing Tools 

describe(...) // summarizes multiple tests test(...) // declares a test it(...) // declares a test beforeEach(...) // runs before every test afterEach(...) // runs after every test Testing Syntax 

describe('1st tests', () => { it('true is true', () => { expect(true).toBe(true); }); }); Testing Syntax 

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 

Arrange Act Assert 

expect(…).toBe(…); // Assert // Matcher toBe toBeDefined toBeTruthy toEqual toMatch toContain toThrow ... Testing Assertions 

const mySpy = jest.spyOn(service, 'getAllFood') .mockReturnValue(...); comp.updateFood(); expect(mySpy).toHaveBeenCalledTimes(1); Spies Testing with Spies 

beforeEach(async(() => { await TestBed.configureTestingModule({ imports: [HomeComponent], providers: [ { provide: FoodDataService, useClass: FoodServiceMock } ] }).compileComponents(); })); Testing Example - Testbed 

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 

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 

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 

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 

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 

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 

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 

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 

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 

it('should load todos', fakeAsync(() => { // arrange // ... // act // ... tick(5000); // assert // ... })); 1 2 3 4 5 6 7 8 9 10 11 Testing Example - Async 

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 

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 

Demo & Tasks Lets code !