Skip to content

Commit 8acaebb

Browse files
timdeschryvertimdeschryver
committed
docs: update examples with a11y queries
1 parent 4f0878f commit 8acaebb

14 files changed

+57
-55
lines changed

‎README.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ counter.component.ts
9797
selector: 'counter',
9898
template: `
9999
<button (click)="decrement()">-</button>
100-
<span data-testid="count">Current Count: {{ counter }}</span>
100+
<span>Current Count: {{ counter }}</span>
101101
<button (click)="increment()">+</button>
102102
`,
103103
})
@@ -117,8 +117,8 @@ export class CounterComponent {
117117
counter.component.spec.ts
118118

119119
```typescript
120-
import { render, screen } from '@testing-library/angular';
121-
import CounterComponent from './counter.component.ts';
120+
import { render, screen, fireEvent } from '@testing-library/angular';
121+
import { CounterComponent } from './counter.component.ts';
122122

123123
describe('Counter', () => {
124124
test('should render counter', async () => {
@@ -128,11 +128,12 @@ describe('Counter', () => {
128128
});
129129

130130
test('should increment the counter on click', async () => {
131-
const { click } = await render(CounterComponent, { componentProperties: { counter: 5 } });
131+
await render(CounterComponent, { componentProperties: { counter: 5 } });
132132

133-
click(screen.getByText('+'));
133+
const incrementButton = screen.getByRole('button', { name: /increment/i });
134+
fireEvent.click(incrementControl);
134135

135-
expect(getByText('Current Count: 6'));
136+
expect(screen.getByText('Current Count: 6'));
136137
});
137138
});
138139
```
@@ -194,6 +195,7 @@ Thanks goes to these people ([emoji key][emojis]):
194195

195196
<!-- markdownlint-enable -->
196197
<!-- prettier-ignore-end -->
198+
197199
<!-- ALL-CONTRIBUTORS-LIST:END -->
198200

199201
This project follows the [all-contributors][all-contributors] specification.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { SingleComponent } from './00-single-component';
55
test('renders the current value and can increment and decrement', async () => {
66
await render(SingleComponent);
77

8-
const incrementControl = screen.getByText('Increment');
9-
const decrementControl = screen.getByText('Decrement');
8+
const incrementControl = screen.getByRole('button', { name: /increment/i });
9+
const decrementControl = screen.getByRole('button', { name: /decrement/i });
1010
const valueControl = screen.getByTestId('value');
1111

1212
expect(valueControl.textContent).toBe('0');

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ test('renders the current value and can increment and decrement', async () => {
77
declarations: [NestedButtonComponent, NestedValueComponent],
88
});
99

10-
const incrementControl = screen.getByText('Increment');
11-
const decrementControl = screen.getByText('Decrement');
10+
const incrementControl = screen.getByRole('button', { name: /increment/i });
11+
const decrementControl = screen.getByRole('button', { name: /decrement/i });
1212
const valueControl = screen.getByTestId('value');
1313

1414
expect(valueControl.textContent).toBe('0');

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ test('is possible to set input and listen for output', async () => {
1414
},
1515
});
1616

17-
const incrementControl = screen.getByText('Increment');
17+
const incrementControl = screen.getByRole('button', { name: /increment/i });
18+
const sendControl = screen.getByRole('button', { name: /send/i });
1819
const valueControl = screen.getByTestId('value');
19-
const sendControl = screen.getByText('Send');
2020

2121
expect(valueControl.textContent).toBe('47');
2222

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ test('is possible to fill in a form and verify error messages (with the help of
88
imports: [ReactiveFormsModule],
99
});
1010

11-
const nameControl = screen.getByLabelText('Name');
12-
const scoreControl = screen.getByLabelText(/score/i);
13-
const colorControl = screen.getByLabelText('color', { exact: false });
11+
const nameControl = screen.getByRole('textbox', { name: /name/i });
12+
const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
13+
const colorControl = screen.getByRole('combobox', { name: /color/i });
1414
const errors = screen.getByRole('alert');
1515

1616
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
3838
expect(scoreControl).toHaveValue(7);
3939
expect(colorControl).toHaveValue('G');
4040

41-
const form = screen.getByTestId('my-form');
41+
const form = screen.getByRole('form');
4242
expect(form).toHaveFormValues({
4343
name: 'Tim',
4444
score: 7,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FormBuilder, Validators, ReactiveFormsModule, ValidationErrors } from '
44
@Component({
55
selector: 'app-fixture',
66
template: `
7-
<form [formGroup]="form" data-testid="my-form">
7+
<form [formGroup]="form" name="form">
88
<div>
99
<label for="name">Name</label>
1010
<input type="text" id="name" name="name" formControlName="name" required />

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ test('is possible to fill in a form and verify error messages (with the help of
99
imports: [ReactiveFormsModule, MaterialModule],
1010
});
1111

12-
const nameControl = screen.getByPlaceholderText('Name');
13-
const scoreControl = screen.getByPlaceholderText(/score/i);
14-
const colorControl = screen.getByPlaceholderText('color', { exact: false });
12+
const nameControl = screen.getByLabelText(/name/i);
13+
const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
14+
const colorControl = screen.getByRole('listbox', { name: /color/i });
1515
const errors = screen.getByRole('alert');
1616

1717
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
3535
expect(nameControl).toHaveValue('Tim');
3636
expect(scoreControl).toHaveValue(7);
3737

38-
const form = screen.getByTestId('my-form');
38+
const form = screen.getByRole('form');
3939
expect(form).toHaveFormValues({
4040
name: 'Tim',
4141
score: 7,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FormBuilder, Validators, ReactiveFormsModule, ValidationErrors } from '
44
@Component({
55
selector: 'app-fixture',
66
template: `
7-
<form [formGroup]="form" data-testid="my-form">
7+
<form [formGroup]="form" name="form">
88
<mat-form-field>
99
<input matInput placeholder="Name" name="name" formControlName="name" required />
1010
</mat-form-field>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ test('renders the current value and can increment and decrement', async () => {
1414
],
1515
});
1616

17-
const incrementControl = screen.getByText('Increment');
18-
const decrementControl = screen.getByText('Decrement');
17+
const incrementControl = screen.getByRole('button', { name: /increment/i });
18+
const decrementControl = screen.getByRole('button', { name: /decrement/i });
1919
const valueControl = screen.getByTestId('value');
2020

2121
expect(valueControl.textContent).toBe('0');
@@ -44,8 +44,8 @@ test('renders the current value and can increment and decrement with a mocked je
4444
],
4545
});
4646

47-
const incrementControl = screen.getByText('Increment');
48-
const decrementControl = screen.getByText('Decrement');
47+
const incrementControl = screen.getByRole('button', { name: /increment/i });
48+
const decrementControl = screen.getByRole('button', { name: /decrement/i });
4949
const valueControl = screen.getByTestId('value');
5050

5151
expect(valueControl.textContent).toBe('50');
@@ -63,8 +63,8 @@ test('renders the current value and can increment and decrement with provideMock
6363
componentProviders: [provideMock(CounterService)],
6464
});
6565

66-
const incrementControl = screen.getByText('Increment');
67-
const decrementControl = screen.getByText('Decrement');
66+
const incrementControl = screen.getByRole('button', { name: /increment/i });
67+
const decrementControl = screen.getByRole('button', { name: /decrement/i });
6868

6969
fireEvent.click(incrementControl);
7070
fireEvent.click(incrementControl);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ test('works with ngrx store', async () => {
1717
],
1818
});
1919

20-
const incrementControl = screen.getByText('Increment');
21-
const decrementControl = screen.getByText('Decrement');
20+
const incrementControl = screen.getByRole('button', { name: /increment/i });
21+
const decrementControl = screen.getByRole('button', { name: /decrement/i });
2222
const valueControl = screen.getByTestId('value');
2323

2424
expect(valueControl.textContent).toBe('0');

0 commit comments

Comments
 (0)