Sitelet https://github.com/angular/angular/commit/ec372d60294ff9b6137bf253201ce8341bd80f42
Skip to content

Commit ec372d6

Browse files
SkyZeroZxamishne
SkyZeroZx
authored and
amishne
committed
refactor(platform-browser): modernize DOM renderer tests
Migrate fixtures to standalone components and await zoneless updates
1 parent 9e37a58 commit ec372d6

1 file changed

Lines changed: 42 additions & 57 deletions

File tree

‎packages/platform-browser/test/dom/dom_renderer_spec.ts‎

Lines changed: 42 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.dev/license
77
*/
8+
import {NgIf} from '@angular/common';
89
import {ChangeDetectionStrategy} from '@angular/compiler';
910
import {Component, Renderer2, ViewEncapsulation} from '@angular/core';
1011
import {ComponentFixture, TestBed} from '@angular/core/testing';
@@ -28,18 +29,6 @@ describe('DefaultDomRendererV2', () => {
2829
let renderer: Renderer2;
2930

3031
beforeEach(() => {
31-
TestBed.configureTestingModule({
32-
declarations: [
33-
TestCmp,
34-
SomeApp,
35-
IsolatedShadowComponentParentApp,
36-
SomeAppForCleanUp,
37-
CmpEncapsulationEmulated,
38-
CmpEncapsulationNone,
39-
CmpEncapsulationShadow,
40-
CmpEncapsulationIsolatedShadowWithChildren,
41-
],
42-
});
4332
renderer = TestBed.createComponent(TestCmp).componentInstance.renderer;
4433
});
4534

@@ -113,9 +102,9 @@ describe('DefaultDomRendererV2', () => {
113102
});
114103
});
115104

