feat: remove angular attributes added to the container

BREAKING CHANGE:

Angular adds the attributes ng-version and id to the container, these will be removed
This behavior can be disabled with the removeAngularAttributes property

`	s
await render(HelloComponent, {
  removeAngularAttributes: false,
});
`

Author: timdeschryver

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

@@ -263,6 +263,20 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    * })
    */
   routes?: Routes;
+
+  /**
+   * @description
+   * Removes the Angular attributes (ng-version, and id) from the fixture.
+   *
+   * @default
+   * `false`
+   *
+   * @example
+   * const component = await render(AppComponent, {
+   *  removeAngularAttributes: true
+   * })
+   */
+  removeAngularAttributes?: boolean;
 }
 
 export interface RenderDirectiveOptions<DirectiveType, WrapperType, Q extends Queries = typeof queries>

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

@@ -18,13 +18,7 @@ import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './
 import { createSelectOptions, createType } from './user-events';
 
 @Component({ selector: 'wrapper-component', template: '' })
-class WrapperComponent implements OnInit {
-  constructor(private elementRef: ElementRef) {}
-
-  ngOnInit() {
-    this.elementRef.nativeElement.removeAttribute('ng-version');
-  }
-}
+class WrapperComponent {}
 
 export async function render<ComponentType>(
   component: Type<ComponentType>,
@@ -52,6 +46,7 @@ export async function render<SutType, WrapperType = SutType>(
     componentProviders = [],
     excludeComponentDeclaration = false,
     routes,
+    removeAngularAttributes = true,
   } = renderOptions as RenderDirectiveOptions<SutType, WrapperType>;
 
   TestBed.configureTestingModule({
@@ -73,6 +68,14 @@ export async function render<SutType, WrapperType = SutType>(
   const fixture = createComponentFixture(sut, { template, wrapper });
   setComponentProperties(fixture, { componentProperties });
 
+  if (removeAngularAttributes) {
+    fixture.nativeElement.removeAttribute('ng-version');
+    const idAttribute = fixture.nativeElement.getAttribute('id');
+    if (idAttribute && idAttribute.startsWith('root')) {
+      fixture.nativeElement.removeAttribute('id');
+    }
+  }
+
   await TestBed.compileComponents();
 
   let isAlive = true;

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

@@ -77,3 +77,33 @@ test('overrides output properties', async () => {
   component.click(component.getByText('on'));
   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>',
+    });
+
+    expect(document.querySelector('[ng-version]')).toBeNull();
+    expect(document.querySelector('[id]')).toBeNull();
+  });
+
+  test('can be disabled', async () => {
+    await render(OnOffDirective, {
+      template: '<div onOff (clicked)="clicked($event)"></div>',
+      removeAngularAttributes: false,
+    });
+
+    expect(document.querySelector('[ng-version]')).not.toBeNull();
+    expect(document.querySelector('[id]')).not.toBeNull();
+  });
+});

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

@@ -20,6 +20,24 @@ test('creates queries and events', async () => {
   component.click(component.getByText('button'));
 });
 
+describe('removeAngularAttributes', () => {
+  test('should remove angular attribute', async () => {
+    await render(FixtureComponent);
+
+    expect(document.querySelector('[ng-version]')).toBeNull();
+    expect(document.querySelector('[id]')).toBeNull();
+  });
+
+  test('can be disabled', async () => {
+    await render(FixtureComponent, {
+      removeAngularAttributes: false,
+    });
+
+    expect(document.querySelector('[ng-version]')).not.toBeNull();
+    expect(document.querySelector('[id]')).not.toBeNull();
+  });
+});
+
 @NgModule({
   declarations: [FixtureComponent],
 })