feat: upgrade to Angular 10 (#119)

BREAKING CHANGE:

- fire events (e.g. `click`, `input`, `change`) are removed from the render result, import `fireEvent` directly from `@testing-library/angular` (as an example take a look at http://github.com/testing-library/angular-testing-library/blob/master/apps/example-app/app/examples/03-forms.spec.ts#L2)
- `waitFor` and `waitForElementToBeRemoved` are removed from the render result, import them directly from `@testing-library/angular`
- custom user events are removed, use the `@testing-library/user-event` package (testing-library.com/docs/ecosystem-user-event)
- `selectOptions` now selects the option based on its value, not via the text of the select option

Author: timdeschryver

browserslist renamed to .browserslistrc

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "types": [],

apps/example-app/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "module": "commonjs",
     "types": ["jest", "node"]

apps/example-app/tsconfig.spec.json

@@ -20,52 +20,52 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "@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": "^9.0.0-rc.0",
+    "@angular/animations": "^10.0.0",
+    "@angular/cdk": "^10.0.0",
+    "@angular/common": "^10.0.0",
+    "@angular/compiler": "^10.0.0",
+    "@angular/core": "^10.0.0",
+    "@angular/forms": "^10.0.0",
+    "@angular/material": "^10.0.0",
+    "@angular/platform-browser": "^10.0.0",
+    "@angular/platform-browser-dynamic": "^10.0.0",
+    "@angular/router": "^10.0.0",
+    "@ngrx/store": "^9.2.0",
     "@nrwl/angular": "^9.4.5",
-    "@phenomnomnominal/tsquery": "^3.0.0",
-    "@testing-library/dom": "^7.9.0",
-    "@testing-library/user-event": "^11.0.0",
-    "core-js": "^3.1.3",
-    "rxjs": "^6.5.4",
-    "tslib": "^1.11.1",
-    "tslint": "^5.16.0",
-    "zone.js": "~0.10.2"
+    "@phenomnomnominal/tsquery": "^4.1.0",
+    "@testing-library/dom": "^7.18.1",
+    "@testing-library/user-event": "^12.0.11",
+    "core-js": "^3.6.5",
+    "rxjs": "^6.5.5",
+    "tslib": "^2.0.0",
+    "tslint": "~6.1.0",
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@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",
+    "@angular-devkit/build-angular": "~0.1000.0",
+    "@angular-devkit/build-ng-packagr": "~0.1000.0",
+    "@angular/cli": "~10.0.0",
+    "@angular/compiler-cli": "^10.0.0",
+    "@angular/language-service": "^10.0.0",
     "@nrwl/jest": "^9.4.5",
     "@nrwl/node": "^9.4.5",
     "@nrwl/nx-plugin": "^9.4.5",
     "@nrwl/workspace": "^9.4.5",
-    "@testing-library/jest-dom": "^5.9.0",
-    "@types/jest": "~24.0.11",
-    "@types/node": "^14.0.11",
-    "codelyzer": "^5.1.2",
-    "cpy-cli": "^3.1.0",
+    "@testing-library/jest-dom": "^5.11.0",
+    "@types/jest": "~26.0.3",
+    "@types/node": "^14.0.14",
+    "codelyzer": "^5.2.2",
+    "cpy-cli": "^3.1.1",
     "husky": "^4.2.5",
-    "jest": "^25.5.4",
-    "jest-preset-angular": "^8.2.0",
-    "lint-staged": "^10.2.9",
-    "ng-packagr": "^9.0.0",
+    "jest": "^26.1.0",
+    "jest-preset-angular": "^8.2.1",
+    "lint-staged": "^10.2.11",
+    "ng-packagr": "^10.0.0",
     "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
-    "semantic-release": "^17.0.2",
-    "ts-jest": "^26.1.0",
+    "semantic-release": "^17.1.1",
+    "ts-jest": "^26.1.1",
     "ts-node": "~8.10.2",
-    "typescript": "~3.7.5"
+    "typescript": "~3.9.5"
   }
-}
+}

package.json

@@ -26,5 +26,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
   }
 }

projects/jest-utils/package.json

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
 import { createMock, provideMock, Mock } from '../src/public_api';