116-
it('should style non-descendant components correctly with different types of encapsulation', () => {
105+
it('should style non-descendant components correctly with different types of encapsulation', async () => {
117106
const fixture = TestBed.createComponent(SomeApp);
118-
fixture.detectChanges();
107+
await fixture.whenStable();
119108

120109
const cmp = fixture.debugElement.query(By.css('cmp-shadow')).nativeElement;
121110
const shadowRoot = cmp.shadowRoot;
@@ -129,9 +118,9 @@ describe('DefaultDomRendererV2', () => {
129118
expect(window.getComputedStyle(none).color).toEqual('rgb(0, 255, 0)');
130119
});
131120

132-
it('should encapsulate shadow DOM components, with child components inheriting from shadow styles not global styles', () => {
121+
it('should encapsulate shadow DOM components, with child components inheriting from shadow styles not global styles', async () => {
133122
const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
134-
fixture.detectChanges();
123+
await fixture.whenStable();
135124
const shadowcmp = fixture.debugElement.query(By.css('cmp-shadow-children')).nativeElement;
136125
const shadowRoot = shadowcmp.shadowRoot;
137126

@@ -145,9 +134,9 @@ describe('DefaultDomRendererV2', () => {
145134
expect(window.getComputedStyle(none).color).toEqual('rgb(255, 0, 0)');
146135
});
147136

148-
it('child components of shadow components should inherit browser defaults rather than their component styles', () => {
137+
it('child components of shadow components should inherit browser defaults rather than their component styles', async () => {
149138
const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
150-
fixture.detectChanges();
139+
await fixture.whenStable();
151140

152141
const shadowcmp = fixture.debugElement.query(By.css('cmp-shadow-children')).nativeElement;
153142
const shadowRoot = shadowcmp.shadowRoot;
@@ -161,9 +150,9 @@ describe('DefaultDomRendererV2', () => {
161150
expect(window.getComputedStyle(none).backgroundColor).toEqual('rgba(0, 0, 0, 0)');
162151
});
163152

164-
it('shadow components should not be polluted by child components styles when using ExperimentalIsolatedShadowDom', () => {
153+
it('shadow components should not be polluted by child components styles when using ExperimentalIsolatedShadowDom', async () => {
165154
const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
166-
fixture.detectChanges();
155+
await fixture.whenStable();
167156

168157
const cmp = fixture.debugElement.query(By.css('cmp-shadow-children')).nativeElement;
169158
const shadowRoot = cmp.shadowRoot;
@@ -197,7 +186,7 @@ describe('DefaultDomRendererV2', () => {
197186
TestBed.resetTestingModule();
198187

199188
TestBed.configureTestingModule({
200-
declarations: [SomeAppForCleanUp, CmpEncapsulationEmulated, CmpEncapsulationNone],
189+
imports: [SomeAppForCleanUp],
201190
providers: [
202191
{
203192
provide: REMOVE_STYLES_ON_COMPONENT_DESTROY,
@@ -212,21 +201,22 @@ describe('DefaultDomRendererV2', () => {
212201
const compInstance = fixture.componentInstance;
213202
compInstance.showEmulatedComponents = true;
214203

215-
fixture.detectChanges();
204+
fixture.changeDetectorRef.markForCheck();
205+
await fixture.whenStable();
216206
// verify style is in DOM
217207
expect(await styleCount(fixture, '.emulated')).toBe(1);
218208

219209
// Remove a single instance of the component.
220210
compInstance.componentOneInstanceHidden = true;
221211
fixture.changeDetectorRef.markForCheck();
222-
fixture.detectChanges();
212+
await fixture.whenStable();
223213
// Verify style is still in DOM
224214
expect(await styleCount(fixture, '.emulated')).toBe(1);
225215

226216
// Hide all instances of the component
227217
compInstance.componentTwoInstanceHidden = true;
228218
fixture.changeDetectorRef.markForCheck();
229-
fixture.detectChanges();
219+
await fixture.whenStable();
230220

231221
// Verify style is still in DOM
232222
expect(await styleCount(fixture, '.emulated')).toBe(1);
@@ -237,21 +227,22 @@ describe('DefaultDomRendererV2', () => {
237227
const compInstance = fixture.componentInstance;
238228
compInstance.showEmulatedComponents = false;
239229

240-
fixture.detectChanges();
230+
fixture.changeDetectorRef.markForCheck();
231+
await fixture.whenStable();
241232
// verify style is in DOM
242233
expect(await styleCount(fixture, '.none')).toBe(1);
243234

244235
// Remove a single instance of the component.
245236
compInstance.componentOneInstanceHidden = true;
246237
fixture.changeDetectorRef.markForCheck();
247-
fixture.detectChanges();
238+
await fixture.whenStable();
248239
// Verify style is still in DOM
249240
expect(await styleCount(fixture, '.none')).toBe(1);
250241

251242
// Hide all instances of the component
252243
compInstance.componentTwoInstanceHidden = true;
253244
fixture.changeDetectorRef.markForCheck();
254-
fixture.detectChanges();
245+
await fixture.whenStable();
255246

256247
// Verify style is still in DOM
257248
expect(await styleCount(fixture, '.none')).toBe(1);
@@ -263,21 +254,22 @@ describe('DefaultDomRendererV2', () => {
263254
const fixture = TestBed.createComponent(SomeAppForCleanUp);
264255
const compInstance = fixture.componentInstance;
265256
compInstance.showEmulatedComponents = true;
266-
fixture.detectChanges();
257+
fixture.changeDetectorRef.markForCheck();
258+
await fixture.whenStable();
267259
// verify style is in DOM
268260
expect(await styleCount(fixture, '.emulated')).toBe(1);
269261

270262
// Remove a single instance of the component.
271263
compInstance.componentOneInstanceHidden = true;
272264
fixture.changeDetectorRef.markForCheck();
273-
fixture.detectChanges();
265+
await fixture.whenStable();
274266
// Verify style is still in DOM
275267
expect(await styleCount(fixture, '.emulated')).toBe(1);
276268

277269
// Hide all instances of the component
278270
compInstance.componentTwoInstanceHidden = true;
279271
fixture.changeDetectorRef.markForCheck();
280-
fixture.detectChanges();
272+
await fixture.whenStable();
281273

282274
// Verify style is not in DOM
283275
expect(await styleCount(fixture, '.emulated')).toBe(0);
@@ -288,21 +280,22 @@ describe('DefaultDomRendererV2', () => {
288280
const compInstance = fixture.componentInstance;
289281
compInstance.showEmulatedComponents = false;
290282

291-
fixture.detectChanges();
283+
fixture.changeDetectorRef.markForCheck();
284+
await fixture.whenStable();
292285
// verify style is in DOM
293286
expect(await styleCount(fixture, '.none')).toBe(1);
294287

295288
// Remove a single instance of the component.
296289
compInstance.componentOneInstanceHidden = true;
297290
fixture.changeDetectorRef.markForCheck();
298-
fixture.detectChanges();
291+
await fixture.whenStable();
299292
// Verify style is still in DOM
300293
expect(await styleCount(fixture, '.none')).toBe(1);
301294

302295
// Hide all instances of the component
303296
compInstance.componentTwoInstanceHidden = true;
304297
fixture.changeDetectorRef.markForCheck();
305-
fixture.detectChanges();
298+
await fixture.whenStable();
306299

307300
// Verify style is not in DOM
308301
expect(await styleCount(fixture, '.emulated')).toBe(0);
@@ -323,15 +316,12 @@ describe('DefaultDomRendererV2', () => {
323316
});
324317
});
325318

326-
it('should update an external sourceMappingURL by prepending the baseHref as a prefix', () => {
319+
it('should update an external sourceMappingURL by prepending the baseHref as a prefix', async () => {
327320
document.head.innerHTML = `<base href="/base/" />`;
328321
TestBed.resetTestingModule();
329-
TestBed.configureTestingModule({
330-
declarations: [CmpEncapsulationNoneWithSourceMap],
331-
});
332322

333323
const fixture = TestBed.createComponent(CmpEncapsulationNoneWithSourceMap);
334-
fixture.detectChanges();
324+
await fixture.whenStable();
335325

336326
expect(document.head.querySelector('style')?.textContent).toContain(
337327
'/*# sourceMappingURL=/base/cmp-none.css.map */',
@@ -364,7 +354,7 @@ describe('DefaultDomRendererV2', () => {
364354
providers: [provideCssVarNamespacing('my-namespace')],
365355
});
366356
const fixture = TestBed.createComponent(CmpNamespaceEmulated);
367-
fixture.detectChanges();
357+
await fixture.whenStable();
368358

369359
expect(await styleCount(fixture, 'var(--my-namespace_foo)')).toBe(1);
370360
});
@@ -387,12 +377,12 @@ describe('DefaultDomRendererV2', () => {
387377
providers: [provideCssVarNamespacing('my-namespace')],
388378
});
389379
const fixture = TestBed.createComponent(CmpNamespaceNone);
390-
fixture.detectChanges();
380+
await fixture.whenStable();
391381

392382
expect(await styleCount(fixture, 'var(--my-namespace_foo)')).toBe(1);
393383
});
394384

395-
it('should replace `%NS%` in styles for `ShadowDom` encapsulation', () => {
385+
it('should replace `%NS%` in styles for `ShadowDom` encapsulation', async () => {
396386
@Component({
397387
selector: 'cmp-namespace-shadow',
398388
template: '',
@@ -410,7 +400,7 @@ describe('DefaultDomRendererV2', () => {
410400
providers: [provideCssVarNamespacing('my-namespace')],
411401
});
412402
const fixture = TestBed.createComponent(CmpNamespaceShadow);
413-
fixture.detectChanges();
403+
await fixture.whenStable();
414404

415405
const styles = fixture.nativeElement.shadowRoot.querySelectorAll(
416406
'style',
@@ -441,7 +431,7 @@ describe('DefaultDomRendererV2', () => {
441431
providers: [], // No `provideCssVarNamespacing`.
442432
});
443433
const fixture = TestBed.createComponent(CmpNamespaceEmulated);
444-
fixture.detectChanges();
434+
await fixture.whenStable();
445435

446436
expect(await styleCount(fixture, 'var(--foo)')).toBe(1);
447437
});
@@ -464,12 +454,12 @@ describe('DefaultDomRendererV2', () => {
464454
providers: [], // No `provideCssVarNamespacing`.
465455
});
466456
const fixture = TestBed.createComponent(CmpNamespaceNone);
467-
fixture.detectChanges();
457+
await fixture.whenStable();
468458

469459
expect(await styleCount(fixture, 'var(--foo)')).toBe(1);
470460
});
471461

472-
it('should replace `%NS%` in styles for `ShadowDom` encapsulation', () => {
462+
it('should replace `%NS%` in styles for `ShadowDom` encapsulation', async () => {
473463
@Component({
474464
selector: 'cmp-namespace-shadow',
475465
template: '',
@@ -487,7 +477,7 @@ describe('DefaultDomRendererV2', () => {
487477
providers: [], // No `provideCssVarNamespacing`.
488478
});
489479
const fixture = TestBed.createComponent(CmpNamespaceShadow);
490-
fixture.detectChanges();
480+
await fixture.whenStable();
491481

492482
const styles = fixture.nativeElement.shadowRoot.querySelectorAll(
493483
'style',
@@ -500,7 +490,7 @@ describe('DefaultDomRendererV2', () => {
500490
});
501491

502492
describe('style property bindings namespacing', () => {
503-
it('should namespace style property bindings starting with `--`', () => {
493+
it('should namespace style property bindings starting with `--`', async () => {
504494
@Component({
505495
selector: 'cmp-style-prop-namespace',
506496
template: `<div [style.--foo]="'blue'"></div>`,
@@ -513,7 +503,7 @@ describe('DefaultDomRendererV2', () => {
513503
providers: [provideCssVarNamespacing('my-namespace')],
514504
});
515505
const fixture = TestBed.createComponent(CmpStylePropNamespace);
516-
fixture.detectChanges();
506+
await fixture.whenStable();
517507

518508
const div = fixture.nativeElement.querySelector('div');
519509
expect(div.style.getPropertyValue('--my-namespace_foo')).toBe('blue');
@@ -668,7 +658,6 @@ async function styleCount(
668658
`,
669659
],
670660
encapsulation: ViewEncapsulation.Emulated,
671-
standalone: false,
672661
})
673662
class CmpEncapsulationEmulated {}
674663

@@ -684,7 +673,6 @@ class CmpEncapsulationEmulated {}
684673
`,
685674
],
686675
encapsulation: ViewEncapsulation.None,
687-
standalone: false,
688676
})
689677
class CmpEncapsulationNone {}
690678

@@ -702,7 +690,6 @@ class CmpEncapsulationNone {}
702690
`,
703691
],
704692
encapsulation: ViewEncapsulation.None,
705-
standalone: false,
706693
})
707694
class CmpEncapsulationNoneWithSourceMap {}
708695

@@ -717,7 +704,6 @@ class CmpEncapsulationNoneWithSourceMap {}
717704
`,
718705
],
719706
encapsulation: ViewEncapsulation.ShadowDom,
720-
standalone: false,
721707
})
722708
class CmpEncapsulationShadow {}
723709

@@ -735,7 +721,7 @@ class CmpEncapsulationShadow {}
735721
`,
736722
],
737723
encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom,
738-
standalone: false,
724+
imports: [CmpEncapsulationEmulated, CmpEncapsulationNone],
739725
})
740726
class CmpEncapsulationIsolatedShadowWithChildren {}
741727

@@ -746,23 +732,22 @@ class CmpEncapsulationIsolatedShadowWithChildren {}
746732
<cmp-emulated></cmp-emulated>
747733
<cmp-none></cmp-none>
748734
`,
749-
standalone: false,
735+
imports: [CmpEncapsulationShadow, CmpEncapsulationEmulated, CmpEncapsulationNone],
750736
changeDetection: ChangeDetectionStrategy.Eager,
751737
})
752738
export class SomeApp {}
753739

754740
@Component({
755741
selector: 'shadow-parent-app-with-children',
756742
template: ` <cmp-shadow-children></cmp-shadow-children> `,
757-
standalone: false,
743+
imports: [CmpEncapsulationIsolatedShadowWithChildren],
758744
changeDetection: ChangeDetectionStrategy.Eager,
759745
})
760746
export class IsolatedShadowComponentParentApp {}
761747

762748
@Component({
763749
selector: 'test-cmp',
764750
template: '',
765-
standalone: false,
766751
changeDetection: ChangeDetectionStrategy.Eager,
767752
})
768753
class TestCmp {
@@ -778,7 +763,7 @@ class TestCmp {
778763
<cmp-none *ngIf="!componentOneInstanceHidden && !showEmulatedComponents"></cmp-none>
779764
<cmp-none *ngIf="!componentTwoInstanceHidden && !showEmulatedComponents"></cmp-none>
780765
`,
781-
standalone: false,
766+
imports: [NgIf, CmpEncapsulationEmulated, CmpEncapsulationNone],
782767
changeDetection: ChangeDetectionStrategy.Eager,
783768
})
784769
export class SomeAppForCleanUp {

0 commit comments

Comments
 (0)