Angular Unit Testing mit Jest Christian Liebel @christianliebel Consultant

The image part with relationship ID rId12 was not found in the file. The image part with relationship ID rId12 was not found in the file. Special Day Modern Business Applications Thema Sprecher Datum, Uhrzeit Web-API mit Turbo: Deep-dive in async/await bei Backend-APIs Sebastian Gingter DI, 21. September 2021, 10.45 bis 11.45 Web Components in modernen Web-Apps: Hype oder Heilsbringer? Peter Kröner DI, 21. September 2021, 12.15 bis 13.15 Produktivitäts-PWAs mit Angular auf Desktopniveau Christian Liebel DI, 21. September 2021, 14.30 bis 15.30 Angular Unit Testing mit Jest Christian Liebel DI, 21. September 2021, 16.00 bis 17.00 SPAs in Azure betreiben - ein Leitfaden aus der Praxis Thorsten Hans MI, 22. September 2021, 17.30 bis 18.30

1. Testing Overview 2. Unit Testing Basics 3. Jest vs. Karma/Jasmine 4. Testing with Jest 5. Spies & Mocks 6. E2E Tests Overview Angular Unit Testing mit Jest Agenda

Test Types End-to-end Tests (~ 1000 ms, 10%) Acceptance tests simulating a real user Integration Tests (~ 100 ms, 20%) Tests the integration of different modules Unit Tests (~ 10 ms, 70 %) Tests a class, method or algorithm Angular Unit Testing mit Jest Testing Overview

Test-Driven Development First, write your test (= requirements!) See it failing Next, write the minimum required implementation to fulfill the test See your test turn green (Refactor) Repeat Angular Unit Testing mit Jest Unit Testing Basics

Brownfield Testing Use Extract Method refactoring to… - reduce complexity of large methods (target method length: 7±2 lines) - avoid more than one nesting/indent level Move large blocks of code in own files or services (target file length: ±100 lines) Angular Unit Testing mit Jest Unit Testing Basics

A-TRIP Pattern Unit Tests should be… - Automatic (no user interaction required) - Thorough (test critical functionality) - Repeatable (repeated execution leads to same result) - Independent (order does not matter) - Professional (test code doesn’t test itself) Angular Unit Testing mit Jest Unit Testing Basics

Unit Testing Support Unit Tests (~ 10 ms, 70 %) Tests a class, method or algorithm Integration Tests (~ 100 ms, 20%) Tests the integration of different modules End-to-end Tests (~ 1000 ms, 10%) Acceptance tests simulating a real user Angular Unit Testing mit Jest Angular

Unit Testing Support Angular CLI schematics automatically create a test specification file (*.spec.ts) for each generated unit. Angular Unit Testing mit Jest Angular

Angular’s Default Testing System - Does not require additional project configuration - Requires a browser (e.g. Chrome Headless for CI environments) - Tests run sequentially Angular Unit Testing mit Jest Karma & Jasmine

Test runner Angular Unit Testing mit Jest Jest - Fast: Tests run in parallel - Easy CI setup: No browser required (JSDom) - Setup: ng add @briebug/jest-schematic - Jasmine BDD testing framework is mostly compatible with Jest - Migration: npx jest-codemods

Introduction https://jestjs.io/docs/en/getting-started Angular Unit Testing mit Jest Jest

Simple Test describe("A suite is just a function", () => { let a; test("and so is a spec", () => { a = true; expect(a).toBe(true); }); }); Angular Unit Testing mit Jest Jest

AAA Pattern Arrange const x = …; Act const result = sut.myTestMethod(x); Assert expect(result).toBeDefined(); Angular Unit Testing mit Jest Unit Tests

Matchers expect(123).toBe(123); expect({ foo: 123 }).toEqual({ foo: 123 }); expect([1, 2, 3]).toContain(3); expect(false).toBeFalsy(); expect(1).toBeTruthy(); expect(null).toBeNull(); expect(undefined).toBeUndefined(); expect(999).toBeDefined(); expect(() => method()).toThrow(); Angular Unit Testing mit Jest Jest

