Release Beta

Author: timdeschryver

.circleci/config.yml

@@ -41,7 +41,7 @@ jobs:
           key: *cache_key
       - run:
           name: test
-          command: yarn test
+          command: yarn test --maxWorkers=1 --ci
 
   build-lib:
     <<: *job_defaults
@@ -67,7 +67,7 @@ jobs:
           key: *dist_key
       - run:
           name: test
-          command: yarn test:app
+          command: yarn test:app --maxWorkers=1 --ci
 
   release:
     <<: *job_defaults
@@ -81,7 +81,7 @@ jobs:
           name: release
           command: yarn semantic-release || true
 
-  release-next:
+  release-beta:
     <<: *job_defaults
     steps:
       - checkout
@@ -91,7 +91,7 @@ jobs:
           key: *dist_key
       - run:
           name: release
-          command: yarn semantic-release --branch next || true
+          command: yarn semantic-release || true
 
 workflows:
   version: 2
@@ -118,10 +118,10 @@ workflows:
             branches:
               only:
                 - master
-      - release-next:
+      - release-beta:
           requires:
             - test-app
           filters:
             branches:
               only:
-                - next
+                - beta

README.md

@@ -117,20 +117,20 @@ export class CounterComponent {
 counter.component.spec.ts
 
 ```typescript
-import { render } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import CounterComponent from './counter.component.ts';
 
 describe('Counter', () => {
   test('should render counter', async () => {
-    const { getByText } = await render(CounterComponent, { componentProperties: { counter: 5 } });
+    await render(CounterComponent, { componentProperties: { counter: 5 } });
 
-    expect(getByText('Current Count: 5'));
+    expect(screen.getByText('Current Count: 5'));
   });
 
   test('should increment the counter on click', async () => {
-    const { getByText, click } = await render(CounterComponent, { componentProperties: { counter: 5 } });
+    const { click } = await render(CounterComponent, { componentProperties: { counter: 5 } });
 
-    click(getByText('+'));
+    click(screen.getByText('+'));
 
     expect(getByText('Current Count: 6'));
   });
@@ -194,6 +194,7 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

angular.json

@@ -13,6 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "outputPath": "dist/testing-library-app",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -24,6 +25,12 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -82,7 +89,8 @@
           },
           "configurations": {
             "production": {
-              "project": "projects/testing-library/ng-package.prod.json"
+              "project": "projects/testing-library/ng-package.prod.json",
+              "tsConfig": "projects/testing-library/tsconfig.lib.prod.json"
             }
           }
         },
@@ -109,7 +117,8 @@
           },
           "configurations": {
             "production": {
-              "project": "projects/jest-utils/ng-package.prod.json"
+              "project": "projects/jest-utils/ng-package.prod.json",
+              "tsConfig": "projects/jest-utils/tsconfig.lib.prod.json"
             }
           }
         },

package.json

@@ -22,49 +22,46 @@
       "git add"
     ]
   },
-  "release": {
-    "pkgRoot": "dist/@testing-library/angular"
-  },
   "dependencies": {
-    "@angular/animations": "^8.0.0",
-    "@angular/cdk": "^8.1.4",
-    "@angular/common": "^8.0.0",
-    "@angular/compiler": "^8.0.0",
-    "@angular/core": "^8.0.0",
-    "@angular/forms": "^8.0.0",
-    "@angular/material": "^8.1.4",
-    "@angular/platform-browser": "^8.0.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
-    "@angular/router": "^8.0.0",
-    "@ngrx/store": "^8.0.0-rc.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": "^9.0.0-rc.0",
     "@phenomnomnominal/tsquery": "^3.0.0",
-    "@testing-library/dom": "^5.0.1",
+    "@testing-library/dom": "^7.1.1",
+    "@testing-library/user-event": "^8.1.0",
     "core-js": "^3.1.3",
-    "rxjs": "^6.5.2",
+    "rxjs": "^6.5.4",
+    "tslib": "^1.10.0",
     "tslint": "^5.16.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.0",
-    "@angular-devkit/build-ng-packagr": "~0.800.0",
-    "@angular/cli": "~8.0.0",
-    "@angular/compiler-cli": "^8.0.0",
-    "@angular/language-service": "^8.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.0.3",
-    "codelyzer": "^5.0.1",
+    "@types/node": "^13.7.6",
+    "codelyzer": "^5.1.2",
     "husky": "^2.3.0",
     "jest": "^24.1.0",
     "jest-preset-angular": "^7.1.1",
     "lint-staged": "^8.1.7",
-    "ng-packagr": "^5.2.0",
+    "ng-packagr": "^9.0.0",
     "prettier": "^1.17.1",
     "rimraf": "^2.6.3",
-    "semantic-release": "^15.13.12",
+    "semantic-release": "^17.0.2",
     "ts-node": "~8.2.0",
-    "tsickle": "0.35.0",
-    "tslib": "^1.9.0",
-    "typescript": "~3.4.5"
+    "typescript": "~3.7.5"
   }
 }

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

@@ -35,7 +35,7 @@ it('provides a mock service', async () => {
   const { click, getByText } = await render(FixtureComponent, {
     providers: [provideMock(FixtureService)],
   });
-  const service = TestBed.get<FixtureService>(FixtureService);
+  const service = TestBed.inject(FixtureService);
 
   click(getByText('Print'));
   expect(service.print).toHaveBeenCalledTimes(1);
@@ -46,7 +46,7 @@ it('is possible to write a mock implementation', async done => {
     providers: [provideMock(FixtureService)],
   });
 
-  const service = TestBed.get<FixtureService>(FixtureService) as Mock<FixtureService>;
+  const service = TestBed.inject(FixtureService) as Mock<FixtureService>;
   service.print.mockImplementation(() => done());
 
   click(getByText('Print'));

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

@@ -12,11 +12,10 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "allowSyntheticDefaultImports": true,
-    "types": [],
+    "types": ["@types/jest"],
     "lib": ["dom", "es2015"]
   },
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,

projects/jest-utils/tsconfig.lib.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

projects/jest-utils/tsconfig.lib.prod.json

@@ -5,5 +5,10 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@testing-library/dom", "@phenomnomnominal/tsquery", "tslint"]
+  "whitelistedNonPeerDependencies": [
+    "@testing-library/dom",
+    "@testing-library/user-event",
+    "@phenomnomnominal/tsquery",
+    "tslint"
+  ]
 }

projects/testing-library/ng-package.json

@@ -5,5 +5,10 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@testing-library/dom", "@phenomnomnominal/tsquery", "tslint"]
+  "whitelistedNonPeerDependencies": [
+    "@testing-library/dom",
+    "@testing-library/user-event",
+    "@phenomnomnominal/tsquery",
+    "tslint"
+  ]
 }

projects/testing-library/ng-package.prod.json

@@ -22,14 +22,15 @@
   },
   "homepage": "https://github.com/testing-library/angular-testing-library#readme",
   "peerDependencies": {
-    "@angular/common": "^8.0.0",
-    "@angular/platform-browser": "^8.0.0",
-    "@angular/animations": "^8.0.0",
-    "@angular/router": "^8.0.0",
-    "@angular/core": "^8.0.0"
+    "@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"
   },
   "dependencies": {
-    "@testing-library/dom": "^5.1.0",
+    "@testing-library/dom": "^7.1.0",
+    "@testing-library/user-event": "^8.1.0",
     "@phenomnomnominal/tsquery": "^3.0.0",
     "tslint": "^5.16.0"
   },

projects/testing-library/package.json

@@ -1,15 +1,7 @@
 import { Type, DebugElement } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
 import { Routes } from '@angular/router';
-import {
-  BoundFunction,
-  FireObject,
-  Queries,
-  queries,
-  waitForElement,
-  waitForElementToBeRemoved,
-  waitForDomChange,
-} from '@testing-library/dom';
+import { BoundFunction, FireObject, Queries, queries, waitFor, waitForElementToBeRemoved } from '@testing-library/dom';
 import { UserEvents } from './user-events';
 
 export type RenderResultQueries<Q extends Queries = typeof queries> = { [P in keyof Q]: BoundFunction<Q[P]> };
@@ -68,25 +60,18 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType>
   rerender: (componentProperties: Partial<ComponentType>) => void;
   /**
    * @description
-   * Wait for the DOM to change.
-   *
-   * For more info see https://testing-library.com/docs/dom-testing-library/api-async#waitfordomchange
-   */
-  waitForDomChange: typeof waitForDomChange;
-  /**
-   * @description
-   * Wait for DOM elements to appear, disappear, or change.
+   * Wait for the removal of element(s) from the DOM.
    *
-   * For more info see https://testing-library.com/docs/dom-testing-library/api-async#waitforelement
+   * For more info see https://testing-library.com/docs/dom-testing-library/api-async#waitforelementtoberemoved
    */
-  waitForElement: typeof waitForElement;
+  waitForElementToBeRemoved: typeof waitForElementToBeRemoved;
   /**
    * @description
-   * Wait for the removal of element(s) from the DOM.
+   * 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#waitforelementtoberemoved
+   * For more info see https://testing-library.com/docs/dom-testing-library/api-async#waitFor
    */
-  waitForElementToBeRemoved: typeof waitForElementToBeRemoved;
+  waitFor: typeof waitFor;
 }
 
 export interface RenderComponentOptions<ComponentType, Q extends Queries = typeof queries> {
@@ -263,6 +248,20 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    * })
    */
   routes?: Routes;
+
+  /**
+   * @description
+   * Removes the Angular attributes (ng-version, and root-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/models.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, Type, NgZone } from '@angular/core';
+import { Component, Type, NgZone } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -10,21 +10,16 @@ import {
   FireObject,
   getQueriesForElement,
   prettyDOM,
-  waitForDomChange,
-  waitForElement,
+  waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/dom';
 import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
-import { createSelectOptions, createType } from './user-events';
+import { createSelectOptions, createType, tab } from './user-events';
 
 @Component({ selector: 'wrapper-component', template: '' })
-class WrapperComponent implements OnInit {
-  constructor(private elementRef: ElementRef) {}
+class WrapperComponent {}
 
-  ngOnInit() {
-    this.elementRef.nativeElement.removeAttribute('ng-version');
-  }
-}
+const mountedContainers = new Set();
 
 export async function render<ComponentType>(
   component: Type<ComponentType>,
@@ -52,6 +47,7 @@ export async function render<SutType, WrapperType = SutType>(
     componentProviders = [],
     excludeComponentDeclaration = false,
     routes,
+    removeAngularAttributes = false,
   } = renderOptions as RenderDirectiveOptions<SutType, WrapperType>;
 
   TestBed.configureTestingModule({
@@ -73,6 +69,15 @@ 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');
+    }
+    mountedContainers.add(fixture.nativeElement);
+  }
+
   await TestBed.compileComponents();
 
   let isAlive = true;
@@ -105,11 +110,11 @@ export async function render<SutType, WrapperType = SutType>(
     detectChanges();
   };
 
-  let router = routes ? (TestBed.get<Router>(Router) as Router) : null;
-  const zone = TestBed.get<NgZone>(NgZone) as NgZone;
+  let router = routes ? TestBed.inject(Router) : null;
+  const zone = TestBed.inject(NgZone);
   const navigate = async (elementOrPath: Element | string, basePath = '') => {
     if (!router) {
-      router = TestBed.get<Router>(Router) as Router;
+      router = TestBed.inject(Router);
     }
 
     const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href');
@@ -120,43 +125,40 @@ export async function render<SutType, WrapperType = SutType>(
     return result;
   };
 
-  function componentWaitForDomChange<Result>(options?: {
-    container?: HTMLElement;
-    timeout?: number;
-    mutationObserverOptions?: MutationObserverInit;
-  }): Promise<Result> {
-    const interval = setInterval(detectChanges, 10);
-    return waitForDomChange<Result>({ container: fixture.nativeElement, ...options }).finally(() =>
-      clearInterval(interval),
-    );
-  }
-
-  function componentWaitForElement<Result>(
-    callback: () => Result,
-    options?: {
+  function componentWaitFor<T>(
+    callback,
+    options: {
       container?: HTMLElement;
       timeout?: number;
-      mutationObserverOptions?: MutationObserverInit;
-    },
-  ): Promise<Result> {
-    const interval = setInterval(detectChanges, 10);
-    return waitForElement(callback, { container: fixture.nativeElement, ...options }).finally(() =>
-      clearInterval(interval),
-    );
+      interval?: number;
+      mutationObserverOptions?: {
+        subtree: boolean;
+        childList: boolean;
+        attributes: boolean;
+        characterData: boolean;
+      };
+    } = { container: fixture.nativeElement, interval: 50 },
+  ): Promise<T> {
+    const interval = setInterval(detectChanges, options.interval);
+    return waitFor<T>(callback, options).finally(() => clearInterval(interval));
   }
 
-  function componentWaitForElementToBeRemoved<Result>(
-    callback: () => Result,
-    options?: {
+  function componentWaitForElementToBeRemoved<T>(
+    callback: () => T,
+    options: {
       container?: HTMLElement;
       timeout?: number;
-      mutationObserverOptions?: MutationObserverInit;
-    },
-  ): Promise<Result> {
-    const interval = setInterval(detectChanges, 10);
-    return waitForElementToBeRemoved(callback, { container: fixture.nativeElement, ...options }).finally(() =>
-      clearInterval(interval),
-    );
+      interval?: number;
+      mutationObserverOptions?: {
+        subtree: boolean;
+        childList: boolean;
+        attributes: boolean;
+        characterData: boolean;
+      };
+    } = { container: fixture.nativeElement, interval: 50 },
+  ): Promise<T> {
+    const interval = setInterval(detectChanges, options.interval);
+    return waitForElementToBeRemoved<T>(callback, options).finally(() => clearInterval(interval));
   }
 
   return {
@@ -169,8 +171,8 @@ export async function render<SutType, WrapperType = SutType>(
     debug: (element = fixture.nativeElement) => console.log(prettyDOM(element)),
     type: createType(eventsWithDetectChanges),
     selectOptions: createSelectOptions(eventsWithDetectChanges),
-    waitForDomChange: componentWaitForDomChange,
-    waitForElement: componentWaitForElement,
+    tab,
+    waitFor: componentWaitFor,
     waitForElementToBeRemoved: componentWaitForElementToBeRemoved,
     ...getQueriesForElement(fixture.nativeElement, queries),
     ...eventsWithDetectChanges,
@@ -234,3 +236,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

@@ -1,6 +1,7 @@
 import { fireEvent } from '@testing-library/dom';
 import { createType } from './type';
 import { createSelectOptions } from './selectOptions';
+import { tab } from './tab';
 
 export interface UserEvents {
   /**
@@ -31,9 +32,22 @@ export interface UserEvents {
    * component.selectOptions(component.getByLabelText('Fruit'), ['Blueberry'. 'Grape'])
    */
   selectOptions: ReturnType<typeof createSelectOptions>;
+
+  /**
+   * @description
+   * Fires a tab event changing the document.activeElement in the same way the browser does.
+   *
+   * @argument
+   * shift: can be set to true to invert tab direction (default false)
+   * focusTrap: a container element to restrict the tabbing within (default document)
+   *
+   * @example
+   * component.tab()
+   */
+  tab: typeof tab;
 }
 
 const type = createType(fireEvent);
 const selectOptions = createSelectOptions(fireEvent);
 
-export { createType, type, createSelectOptions, selectOptions };
+export { createType, type, createSelectOptions, selectOptions, tab };

projects/testing-library/src/lib/user-events/index.ts

@@ -0,0 +1,10 @@
+import userEvent from '@testing-library/user-event';
+
+export interface ITabUserOptions {
+  shift?: boolean;
+  focusTrap?: Document | Element;
+}
+
+export function tab(options?: ITabUserOptions) {
+  return userEvent.tab(options);
+}

projects/testing-library/src/lib/user-events/tab.ts

@@ -0,0 +1,43 @@
+import { Component, Input } from '@angular/core';
+import { render } from '../src/public_api';
+
+@Component({
+  selector: 'fixture',
+  template: `
+    Hello {{ name }}!
+  `,
+})
+class FixtureComponent {
+  @Input() name: string;
+}
+
+describe('Angular auto clean up - previous components only get cleanup up on init (based on root-id)', () => {
+  test('first', async () => {
+    await render(FixtureComponent, {
+      componentProperties: {
+        name: 'first',
+      },
+    });
+  });
+
+  test('second', async () => {
+    await render(FixtureComponent, {
+      componentProperties: {
+        name: 'second',
+      },
+    });
+    expect(document.body.innerHTML).not.toContain('first');
+  });
+});
+
+describe('ATL auto clean up - after each test the containers get removed', () => {
+  test('first', async () => {
+    await render(FixtureComponent, {
+      removeAngularAttributes: true,
+    });
+  });
+
+  test('second', () => {
+    expect(document.body.innerHTML).toEqual('');
+  });
+});

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

@@ -77,3 +77,24 @@ test('overrides output properties', async () => {
   component.click(component.getByText('on'));
   expect(clicked).toHaveBeenCalledWith('off');
 });
+
+describe('removeAngularAttributes', () => {
+  test('should remove angular attributes', async () => {
+    await render(OnOffDirective, {
+      template: '<div onOff (clicked)="clicked($event)"></div>',
+      removeAngularAttributes: true,
+    });
+
+    expect(document.querySelector('[ng-version]')).toBeNull();
+    expect(document.querySelector('[id]')).toBeNull();
+  });
+
+  test('is disabled by default', async () => {
+    await render(OnOffDirective, {
+      template: '<div onOff (clicked)="clicked($event)"></div>',
+    });
+
+    expect(document.querySelector('[ng-version]')).not.toBeNull();
+    expect(document.querySelector('[id]')).not.toBeNull();
+  });
+});

projects/testing-library/tests/directive.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

@@ -20,6 +20,26 @@ test('creates queries and events', async () => {
   component.click(component.getByText('button'));
 });
 
+describe('removeAngularAttributes', () => {
+  test('should remove angular attribute', async () => {
+    await render(FixtureComponent, {
+      removeAngularAttributes: true,
+    });
+
+    expect(document.querySelector('[ng-version]')).toBeNull();
+    expect(document.querySelector('[id]')).toBeNull();
+  });
+
+  test('is disabled by default', async () => {
+    await render(FixtureComponent, {
+      removeAngularAttributes: false,
+    });
+
+    expect(document.querySelector('[ng-version]')).not.toBeNull();
+    expect(document.querySelector('[id]')).not.toBeNull();
+  });
+});
+
 @NgModule({
   declarations: [FixtureComponent],
 })
@@ -36,7 +56,7 @@ describe('excludeComponentDeclaration', () => {
 describe('animationModule', () => {
   test('adds NoopAnimationsModule by default', async () => {
     await render(FixtureComponent);
-    const noopAnimationsModule = TestBed.get<NoopAnimationsModule>(NoopAnimationsModule);
+    const noopAnimationsModule = TestBed.inject(NoopAnimationsModule);
     expect(noopAnimationsModule).toBeDefined();
   });
 
@@ -45,9 +65,9 @@ describe('animationModule', () => {
       imports: [BrowserAnimationsModule],
     });
 
-    const browserAnimationsModule = TestBed.get<BrowserAnimationsModule>(BrowserAnimationsModule);
+    const browserAnimationsModule = TestBed.inject(BrowserAnimationsModule);
     expect(browserAnimationsModule).toBeDefined();
 
-    expect(() => TestBed.get<NoopAnimationsModule>(NoopAnimationsModule)).toThrow();
+    expect(() => TestBed.inject(NoopAnimationsModule)).toThrow();
   });
 });

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

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { render } from '../../src/public_api';
+
+test('cycles through elements in document tab order', async () => {
+  @Component({
+    selector: 'fixture',
+    template: `
+      <div>
+        <input data-testid="element" type="checkbox" />
+        <input data-testid="element" type="radio" />
+        <input data-testid="element" type="number" />
+      </div>
+    `,
+  })
+  class FixtureComponent {}
+
+  const component = await render(FixtureComponent);
+  const [checkbox, radio, number] = component.getAllByTestId('element');
+
+  expect(document.body).toHaveFocus();
+
+  component.tab();
+
+  expect(checkbox).toHaveFocus();
+
+  component.tab();
+
+  expect(radio).toHaveFocus();
+
+  component.tab();
+
+  expect(number).toHaveFocus();
+
+  component.tab();
+
+  // cycle goes back to first element
+  expect(checkbox).toHaveFocus();
+});

projects/testing-library/tests/user-events/tab.spec.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { render } from '../src/public_api';
 import { timer } from 'rxjs';
+import { render } from '../src/public_api';
 
 @Component({
   selector: 'fixture',
@@ -17,21 +17,23 @@ class FixtureComponent {
   }
 }
 
-test('waits for element to be visible', async () => {
-  const { getByTestId, click, waitForElement, getByText } = await render(FixtureComponent);
+test('waits for assertion to become true', async () => {
+  const { queryByText, getByTestId, click, waitFor, getByText } = await render(FixtureComponent);
+
+  expect(queryByText('Success')).toBeNull();
 
   click(getByTestId('button'));
 
-  await waitForElement(() => getByText('Success'));
+  await waitFor(() => getByText('Success'));
   getByText('Success');
 });
 
 test('allows to override options', async () => {
-  const { getByTestId, click, waitForElement, getByText } = await render(FixtureComponent);
+  const { getByTestId, click, waitFor, getByText } = await render(FixtureComponent);
 
   click(getByTestId('button'));
 
-  await expect(waitForElement(() => getByText('Success'), { timeout: 200 })).rejects.toThrow(
+  await expect(waitFor(() => getByText('Success'), { timeout: 200 })).rejects.toThrow(
     /Unable to find an element with the text: Success/i,
   );
 });

projects/testing-library/tests/wait-for-dom-change.spec.ts

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

projects/testing-library/tests/wait-for-element.spec.ts renamed to projects/testing-library/tests/wait-for.spec.ts

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

projects/testing-library/tsconfig.lib.json

@@ -0,0 +1,4 @@
+module.exports = {
+  pkgRoot: 'dist/@testing-library/angular',
+  branches: ['master', { name: 'beta', prerelease: true }],
+};

projects/testing-library/tsconfig.lib.prod.json

@@ -22,6 +22,10 @@ import { WithNgRxStoreComponent, reducer } from './examples/06-with-ngrx-store';
 import { WithNgRxMockStoreComponent } from './examples/07-with-ngrx-mock-store';
 import { MasterComponent, DetailComponent, HiddenDetailComponent } from './examples/09-router';
 
+function reducerItems() {
+  return ['One', 'Two', 'Three'];
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -51,9 +55,7 @@ import { MasterComponent, DetailComponent, HiddenDetailComponent } from './examp
     AppRoutingModule,
     StoreModule.forRoot({
       value: reducer,
-      items: function() {
-        return ['One', 'Two', 'Three'];
-      },
+      items: reducerItems,
     }),
   ],
   bootstrap: [AppComponent],

release.config.js

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

src/app/app.module.ts

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

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

@@ -1,11 +1,11 @@
-import { render } from '@testing-library/angular';
+import { render, screen } 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 component = await render(InputOutputComponent, {
+  const { click } = await render(InputOutputComponent, {
     componentProperties: {
       value: 47,
       sendValue: {
@@ -14,18 +14,18 @@ test('is possible to set input and listen for output', async () => {
     },
   });
 
-  const incrementControl = component.getByText('Increment');
-  const valueControl = component.getByTestId('value');
-  const sendControl = component.getByText('Send');
+  const incrementControl = screen.getByText('Increment');
+  const valueControl = screen.getByTestId('value');
+  const sendControl = screen.getByText('Send');
 
   expect(valueControl.textContent).toBe('47');
 
-  component.click(incrementControl);
-  component.click(incrementControl);
-  component.click(incrementControl);
+  click(incrementControl);
+  click(incrementControl);
+  click(incrementControl);
   expect(valueControl.textContent).toBe('50');
 
-  component.click(sendControl);
+  click(sendControl);
   expect(sendValue).toHaveBeenCalledTimes(1);
   expect(sendValue).toHaveBeenCalledWith(50);
 });

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

@@ -1,35 +1,35 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { render } from '@testing-library/angular';
+import { render, screen } 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 component = await render(FormsComponent, {
+  const { type, blur, selectOptions } = await render(FormsComponent, {
     imports: [ReactiveFormsModule],
   });
 
-  const nameControl = component.getByLabelText('Name');
-  const scoreControl = component.getByLabelText(/score/i);
-  const colorControl = component.getByLabelText('color', { exact: false });
-  const errors = component.getByRole('alert');
+  const nameControl = screen.getByLabelText('Name');
+  const scoreControl = screen.getByLabelText(/score/i);
+  const colorControl = screen.getByLabelText('color', { exact: false });
+  const errors = screen.getByRole('alert');
 
-  expect(errors).toContainElement(component.queryByText('name is required'));
-  expect(errors).toContainElement(component.queryByText('score must be greater than 1'));
-  expect(errors).toContainElement(component.queryByText('color is required'));
+  expect(errors).toContainElement(screen.queryByText('name is required'));
+  expect(errors).toContainElement(screen.queryByText('score must be greater than 1'));
+  expect(errors).toContainElement(screen.queryByText('color is required'));
 
   expect(nameControl).toBeInvalid();
-  component.type(nameControl, 'Tim');
-  component.type(scoreControl, '12');
-  component.blur(scoreControl);
-  component.selectOptions(colorControl, 'Green');
+  type(nameControl, 'Tim');
+  type(scoreControl, '12');
+  blur(scoreControl);
+  selectOptions(colorControl, 'Green');
 
-  expect(component.queryByText('name is required')).not.toBeInTheDocument();
-  expect(component.queryByText('score must be lesser than 10')).toBeInTheDocument();
-  expect(component.queryByText('color is required')).not.toBeInTheDocument();
+  expect(screen.queryByText('name is required')).not.toBeInTheDocument();
+  expect(screen.queryByText('score must be lesser than 10')).toBeInTheDocument();
+  expect(screen.queryByText('color is required')).not.toBeInTheDocument();
 
   expect(scoreControl).toBeInvalid();
-  component.type(scoreControl, 7);
-  component.blur(scoreControl);
+  type(scoreControl, 7);
+  blur(scoreControl);
   expect(scoreControl).toBeValid();
 
   expect(errors).not.toBeInTheDocument();
@@ -38,7 +38,7 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(scoreControl).toHaveValue(7);
   expect(colorControl).toHaveValue('G');
 
-  const form = component.getByTestId('my-form');
+  const form = screen.getByTestId('my-form');
   expect(form).toHaveFormValues({
     name: 'Tim',
     score: 7,

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

@@ -1,46 +1,46 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { render } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 
 import { MaterialModule } from '../material.module';
 import { MaterialFormsComponent } from './04-forms-with-material';
 
 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 component = await render(MaterialFormsComponent, {
+  const { type, selectOptions, fixture } = await render(MaterialFormsComponent, {
     imports: [ReactiveFormsModule, MaterialModule],
   });
 
-  const nameControl = component.getByPlaceholderText('Name');
-  const scoreControl = component.getByPlaceholderText(/score/i);
-  const colorControl = component.getByPlaceholderText('color', { exact: false });
-  const errors = component.getByRole('alert');
+  const nameControl = screen.getByPlaceholderText('Name');
+  const scoreControl = screen.getByPlaceholderText(/score/i);
+  const colorControl = screen.getByPlaceholderText('color', { exact: false });
+  const errors = screen.getByRole('alert');
 
-  expect(errors).toContainElement(component.queryByText('name is required'));
-  expect(errors).toContainElement(component.queryByText('score must be greater than 1'));
-  expect(errors).toContainElement(component.queryByText('color is required'));
+  expect(errors).toContainElement(screen.queryByText('name is required'));
+  expect(errors).toContainElement(screen.queryByText('score must be greater than 1'));
+  expect(errors).toContainElement(screen.queryByText('color is required'));
 
-  component.type(nameControl, 'Tim');
-  component.type(scoreControl, 12);
-  component.selectOptions(colorControl, 'Green');
+  type(nameControl, 'Tim');
+  type(scoreControl, 12);
+  selectOptions(colorControl, 'Green');
 
-  expect(component.queryByText('name is required')).not.toBeInTheDocument();
-  expect(component.queryByText('score must be lesser than 10')).toBeInTheDocument();
-  expect(component.queryByText('color is required')).not.toBeInTheDocument();
+  expect(screen.queryByText('name is required')).not.toBeInTheDocument();
+  expect(screen.queryByText('score must be lesser than 10')).toBeInTheDocument();
+  expect(screen.queryByText('color is required')).not.toBeInTheDocument();
 
   expect(scoreControl).toBeInvalid();
-  component.type(scoreControl, 7);
+  type(scoreControl, 7);
   expect(scoreControl).toBeValid();
 
   expect(errors).not.toBeInTheDocument();
 
   expect(nameControl).toHaveValue('Tim');
   expect(scoreControl).toHaveValue(7);
 
-  const form = component.getByTestId('my-form');
+  const form = screen.getByTestId('my-form');
   expect(form).toHaveFormValues({
     name: 'Tim',
     score: 7,
   });
 
   // not added to the form?
-  expect((component.fixture.componentInstance as MaterialFormsComponent).form.get('color').value).toBe('G');
+  expect((fixture.componentInstance as MaterialFormsComponent).form.get('color').value).toBe('G');
 });

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

@@ -1,11 +1,11 @@
 import { TestBed } from '@angular/core/testing';
-import { render } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils';
 
 import { ComponentWithProviderComponent, CounterService } from './05-component-provider';
 
 test('renders the current value and can increment and decrement', async () => {
-  const component = await render(ComponentWithProviderComponent, {
+  const { click } = await render(ComponentWithProviderComponent, {
     componentProviders: [
       {
         provide: CounterService,
@@ -14,17 +14,17 @@ test('renders the current value and can increment and decrement', async () => {
     ],
   });
 
-  const incrementControl = component.getByText('Increment');
-  const decrementControl = component.getByText('Decrement');
-  const valueControl = component.getByTestId('value');
+  const incrementControl = screen.getByText('Increment');
+  const decrementControl = screen.getByText('Decrement');
+  const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('0');
 
-  component.click(incrementControl);
-  component.click(incrementControl);
+  click(incrementControl);
+  click(incrementControl);
   expect(valueControl.textContent).toBe('2');
 
-  component.click(decrementControl);
+  click(decrementControl);
   expect(valueControl.textContent).toBe('1');
 });
 
@@ -35,7 +35,7 @@ test('renders the current value and can increment and decrement with a mocked je
   counter.decrement.mockImplementation(() => (fakeCounterValue -= 10));
   counter.value.mockImplementation(() => fakeCounterValue);
 
-  const component = await render(ComponentWithProviderComponent, {
+  const { click } = await render(ComponentWithProviderComponent, {
     componentProviders: [
       {
         provide: CounterService,
@@ -44,33 +44,33 @@ test('renders the current value and can increment and decrement with a mocked je
     ],
   });
 
-  const incrementControl = component.getByText('Increment');
-  const decrementControl = component.getByText('Decrement');
-  const valueControl = component.getByTestId('value');
+  const incrementControl = screen.getByText('Increment');
+  const decrementControl = screen.getByText('Decrement');
+  const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('50');
 
-  component.click(incrementControl);
-  component.click(incrementControl);
+  click(incrementControl);
+  click(incrementControl);
   expect(valueControl.textContent).toBe('70');
 
-  component.click(decrementControl);
+  click(decrementControl);
   expect(valueControl.textContent).toBe('60');
 });
 
 test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => {
-  const component = await render(ComponentWithProviderComponent, {
+  const { click } = await render(ComponentWithProviderComponent, {
     componentProviders: [provideMock(CounterService)],
   });
 
-  const incrementControl = component.getByText('Increment');
-  const decrementControl = component.getByText('Decrement');
+  const incrementControl = screen.getByText('Increment');
+  const decrementControl = screen.getByText('Decrement');
 
-  component.click(incrementControl);
-  component.click(incrementControl);
-  component.click(decrementControl);
+  click(incrementControl);
+  click(incrementControl);
+  click(decrementControl);
 
-  const counterService = TestBed.get<CounterService>(CounterService) as Mock<CounterService>;
+  const counterService = TestBed.inject(CounterService) as Mock<CounterService>;
   expect(counterService.increment).toHaveBeenCalledTimes(2);
   expect(counterService.decrement).toHaveBeenCalledTimes(1);
 });

src/app/examples/04-forms-with-material.spec.ts

@@ -1,10 +1,10 @@
-import { render } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import { StoreModule } from '@ngrx/store';
 
 import { WithNgRxStoreComponent, reducer } from './06-with-ngrx-store';
 
 test('works with ngrx store', async () => {
-  const component = await render(WithNgRxStoreComponent, {
+  const { click } = await render(WithNgRxStoreComponent, {
     imports: [
       StoreModule.forRoot(
         {
@@ -17,16 +17,16 @@ test('works with ngrx store', async () => {
     ],
   });
 
-  const incrementControl = component.getByText('Increment');
-  const decrementControl = component.getByText('Decrement');
-  const valueControl = component.getByTestId('value');
+  const incrementControl = screen.getByText('Increment');
+  const decrementControl = screen.getByText('Decrement');
+  const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('0');
 
-  component.click(incrementControl);
-  component.click(incrementControl);
+  click(incrementControl);
+  click(incrementControl);
   expect(valueControl.textContent).toBe('20');
 
-  component.click(decrementControl);
+  click(decrementControl);
   expect(valueControl.textContent).toBe('10');
 });

src/app/examples/05-component-provider.spec.ts

@@ -1,12 +1,12 @@
-import { render } from '@testing-library/angular';
+import { TestBed } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { render, screen } from '@testing-library/angular';
 
 import { WithNgRxMockStoreComponent, selectItems } from './07-with-ngrx-mock-store';
-import { TestBed } from '@angular/core/testing';
-import { Store } from '@ngrx/store';
 
 test('works with provideMockStore', async () => {
-  const component = await render(WithNgRxMockStoreComponent, {
+  const { click } = await render(WithNgRxMockStoreComponent, {
     providers: [
       provideMockStore({
         selectors: [
@@ -19,11 +19,11 @@ test('works with provideMockStore', async () => {
     ],
   });
 
-  const store = TestBed.get(Store) as MockStore<any>;
+  const store = TestBed.inject(MockStore);
   store.dispatch = jest.fn();
 
-  component.getByText('Four');
-  component.click(component.getByText('Seven'));
+  screen.getByText('Four');
+  click(screen.getByText('Seven'));
 
   expect(store.dispatch).toBeCalledWith({ type: '[Item List] send', item: 'Seven' });
 });

src/app/examples/06-with-ngrx-store.spec.ts

@@ -1,64 +1,64 @@
-import { render } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 
 import { SpoilerDirective } from './08-directive';
 
 test('it is possible to test directives', async () => {
-  const component = await render(SpoilerDirective, {
+  const { mouseOver, mouseLeave, debugElement } = await render(SpoilerDirective, {
     template: `<div appSpoiler></div>`,
   });
 
-  expect(component.queryByText('I am visible now...')).not.toBeInTheDocument();
-  expect(component.queryByText('SPOILER')).toBeInTheDocument();
+  expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument();
+  expect(screen.queryByText('SPOILER')).toBeInTheDocument();
 
-  component.mouseOver(component.debugElement.nativeElement);
-  expect(component.queryByText('SPOILER')).not.toBeInTheDocument();
-  expect(component.queryByText('I am visible now...')).toBeInTheDocument();
+  mouseOver(debugElement.nativeElement);
+  expect(screen.queryByText('SPOILER')).not.toBeInTheDocument();
+  expect(screen.queryByText('I am visible now...')).toBeInTheDocument();
 
-  component.mouseLeave(component.debugElement.nativeElement);
-  expect(component.queryByText('SPOILER')).toBeInTheDocument();
-  expect(component.queryByText('I am visible now...')).not.toBeInTheDocument();
+  mouseLeave(debugElement.nativeElement);
+  expect(screen.queryByText('SPOILER')).toBeInTheDocument();
+  expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument();
 });
 
 test('it is possible to test directives with props', async () => {
   const hidden = 'SPOILER ALERT';
   const visible = 'There is nothing to see here ...';
 
-  const component = await render(SpoilerDirective, {
+  const { mouseOver, mouseLeave } = await render(SpoilerDirective, {
     template: `<div appSpoiler [hidden]="hidden" [visible]="visible"></div>`,
     componentProperties: {
       hidden,
       visible,
     },
   });
 
-  expect(component.queryByText(visible)).not.toBeInTheDocument();
-  expect(component.queryByText(hidden)).toBeInTheDocument();
+  expect(screen.queryByText(visible)).not.toBeInTheDocument();
+  expect(screen.queryByText(hidden)).toBeInTheDocument();
 
-  component.mouseOver(component.queryByText(hidden));
-  expect(component.queryByText(hidden)).not.toBeInTheDocument();
-  expect(component.queryByText(visible)).toBeInTheDocument();
+  mouseOver(screen.queryByText(hidden));
+  expect(screen.queryByText(hidden)).not.toBeInTheDocument();
+  expect(screen.queryByText(visible)).toBeInTheDocument();
 
-  component.mouseLeave(component.queryByText(visible));
-  expect(component.queryByText(hidden)).toBeInTheDocument();
-  expect(component.queryByText(visible)).not.toBeInTheDocument();
+  mouseLeave(screen.queryByText(visible));
+  expect(screen.queryByText(hidden)).toBeInTheDocument();
+  expect(screen.queryByText(visible)).not.toBeInTheDocument();
 });
 
 test('it is possible to test directives with props in template', async () => {
   const hidden = 'SPOILER ALERT';
   const visible = 'There is nothing to see here ...';
 
-  const component = await render(SpoilerDirective, {
+  const { mouseLeave, mouseOver } = await render(SpoilerDirective, {
     template: `<div appSpoiler hidden="${hidden}" visible="${visible}"></div>`,
   });
 
-  expect(component.queryByText(visible)).not.toBeInTheDocument();
-  expect(component.queryByText(hidden)).toBeInTheDocument();
+  expect(screen.queryByText(visible)).not.toBeInTheDocument();
+  expect(screen.queryByText(hidden)).toBeInTheDocument();
 
-  component.mouseOver(component.queryByText(hidden));
-  expect(component.queryByText(hidden)).not.toBeInTheDocument();
-  expect(component.queryByText(visible)).toBeInTheDocument();
+  mouseOver(screen.queryByText(hidden));
+  expect(screen.queryByText(hidden)).not.toBeInTheDocument();
+  expect(screen.queryByText(visible)).toBeInTheDocument();
 
-  component.mouseLeave(component.queryByText(visible));
-  expect(component.queryByText(hidden)).toBeInTheDocument();
-  expect(component.queryByText(visible)).not.toBeInTheDocument();
+  mouseLeave(screen.queryByText(visible));
+  expect(screen.queryByText(hidden)).toBeInTheDocument();
+  expect(screen.queryByText(visible)).not.toBeInTheDocument();
 });

src/app/examples/07-with-ngrx-mock-store.spec.ts

@@ -1,11 +1,9 @@
-import { render } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 
 import { DetailComponent, MasterComponent, HiddenDetailComponent } from './09-router';
-import { TestBed } from '@angular/core/testing';
-import { Router } from '@angular/router';
 
 test('it can navigate to routes', async () => {
-  const component = await render(MasterComponent, {
+  const { navigate } = await render(MasterComponent, {
     declarations: [DetailComponent, HiddenDetailComponent],
     routes: [
       {
@@ -24,27 +22,27 @@ test('it can navigate to routes', async () => {
     ],
   });
 
-  expect(component.queryByText(/Detail one/i)).not.toBeInTheDocument();
+  expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument();
 
-  await component.navigate(component.getByText(/Load one/));
-  expect(component.queryByText(/Detail one/i)).toBeInTheDocument();
+  await navigate(screen.getByText(/Load one/));
+  expect(screen.queryByText(/Detail one/i)).toBeInTheDocument();
 
-  await component.navigate(component.getByText(/Load three/));
-  expect(component.queryByText(/Detail one/i)).not.toBeInTheDocument();
-  expect(component.queryByText(/Detail three/i)).toBeInTheDocument();
+  await navigate(screen.getByText(/Load three/));
+  expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument();
+  expect(screen.queryByText(/Detail three/i)).toBeInTheDocument();
 
-  await component.navigate(component.getByText(/Back to parent/));
-  expect(component.queryByText(/Detail three/i)).not.toBeInTheDocument();
+  await navigate(screen.getByText(/Back to parent/));
+  expect(screen.queryByText(/Detail three/i)).not.toBeInTheDocument();
 
-  await component.navigate(component.getByText(/Load two/));
-  expect(component.queryByText(/Detail two/i)).toBeInTheDocument();
-  await component.navigate(component.getByText(/hidden x/));
-  expect(component.queryByText(/You found the treasure!/i)).toBeInTheDocument();
+  await navigate(screen.getByText(/Load two/));
+  expect(screen.queryByText(/Detail two/i)).toBeInTheDocument();
+  await navigate(screen.getByText(/hidden x/));
+  expect(screen.queryByText(/You found the treasure!/i)).toBeInTheDocument();
 });
 
 test('it can navigate to routes with a base path', async () => {
   const basePath = 'base';
-  const component = await render(MasterComponent, {
+  const { navigate } = await render(MasterComponent, {
     declarations: [DetailComponent, HiddenDetailComponent],
     routes: [
       {
@@ -63,20 +61,20 @@ test('it can navigate to routes with a base path', async () => {
     ],
   });
 
-  expect(component.queryByText(/Detail one/i)).not.toBeInTheDocument();
+  expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument();
 
-  await component.navigate(component.getByText(/Load one/), basePath);
-  expect(component.queryByText(/Detail one/i)).toBeInTheDocument();
+  await navigate(screen.getByText(/Load one/), basePath);
+  expect(screen.queryByText(/Detail one/i)).toBeInTheDocument();
 
-  await component.navigate(component.getByText(/Load three/), basePath);
-  expect(component.queryByText(/Detail one/i)).not.toBeInTheDocument();
-  expect(component.queryByText(/Detail three/i)).toBeInTheDocument();
+  await navigate(screen.getByText(/Load three/), basePath);
+  expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument();
+  expect(screen.queryByText(/Detail three/i)).toBeInTheDocument();
 
-  await component.navigate(component.getByText(/Back to parent/));
-  expect(component.queryByText(/Detail three/i)).not.toBeInTheDocument();
+  await navigate(screen.getByText(/Back to parent/));
+  expect(screen.queryByText(/Detail three/i)).not.toBeInTheDocument();
 
-  await component.navigate('base/detail/two'); // possible to just use strings
-  expect(component.queryByText(/Detail two/i)).toBeInTheDocument();
-  await component.navigate('/hidden-detail', basePath);
-  expect(component.queryByText(/You found the treasure!/i)).toBeInTheDocument();
+  await navigate('base/detail/two'); // possible to just use strings
+  expect(screen.queryByText(/Detail two/i)).toBeInTheDocument();
+  await navigate('/hidden-detail', basePath);
+  expect(screen.queryByText(/You found the treasure!/i)).toBeInTheDocument();
 });

src/app/examples/08-directive.spec.ts

@@ -1,9 +1,9 @@
-import { render } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 
 import { DataInjectedComponent, DATA } from './10-inject-token-dependency';
 
 test('injects data into the component', async () => {
-  const component = await render(DataInjectedComponent, {
+  await render(DataInjectedComponent, {
     providers: [
       {
         provide: DATA,
@@ -12,5 +12,5 @@ test('injects data into the component', async () => {
     ],
   });
 
-  expect(component.getByText(/Hello boys and girls/i)).toBeInTheDocument();
+  expect(screen.getByText(/Hello boys and girls/i)).toBeInTheDocument();
 });

src/app/examples/09-router.spec.ts

@@ -2,7 +2,8 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "types": []
+    "types": [],
+    "allowJs": true
   },
-  "exclude": ["**/test.ts", "**/*.spec.ts"]
+  "files": ["main.ts", "polyfills.ts"]
 }