feat: auto-cleanup

Closes #67

Author: timdeschryver

package.json

@@ -23,16 +23,16 @@
     ]
   },
   "dependencies": {
-    "@angular/animations": "^9.0.0",
-    "@angular/cdk": "^9.0.0",
-    "@angular/common": "^9.0.0",
-    "@angular/compiler": "^9.0.0",
-    "@angular/core": "^9.0.0",
-    "@angular/forms": "^9.0.0",
-    "@angular/material": "^9.0.0",
-    "@angular/platform-browser": "^9.0.0",
-    "@angular/platform-browser-dynamic": "^9.0.0",
-    "@angular/router": "^9.0.0",
+    "@angular/animations": "^9.0.3",
+    "@angular/cdk": "^9.1.0",
+    "@angular/common": "^9.0.3",
+    "@angular/compiler": "^9.0.3",
+    "@angular/core": "^9.0.3",
+    "@angular/forms": "^9.0.3",
+    "@angular/material": "^9.1.0",
+    "@angular/platform-browser": "^9.0.3",
+    "@angular/platform-browser-dynamic": "^9.0.3",
+    "@angular/router": "^9.0.3",
     "@ngrx/store": "^8.0.0-rc.0",
     "@phenomnomnominal/tsquery": "^3.0.0",
     "@testing-library/dom": "^6.12.2",
@@ -44,14 +44,14 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.1",
-    "@angular-devkit/build-ng-packagr": "~0.900.1",
-    "@angular/cli": "~9.0.1",
-    "@angular/compiler-cli": "^9.0.0",
-    "@angular/language-service": "^9.0.0",
+    "@angular-devkit/build-angular": "~0.900.3",
+    "@angular-devkit/build-ng-packagr": "~0.900.3",
+    "@angular/cli": "~9.0.3",
+    "@angular/compiler-cli": "^9.0.3",
+    "@angular/language-service": "^9.0.3",
     "@testing-library/jest-dom": "^4.1.0",
     "@types/jest": "~24.0.11",
-    "@types/node": "^12.11.1",
+    "@types/node": "^13.7.6",
     "codelyzer": "^5.1.2",
     "husky": "^2.3.0",
     "jest": "^24.1.0",

projects/jest-utils/src/lib/configure-test-suite.ts

@@ -1,2 +1 @@
-export * from './configure-test-suite';
 export * from './create-mock';

projects/jest-utils/src/lib/index.ts

@@ -12,7 +12,7 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "allowSyntheticDefaultImports": true,
-    "types": [],
+    "types": ["@types/jest"],
     "lib": ["dom", "es2015"]
   },
   "angularCompilerOptions": {

projects/jest-utils/tsconfig.lib.json

@@ -20,6 +20,8 @@ import { createSelectOptions, createType, tab } from './user-events';
 @Component({ selector: 'wrapper-component', template: '' })
 class WrapperComponent {}
 
+const mountedContainers = new Set();
+
 export async function render<ComponentType>(
   component: Type<ComponentType>,
   renderOptions?: RenderComponentOptions<ComponentType>,
@@ -74,6 +76,7 @@ export async function render<SutType, WrapperType = SutType>(
     if (idAttribute && idAttribute.startsWith('root')) {
       fixture.nativeElement.removeAttribute('id');
     }
+    mountedContainers.add(fixture.nativeElement);
   }
 
   await TestBed.compileComponents();
@@ -236,3 +239,20 @@ function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, '
 
   return [...imports, ...animations(), ...routing()];
 }
+
+function cleanup() {
+  mountedContainers.forEach(cleanupAtContainer);
+}
+
+function cleanupAtContainer(container) {
+  if (container.parentNode === document.body) {
+    document.body.removeChild(container);
+  }
+  mountedContainers.delete(container);
+}
+
+if (typeof afterEach === 'function' && !process.env.ATL_SKIP_AUTO_CLEANUP) {
+  afterEach(async () => {
+    cleanup();
+  });
+}

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { render } from '../src/public_api';
+
+@Component({
+  selector: 'fixture',
+  template: `
+    Hello!
+  `,
+})
+class FixtureComponent {}
+
+test('first', async () => {
+  await render(FixtureComponent);
+});
+
+test('second', () => {
+  expect(document.body.innerHTML).toEqual('');
+});

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

@@ -0,0 +1,29 @@
+// https://github.com/testing-library/angular-testing-library/issues/67
+import { Component } from '@angular/core';
+import { render } from '../../src/public_api';
+
+@Component({
+  template: `
+    <div>
+      <!-- if remove for="name" no error happens -->
+      <label for="name">
+        <input type="checkbox" id="name" data-testid="checkbox" />
+        TEST
+      </label>
+    </div>
+  `,
+})
+export class BugGetByLabelTextComponent {}
+
+it('first step to reproduce the bug: skip this test to avoid the error or remove the for attribute of label', async () => {
+  expect(await render(BugGetByLabelTextComponent)).toBeDefined();
+});
+
+it('second step: bug happens :`(', async () => {
+  const { getByLabelText, getByTestId } = await render(BugGetByLabelTextComponent);
+
+  const checkboxByTestId = getByTestId('checkbox');
+  const checkboxByLabelTest = getByLabelText('TEST');
+
+  expect(checkboxByTestId).toBe(checkboxByLabelTest);
+});

projects/testing-library/tests/issues/67.spec.ts

@@ -11,7 +11,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "types": [],
+    "types": ["@types/jest", "@types/node"],
     "lib": ["dom", "es2015", "es2018.promise"]
   },
   "angularCompilerOptions": {