revert cleanup changes

Author: timdeschryver

projects/testing-library/src/lib/models.ts

@@ -451,6 +451,20 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    */
   initialRoute?: string;
 
+  /**
+   * @description
+   * Removes the Angular attributes (ng-version, and root-id) from the fixture.
+   *
+   * @default
+   * `false`
+   *
+   * @example
+   * await render(AppComponent, {
+   *  removeAngularAttributes: true
+   * })
+   */
+  removeAngularAttributes?: boolean;
+
   /**
    * @description
    * Callback to configure the testbed before the compilation.

projects/testing-library/src/lib/testing-library.ts

@@ -76,6 +76,7 @@ export async function render<SutType, WrapperType = SutType>(
     childComponentOverrides = [],
     componentImports,
     excludeComponentDeclaration = false,
+    removeAngularAttributes = false,
     routes = [],
     defaultImports = [],
     initialRoute = '',
@@ -226,6 +227,14 @@ export async function render<SutType, WrapperType = SutType>(
       subscribedOutputs = subscribeToComponentOutputs(createdFixture, subscribeTo);
     }
 
+    if (removeAngularAttributes) {
+      createdFixture.nativeElement.removeAttribute('ng-version');
+      const idAttribute = createdFixture.nativeElement.getAttribute('id');
+      if (idAttribute?.startsWith('root')) {
+        createdFixture.nativeElement.removeAttribute('id');
+      }
+    }
+
     mountedFixtures.add(createdFixture);
 
     if (hasOnChangesHook(createdFixture.componentInstance) && Object.keys(properties).length > 0) {
@@ -619,7 +628,19 @@ async function waitForElementToBeRemovedWrapper<T>(
 }
 
 function cleanup() {
-  mountedFixtures.clear();
+  mountedFixtures.forEach(cleanupAtFixture);
+}
+
+function cleanupAtFixture(fixture: ComponentFixture<any>) {
+  fixture.destroy();
+
+  if (!fixture.nativeElement.getAttribute('ng-version') && fixture.nativeElement.parentNode === document.body) {
+    document.body.removeChild(fixture.nativeElement);
+  } else if (!fixture.nativeElement.getAttribute('id') && document.body.children?.[0] === fixture.nativeElement) {
+    document.body.removeChild(fixture.nativeElement);
+  }
+
+  mountedFixtures.delete(fixture);
 }
 
 // if we're running in a test runner that supports afterEach
@@ -670,6 +691,7 @@ function safeDetectChanges<T>(fixture: ComponentFixture<T>) {
   try {
     const appRef = fixture.componentRef.injector.get(ApplicationRef);
     if (!appRef.destroyed) {
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
     }
   } catch (err: any) {

projects/testing-library/src/tests/wait-for-element-to-be-removed.spec.ts

@@ -1,18 +1,18 @@
-import { Component, OnInit, signal } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { render, screen, waitForElementToBeRemoved } from '../public_api';
 import { timer } from 'rxjs';
 import { test, expect } from 'vitest';
 import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'atl-fixture',
-  template: ` <div *ngIf="visible()" data-testid="im-here">👋</div> `,
+  template: ` <div *ngIf="visible" data-testid="im-here">👋</div> `,
   imports: [NgIf],
 })
 class FixtureComponent implements OnInit {
-  visible = signal(true);
+  visible = true;
   ngOnInit() {
-    timer(500).subscribe(() => this.visible.set(false));
+    timer(500).subscribe(() => (this.visible = false));
   }
 }
 

projects/testing-library/src/tests/wait-for.spec.ts

@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
 import { timer } from 'rxjs';
 import { test } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '../public_api';
@@ -7,14 +7,14 @@ import { render, screen, waitFor, fireEvent } from '../public_api';
   selector: 'atl-fixture',
   template: `
     <button data-testid="button" (click)="load()">Load</button>
-    <div>{{ result() }}</div>
+    <div>{{ result }}</div>
   `,
 })
 class FixtureComponent {
-  result = signal('');
+  result = '';
 
   load() {
-    timer(500).subscribe(() => this.result.set('Success'));
+    timer(500).subscribe(() => (this.result = 'Success'));
   }
 }