Unit-Testing in Angular mit Jest

Angular
Unit Testing with Jest
Christian Liebel
@christianliebel
Consultant

View Slide

Angular
Unit Testing
DEMO: Motivation

View Slide

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
Agenda O

View Slide

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
Testing Overview

View Slide

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
Unit Testing Basics

View Slide

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
Unit Testing Basics

View Slide

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
Unit Testing Basics

View Slide

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
Angular

View Slide

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

View Slide

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
Karma & Jasmine

View Slide

Test runner
Angular
Unit Testing
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
P

View Slide

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

View Slide

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
Jest

View Slide

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

View Slide

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
Jest

View Slide

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
Jest

View Slide

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
Jest

View Slide

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

View Slide

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

View Slide

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

View Slide

Angular
Unit Testing
DEMO: Testing Angular Pipes

View Slide

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
Jest
https://jestjs.io/docs/en/api#testeachtablename-fn-timeout

View Slide

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
Jest
https://jestjs.io/docs/en/mock-functions

View Slide

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
Jest

View Slide

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
ts-mockito
https://www.npmjs.com/package/ts-mockito

View Slide

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
ts-mockito
https://www.npmjs.com/package/ts-mockito

View Slide

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
Unit Tests

View Slide

Angular
Unit Testing
DEMO: Mocking Dependencies O

View Slide

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

View Slide

Angular
Unit Testing
DEMO: Using the TestBed

View Slide

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

View Slide

Angular
Unit Testing
DEMO: Snapshot Testing

View Slide

Test Harnesses
test('should mark confirmed when ok button clicked', async () => {
const okButton = await loader.getHarness(MatButtonHarness.with({selector:
'.confirm'});
expect(fixture.componentInstance.confirmed).toBe(false);
expect(await okButton.isDisabled()).toBe(false);
await okButton.click();
expect(fixture.componentInstance.confirmed).toBe(true);
});
https://material.angular.io/guide/using-component-harnesses
Angular
Unit Testing
Angular

View Slide

Testing Utilities: fakeAsync
describe('this test', () => {
test('looks async but is synchronous', fakeAsync((): void => {
let flag = false;
setTimeout(() => { flag = true; }, 100);
expect(flag).toBe(false);
tick(50);
expect(flag).toBe(false);
tick(50);
expect(flag).toBe(true);
}));
});
Angular
Unit Testing
Angular
https://angular.io/api/core/testing/fakeAsync

View Slide

Testing Utilities: HttpTestingController
https://www.techiediaries.com/angular-testing-httptestingcontroller/
Angular
Unit Testing
Angular

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Unit-Testing in Angular mit Jest

Unit-Testing in Angular mit Jest

Christian Liebel
PRO

More Decks by Christian Liebel

Other Decks in Programming

Featured

Transcript

Unit-Testing in Angular mit Jest

Unit-Testing in Angular mit Jest

Christian Liebel PRO

More Decks by Christian Liebel

Other Decks in Programming

Featured

Transcript

Christian Liebel
PRO