diff --git a/packages/platform-browser/test/dom/dom_renderer_spec.ts b/packages/platform-browser/test/dom/dom_renderer_spec.ts
index 2696e976d94..2b076308a6c 100644
--- a/packages/platform-browser/test/dom/dom_renderer_spec.ts
+++ b/packages/platform-browser/test/dom/dom_renderer_spec.ts
@@ -5,6 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
+import {NgIf} from '@angular/common';
import {ChangeDetectionStrategy} from '@angular/compiler';
import {Component, Renderer2, ViewEncapsulation} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
@@ -28,18 +29,6 @@ describe('DefaultDomRendererV2', () => {
let renderer: Renderer2;
beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [
- TestCmp,
- SomeApp,
- IsolatedShadowComponentParentApp,
- SomeAppForCleanUp,
- CmpEncapsulationEmulated,
- CmpEncapsulationNone,
- CmpEncapsulationShadow,
- CmpEncapsulationIsolatedShadowWithChildren,
- ],
- });
renderer = TestBed.createComponent(TestCmp).componentInstance.renderer;
});
@@ -113,9 +102,9 @@ describe('DefaultDomRendererV2', () => {
});
});
- it('should style non-descendant components correctly with different types of encapsulation', () => {
+ it('should style non-descendant components correctly with different types of encapsulation', async () => {
const fixture = TestBed.createComponent(SomeApp);
- fixture.detectChanges();
+ await fixture.whenStable();
const cmp = fixture.debugElement.query(By.css('cmp-shadow')).nativeElement;
const shadowRoot = cmp.shadowRoot;
@@ -129,9 +118,9 @@ describe('DefaultDomRendererV2', () => {
expect(window.getComputedStyle(none).color).toEqual('rgb(0, 255, 0)');
});
- it('should encapsulate shadow DOM components, with child components inheriting from shadow styles not global styles', () => {
+ it('should encapsulate shadow DOM components, with child components inheriting from shadow styles not global styles', async () => {
const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
- fixture.detectChanges();
+ await fixture.whenStable();
const shadowcmp = fixture.debugElement.query(By.css('cmp-shadow-children')).nativeElement;
const shadowRoot = shadowcmp.shadowRoot;
@@ -145,9 +134,9 @@ describe('DefaultDomRendererV2', () => {
expect(window.getComputedStyle(none).color).toEqual('rgb(255, 0, 0)');
});
- it('child components of shadow components should inherit browser defaults rather than their component styles', () => {
+ it('child components of shadow components should inherit browser defaults rather than their component styles', async () => {
const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
- fixture.detectChanges();
+ await fixture.whenStable();
const shadowcmp = fixture.debugElement.query(By.css('cmp-shadow-children')).nativeElement;
const shadowRoot = shadowcmp.shadowRoot;
@@ -161,9 +150,9 @@ describe('DefaultDomRendererV2', () => {
expect(window.getComputedStyle(none).backgroundColor).toEqual('rgba(0, 0, 0, 0)');
});
- it('shadow components should not be polluted by child components styles when using ExperimentalIsolatedShadowDom', () => {
+ it('shadow components should not be polluted by child components styles when using ExperimentalIsolatedShadowDom', async () => {
const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
- fixture.detectChanges();
+ await fixture.whenStable();
const cmp = fixture.debugElement.query(By.css('cmp-shadow-children')).nativeElement;
const shadowRoot = cmp.shadowRoot;
@@ -197,7 +186,7 @@ describe('DefaultDomRendererV2', () => {
TestBed.resetTestingModule();
TestBed.configureTestingModule({
- declarations: [SomeAppForCleanUp, CmpEncapsulationEmulated, CmpEncapsulationNone],
+ imports: [SomeAppForCleanUp],
providers: [
{
provide: REMOVE_STYLES_ON_COMPONENT_DESTROY,
@@ -212,21 +201,22 @@ describe('DefaultDomRendererV2', () => {
const compInstance = fixture.componentInstance;
compInstance.showEmulatedComponents = true;
- fixture.detectChanges();
+ fixture.changeDetectorRef.markForCheck();
+ await fixture.whenStable();
// verify style is in DOM
expect(await styleCount(fixture, '.emulated')).toBe(1);
// Remove a single instance of the component.
compInstance.componentOneInstanceHidden = true;
fixture.changeDetectorRef.markForCheck();
- fixture.detectChanges();
+ await fixture.whenStable();
// Verify style is still in DOM
expect(await styleCount(fixture, '.emulated')).toBe(1);
// Hide all instances of the component
compInstance.componentTwoInstanceHidden = true;
fixture.changeDetectorRef.markForCheck();
- fixture.detectChanges();
+ await fixture.whenStable();
// Verify style is still in DOM
expect(await styleCount(fixture, '.emulated')).toBe(1);
@@ -237,21 +227,22 @@ describe('DefaultDomRendererV2', () => {
const compInstance = fixture.componentInstance;
compInstance.showEmulatedComponents = false;
- fixture.detectChanges();
+ fixture.changeDetectorRef.markForCheck();
+ await fixture.whenStable();
// verify style is in DOM
expect(await styleCount(fixture, '.none')).toBe(1);
// Remove a single instance of the component.
compInstance.componentOneInstanceHidden = true;
fixture.changeDetectorRef.markForCheck();
- fixture.detectChanges();
+ await fixture.whenStable();
// Verify style is still in DOM
expect(await styleCount(fixture, '.none')).toBe(1);
// Hide all instances of the component
compInstance.componentTwoInstanceHidden = true;
fixture.changeDetectorRef.markForCheck();
- fixture.detectChanges();
+ await fixture.whenStable();
// Verify style is still in DOM
expect(await styleCount(fixture, '.none')).toBe(1);
@@ -263,21 +254,22 @@ describe('DefaultDomRendererV2', () => {
const fixture = TestBed.createComponent(SomeAppForCleanUp);
const compInstance = fixture.componentInstance;
compInstance.showEmulatedComponents = true;
- fixture.detectChanges();
+ fixture.changeDetectorRef.markForCheck();
+ await fixture.whenStable();
// verify style is in DOM
expect(await styleCount(fixture, '.emulated')).toBe(1);
// Remove a single instance of the component.
compInstance.componentOneInstanceHidden = true;
fixture.changeDetectorRef.markForCheck();
- fixture.detectChanges();
+ await fixture.whenStable();
// Verify style is still in DOM
expect(await styleCount(fixture, '.emulated')).toBe(1);
// Hide all instances of the component
compInstance.componentTwoInstanceHidden = true;
fixture.changeDetectorRef.markForCheck();
- fixture.detectChanges();
+ await fixture.whenStable();
// Verify style is not in DOM
expect(await styleCount(fixture, '.emulated')).toBe(0);
@@ -288,21 +280,22 @@ describe('DefaultDomRendererV2', () => {
const compInstance = fixture.componentInstance;
compInstance.showEmulatedComponents = false;
- fixture.detectChanges();
+ fixture.changeDetectorRef.markForCheck();
+ await fixture.whenStable();
// verify style is in DOM
expect(await styleCount(fixture, '.none')).toBe(1);
// Remove a single instance of the component.
compInstance.componentOneInstanceHidden = true;
fixture.changeDetectorRef.markForCheck();
- fixture.detectChanges();
+ await fixture.whenStable();
// Verify style is still in DOM
expect(await styleCount(fixture, '.none')).toBe(1);
// Hide all instances of the component
compInstance.componentTwoInstanceHidden = true;
fixture.changeDetectorRef.markForCheck();
- fixture.detectChanges();
+ await fixture.whenStable();
// Verify style is not in DOM
expect(await styleCount(fixture, '.emulated')).toBe(0);
@@ -323,15 +316,12 @@ describe('DefaultDomRendererV2', () => {
});
});
- it('should update an external sourceMappingURL by prepending the baseHref as a prefix', () => {
+ it('should update an external sourceMappingURL by prepending the baseHref as a prefix', async () => {
document.head.innerHTML = `