feat: remove removeAngularAttributes

Author: timdeschryver

.github/workflows/ci.yml

@@ -36,10 +36,13 @@ jobs:
         run: npm install --force
       - name: build
         run: npm run build -- --skip-nx-cache
+        timeout-minutes: 5
       - name: test
         run: npm run test
+        timeout-minutes: 5
       - name: lint
         run: npm run lint
+        timeout-minutes: 5
       - name: Release
         if: github.repository == 'testing-library/angular-testing-library' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta')
         run: npx semantic-release

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

@@ -451,20 +451,6 @@ 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

@@ -12,6 +12,7 @@ import {
   Type,
   isStandalone,
   Binding,
+  ApplicationRef,
 } from '@angular/core';
 import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed, tick } from '@angular/core/testing';
 import { NavigationExtras, Router } from '@angular/router';
@@ -76,7 +77,6 @@ export async function render<SutType, WrapperType = SutType>(
     componentImports,
     excludeComponentDeclaration = false,
     routes = [],
-    removeAngularAttributes = false,
     defaultImports = [],
     initialRoute = '',
     deferBlockStates = undefined,
@@ -226,30 +226,15 @@ 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);
 
-    let isAlive = true;
-    createdFixture.componentRef.onDestroy(() => {
-      isAlive = false;
-    });
-
     if (hasOnChangesHook(createdFixture.componentInstance) && Object.keys(properties).length > 0) {
       const changes = getChangesObj(null, componentProperties);
       createdFixture.componentInstance.ngOnChanges(changes);
     }
 
     detectChanges = () => {
-      if (isAlive) {
-        createdFixture.detectChanges();
-      }
+      safeDetectChanges(createdFixture);
     };
 
     if (detectChangesOnRender) {
@@ -634,26 +619,13 @@ async function waitForElementToBeRemovedWrapper<T>(
 }
 
 function cleanup() {
-  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);
+  mountedFixtures.clear();
 }
 
 // if we're running in a test runner that supports afterEach
 // then we'll automatically run cleanup afterEach test
 // this ensures that tests run in isolation from each other
 // if you don't like this, set the ATL_SKIP_AUTO_CLEANUP env variable to 'true'
-declare const afterEach: any;
 if (typeof process === 'undefined' || !process?.env?.['ATL_SKIP_AUTO_CLEANUP']) {
   if (typeof afterEach === 'function') {
     afterEach(() => {
@@ -690,12 +662,19 @@ function replaceFindWithFindAndDetectChanges<T extends Record<string, any>>(orig
  */
 function detectChangesForMountedFixtures() {
   for (const fixture of mountedFixtures) {
-    try {
+    safeDetectChanges(fixture);
+  }
+}
+
+function safeDetectChanges<T>(fixture: ComponentFixture<T>) {
+  try {
+    const appRef = fixture.componentRef.injector.get(ApplicationRef);
+    if (!appRef.destroyed) {
       fixture.detectChanges();
-    } catch (err: any) {
-      if (!err.message.startsWith('ViewDestroyedError')) {
-        throw err;
-      }
+    }
+  } catch (err: any) {
+    if (!err.message.startsWith('ViewDestroyedError') && !err.message.startsWith('NG0205')) {
+      throw err;
     }
   }
 }

projects/testing-library/src/tests/auto-cleanup.spec.ts

@@ -10,7 +10,7 @@ class FixtureComponent {
   @Input() name = '';
 }
 
-describe('Angular auto clean up - previous components only get cleanup up on init (based on root-id)', () => {
+describe('Angular auto clean up - previous components only get cleanup up on init', () => {
   test('first', async () => {
     await render(FixtureComponent, {
       componentProperties: {
@@ -28,15 +28,3 @@ describe('Angular auto clean up - previous components only get cleanup up on ini
     expect(document.body.innerHTML).not.toContain('first');
   });
 });
-
-describe('ATL auto clean up - after each test the containers get removed', () => {
-  test('first', async () => {
-    await render(FixtureComponent, {
-      removeAngularAttributes: true,
-    });
-  });
-
-  test('second', () => {
-    expect(document.body).toBeEmptyDOMElement();
-  });
-});

projects/testing-library/src/tests/issues/issue-398-component-without-host-id.spec.ts

@@ -13,7 +13,7 @@ test('should re-create the app', async () => {
 });
 
 @Component({
-  selector: 'atl-fixture',
+  selector: 'atl-fixture-398',
   standalone: true,
   template: '<h1>My title</h1>',
   host: {

projects/testing-library/src/tests/render-template.spec.ts

@@ -114,27 +114,6 @@ test('overrides output properties', async () => {
   expect(clicked).toHaveBeenCalledWith('off');
 });
 
-describe('removeAngularAttributes', () => {
-  it('should remove angular attributes', async () => {
-    await render('<div onOff (clicked)="clicked($event)"></div>', {
-      imports: [OnOffDirective],
-      removeAngularAttributes: true,
-    });
-
-    expect(document.querySelector('[ng-version]')).toBeNull();
-    expect(document.querySelector('[id]')).toBeNull();
-  });
-
-  it('is disabled by default', async () => {
-    await render('<div onOff (clicked)="clicked($event)"></div>', {
-      imports: [OnOffDirective],
-    });
-
-    expect(document.querySelector('[ng-version]')).not.toBeNull();
-    expect(document.querySelector('[id]')).not.toBeNull();
-  });
-});
-
 test('updates properties and invokes change detection', async () => {
   const view = await render<{ value: string }>('<div [update]="value" ></div>', {
     imports: [UpdateInputDirective],

projects/testing-library/src/tests/render.spec.ts

@@ -141,26 +141,6 @@ describe('childComponentOverrides', () => {
   });
 });
 
-describe('removeAngularAttributes', () => {
-  test('should remove angular attribute', async () => {
-    await render(FixtureComponent, {
-      removeAngularAttributes: true,
-    });
-
-    expect(document.querySelector('[ng-version]')).toBeNull();
-    expect(document.querySelector('[id]')).toBeNull();
-  });
-
-  test('is disabled by default', async () => {
-    await render(FixtureComponent, {
-      removeAngularAttributes: false,
-    });
-
-    expect(document.querySelector('[ng-version]')).not.toBeNull();
-    expect(document.querySelector('[id]')).not.toBeNull();
-  });
-});
-
 describe('componentOutputs', () => {
   test('should set passed event emitter to the component', async () => {
     @Component({ template: `` })
@@ -184,22 +164,22 @@ describe('componentOutputs', () => {
 });
 
 describe('on', () => {
-  @Component({ template: `` })
+  @Component({ selector: 'atl-test-fixture-with-event-emitter', template: `` })
   class TestFixtureWithEventEmitterComponent {
     @Output() readonly event = new EventEmitter<void>();
   }
 
-  @Component({ template: `` })
+  @Component({ selector: 'atl-test-fixture-with-derived-event', template: `` })
   class TestFixtureWithDerivedEventComponent {
     @Output() readonly event = fromEvent<MouseEvent>(inject(ElementRef).nativeElement, 'click');
   }
 
-  @Component({ template: `` })
+  @Component({ selector: 'atl-test-fixture-with-functional-output', template: `` })
   class TestFixtureWithFunctionalOutputComponent {
     readonly event = output<string>();
   }
 
-  @Component({ template: `` })
+  @Component({ selector: 'atl-test-fixture-with-functional-derived-event', template: `` })
   class TestFixtureWithFunctionalDerivedEventComponent {
     readonly event = outputFromObservable(fromEvent<MouseEvent>(inject(ElementRef).nativeElement, 'click'));
   }