Visitar URL original
refactor(core): Migrate more tests off `fakeAsync` · angular/angular@ada038f · GitHub
Skip to content

Commit ada038f

Browse files
JeanMechealxhub
JeanMeche
authored and
alxhub
committed
refactor(core): Migrate more tests off fakeAsync
This will prevent to polute the agent context with outdated/bad practices. (cherry picked from commit c1025a0)
1 parent f6fa9ec commit ada038f

8 files changed

Lines changed: 278 additions & 293 deletions

File tree

‎packages/core/test/acceptance/authoring/BUILD.bazel‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
load("//tools:defaults.bzl", "angular_jasmine_test", "js_binary", "js_run_binary", "ng_project", "ng_web_test_suite", "ts_project")
1+
load("//tools:defaults.bzl", "js_binary", "js_run_binary", "ng_project", "ts_project", "zoneless_jasmine_test", "zoneless_web_test_suite")
22

33
package(default_visibility = ["//visibility:private"])
44

@@ -61,28 +61,28 @@ ng_project(
6161
deps = TEST_DEPS,
6262
)
6363

64-
angular_jasmine_test(
64+
zoneless_jasmine_test(
6565
name = "test",
6666
data = [
6767
":test_lib",
6868
],
6969
)
7070

71-
angular_jasmine_test(
71+
zoneless_jasmine_test(
7272
name = "test_jit",
7373
data = [
7474
":test_jit_lib",
7575
],
7676
)
7777

78-
ng_web_test_suite(
78+
zoneless_web_test_suite(
7979
name = "test_web",
8080
deps = [
8181
":test_lib",
8282
],
8383
)
8484

85-
ng_web_test_suite(
85+
zoneless_web_test_suite(
8686
name = "test_jit_web",
8787
deps = [
8888
":test_jit_lib",

‎packages/core/test/acceptance/authoring/signal_inputs_spec.ts‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,10 @@ import {
2929
ViewContainerRef,
3030
} from '@angular/core';
3131
import {By} from '@angular/platform-browser';
32-
import {isNode} from '@angular/private/testing';
32+
import {isNode, timeout, useAutoTick} from '@angular/private/testing';
3333
import {Subscription} from 'rxjs';
3434
import {SIGNAL} from '../../../primitives/signals';
35-
import {fakeAsync, TestBed, tick} from '../../../testing';
36-
import {tickAnimationFrames} from '../../animation_utils/tick_animation_frames';
35+
import {TestBed} from '../../../testing';
3736

3837
describe('signal inputs', () => {
3938
beforeEach(() =>
@@ -311,12 +310,14 @@ describe('signal inputs', () => {
311310
});
312311

313312
describe('animation API', () => {
313+
useAutoTick();
314+
314315
if (isNode) {
315316
it('should pass', () => expect(true).toBe(true));
316317
return;
317318
}
318319

319-
it('should support signal inputs', fakeAsync(() => {
320+
it('should support signal inputs', async () => {
320321
const styles = `
321322
.slide-in {
322323
animation: slide-in 1ms;
@@ -366,7 +367,7 @@ describe('signal inputs', () => {
366367

367368
const fixture = TestBed.createComponent(TestComponent);
368369
fixture.detectChanges();
369-
tickAnimationFrames(1);
370+
await timeout(17);
370371
const childCmp = fixture.debugElement.query(By.css('p'));
371372

372373
expect(childCmp.nativeElement.className).toContain('fade-in');
@@ -375,11 +376,11 @@ describe('signal inputs', () => {
375376
new AnimationEvent('animationend', {animationName: 'fade-in'}),
376377
);
377378
fixture.detectChanges();
378-
tick();
379+
await fixture.whenStable();
379380
expect(childCmp.nativeElement.className).not.toContain('fade-in');
380-
}));
381+
});
381382

382-
it('should support content projection', fakeAsync(() => {
383+
it('should support content projection', async () => {
383384
const animateStyles = `
384385
.fade-in {
385386
animation: fade 1ms forwards;
@@ -467,30 +468,30 @@ describe('signal inputs', () => {
467468

468469
// show first time
469470
fixture.detectChanges();
470-
tickAnimationFrames(1);
471+
await timeout(17);
471472
const enterAppContent = fixture.nativeElement.querySelector('app-content');
472473

473474
expect(enterAppContent).not.toBeNull();
474475
expect(enterAppContent.className).toEqual('fade-in');
475476
enterAppContent.dispatchEvent(new AnimationEvent('animationstart'));
476477
enterAppContent.dispatchEvent(new AnimationEvent('animationend', {animationName: 'fade'}));
477-
tick();
478+
await fixture.whenStable();
478479
expect(enterAppContent.className).not.toEqual('fade-in');
479480
expect(fixture.debugElement.query(By.css('app-content'))).not.toBeNull();
480481

481482
button.click();
482483

483484
// hide first time
484485
fixture.detectChanges();
485-
tickAnimationFrames(1);
486+
await timeout(17);
486487
const leaveAppContent = fixture.nativeElement.querySelector('app-content');
487488

488489
expect(fixture.nativeElement.outerHTML).toContain('app-content class="fade-out"');
489490
expect(leaveAppContent.className).toEqual('fade-out');
490491
leaveAppContent.dispatchEvent(new AnimationEvent('animationstart'));
491492
leaveAppContent.dispatchEvent(new AnimationEvent('animationend', {animationName: 'fade'}));
492493
fixture.detectChanges();
493-
tickAnimationFrames(1);
494+
await timeout(17);
494495

495496
expect(fixture.debugElement.query(By.css('app-content'))).toBeNull();
496497

@@ -499,7 +500,7 @@ describe('signal inputs', () => {
499500
// show second time
500501
fixture.detectChanges();
501502
fixture.changeDetectorRef.markForCheck();
502-
tickAnimationFrames(1);
503+
await timeout(17);
503504
const enterAppContent2 = fixture.nativeElement.querySelector('app-content');
504505

505506
expect(enterAppContent2).not.toBeNull();
@@ -508,7 +509,7 @@ describe('signal inputs', () => {
508509
fadeInEl.dispatchEvent(new AnimationEvent('animationstart'));
509510
fadeInEl.dispatchEvent(new AnimationEvent('animationend', {animationName: 'fade'}));
510511
fixture.detectChanges();
511-
tickAnimationFrames(1);
512+
await timeout(17);
512513

513514
expect(fixture.nativeElement.querySelector('app-content').className).not.toEqual('fade-in');
514515
expect(fixture.debugElement.query(By.css('app-content'))).not.toBeNull();
@@ -517,20 +518,20 @@ describe('signal inputs', () => {
517518

518519
// hide second time
519520
fixture.detectChanges();
520-
tickAnimationFrames(1);
521+
await timeout(17);
521522
const leaveAppContent2 = fixture.nativeElement.querySelector('app-content');
522523

523524
expect(fixture.nativeElement.outerHTML).toContain('app-content class="fade-out"');
524525
expect(leaveAppContent2.className).toEqual('fade-out');
525526
leaveAppContent2.dispatchEvent(new AnimationEvent('animationstart'));
526527
leaveAppContent2.dispatchEvent(new AnimationEvent('animationend', {animationName: 'fade'}));
527528
fixture.detectChanges();
528-
tickAnimationFrames(1);
529+
await timeout(17);
529530

530531
expect(fixture.debugElement.query(By.css('app-content'))).toBeNull();
531-
}));
532+
});
532533

533-
it('should run animations using the root injector so that the animation queue still runs when the component is destroyed before afterNextRender occurs', fakeAsync(() => {
534+
it('should run animations using the root injector so that the animation queue still runs when the component is destroyed before afterNextRender occurs', async () => {
534535
const animateStyles = `
535536
.fade-out {
536537
animation: fade-out 100ms;
@@ -643,7 +644,7 @@ describe('signal inputs', () => {
643644
// remove the item from the list
644645
fixture.componentInstance.removeItem(fixture.componentInstance.list()[0].id);
645646
fixture.detectChanges(); // Detect changes for TestComponent to trigger leave animation
646-
tickAnimationFrames(1); // Allow animation to start (will add 'fade-out' class)
647+
await timeout(1); // Allow animation to start (will add 'fade-out' class)
647648

648649
const fadingOut = fixture.nativeElement.querySelector('notification');
649650

@@ -654,9 +655,9 @@ describe('signal inputs', () => {
654655
notification.dispatchEvent(
655656
new AnimationEvent('animationend', {animationName: 'fade-out', bubbles: true}),
656657
);
657-
tick(300); // Advance timers by animation duration (0.5s)
658+
await timeout(300); // Advance timers by animation duration (0.5s)
658659
fixture.detectChanges(); // Detect changes after animation completes and element is removed
659660
expect(fixture.nativeElement.querySelector('notification')).toBeNull(); // Verify element is removed
660-
}));
661+
});
661662
});
662663
});

‎packages/core/test/acceptance/change_detection_spec.ts‎

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,7 @@ import {
4040
ViewChildren,
4141
ViewContainerRef,
4242
} from '../../src/core';
43-
import {
44-
ComponentFixture,
45-
ComponentFixtureAutoDetect,
46-
fakeAsync,
47-
TestBed,
48-
tick,
49-
} from '../../testing';
43+
import {ComponentFixture, ComponentFixtureAutoDetect, TestBed} from '../../testing';
5044

5145
describe('change detection', () => {
5246
beforeEach(() => {
@@ -121,7 +115,6 @@ describe('change detection', () => {
121115
@Component({
122116
selector: 'onpush',
123117
template: '',
124-
changeDetection: ChangeDetectionStrategy.OnPush,
125118
})
126119
class OnPushComponent {
127120
checks = 0;
@@ -220,7 +213,6 @@ describe('change detection', () => {
220213

221214
@Component({
222215
template: `<ng-template #vm="vm" viewManipulation></ng-template>`,
223-
changeDetection: ChangeDetectionStrategy.OnPush,
224216
imports: [ViewManipulation],
225217
})
226218
class App {}
@@ -230,7 +222,6 @@ describe('change detection', () => {
230222
<button (click)="noop()">Trigger change detection</button>
231223
<div>{{ increment() }}</div>
232224
`,
233-
changeDetection: ChangeDetectionStrategy.OnPush,
234225
})
235226
class DynamicComp {
236227
increment() {
@@ -272,7 +263,6 @@ describe('change detection', () => {
272263
selector: 'child',
273264
template: '<ng-container *viewManipulation>{{data()}}</ng-container>',
274265
imports: [ViewManipulation],
275-
changeDetection: ChangeDetectionStrategy.OnPush,
276266
})
277267
class ChildComponent {
278268
data = data;
@@ -312,7 +302,6 @@ describe('change detection', () => {
312302
@Component({
313303
selector: `test-cmpt`,
314304
template: `{{ counter }}|<ng-template #vc></ng-template>`,
315-
changeDetection: ChangeDetectionStrategy.OnPush,
316305
})
317306
class TestCmpt {
318307
counter = 0;
@@ -326,7 +315,6 @@ describe('change detection', () => {
326315
@Component({
327316
selector: 'dynamic-cmpt',
328317
template: `dynamic|{{ binding }}`,
329-
changeDetection: ChangeDetectionStrategy.OnPush,
330318
})
331319
class DynamicCmpt {
332320
@Input() binding = 'binding';
@@ -429,7 +417,6 @@ describe('change detection', () => {
429417
describe('OnPush', () => {
430418
@Component({
431419
selector: 'my-comp',
432-
changeDetection: ChangeDetectionStrategy.OnPush,
433420
template: `{{ doCheckCount }} - {{ name }} <button (click)="onClick()"></button>`,
434421
standalone: false,
435422
})
@@ -570,7 +557,6 @@ describe('change detection', () => {
570557
@Component({
571558
selector: 'button-parent',
572559
template: '{{ doCheckCount }} - <my-comp></my-comp>',
573-
changeDetection: ChangeDetectionStrategy.OnPush,
574560
standalone: false,
575561
})
576562
class ButtonParent implements DoCheck {
@@ -624,7 +610,7 @@ describe('change detection', () => {
624610
expect(fixture.nativeElement.textContent.trim()).toEqual('3 - 2 - Nancy');
625611
});
626612

627-
it('should check parent OnPush components when child directive on a template emits event', fakeAsync(() => {
613+
it('should check parent OnPush components when child directive on a template emits event', async () => {
628614
@Directive({
629615
selector: '[emitter]',
630616
standalone: false,
@@ -642,7 +628,6 @@ describe('change detection', () => {
642628
@Component({
643629
selector: 'my-app',
644630
template: '{{message}} <ng-template emitter (event)="message = $event"></ng-template>',
645-
changeDetection: ChangeDetectionStrategy.OnPush,
646631
standalone: false,
647632
})
648633
class MyApp {
@@ -655,18 +640,17 @@ describe('change detection', () => {
655640
fixture.detectChanges();
656641

657642
expect(fixture.nativeElement.textContent.trim()).toEqual('initial message');
658-
tick();
643+
await fixture.whenStable();
659644
fixture.detectChanges();
660645
expect(fixture.nativeElement.textContent.trim()).toEqual('new message');
661-
}));
646+
});
662647
});
663648

664649
describe('ChangeDetectorRef', () => {
665650
describe('detectChanges()', () => {
666651
@Component({
667652
selector: 'my-comp',
668653
template: '{{ name }}',
669-
changeDetection: ChangeDetectionStrategy.OnPush,
670654
standalone: false,
671655
})
672656
class MyComp implements DoCheck {
@@ -1193,7 +1177,6 @@ describe('change detection', () => {
11931177
@Component({
11941178
selector: 'on-push-comp',
11951179
template: '{{ value }}',
1196-
changeDetection: ChangeDetectionStrategy.OnPush,
11971180
standalone: false,
11981181
})
11991182
class OnPushComp {
@@ -1238,7 +1221,6 @@ describe('change detection', () => {
12381221
@Component({
12391222
selector: 'on-push-comp',
12401223
template: '{{ value }}',
1241-
changeDetection: ChangeDetectionStrategy.OnPush,
12421224
standalone: false,
12431225
})
12441226
class OnPushComp implements DoCheck {
@@ -1255,7 +1237,6 @@ describe('change detection', () => {
12551237

12561238
@Component({
12571239
template: '{{ value }} - <on-push-comp></on-push-comp>',
1258-
changeDetection: ChangeDetectionStrategy.OnPush,
12591240
standalone: false,
12601241
})
12611242
class OnPushParent {
@@ -1317,7 +1298,6 @@ describe('change detection', () => {
13171298
it('should ensure OnPush components in embedded views are checked', () => {
13181299
@Component({
13191300
template: '{{ value }} - <on-push-comp *ngIf="showing"></on-push-comp>',
1320-
changeDetection: ChangeDetectionStrategy.OnPush,
13211301
standalone: false,
13221302
})
13231303
class EmbeddedViewParent {
@@ -1358,7 +1338,6 @@ describe('change detection', () => {
13581338
it('async pipe should trigger CD for embedded views where the declaration and insertion views are different', () => {
13591339
@Component({
13601340
selector: 'insertion',
1361-
changeDetection: ChangeDetectionStrategy.OnPush,
13621341
template: ` <ng-container [ngTemplateOutlet]="template"> </ng-container> `,
13631342
standalone: false,
13641343
})
@@ -1369,7 +1348,6 @@ describe('change detection', () => {
13691348
// This component uses async pipe (which calls markForCheck) in a view that has different
13701349
// insertion and declaration views.
13711350
@Component({
1372-
changeDetection: ChangeDetectionStrategy.OnPush,
13731351
template: `
13741352
<insertion [template]="ref"></insertion>
13751353
<ng-template #ref>
@@ -1537,7 +1515,6 @@ describe('change detection', () => {
15371515
});
15381516

15391517
@Component({
1540-
changeDetection: ChangeDetectionStrategy.OnPush,
15411518
template: '{{state}}{{resolveReadPromise()}}',
15421519
})
15431520
class MyApp {
@@ -1617,7 +1594,6 @@ describe('change detection', () => {
16171594

16181595
@Component({
16191596
template: '{{state}}',
1620-
changeDetection: ChangeDetectionStrategy.OnPush,
16211597
})
16221598
class NotUnidirectionalDataFlow {
16231599
state = 1;
@@ -1653,7 +1629,6 @@ describe('change detection', () => {
16531629
it(`should be able to mark component as dirty from within ${hookName}`, () => {
16541630
@Component({
16551631
selector: 'on-push-comp',
1656-
changeDetection: ChangeDetectionStrategy.OnPush,
16571632
template: `<p>{{ text }}</p>`,
16581633
standalone: false,
16591634
})
@@ -1705,7 +1680,6 @@ describe('change detection', () => {
17051680
it(`should not be able to mark component as dirty from within ${hookName}`, () => {
17061681
@Component({
17071682
selector: 'on-push-comp',
1708-
changeDetection: ChangeDetectionStrategy.OnPush,
17091683
template: `<p>{{ text }}</p>`,
17101684
standalone: false,
17111685
})

0 commit comments

Comments
 (0)