From d068fc1ea0314eaf81b5f02f170484018492e4e9 Mon Sep 17 00:00:00 2001 From: Jaime Burgos <73321943+SkyZeroZx@users.noreply.github.com> Date: Thu, 30 Jul 2026 10:56:25 -0500 Subject: [PATCH] refactor(common): modernize pipes & non bindable tests to rely on `whenStable` Rely on zoneless scheduling throughout reactive forms tests instead of triggering change detection manually. --- .../test/directives/non_bindable_spec.ts | 21 +++++++------------ packages/common/test/pipes/async_pipe_spec.ts | 6 +++--- .../test/pipes/case_conversion_pipes_spec.ts | 12 +++++------ packages/common/test/pipes/date_pipe_spec.ts | 20 +++++++++--------- .../test/pipes/i18n_plural_pipe_spec.ts | 4 ++-- .../test/pipes/i18n_select_pipe_spec.ts | 4 ++-- packages/common/test/pipes/json_pipe_spec.ts | 19 +++++++---------- .../common/test/pipes/keyvalue_pipe_spec.ts | 4 ++-- .../common/test/pipes/number_pipe_spec.ts | 12 +++++------ packages/common/test/pipes/slice_pipe_spec.ts | 19 +++++++---------- 10 files changed, 52 insertions(+), 69 deletions(-) diff --git a/packages/common/test/directives/non_bindable_spec.ts b/packages/common/test/directives/non_bindable_spec.ts index 0d5ef6d0744..bea72292fd7 100644 --- a/packages/common/test/directives/non_bindable_spec.ts +++ b/packages/common/test/directives/non_bindable_spec.ts @@ -12,24 +12,18 @@ import {hasClass} from '@angular/private/testing'; import {expect} from '@angular/private/testing/matchers'; describe('non-bindable', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [TestComponent, TestDirective], - }); - }); - - it('should not interpolate children', () => { + it('should not interpolate children', async () => { const template = '
{{text}}{{text}}
'; const fixture = createTestComponent(template); - fixture.detectChanges(); + await fixture.whenStable(); expect(fixture.nativeElement).toHaveText('foo{{text}}'); }); - it('should ignore directives on child nodes', () => { + it('should ignore directives on child nodes', async () => { const template = '
{{text}}
'; const fixture = createTestComponent(template); - fixture.detectChanges(); + await fixture.whenStable(); // We must use getDOM().querySelector instead of fixture.query here // since the elements inside are not compiled. @@ -37,10 +31,10 @@ describe('non-bindable', () => { expect(hasClass(span, 'compiled')).toBeFalsy(); }); - it('should trigger directives on the same node', () => { + it('should trigger directives on the same node', async () => { const template = '
{{text}}
'; const fixture = createTestComponent(template); - fixture.detectChanges(); + await fixture.whenStable(); const span = fixture.nativeElement.querySelector('#child'); expect(hasClass(span, 'compiled')).toBeTruthy(); }); @@ -48,7 +42,6 @@ describe('non-bindable', () => { @Directive({ selector: '[test-dec]', - standalone: false, }) class TestDirective { constructor(el: ElementRef) { @@ -59,7 +52,7 @@ class TestDirective { @Component({ selector: 'test-cmp', template: '', - standalone: false, + imports: [TestDirective], }) class TestComponent { text: string; diff --git a/packages/common/test/pipes/async_pipe_spec.ts b/packages/common/test/pipes/async_pipe_spec.ts index 1becb61945e..f3ec2e4a251 100644 --- a/packages/common/test/pipes/async_pipe_spec.ts +++ b/packages/common/test/pipes/async_pipe_spec.ts @@ -25,7 +25,7 @@ describe('AsyncPipe', () => { useAutoTick(); function getChangeDetectorRefSpy() { - return jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck', 'detectChanges']); + return jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck']); } beforeEach(() => { @@ -296,7 +296,7 @@ describe('AsyncPipe', () => { }); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [AsyncPipe], @@ -307,7 +307,7 @@ describe('AsyncPipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('foo'); diff --git a/packages/common/test/pipes/case_conversion_pipes_spec.ts b/packages/common/test/pipes/case_conversion_pipes_spec.ts index 161a7252940..867c87b8a7f 100644 --- a/packages/common/test/pipes/case_conversion_pipes_spec.ts +++ b/packages/common/test/pipes/case_conversion_pipes_spec.ts @@ -40,7 +40,7 @@ describe('LowerCasePipe', () => { expect(() => pipe.transform({} as any)).toThrowError(); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [LowerCasePipe], @@ -51,7 +51,7 @@ describe('LowerCasePipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('foo'); @@ -131,7 +131,7 @@ describe('TitleCasePipe', () => { expect(() => pipe.transform({} as any)).toThrowError(); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [TitleCasePipe], @@ -142,7 +142,7 @@ describe('TitleCasePipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('Foo'); @@ -179,7 +179,7 @@ describe('UpperCasePipe', () => { expect(() => pipe.transform({} as any)).toThrowError(); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [UpperCasePipe], @@ -190,7 +190,7 @@ describe('UpperCasePipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('FOO'); diff --git a/packages/common/test/pipes/date_pipe_spec.ts b/packages/common/test/pipes/date_pipe_spec.ts index 6745cffb6e4..ba385439ee7 100644 --- a/packages/common/test/pipes/date_pipe_spec.ts +++ b/packages/common/test/pipes/date_pipe_spec.ts @@ -83,7 +83,7 @@ describe('DatePipe', () => { ); }); - it('should use format provided in component as default format when no format is passed in', () => { + it('should use format provided in component as default format when no format is passed in', async () => { @Component({ selector: 'test-component', imports: [DatePipe], @@ -95,13 +95,13 @@ describe('DatePipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('1/11/17'); }); - it('should use format provided in module as default format when no format is passed in', () => { + it('should use format provided in module as default format when no format is passed in', async () => { @Component({ selector: 'test-component', imports: [DatePipe], @@ -116,7 +116,7 @@ describe('DatePipe', () => { providers: [{provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'shortDate'}}], }); const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('1/11/17'); @@ -171,7 +171,7 @@ describe('DatePipe', () => { expect(pipe.transform('2017-01-11T00:00:00', 'mediumDate', '+0100')).toEqual('Jan 11, 2017'); }); - it('should use timezone provided in component as default timezone when no format is passed in', () => { + it('should use timezone provided in component as default timezone when no format is passed in', async () => { @Component({ selector: 'test-component', imports: [DatePipe], @@ -183,13 +183,13 @@ describe('DatePipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('Jan 10, 2017'); }); - it('should use timezone provided in module as default timezone when no format is passed in', () => { + it('should use timezone provided in module as default timezone when no format is passed in', async () => { @Component({ selector: 'test-component', imports: [DatePipe], @@ -204,14 +204,14 @@ describe('DatePipe', () => { providers: [{provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {timezone: '-1200'}}], }); const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('Jan 10, 2017'); }); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [DatePipe], @@ -222,7 +222,7 @@ describe('DatePipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('Jan 11, 2017'); diff --git a/packages/common/test/pipes/i18n_plural_pipe_spec.ts b/packages/common/test/pipes/i18n_plural_pipe_spec.ts index 6f455118b33..254c68c6753 100644 --- a/packages/common/test/pipes/i18n_plural_pipe_spec.ts +++ b/packages/common/test/pipes/i18n_plural_pipe_spec.ts @@ -62,7 +62,7 @@ describe('I18nPluralPipe', () => { }); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [I18nPluralPipe], @@ -74,7 +74,7 @@ describe('I18nPluralPipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('One message.'); diff --git a/packages/common/test/pipes/i18n_select_pipe_spec.ts b/packages/common/test/pipes/i18n_select_pipe_spec.ts index 0aba826832b..66a9f35be7c 100644 --- a/packages/common/test/pipes/i18n_select_pipe_spec.ts +++ b/packages/common/test/pipes/i18n_select_pipe_spec.ts @@ -54,7 +54,7 @@ describe('I18nSelectPipe', () => { expect(pipe.transform('greeting', shadowedMapping)).toEqual('hello'); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [I18nSelectPipe], @@ -66,7 +66,7 @@ describe('I18nSelectPipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('Invite them.'); diff --git a/packages/common/test/pipes/json_pipe_spec.ts b/packages/common/test/pipes/json_pipe_spec.ts index d2c75331591..496c6a0056c 100644 --- a/packages/common/test/pipes/json_pipe_spec.ts +++ b/packages/common/test/pipes/json_pipe_spec.ts @@ -10,7 +10,7 @@ import {ChangeDetectionStrategy} from '@angular/compiler'; import {Component} from '@angular/core'; import {TestBed} from '@angular/core/testing'; import {expect} from '@angular/private/testing/matchers'; -import {CommonModule, JsonPipe} from '../../index'; +import {JsonPipe} from '../../index'; describe('JsonPipe', () => { const regNewLine = '\n'; @@ -58,33 +58,28 @@ describe('JsonPipe', () => { @Component({ selector: 'test-comp', template: '{{data | json}}', - standalone: false, + imports: [JsonPipe], changeDetection: ChangeDetectionStrategy.Eager, }) class TestComp { data: any; } - beforeEach(() => { - TestBed.configureTestingModule({declarations: [TestComp], imports: [CommonModule]}); - }); - - it('should work with mutable objects', () => { + it('should work with mutable objects', async () => { const fixture = TestBed.createComponent(TestComp); const mutable: number[] = [1]; fixture.componentInstance.data = mutable; - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + await fixture.whenStable(); expect(fixture.nativeElement).toHaveText('[\n 1\n]'); mutable.push(2); fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + await fixture.whenStable(); expect(fixture.nativeElement).toHaveText('[\n 1,\n 2\n]'); }); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [JsonPipe], @@ -95,7 +90,7 @@ describe('JsonPipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content.replace(/\s/g, '')).toBe('{"a":1}'); diff --git a/packages/common/test/pipes/keyvalue_pipe_spec.ts b/packages/common/test/pipes/keyvalue_pipe_spec.ts index cca2610ede2..9b4727f5eef 100644 --- a/packages/common/test/pipes/keyvalue_pipe_spec.ts +++ b/packages/common/test/pipes/keyvalue_pipe_spec.ts @@ -269,7 +269,7 @@ describe('KeyValuePipe', () => { }); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [KeyValuePipe, JsonPipe], @@ -280,7 +280,7 @@ describe('KeyValuePipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content.replace(/\s/g, '')).toBe('[{"key":"a","value":2},{"key":"b","value":1}]'); diff --git a/packages/common/test/pipes/number_pipe_spec.ts b/packages/common/test/pipes/number_pipe_spec.ts index 11acdb05396..beab8622806 100644 --- a/packages/common/test/pipes/number_pipe_spec.ts +++ b/packages/common/test/pipes/number_pipe_spec.ts @@ -78,7 +78,7 @@ describe('Number pipes', () => { }); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [DecimalPipe], @@ -89,7 +89,7 @@ describe('Number pipes', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('12,345'); @@ -130,7 +130,7 @@ describe('Number pipes', () => { }); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [PercentPipe], @@ -141,7 +141,7 @@ describe('Number pipes', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('1,500%'); @@ -227,7 +227,7 @@ describe('Number pipes', () => { }); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [CurrencyPipe], @@ -238,7 +238,7 @@ describe('Number pipes', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('$15.00'); diff --git a/packages/common/test/pipes/slice_pipe_spec.ts b/packages/common/test/pipes/slice_pipe_spec.ts index 06993c86bbf..ffa8f923c57 100644 --- a/packages/common/test/pipes/slice_pipe_spec.ts +++ b/packages/common/test/pipes/slice_pipe_spec.ts @@ -10,7 +10,7 @@ import {ChangeDetectionStrategy} from '@angular/compiler'; import {Component} from '@angular/core'; import {TestBed} from '@angular/core/testing'; import {expect} from '@angular/private/testing/matchers'; -import {CommonModule, SlicePipe} from '../../index'; +import {SlicePipe} from '../../index'; describe('SlicePipe', () => { let list: number[]; @@ -94,33 +94,28 @@ describe('SlicePipe', () => { @Component({ selector: 'test-comp', template: '{{(data | slice:1).join(",") }}', - standalone: false, + imports: [SlicePipe], changeDetection: ChangeDetectionStrategy.Eager, }) class TestComp { data: any; } - beforeEach(() => { - TestBed.configureTestingModule({declarations: [TestComp], imports: [CommonModule]}); - }); - - it('should work with mutable arrays', () => { + it('should work with mutable arrays', async () => { const fixture = TestBed.createComponent(TestComp); const mutable: number[] = [1, 2]; fixture.componentInstance.data = mutable; - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + await fixture.whenStable(); expect(fixture.nativeElement).toHaveText('2'); mutable.push(3); fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); + await fixture.whenStable(); expect(fixture.nativeElement).toHaveText('2,3'); }); }); - it('should be available as a standalone pipe', () => { + it('should be available as a standalone pipe', async () => { @Component({ selector: 'test-component', imports: [SlicePipe], @@ -132,7 +127,7 @@ describe('SlicePipe', () => { } const fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); + await fixture.whenStable(); const content = fixture.nativeElement.textContent; expect(content).toBe('Hello');