fix: opt-in to removing ng attributes

Author: timdeschryver

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

@@ -266,14 +266,14 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
 
   /**
    * @description
-   * Removes the Angular attributes (ng-version, and id) from the fixture.
+   * Removes the Angular attributes (ng-version, and root-id) from the fixture.
    *
    * @default
-   * `true`
+   * `false`
    *
    * @example
    * const component = await render(AppComponent, {
-   *  removeAngularAttributes: false
+   *  removeAngularAttributes: true
    * })
    */
   removeAngularAttributes?: boolean;

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

@@ -48,7 +48,7 @@ export async function render<SutType, WrapperType = SutType>(
     componentProviders = [],
     excludeComponentDeclaration = false,
     routes,
-    removeAngularAttributes = true,
+    removeAngularAttributes = false,
   } = renderOptions as RenderDirectiveOptions<SutType, WrapperType>;
 
   TestBed.configureTestingModule({

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

@@ -1,18 +1,43 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { render } from '../src/public_api';
 
 @Component({
   selector: 'fixture',
   template: `
-    Hello!
+    Hello {{ name }}!
   `,
 })
-class FixtureComponent {}
+class FixtureComponent {
+  @Input() name: string;
+}
 
-test('first', async () => {
-  await render(FixtureComponent);
+describe('Angular auto clean up - previous components only get cleanup up on init (based on root-id)', () => {
+  test('first', async () => {
+    await render(FixtureComponent, {
+      componentProperties: {
+        name: 'first',
+      },
+    });
+  });
+
+  test('second', async () => {
+    await render(FixtureComponent, {
+      componentProperties: {
+        name: 'second',
+      },
+    });
+    expect(document.body.innerHTML).not.toContain('first');
+  });
 });
 
-test('second', () => {
-  expect(document.body.innerHTML).toEqual('');
+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.innerHTML).toEqual('');
+  });
 });

projects/testing-library/tests/directive.spec.ts

@@ -78,29 +78,20 @@ test('overrides output properties', async () => {
   expect(clicked).toHaveBeenCalledWith('off');
 });
 
-test('should remove angular attributes', async () => {
-  await render(OnOffDirective, {
-    template: '<div onOff (clicked)="clicked($event)"></div>',
-  });
-
-  expect(document.querySelector('[ng-version]')).toBeNull();
-  expect(document.querySelector('[id]')).toBeNull();
-});
-
 describe('removeAngularAttributes', () => {
   test('should remove angular attributes', async () => {
     await render(OnOffDirective, {
       template: '<div onOff (clicked)="clicked($event)"></div>',
+      removeAngularAttributes: true,
     });
 
     expect(document.querySelector('[ng-version]')).toBeNull();
     expect(document.querySelector('[id]')).toBeNull();
   });
 
-  test('can be disabled', async () => {
+  test('is disabled by default', async () => {
     await render(OnOffDirective, {
       template: '<div onOff (clicked)="clicked($event)"></div>',
-      removeAngularAttributes: false,
     });
 
     expect(document.querySelector('[ng-version]')).not.toBeNull();

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

@@ -22,13 +22,15 @@ test('creates queries and events', async () => {
 
 describe('removeAngularAttributes', () => {
   test('should remove angular attribute', async () => {
-    await render(FixtureComponent);
+    await render(FixtureComponent, {
+      removeAngularAttributes: true,
+    });
 
     expect(document.querySelector('[ng-version]')).toBeNull();
     expect(document.querySelector('[id]')).toBeNull();
   });
 
-  test('can be disabled', async () => {
+  test('is disabled by default', async () => {
     await render(FixtureComponent, {
       removeAngularAttributes: false,
     });