-import { render } from '../../testing-library/src/public_api';
+import { render, fireEvent } from '../../testing-library/src/public_api';
 
 class FixtureService {
   constructor(private foo: string, public bar: string) {}
@@ -30,22 +30,22 @@ it('mocks all functions', () => {
 });
 
 it('provides a mock service', async () => {
-  const { click, getByText } = await render(FixtureComponent, {
+  const { getByText } = await render(FixtureComponent, {
     providers: [provideMock(FixtureService)],
   });
   const service = TestBed.inject(FixtureService);
 
-  click(getByText('Print'));
+  fireEvent.click(getByText('Print'));
   expect(service.print).toHaveBeenCalledTimes(1);
 });
 
 it('is possible to write a mock implementation', async (done) => {
-  const { click, getByText } = await render(FixtureComponent, {
+  const { getByText } = await render(FixtureComponent, {
     providers: [provideMock(FixtureService)],
   });
 
   const service = TestBed.inject(FixtureService) as Mock<FixtureService>;
   service.print.mockImplementation(() => done());
 
-  click(getByText('Print'));
+  fireEvent.click(getByText('Print'));
 });

projects/jest-utils/tests/create-mock.spec.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "target": "es2015",

projects/jest-utils/tsconfig.lib.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "module": "commonjs",
     "types": ["jest", "node"]

projects/jest-utils/tsconfig.spec.json

@@ -22,16 +22,16 @@
   },
   "homepage": "https://github.com/testing-library/angular-testing-library#readme",
   "peerDependencies": {
-    "@angular/common": "^9.0.0",
-    "@angular/platform-browser": "^9.0.0",
-    "@angular/animations": "^9.0.0",
-    "@angular/router": "^9.0.0",
-    "@angular/core": "^9.0.0"
+    "@angular/common": "^10.0.0",
+    "@angular/platform-browser": "^10.0.0",
+    "@angular/animations": "^10.0.0",
+    "@angular/router": "^10.0.0",
+    "@angular/core": "^10.0.0"
   },
   "dependencies": {
-    "@testing-library/dom": "^7.9.0",
-    "@testing-library/user-event": "^8.1.0",
+    "@testing-library/dom": "^7.18.1",
     "@phenomnomnominal/tsquery": "^3.0.0",
+    "tslib": "^2.0.0",
     "tslint": "^5.16.0"
   },
   "publishConfig": {

projects/testing-library/package.json

@@ -1,23 +1,11 @@
 import { Type, DebugElement } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
 import { Routes } from '@angular/router';
-import {
-  BoundFunction,
-  FireObject,
-  Queries,
-  queries,
-  waitFor,
-  waitForElementToBeRemoved,
-  Config as dtlConfig,
-} from '@testing-library/dom';
-import { UserEvents } from './user-events';
+import { BoundFunction, Queries, queries, Config as dtlConfig } from '@testing-library/dom';
 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,
-    UserEvents {
+export interface RenderResult<ComponentType, WrapperType = ComponentType> extends RenderResultQueries {
   /**
    * @description
    * The containing DOM node of your rendered Angular Component.
@@ -70,26 +58,6 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType>
    * Re-render the same component with different props.
    */
   rerender: (componentProperties: Partial<ComponentType>) => void;
-  /**
-   * @deprecated
-   * Usage of `waitForElementToBeRemoved` from render is deprecated, use this method directly from `@testing-library/angular`
-   *
-   * @description
-   * Wait for the removal of element(s) from the DOM.
-   *
-   * For more info see https://testing-library.com/docs/dom-testing-library/api-async#waitforelementtoberemoved
-   */
-  waitForElementToBeRemoved: typeof waitForElementToBeRemoved;
-  /**
-   * @deprecated
-   * Usage of `waitFor` from render is deprecated, use this method directly from `@testing-library/angular`
-   *
-   * @description
-   * When in need to wait for any period of time you can use waitFor, to wait for your expectations to pass.
-   *
-   * For more info see https://testing-library.com/docs/dom-testing-library/api-async#waitFor
-   */
-  waitFor: typeof waitFor;
 }
 
 export interface RenderComponentOptions<ComponentType, Q extends Queries = typeof queries> {

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

@@ -5,21 +5,17 @@ import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import {
-  FireFunction,
-  FireObject,
   getQueriesForElement as dtlGetQueriesForElement,
   prettyDOM as dtlPrettyDOM,
   waitFor as dtlWaitFor,
   waitForElementToBeRemoved as dtlWaitForElementToBeRemoved,
-  fireEvent as dtlFireEvent,
   screen as dtlScreen,
   queries as dtlQueries,
   waitForOptions as dtlWaitForOptions,
   configure as dtlConfigure,
 } from '@testing-library/dom';
 import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
 import { getConfig } from './config';
-import { createSelectOptions, createType, tab } from './user-events';
 
 const mountedFixtures = new Set<ComponentFixture<any>>();
 
@@ -113,15 +109,6 @@ export async function render<SutType, WrapperType = SutType>(
     detectChanges();
   }
 
-  const eventsWithDetectChanges = Object.keys(dtlFireEvent).reduce((events, key) => {
-    events[key] = (element: HTMLElement, options?: {}) => {
-      const result = dtlFireEvent[key](element, options);
-      detectChanges();
-      return result;
-    };
-    return events;
-  }, {} as FireFunction & FireObject);
-
   const rerender = (rerenderedProperties: Partial<SutType>) => {
     const changes = getChangesObj(fixture.componentInstance, rerenderedProperties);
 
@@ -168,20 +155,6 @@ export async function render<SutType, WrapperType = SutType>(
     return result;
   };
 
-  function componentWaitFor<T>(
-    callback,
-    options: dtlWaitForOptions = { container: fixture.nativeElement },
-  ): Promise<T> {
-    return waitForWrapper(detectChanges, callback, options);
-  }
-
-  function componentWaitForElementToBeRemoved<T>(
-    callback: (() => T) | T,
-    options: dtlWaitForOptions = { container: fixture.nativeElement },
-  ): Promise<T> {
-    return waitForElementToBeRemovedWrapper(detectChanges, callback, options);
-  }
-
   return {
     fixture,
     detectChanges,
@@ -193,16 +166,10 @@ export async function render<SutType, WrapperType = SutType>(
       Array.isArray(element)
         ? element.forEach((e) => console.log(dtlPrettyDOM(e, maxLength, options)))
         : console.log(dtlPrettyDOM(element, maxLength, options)),
-    type: createType(eventsWithDetectChanges),
-    selectOptions: createSelectOptions(eventsWithDetectChanges),
-    tab,
-    waitFor: componentWaitFor,
-    waitForElementToBeRemoved: componentWaitForElementToBeRemoved,
     ...replaceFindWithFindAndDetectChanges(
       fixture.nativeElement,
       dtlGetQueriesForElement(fixture.nativeElement, queries),
     ),
-    ...eventsWithDetectChanges,
   };
 }
 
@@ -302,7 +269,7 @@ async function waitForElementToBeRemovedWrapper<T>(
   detectChanges: () => void,
   callback: (() => T) | T,
   options?: dtlWaitForOptions,
-): Promise<T> {
+): Promise<void> {
   let cb;
   if (typeof callback !== 'function') {
     const elements = (Array.isArray(callback) ? callback : [callback]) as HTMLElement[];
@@ -383,18 +350,6 @@ function detectChangesForMountedFixtures() {
   });
 }
 
-/**
- * Wrap dom-fireEvent to poke the Angular change detection cycle after an event is fired
- */
-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);
-
 /**
  * Re-export screen with patched queries
  */
@@ -410,25 +365,17 @@ async function waitFor<T>(callback: () => T extends Promise<any> ? never : T, op
 /**
  * Re-export waitForElementToBeRemoved with patched waitForElementToBeRemoved
  */
-async function waitForElementToBeRemoved<T>(callback: (() => T) | T, options?: dtlWaitForOptions): Promise<T> {
+async function waitForElementToBeRemoved<T>(callback: (() => T) | T, options?: dtlWaitForOptions): Promise<void> {
   return waitForElementToBeRemovedWrapper(detectChangesForMountedFixtures, callback, options);
 }
 
-/**
- * Re-export userEvent with the patched fireEvent
- */
-const userEvent = {
-  type: createType(fireEvent),
-  selectOptions: createSelectOptions(fireEvent),
-  tab: tab,
-};
-
 /**
  * Manually export otherwise we get the following error while running Jest tests
  * TypeError: Cannot set property fireEvent of [object Object] which has only a getter
  * exports.fireEvent = fireEvent
  */
 export {
+  fireEvent,
   buildQueries,
   getByLabelText,
   getAllByLabelText,
@@ -495,4 +442,5 @@ export {
   within,
 } from '@testing-library/dom';
 
-export { fireEvent, screen, userEvent, waitFor, waitForElementToBeRemoved };
+// export patched dtl
+export { screen, waitFor, waitForElementToBeRemoved };