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> {