Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8acaebb

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /