Merge pull request #101 from testing-library/pr/update-examples

Author: timdeschryver

README.md

@@ -97,7 +97,7 @@ counter.component.ts
   selector: 'counter',
   template: `
     <button (click)="decrement()">-</button>
-    <span data-testid="count">Current Count: {{ counter }}</span>
+    <span>Current Count: {{ counter }}</span>
     <button (click)="increment()">+</button>
   `,
 })
@@ -117,8 +117,8 @@ export class CounterComponent {
 counter.component.spec.ts
 
 ```typescript
-import { render, screen } from '@testing-library/angular';
-import CounterComponent from './counter.component.ts';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { CounterComponent } from './counter.component.ts';
 
 describe('Counter', () => {
   test('should render counter', async () => {
@@ -128,11 +128,12 @@ describe('Counter', () => {
   });
 
   test('should increment the counter on click', async () => {
-    const { click } = await render(CounterComponent, { componentProperties: { counter: 5 } });
+    await render(CounterComponent, { componentProperties: { counter: 5 } });
 
-    click(screen.getByText('+'));
+    const incrementButton = screen.getByRole('button', { name: /increment/i });
+    fireEvent.click(incrementControl);
 
-    expect(getByText('Current Count: 6'));
+    expect(screen.getByText('Current Count: 6'));
   });
 });
 ```
@@ -194,6 +195,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.

package.json

@@ -35,7 +35,7 @@
     "@angular/router": "^9.0.3",
     "@ngrx/store": "^9.0.0-rc.0",
     "@phenomnomnominal/tsquery": "^3.0.0",
-    "@testing-library/dom": "^7.1.1",
+    "@testing-library/dom": "^7.7.3",
     "@testing-library/user-event": "^8.1.0",
     "core-js": "^3.1.3",
     "rxjs": "^6.5.4",

projects/testing-library/package.json

@@ -29,7 +29,7 @@
     "@angular/core": "^9.0.0"
   },
   "dependencies": {
-    "@testing-library/dom": "^7.1.0",
+    "@testing-library/dom": "^7.7.3",
     "@testing-library/user-event": "^8.1.0",
     "@phenomnomnominal/tsquery": "^3.0.0",
     "tslint": "^5.16.0"

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

@@ -14,6 +14,7 @@ import {
   fireEvent as dtlFireEvent,
   screen as dtlScreen,
   queries as dtlQueries,
+  waitForOptions,
 } from '@testing-library/dom';
 import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
 import { createSelectOptions, createType, tab } from './user-events';
@@ -147,26 +148,13 @@ export async function render<SutType, WrapperType = SutType>(
     return result;
   };
 
-  function componentWaitFor<T>(
-    callback,
-    options: {
-      container?: HTMLElement;
-      timeout?: number;
-      interval?: number;
-      mutationObserverOptions?: MutationObserverInit;
-    } = { container: fixture.nativeElement },
-  ): Promise<T> {
+  function componentWaitFor<T>(callback, options: waitForOptions = { container: fixture.nativeElement }): Promise<T> {
     return waitForWrapper(detectChanges, callback, options);
   }
 
   function componentWaitForElementToBeRemoved<T>(
     callback: (() => T) | T,
-    options: {
-      container?: HTMLElement;
-      timeout?: number;
-      interval?: number;
-      mutationObserverOptions?: MutationObserverInit;
-    } = { container: fixture.nativeElement },
+    options: waitForOptions = { container: fixture.nativeElement },
   ): Promise<T> {
     return waitForElementToBeRemovedWrapper(detectChanges, callback, options);
   }
@@ -255,13 +243,8 @@ function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, '
  */
 async function waitForWrapper<T>(
   detectChanges: () => void,
-  callback: () => T,
-  options?: {
-    container?: HTMLElement;
-    timeout?: number;
-    interval?: number;
-    mutationObserverOptions?: MutationObserverInit;
-  },
+  callback: () => T extends Promise<any> ? never : T,
+  options?: waitForOptions,
 ): Promise<T> {
   return await dtlWaitFor(() => {
     detectChanges();
@@ -275,12 +258,7 @@ async function waitForWrapper<T>(
 async function waitForElementToBeRemovedWrapper<T>(
   detectChanges: () => void,
   callback: (() => T) | T,
-  options?: {
-    container?: HTMLElement;
-    timeout?: number;
-    interval?: number;
-    mutationObserverOptions?: MutationObserverInit;
-  },
+  options?: waitForOptions,
 ): Promise<T> {
   let cb;
   if (typeof callback !== 'function') {
@@ -328,12 +306,12 @@ function replaceFindWithFindAndDetectChanges<T>(container: HTMLElement, original
     (newQueries, key) => {
       if (key.startsWith('find')) {
         const getByQuery = dtlQueries[key.replace('find', 'get')];
-        newQueries[key] = async (text, options, waitForOptions) => {
+        newQueries[key] = async (text, options, waitOptions) => {
           // original implementation at https://github.com/testing-library/dom-testing-library/blob/master/src/query-helpers.js
           const result = await waitForWrapper(
             detectChangesForMountedFixtures,
             () => getByQuery(container, text, options),
-            waitForOptions,
+            waitOptions,
           );
           return result;
         };
@@ -377,30 +355,14 @@ const screen = replaceFindWithFindAndDetectChanges(document.body, dtlScreen);
 /**
  * Re-export waitFor with patched waitFor
  */
-async function waitFor<T>(
-  callback: () => T,
-  options?: {
-    container?: HTMLElement;
-    timeout?: number;
-    interval?: number;
-    mutationObserverOptions?: MutationObserverInit;
-  },
-): Promise<T> {
+async function waitFor<T>(callback: () => T extends Promise<any> ? never : T, options?: waitForOptions): Promise<T> {
   return waitForWrapper(detectChangesForMountedFixtures, callback, options);
 }
 
 /**
  * Re-export waitForElementToBeRemoved with patched waitForElementToBeRemoved
  */
-async function waitForElementToBeRemoved<T>(
-  callback: (() => T) | T,
-  options?: {
-    container?: HTMLElement;
-    timeout?: number;
-    interval?: number;
-    mutationObserverOptions?: MutationObserverInit;
-  },
-): Promise<T> {
+async function waitForElementToBeRemoved<T>(callback: (() => T) | T, options?: waitForOptions): Promise<T> {
   return waitForElementToBeRemovedWrapper(detectChangesForMountedFixtures, callback, options);
 }
 

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

@@ -1,11 +1,4 @@
-import {
-  FireFunction,
-  FireObject,
-  Matcher,
-  getByText,
-  SelectorMatcherOptions,
-  queryByText,
-} from '@testing-library/dom';
+import { FireFunction, FireObject, Matcher, screen, ByRoleOptions } from '@testing-library/dom';
 
 // implementation from https://github.com/testing-library/user-event
 export function createSelectOptions(fireEvent: FireFunction & FireObject) {
@@ -18,10 +11,16 @@ export function createSelectOptions(fireEvent: FireFunction & FireObject) {
     fireEvent.click(element);
   }
 
-  function selectOption(select: HTMLSelectElement, index: number, matcher: Matcher, options?: SelectorMatcherOptions) {
-    // fallback to document.body, because libraries as Angular Material will have their custom select component
-    const option = (queryByText(select, matcher, options) ||
-      getByText(document.body, matcher, options)) as HTMLOptionElement;
+  function selectOption(select: HTMLSelectElement, index: number, options: Matcher | ByRoleOptions) {
+    const query =
+      typeof options === 'string'
+        ? (({ name: new RegExp(options, 'i') } as unknown) as ByRoleOptions)
+        : options instanceof RegExp
+        ? (({ name: options } as unknown) as ByRoleOptions)
+        : typeof options === 'function'
+        ? (({ name: options } as unknown) as ByRoleOptions)
+        : options;
+    const option = screen.getByRole('option', query) as HTMLOptionElement;
 
     fireEvent.mouseOver(option);
     fireEvent.mouseMove(option);
@@ -36,8 +35,7 @@ export function createSelectOptions(fireEvent: FireFunction & FireObject) {
 
   return async function selectOptions(
     element: HTMLElement,
-    matcher: Matcher | Matcher[],
-    matcherOptions?: SelectorMatcherOptions,
+    options: Matcher | ByRoleOptions | ((Matcher | ByRoleOptions)[]),
   ) {
     const selectElement = element as HTMLSelectElement;
 
@@ -55,10 +53,10 @@ export function createSelectOptions(fireEvent: FireFunction & FireObject) {
 
     clickElement(selectElement);
 
-    const values = Array.isArray(matcher) ? matcher : [matcher];
+    const values = Array.isArray(options) ? options : [options];
     values
       .filter((_, index) => index === 0 || selectElement.multiple)
-      .forEach((val, index) => selectOption(selectElement, index, val, matcherOptions));
+      .forEach((val, index) => selectOption(selectElement, index, val));
 
     if (wasAnotherElementFocused) {
       fireEvent.blur(focusedElement);

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

@@ -5,8 +5,8 @@ import { SingleComponent } from './00-single-component';
 test('renders the current value and can increment and decrement', async () => {
   await render(SingleComponent);
 
-  const incrementControl = screen.getByText('Increment');
-  const decrementControl = screen.getByText('Decrement');
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const decrementControl = screen.getByRole('button', { name: /decrement/i });
   const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('0');

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

@@ -7,8 +7,8 @@ test('renders the current value and can increment and decrement', async () => {
     declarations: [NestedButtonComponent, NestedValueComponent],
   });
 
-  const incrementControl = screen.getByText('Increment');
-  const decrementControl = screen.getByText('Decrement');
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const decrementControl = screen.getByRole('button', { name: /decrement/i });
   const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('0');

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

@@ -14,9 +14,9 @@ test('is possible to set input and listen for output', async () => {
     },
   });
 
-  const incrementControl = screen.getByText('Increment');
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const sendControl = screen.getByRole('button', { name: /send/i });
   const valueControl = screen.getByTestId('value');
-  const sendControl = screen.getByText('Send');
 
   expect(valueControl.textContent).toBe('47');
 

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

@@ -8,9 +8,9 @@ test('is possible to fill in a form and verify error messages (with the help of
     imports: [ReactiveFormsModule],
   });
 
-  const nameControl = screen.getByLabelText('Name');
-  const scoreControl = screen.getByLabelText(/score/i);
-  const colorControl = screen.getByLabelText('color', { exact: false });
+  const nameControl = screen.getByRole('textbox', { name: /name/i });
+  const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
+  const colorControl = screen.getByRole('combobox', { name: /color/i });
   const errors = screen.getByRole('alert');
 
   expect(errors).toContainElement(screen.queryByText('name is required'));
@@ -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 = screen.getByTestId('my-form');
+  const form = screen.getByRole('form');
   expect(form).toHaveFormValues({
     name: 'Tim',
     score: 7,

src/app/examples/03-forms.ts

@@ -4,7 +4,7 @@ import { FormBuilder, Validators, ReactiveFormsModule, ValidationErrors } from '
 @Component({
   selector: 'app-fixture',
   template: `
-    <form [formGroup]="form" data-testid="my-form">
+    <form [formGroup]="form" name="form">
       <div>
         <label for="name">Name</label>
         <input type="text" id="name" name="name" formControlName="name" required />

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

@@ -9,9 +9,9 @@ test('is possible to fill in a form and verify error messages (with the help of
     imports: [ReactiveFormsModule, MaterialModule],
   });
 
-  const nameControl = screen.getByPlaceholderText('Name');
-  const scoreControl = screen.getByPlaceholderText(/score/i);
-  const colorControl = screen.getByPlaceholderText('color', { exact: false });
+  const nameControl = screen.getByLabelText(/name/i);
+  const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
+  const colorControl = screen.getByRole('listbox', { name: /color/i });
   const errors = screen.getByRole('alert');
 
   expect(errors).toContainElement(screen.queryByText('name is required'));
@@ -35,7 +35,7 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(nameControl).toHaveValue('Tim');
   expect(scoreControl).toHaveValue(7);
 
-  const form = screen.getByTestId('my-form');
+  const form = screen.getByRole('form');
   expect(form).toHaveFormValues({
     name: 'Tim',
     score: 7,

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

@@ -4,7 +4,7 @@ import { FormBuilder, Validators, ReactiveFormsModule, ValidationErrors } from '
 @Component({
   selector: 'app-fixture',
   template: `
-    <form [formGroup]="form" data-testid="my-form">
+    <form [formGroup]="form" name="form">
       <mat-form-field>
         <input matInput placeholder="Name" name="name" formControlName="name" required />
       </mat-form-field>

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

@@ -14,8 +14,8 @@ test('renders the current value and can increment and decrement', async () => {
     ],
   });
 
-  const incrementControl = screen.getByText('Increment');
-  const decrementControl = screen.getByText('Decrement');
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const decrementControl = screen.getByRole('button', { name: /decrement/i });
   const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('0');
@@ -44,8 +44,8 @@ test('renders the current value and can increment and decrement with a mocked je
     ],
   });
 
-  const incrementControl = screen.getByText('Increment');
-  const decrementControl = screen.getByText('Decrement');
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const decrementControl = screen.getByRole('button', { name: /decrement/i });
   const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('50');
@@ -63,8 +63,8 @@ test('renders the current value and can increment and decrement with provideMock
     componentProviders: [provideMock(CounterService)],
   });
 
-  const incrementControl = screen.getByText('Increment');
-  const decrementControl = screen.getByText('Decrement');
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const decrementControl = screen.getByRole('button', { name: /decrement/i });
 
   fireEvent.click(incrementControl);
   fireEvent.click(incrementControl);

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

@@ -17,8 +17,8 @@ test('works with ngrx store', async () => {
     ],
   });
 
-  const incrementControl = screen.getByText('Increment');
-  const decrementControl = screen.getByText('Decrement');
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const decrementControl = screen.getByRole('button', { name: /decrement/i });
   const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('0');

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

@@ -21,8 +21,7 @@ test('works with provideMockStore', async () => {
   const store = TestBed.inject(MockStore);
   store.dispatch = jest.fn();
 
-  screen.getByText('Four');
-  fireEvent.click(screen.getByText('Seven'));
+  fireEvent.click(screen.getByRole('listitem', { name: /seven/i }));
 
   expect(store.dispatch).toBeCalledWith({ type: '[Item List] send', item: 'Seven' });
 });

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

@@ -10,7 +10,7 @@ export const selectItems = createSelector(
   selector: 'app-fixture',
   template: `
     <ul>
-      <li *ngFor="let item of items | async" (click)="send(item)">{{ item }}</li>
+      <li *ngFor="let item of items | async" (click)="send(item)" [attr.aria-label]="item">{{ item }}</li>
     </ul>
   `,
 })