feat: version 9.1

Author: timdeschryver

package.json

@@ -8,8 +8,8 @@
     "build": "npm run build:library && npm run build:library:jest-utils && npm run build:migrations && npm run build:readme",
     "build:library": "ng build --prod testing-library",
     "build:library:jest-utils": "ng build --prod jest-utils",
-    "build:migrations": "tsc -p ./projects/testing-library/migrations/tsconfig.migrations.json && cp ./projects/testing-library/migrations/migration.json ./dist/@testing-library/angular/migrations",
-    "build:readme": "cp ./README.md ./dist/@testing-library/angular",
+    "build:migrations": "tsc -p ./projects/testing-library/migrations/tsconfig.migrations.json && cpy ./projects/testing-library/migrations/migration.json ./dist/@testing-library/angular/migrations",
+    "build:readme": "cpy ./README.md ./dist/@testing-library/angular",
     "test": "jest --config ./projects/jest.lib.config.js",
     "test:app": "jest --config ./src/jest.app.config.js",
     "precommit": "lint-staged",
@@ -39,7 +39,7 @@
     "@testing-library/user-event": "^8.1.0",
     "core-js": "^3.1.3",
     "rxjs": "^6.5.4",
-    "tslib": "^1.10.0",
+    "tslib": "^1.11.1",
     "tslint": "^5.16.0",
     "zone.js": "~0.10.2"
   },
@@ -53,6 +53,7 @@
     "@types/jest": "~24.0.11",
     "@types/node": "^13.7.6",
     "codelyzer": "^5.1.2",
+    "cpy-cli": "^3.1.0",
     "husky": "^2.3.0",
     "jest": "^24.1.0",
     "jest-preset-angular": "^7.1.1",

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

@@ -3,9 +3,9 @@ import { ComponentFixture } from '@angular/core/testing';
 import { Routes } from '@angular/router';
 import { BoundFunction, FireObject, Queries, queries, waitFor, waitForElementToBeRemoved } from '@testing-library/dom';
 import { UserEvents } from './user-events';
+import { OptionsReceived } from 'pretty-format';
 
 export type RenderResultQueries<Q extends Queries = typeof queries> = { [P in keyof Q]: BoundFunction<Q[P]> };
-
 export interface RenderResult<ComponentType, WrapperType = ComponentType>
   extends RenderResultQueries,
     FireObject,
@@ -24,7 +24,11 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType>
    * @param
    * element: The to be printed HTML element, if not provided it will log the whole component's DOM
    */
-  debug: (element?: HTMLElement) => void;
+  debug: (
+    element?: Element | HTMLDocument | (Element | HTMLDocument)[],
+    maxLength?: number,
+    options?: OptionsReceived,
+  ) => void;
   /**
    * @description
    * Trigger a change detection cycle for the component.

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

@@ -5,21 +5,23 @@ import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import {
-  fireEvent,
   FireFunction,
   FireObject,
   getQueriesForElement,
   prettyDOM,
   waitFor,
   waitForElementToBeRemoved,
+  fireEvent as dtlFireEvent,
+  screen as dtlScreen,
+  queries as dtlQueries,
 } from '@testing-library/dom';
 import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
 import { createSelectOptions, createType, tab } from './user-events';
 
 @Component({ selector: 'wrapper-component', template: '' })
 class WrapperComponent {}
 
-const mountedContainers = new Set();
+const mountedFixtures = new Set<ComponentFixture<any>>();
 
 export async function render<ComponentType>(
   component: Type<ComponentType>,
@@ -75,9 +77,10 @@ export async function render<SutType, WrapperType = SutType>(
     if (idAttribute && idAttribute.startsWith('root')) {
       fixture.nativeElement.removeAttribute('id');
     }
-    mountedContainers.add(fixture.nativeElement);
   }
 
+  mountedFixtures.add(fixture);
+
   await TestBed.compileComponents();
 
   let isAlive = true;
@@ -93,10 +96,10 @@ export async function render<SutType, WrapperType = SutType>(
     detectChanges();
   }
 
-  const eventsWithDetectChanges = Object.keys(fireEvent).reduce(
+  const eventsWithDetectChanges = Object.keys(dtlFireEvent).reduce(
     (events, key) => {
       events[key] = (element: HTMLElement, options?: {}) => {
-        const result = fireEvent[key](element, options);
+        const result = dtlFireEvent[key](element, options);
         detectChanges();
         return result;
       };
@@ -137,10 +140,12 @@ export async function render<SutType, WrapperType = SutType>(
         attributes: boolean;
         characterData: boolean;
       };
-    } = { container: fixture.nativeElement, interval: 50 },
+    } = { container: fixture.nativeElement },
   ): Promise<T> {
-    const interval = setInterval(detectChanges, options.interval);
-    return waitFor<T>(callback, options).finally(() => clearInterval(interval));
+    return waitFor<T>(() => {
+      detectChanges();
+      return callback();
+    }, options);
   }
 
   function componentWaitForElementToBeRemoved<T>(
@@ -155,10 +160,12 @@ export async function render<SutType, WrapperType = SutType>(
         attributes: boolean;
         characterData: boolean;
       };
-    } = { container: fixture.nativeElement, interval: 50 },
+    } = { container: fixture.nativeElement },
   ): Promise<T> {
-    const interval = setInterval(detectChanges, options.interval);
-    return waitForElementToBeRemoved<T>(callback, options).finally(() => clearInterval(interval));
+    return waitForElementToBeRemoved<T>(() => {
+      detectChanges();
+      return callback();
+    }, options);
   }
 
   return {
@@ -168,13 +175,16 @@ export async function render<SutType, WrapperType = SutType>(
     rerender,
     debugElement: fixture.debugElement.query(By.directive(sut)),
     container: fixture.nativeElement,
-    debug: (element = fixture.nativeElement) => console.log(prettyDOM(element)),
+    debug: (element = fixture.nativeElement, maxLength, options) =>
+      Array.isArray(element)
+        ? element.forEach(e => console.log(prettyDOM(e, maxLength, options)))
+        : console.log(prettyDOM(element, maxLength, options)),
     type: createType(eventsWithDetectChanges),
     selectOptions: createSelectOptions(eventsWithDetectChanges),
     tab,
     waitFor: componentWaitFor,
     waitForElementToBeRemoved: componentWaitForElementToBeRemoved,
-    ...getQueriesForElement(fixture.nativeElement, queries),
+    ...replaceFindWithFindAndDetectChanges(fixture.nativeElement, getQueriesForElement(fixture.nativeElement, queries)),
     ...eventsWithDetectChanges,
   };
 }
@@ -237,19 +247,65 @@ function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, '
   return [...imports, ...animations(), ...routing()];
 }
 
+// for the findBy queries we first want to run a change detection cycle
+function replaceFindWithFindAndDetectChanges<T>(container: HTMLElement, originalQueriesForContainer: T): T {
+  return Object.keys(originalQueriesForContainer).reduce(
+    (newQueries, key) => {
+      if (key.startsWith('find')) {
+        const getByQuery = dtlQueries[key.replace('find', 'get')];
+        newQueries[key] = async (text, options, waitForOptions) => {
+          // original implementation at https://github.com/testing-library/dom-testing-library/blob/master/src/query-helpers.js
+          const result = await waitFor(() => {
+            detectChangesForMountedFixtures();
+            return getByQuery(container, text, options);
+          }, waitForOptions);
+          return result;
+        };
+      } else {
+        newQueries[key] = originalQueriesForContainer[key];
+      }
+
+      return newQueries;
+    },
+    {} as T,
+  );
+}
+
 function cleanup() {
-  mountedContainers.forEach(cleanupAtContainer);
+  mountedFixtures.forEach(cleanupAtFixture);
 }
 
-function cleanupAtContainer(container) {
-  if (container.parentNode === document.body) {
-    document.body.removeChild(container);
+function cleanupAtFixture(fixture) {
+  if (!fixture.nativeElement.getAttribute('ng-version') && fixture.nativeElement.parentNode === document.body) {
+    document.body.removeChild(fixture.nativeElement);
   }
-  mountedContainers.delete(container);
+  mountedFixtures.delete(fixture);
 }
 
 if (typeof afterEach === 'function' && !process.env.ATL_SKIP_AUTO_CLEANUP) {
   afterEach(async () => {
     cleanup();
   });
 }
+
+function detectChangesForMountedFixtures() {
+  mountedFixtures.forEach(fixture => fixture.detectChanges());
+}
+
+export * from '@testing-library/dom';
+
+const fireEvent = Object.keys(dtlFireEvent).reduce(
+  (events, key) => {
+    events[key] = (element: HTMLElement, options?: {}) => {
+      const result = dtlFireEvent[key](element, options);
+      detectChangesForMountedFixtures();
+      return result;
+    };
+    return events;
+  },
+  {} as typeof dtlFireEvent,
+);
+
+const screen = replaceFindWithFindAndDetectChanges(document.body, dtlScreen);
+
+export { fireEvent, screen };

projects/testing-library/src/public_api.ts

@@ -5,4 +5,3 @@
 export * from './lib/models';
 export * from './lib/testing-library';
 export * from './lib/user-events';
-export * from '@testing-library/dom';

projects/testing-library/tests/find-by.spec.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { timer } from 'rxjs';
+import { render, screen } from '../src/public_api';
+import { mapTo, timeout } from 'rxjs/operators';
+
+@Component({
+  selector: 'fixture',
+  template: `
+    <div>{{ result | async }}</div>
+  `,
+})
+class FixtureComponent {
+  result = timer(30).pipe(mapTo('I am visible'));
+}
+
+describe('screen', () => {
+  test('waits for element to be added to the DOM', async () => {
+    await render(FixtureComponent);
+    await expect(screen.findByText('I am visible')).resolves.toBeTruthy();
+  });
+
+  test('rejects when something cannot be found', async () => {
+    await render(FixtureComponent);
+    await expect(screen.findByText('I am invisible', {}, { timeout: 40 })).rejects.toThrow('x');
+  });
+});
+
+describe('rendered component', () => {
+  test('waits for element to be added to the DOM', async () => {
+    const { findByText } = await render(FixtureComponent);
+    await expect(findByText('I am visible')).resolves.toBeTruthy();
+  });
+
+  test('rejects when something cannot be found', async () => {
+    const { findByText } = await render(FixtureComponent);
+    await expect(findByText('I am invisible', {}, { timeout: 40 })).rejects.toThrow('x');
+  });
+});

projects/testing-library/tsconfig.lib.json

@@ -3,14 +3,14 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "target": "es2015",
-    "module": "es2015",
+    "module": "CommonJS",
     "moduleResolution": "node",
     "declaration": true,
     "sourceMap": true,
     "inlineSources": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "importHelpers": true,
+    "importHelpers": false,
     "types": ["@types/jest", "@types/node"],
     "lib": ["dom", "es2015", "es2018.promise"]
   },

src/app/examples/00-single-component.spec.ts

@@ -1,20 +1,20 @@
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { SingleComponent } from './00-single-component';
 
 test('renders the current value and can increment and decrement', async () => {
-  const { click } = await render(SingleComponent);
+  await render(SingleComponent);
 
   const incrementControl = screen.getByText('Increment');
   const decrementControl = screen.getByText('Decrement');
   const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('0');
 
-  click(incrementControl);
-  click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
   expect(valueControl.textContent).toBe('2');
 
-  click(decrementControl);
+  fireEvent.click(decrementControl);
   expect(valueControl.textContent).toBe('1');
 });

src/app/examples/01-nested-component.spec.ts

@@ -1,9 +1,9 @@
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { NestedButtonComponent, NestedValueComponent, NestedContainerComponent } from './01-nested-component';
 
 test('renders the current value and can increment and decrement', async () => {
-  const { click } = await render(NestedContainerComponent, {
+  await render(NestedContainerComponent, {
     declarations: [NestedButtonComponent, NestedValueComponent],
   });
 
@@ -13,10 +13,10 @@ test('renders the current value and can increment and decrement', async () => {
 
   expect(valueControl.textContent).toBe('0');
 
-  click(incrementControl);
-  click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
   expect(valueControl.textContent).toBe('2');
 
-  click(decrementControl);
+  fireEvent.click(decrementControl);
   expect(valueControl.textContent).toBe('1');
 });

src/app/examples/02-input-output.spec.ts

@@ -1,11 +1,11 @@
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { InputOutputComponent } from './02-input-output';
 
 test('is possible to set input and listen for output', async () => {
   const sendValue = jest.fn();
 
-  const { click } = await render(InputOutputComponent, {
+  await render(InputOutputComponent, {
     componentProperties: {
       value: 47,
       sendValue: {
@@ -20,12 +20,12 @@ test('is possible to set input and listen for output', async () => {
 
   expect(valueControl.textContent).toBe('47');
 
-  click(incrementControl);
-  click(incrementControl);
-  click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
   expect(valueControl.textContent).toBe('50');
 
-  click(sendControl);
+  fireEvent.click(sendControl);
   expect(sendValue).toHaveBeenCalledTimes(1);
   expect(sendValue).toHaveBeenCalledWith(50);
 });

src/app/examples/03-forms.spec.ts

@@ -1,10 +1,10 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { FormsComponent } from './03-forms';
 
 test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
-  const { type, blur, selectOptions } = await render(FormsComponent, {
+  const { type, selectOptions } = await render(FormsComponent, {
     imports: [ReactiveFormsModule],
   });
 
@@ -20,7 +20,7 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(nameControl).toBeInvalid();
   type(nameControl, 'Tim');
   type(scoreControl, '12');
-  blur(scoreControl);
+  fireEvent.blur(scoreControl);
   selectOptions(colorControl, 'Green');
 
   expect(screen.queryByText('name is required')).not.toBeInTheDocument();
@@ -29,7 +29,7 @@ test('is possible to fill in a form and verify error messages (with the help of
 
   expect(scoreControl).toBeInvalid();
   type(scoreControl, 7);
-  blur(scoreControl);
+  fireEvent.blur(scoreControl);
   expect(scoreControl).toBeValid();
 
   expect(errors).not.toBeInTheDocument();