Test Fest | Angular Unit Tests Distilled

This 45-minute workshop dives into unit testing in Angular with a focus on controlling asynchronous code and mocking dependencies effectively. You'll learn how to write stable, focused tests using both zone-based and zone-less approaches, with examples in both Jasmine and Jest. We'll cover how to mock services without making your tests brittle, and discuss when unit tests are the right tool—and when they’re not. The session wraps up with a Q&A to address your specific questions.

Transcript

2. About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) • Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality
3. RainerHahnekamp Repository https://github.com/rainerhahnekamp/eternal/tree/talk/2025-04-21_angular-community_unit-testing/1-init
4. Agenda • Core Concepts • Mocks • Asynchronous Tasks • Fakes
5. Core Concepts
6. Component Service Service Service Directive Service Component Pipe Service Unit Test
7. Tooling Unit Tests Integration & Component Tests End-to-End (E2E) Tests
10. Pros & Cons ✅ Fast ✅ Exploratory ✅ Bugs are easy to find ✅ Enforce good Design ⛔ No Refactoring ⛔ High Maintainability ⛔ Low Coverage ⛔ Low Confidence
11. Kent Dodds' Testing Trophy Logic Fundamental Concepts (Async. & Mocking)
12. Mocks
13. Component Original Service Mocked Service Component Original Service Mocked Functions Mock jest.fn Spy jest.spyOn Component Original Service Stubbed Service Stub
14. RainerHahnekamp Spy = Mocking in Jasmine • Can be wrapped around a function or property • Saves history of calls along their arguments • Returns undefined by default • Allows to replace implementation (fake) dynamically
15. RainerHahnekamp Spy Strategy - Behaviours spy.and. • stub: default • callThrough: uses original implementation • fake: uses alternative implementation • returnValue / returnValues: value or list of values to be returned
16. RainerHahnekamp Factory methods • spyOn ◦ requires an object ◦ attaches spy on one method • jasmine.createSpy ◦ used when dealing with functions • jasmine.createSpyObj ◦ creates an object with multiple spied functions
17. RainerHahnekamp Spy in Action it('should mock with spyOn', () => { const validator = { isValid: (query) => query === 'Domgasse 5' }; const spy = spyOn(validator, 'isValid'); expect(validator.isValid('Domgasse 5')).toBeUndefined(); expect(spy).toHaveBeenCalledWith('Domgasse 5'); spy.and.callThrough(); expect(validator.isValid('Domgasse 5')).toBeTrue(); spy.and.callFake((query) => query === 'Domgasse 15'); expect(validator.isValid('Domgasse 15')).toBeTrue(); expect(validator.isValid('Domgasse 5')).toBeFalse(); spy.and.returnValue(true); expect(validator.isValid('unknown')).toBeTrue(); });
18. Asynchronous Tasks
19. RainerHahnekamp Angular-based Approaches • waitForAsync: automatic done callback • fakeAsync: transforms async to sync task ◦ flushMicrotasks: run all microtasks ◦ tick: move forward in time ◦ flush: run all asynchronous tasks (skips periodic timers)
20. RainerHahnekamp waitForAsync: Automatic done callback test('async', waitForAsync(() => { expect.hasAssertions(); let a = 1; Promise.resolve().then(() => { a++; expect(a).toBe(2); }); window.setTimeout(() => { a++; expect(a).toBe(3); }, 1000); }) );
21. RainerHahnekamp fakeAsync: Turn asynchrony into synchrony test("microtasks", fakeAsync(() => { let a = 1; Promise.resolve().then(() => (a = 2)); expect(a).toBe(1); flushMicrotasks(); expect(a).toBe(2); }));
22. RainerHahnekamp fakeAsync test("immediate macrotasks", fakeAsync(() => { let a = 1; window.setTimeout(() => (a = 2)); expect(a).toBe(1); tick(); expect(a).toBe(2); }));
23. RainerHahnekamp fakeAsync test("delayed macrotasks", fakeAsync(() => { let a = 1; window.setTimeout(() => (a = 2), 2000); expect(a).toBe(1); tick(2000); expect(a).toBe(2); }), 1000);
24. RainerHahnekamp fakeAsync test("delayed macrotasks", fakeAsync(() => { let a = 1; window.setTimeout(() => (a = 2), 2000); expect(a).toBe(1); flush(); expect(a).toBe(2); }), 1000);
25. RainerHahnekamp Fake Timers (Jest-only) • Setup & Teardown ◦ jest.useFakeTimers(); ◦ jest.useRealTimers(); • jest.runAllTimers() ◦ Runs all asynchronous triggered now and in the future ◦ Dangerous for intervals, etc. • jest.runOnlyPendingTimers(); ◦ Runs timers known at the time of execution ◦ Safer than runAllTimers() • jest.runAllTicks() ◦ Runs all MicroTasks • jest.advanceTimersByTime([time]); ◦ Like tick() Use async() to cover Promises
26. RainerHahnekamp Zoneless & asynchronous tasks? • fakeAsync & waitForAsync depend on zone.js • Zoneless available since v18 ?
27. Fakes
28. Younes Jaaidi https://cookbook.marmicode.io/angular/fake-it-till-you-mock-it
29. Fakes • Decouple implementation details • Better DX • Existing Fakes ◦ HttpTestingController ◦ RouterTestingHarness ◦ Harnesses in general • Additional, initial effort ◦ They have to be written
30. More on Testing https://www.angulararchitects.io/en/training/professional-angular-testing-playwright-edition/
31. Thanks