Suggestion describe('FooService', () => { describe('method', () => { test('should do this', () => {}); test('should do that', () => {}); }); }); - 1 suite per class - 1 suite per method - n tests (use “should” and prevent “and”) Angular Unit Testing mit Jest Jest

Setup/Teardown Run before/after each test in this suite beforeEach afterEach Run before/after all tests in this suite beforeAll afterAll Angular Unit Testing mit Jest Jest

Excluding/including tests Exclude this test (suite) describe.skip test.skip Only include this test (suite) describe.only test.only Angular Unit Testing mit Jest Jest

Test Reminders Remind me to write a test test.todo Angular Unit Testing mit Jest Jest

Unit Testing Commands Unit Tests (Karma/Jest) npm test ng test ng t End-to-end Tests ng e2e ng e Angular Unit Testing mit Jest Angular

Angular Unit Testing mit Jest DEMO: Testing Angular Pipes

Repetitive tests test.each` a | b | expected ${1} | ${1} | ${2} ${1} | ${2} | ${3} ${2} | ${1} | ${3} `('returns $expected when $a is added $b', ({a, b, expected}) => { expect(a + b).toBe(expected); }); Angular Unit Testing mit Jest Jest https://jestjs.io/docs/en/api#testeachtablename-fn-timeout

Mock Functions const mock = jest.fn(x => 42 + x); // The mock function is called twice expect(mockCallback.mock.calls.length).toBe(2); // The first argument of the second call to the function was 1 expect(mockCallback.mock.calls[1][0]).toBe(1); Angular Unit Testing mit Jest Jest https://jestjs.io/docs/en/mock-functions

Spies jest.spyOn(existingObject, 'existingFunction'); // spyOn also calls the function, alternatives: // jest.spyOn(/* … */).mockImplementation(() => 42); // existingObject['existingFunction'] = jest.fn(() => 42); expect(existingObject.existingFunction).toHaveBeenCalled(); // optional: toHaveBeenCalledWith(arg1, arg2) // optional: toHaveBeenCalledTimes(4) Angular Unit Testing mit Jest Jest

Basics // Creating mock let mockedFoo:Foo = mock(Foo); // Getting instance from mock let foo:Foo = instance(mockedFoo); // Using instance in source code foo.getBar(5); // Explicit, readable verification verify(mockedFoo.getBar(5)).called(); Angular Unit Testing mit Jest ts-mockito https://www.npmjs.com/package/ts-mockito

Stubbing Method Calls // Creating mock let mockedFoo:Foo = mock(Foo); // stub method before execution when(mockedFoo.getBar(3)).thenReturn('three'); // Getting instance let foo:Foo = instance(mockedFoo); // prints three console.log(foo.getBar(3)); Angular Unit Testing mit Jest ts-mockito https://www.npmjs.com/package/ts-mockito

AAA Pattern & Mocks Arrange const x = …; Setup when(mock.myOtherMethod).thenReturn(3); Act const result = sut.myTestMethod(x); Assert expect(result).toBeDefined(); Verify verify(mock.myOtherMethod).called(); Angular Unit Testing mit Jest Unit Tests

Angular Unit Testing mit Jest DEMO: Mocking Dependencies

Testing Utilities: TestBed describe('Component: Login', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [LoginComponent], providers: [AuthService] }); }); }); Angular Unit Testing mit Jest Angular https://codecraft.tv/courses/angular/unit-testing/angular-test-bed/

Angular Unit Testing mit Jest DEMO: Using the TestBed

Snapshot Testing test('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); expect(fixture).toMatchSnapshot(); }); Angular Unit Testing mit Jest Jest

Hallo

Hxllo

Angular Unit Testing mit Jest DEMO: Snapshot Testing

Test Watcher npm test -- --watch npm test -- --watch-all Angular Unit Testing mit Jest Jest

Code Coverage npm test -- --coverage Code coverage provided by Istanbul Coverage metadata written to coverage folder Code coverage policy: ~ 80% Angular Unit Testing mit Jest Angular

Cypress https://www.cypress.io/ DevExpress TestCafé https://devexpress.github.io/testcafe/ Angular Unit Testing mit Jest E2E Tests

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]