Zoneless Testing

Angular is on the brink of a major evolution: going zoneless. But with this shift come new questions, particularly around handling asynchronous operations. Make no mistake—both fakeAsync and waitForAsync rely on Zone.js, which means they won’t work as expected in a zoneless world.

In this session, I’ll walk you through where we are today and explore the options we have moving forward. We’ll dive into what the Angular team is planning and what testing frameworks like Jest, Jasmine, and Vitest have to offer in this new context.

If you’re curious about what’s coming and want to ensure your tests remain robust in a zoneless environment, this session is for you.

Video is available at: https://youtu.be/SuyqQmJCGp0

Transcript

1. Zoneless Testing Rainer Hahnekamp 6. December 2024
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 Why a talk on experimental features??? Critical for some apps Future-proof tests
4. RainerHahnekamp Change Detection with zone.js
5. RainerHahnekamp Zone.js triggers Change Detection Component Tree DOM Submit Cancel Zone.js Handled DOM Events Asynchronous Tasks
6. Component Tree DOM Submit Cancel Change Detection (DOM and Components in Sync)
7. Component Tree DOM Submit Cancel Change Detection (Component's value changes)
8. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...)
9. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅
10. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅
11. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅
12. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅
13. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅
14. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅
15. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅
16. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅
17. Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅ ✅
18. Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅
19. Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅ ✅
20. Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅ ✅
21. Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅ ✅ ✅
22. RainerHahnekamp Change Detection without zone.js
23. Component Tree DOM Submit Cancel Zoneless Change Detection Zone.js
24. Component Tree DOM Submit Cancel Zoneless Change Detection Zone.js
25. Component Tree DOM Submit Cancel Zoneless Change Detection (Change happens)
26. Component Tree DOM Submit Cancel Zoneless Change Detection ("Somebody/-thing calls markForCheck()) markForCheck()
27. Component Tree DOM Submit Cancel Zoneless Change Detection (markForCheck triggers CD) markForCheck()
28. Component Tree DOM Submit Cancel Zoneless Change Detection (Checkend & Done) ✅ ✅ ✅ ✅ ✅ ✅
29. RainerHahnekamp Criteria markForCheck Handled DOM Events async Pipe Signal Change manually via markForCheck
30. RainerHahnekamp A First Test 1/5
31. RainerHahnekamp A First Test 2/5
32. RainerHahnekamp A First Test 3a/5 // setup const fixture = TestBed.configureTestingModule({ providers: [ provideExperimentalZonelessChangeDetection(), provideHttpClient(), provideHttpClientTesting() }).createComponent(QuizComponent); fixture.componentRef.setInput('id', 1); fixture.autoDetectChanges(true)
33. RainerHahnekamp A First Test 3a/5 // setup const fixture = TestBed.configureTestingModule({ providers: [ provideExperimentalZonelessChangeDetection(), provideHttpClient(), provideHttpClientTesting(), {provide: ComponentFixtureAutoDetect, useValue: false} ], }).createComponent(QuizComponent); fixture.componentRef.setInput('id', 1); fixture.autoDetectChanges(true) Automatic Change Detection enabled in zoneless
34. RainerHahnekamp A First Test 3b/5 // setup TestBed.configureTestingModule({ providers: [ provideExperimentalZonelessChangeDetection(), provideHttpClient(), provideHttpClientTesting(), provideRouter( [{ path: 'quiz/:id', component: QuizComponent }], withComponentInputBinding(), ), provideLocationMocks(), ], }); const { fixture } = await RouterTestingHarness.create('/quiz/1');
35. RainerHahnekamp A First Test 4/5 // setup... // init const httpClient = TestBed.inject(HttpTestingController); const req = httpClient.expectOne('/holiday/1/quiz'); req.flush(createQuiz(1)); await fixture.whenStable();
36. RainerHahnekamp A First Test 5/5 // setup... // init... // execution const question = screen.getByLabelText('question'); const status = screen.getByLabelText('quiz-status'); expect(within(status).getByText('Correct: 0')).toBeTruthy(); expect( within(question).getByText( 'What programming language is Angular written in?', ), ).toBeTruthy(); within(question).getByRole('button', { name: 'TypeScript' }).click(); await fixture.whenStable(); expect(within(status).getByText('Correct: 1')).toBeTruthy();
37. RainerHahnekamp Major Pitfalls markForCheck Mutable Property Binding Asynchronous Tasks
38. RainerHahnekamp Asynchronous Tasks is a problem? What about fakeAsync() or waitForAsync() 🤨
39. RainerHahnekamp Dealing with asynchronous Tasks ComponentFixture ::whenStable
40. RainerHahnekamp Dealing with asynchronous Tasks ComponentFixture ::whenStable PendingTasks
41. RainerHahnekamp PendingTasks ✅ Official Solution • (rx)resource() ✅ Required for SSR ✅ Empowers ComponentFixture::whenStable ⛔ Not a good DX • Overhead ⛔ Timeouts are real • Slow Tests ⛔ Issues with third-party Libraries
42. RainerHahnekamp Dealing with asynchronous Tasks ComponentFixture ::whenStable PendingTasks Stubs & Fakes
43. RainerHahnekamp Stub Example // implementation @Injectable({providedIn: 'root'}) export class Clock { setTimeout(fn: () => void, timeout: number) { setTimeout(fn, timeout) } } // stub TestBed.configureTestingModule({ providers: [ // ... { provide: Clock, useValue: { setTimeout: (fn: () => void) => fn() } }, ], });
44. RainerHahnekamp Minimal Fake Example export class Clock { readonly #tasks = new Map<number, () => void>(); schedule(task: () => void, timeout: number) { const timeoutId = window.setTimeout(() => { task(); this.#tasks.delete(timeoutId) }, timeout); this.#tasks.set(timeout, task) } flushAll() { for (const taskId of this.#tasks.keys()) { clearTimeout(taskId) const task = this.#tasks.get(taskId); assertDefined(task); task(); } } }
45. RainerHahnekamp Dealing with asynchronous Tasks ComponentFixture ::whenStable PendingTasks Testing Framework Stubs & Fakes
46. RainerHahnekamp jasmine.clock it('should show the next button', async () => { const { fixture, question } = await setup(); const clock = jasmine.clock(); clock.install() within(question).getByRole('button', { name: 'TypeScript' }).click(); clock.tick(1000) await fixture.whenStable() });
47. RainerHahnekamp Testing Framework Features • https://github.com/jasmine/jasmine/pull/2042 • https://github.com/jestjs/jest/pull/15300
48. RainerHahnekamp
49. RainerHahnekamp
50. RainerHahnekamp Dealing with asynchronous Tasks ComponentFixture ::whenStable PendingTasks Testing Framework Cypress CT Stubs & Fakes
51. RainerHahnekamp ✅ No Quarrels with • Change Detection • DOM Events • Asynchronous Tasks ✅ Superior DX ⛔ Real Timeout ⛔ Third-Party Library ⛔ No Unit or Service Tests Cypress Component Testing
52. RainerHahnekamp Summary • Zoneless & Testing is easier than you might think • Careful about asynchronous tasks • It is still experimental, i.e. up for change • Always test as close to the real world as possible
53. RainerHahnekamp Farewell waitForAsync() and fakeAsync() Embrace ComponentFixture::whenStable