No content

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 

RainerHahnekamp Repository https://github.com/rainerhahnekamp/eternal/tree/talk/2025-04-21_angular-community_unit-testing/1-init 

Agenda ● Core Concepts ● Mocks ● Asynchronous Tasks ● Fakes 

Core Concepts 

Component Service Service Service Directive Service Component Pipe Service Unit Test 

Tooling Unit Tests Integration & Component Tests End-to-End (E2E) Tests 

No content

No content

Pros & Cons ✅ Fast ✅ Exploratory ✅ Bugs are easy to find ✅ Enforce good Design ⛔ No Refactoring ⛔ High Maintainability ⛔ Low Coverage ⛔ Low Confidence 

Kent Dodds' Testing Trophy Logic Fundamental Concepts (Async. & Mocking) 

Mocks 

Component Original Service Mocked Service Component Original Service Mocked Functions Mock jest.fn Spy jest.spyOn Component Original Service Stubbed Service Stub 

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 

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 

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 

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(); }); 

Asynchronous Tasks 

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) 

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); }) ); 

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); })); 

RainerHahnekamp fakeAsync test("immediate macrotasks", fakeAsync(() => { let a = 1; window.setTimeout(() => (a = 2)); expect(a).toBe(1); tick(); expect(a).toBe(2); })); 

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); 

RainerHahnekamp fakeAsync test("delayed macrotasks", fakeAsync(() => { let a = 1; window.setTimeout(() => (a = 2), 2000); expect(a).toBe(1); flush(); expect(a).toBe(2); }), 1000); 

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 

RainerHahnekamp Zoneless & asynchronous tasks? ● fakeAsync & waitForAsync depend on zone.js ● Zoneless available since v18 ? 

Fakes 

Younes Jaaidi https://cookbook.marmicode.io/angular/fake-it-till-you-mock-it 

Fakes ● Decouple implementation details ● Better DX ● Existing Fakes ○ HttpTestingController ○ RouterTestingHarness ○ Harnesses in general ● Additional, initial effort ○ They have to be written 

More on Testing https://www.angulararchitects.io/en/training/professional-angular-testing-playwright-edition/ 

Thanks