docs: update examples with a11y queries

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.

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>
   `,
 })

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

@@ -24,19 +24,19 @@ test('it can navigate to routes', async () => {
 
   expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument();
 
-  await navigate(screen.getByText(/Load one/));
-  expect(screen.queryByText(/Detail one/i)).toBeInTheDocument();
+  await navigate(screen.getByRole('link', { name: /load one/i }));
+  expect(screen.queryByRole('heading', { name: /Detail one/i })).toBeInTheDocument();
 
-  await navigate(screen.getByText(/Load three/));
-  expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument();
-  expect(screen.queryByText(/Detail three/i)).toBeInTheDocument();
+  await navigate(screen.getByRole('link', { name: /load three/i }));
+  expect(screen.queryByRole('heading', { name: /Detail one/i })).not.toBeInTheDocument();
+  expect(screen.queryByRole('heading', { name: /Detail three/i })).toBeInTheDocument();
 
-  await navigate(screen.getByText(/Back to parent/));
-  expect(screen.queryByText(/Detail three/i)).not.toBeInTheDocument();
+  await navigate(screen.getByRole('link', { name: /back to parent/i }));
+  expect(screen.queryByRole('heading', { name: /Detail three/i })).not.toBeInTheDocument();
 
-  await navigate(screen.getByText(/Load two/));
-  expect(screen.queryByText(/Detail two/i)).toBeInTheDocument();
-  await navigate(screen.getByText(/hidden x/));
+  await navigate(screen.getByRole('link', { name: /load two/i }));
+  expect(screen.queryByRole('heading', { name: /Detail two/i })).toBeInTheDocument();
+  await navigate(screen.getByRole('link', { name: /hidden x/i }));
   expect(screen.queryByText(/You found the treasure!/i)).toBeInTheDocument();
 });
 
@@ -61,21 +61,22 @@ test('it can navigate to routes with a base path', async () => {
     ],
   });
 
-  expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument();
+  expect(screen.queryByRole('heading', { name: /Detail one/i })).not.toBeInTheDocument();
 
-  await navigate(screen.getByText(/Load one/), basePath);
-  expect(screen.queryByText(/Detail one/i)).toBeInTheDocument();
+  await navigate(screen.getByRole('link', { name: /load one/i }), basePath);
+  expect(screen.queryByRole('heading', { name: /Detail one/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 navigate(screen.getByRole('link', { name: /load three/i }), basePath);
+  expect(screen.queryByRole('heading', { name: /Detail one/i })).not.toBeInTheDocument();
+  expect(screen.queryByRole('heading', { name: /Detail three/i })).toBeInTheDocument();
 
-  await navigate(screen.getByText(/Back to parent/));
-  expect(screen.queryByText(/Detail three/i)).not.toBeInTheDocument();
+  await navigate(screen.getByRole('link', { name: /back to parent/i }));
+  expect(screen.queryByRole('heading', { name: /Detail three/i })).not.toBeInTheDocument();
 
-  await navigate('base/detail/two?text=Hello&subtext=World'); // possible to just use strings
-  expect(screen.queryByText(/Detail two/i)).toBeInTheDocument();
-  expect(screen.queryByText(/Hello World/i)).toBeInTheDocument();
+  // It's possible to just use strings
+  await navigate('base/detail/two?text=Hello&subtext=World');
+  expect(screen.queryByRole('heading', { name: /Detail two/i })).toBeInTheDocument();
+  expect(screen.getByText(/Hello World/i)).toBeInTheDocument();
 
   await navigate('/hidden-detail', basePath);
   expect(screen.queryByText(/You found the treasure!/i)).toBeInTheDocument();

src/app/examples/11-ng-content.spec.ts

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/angular';
 
 import { CellComponent } from './11-ng-content';
 
-test('it is posible to test ng-content without selector', async () => {
+test('it is possible to test ng-content without selector', async () => {
   const projection = 'it should be showed into a p element!';
 
   TestBed.overrideComponent(CellComponent, { set: { selector: 'cell' } });