Skip to content

Commit a7606ed

Browse files
timdeschryvertimdeschryver
authored
add angular code samples (#1303)
1 parent e02bddc commit a7606ed

File tree

12 files changed

+284
-30
lines changed

12 files changed

+284
-30
lines changed

‎docs/dom-testing-library/api-configuration.mdx‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,15 @@ The library can be configured via the `configure` function, which accepts:
2121
> Framework-specific wrappers like React Testing Library may add more options to
2222
> the ones shown below.
2323
24-
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
25-
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
24+
<Tabs
25+
defaultValue="native"
26+
values={[
27+
{ label: 'Native', value: 'native', },
28+
{ label: 'React', value: 'react', },
29+
{ label: 'Angular', value: 'angular', },
30+
{ label: 'Cypress', value: 'cypress', },
31+
]
32+
}>
2633
<TabItem value="native">
2734

2835
```js title="setup-tests.js"
@@ -47,6 +54,19 @@ configure({
4754
import {configure} from '@testing-library/react'
4855

4956
configure({testIdAttribute: 'data-my-test-id'})
57+
```
58+
59+
</TabItem>
60+
<TabItem value="angular">
61+
62+
```ts title="setup-tests.ts"
63+
import {configure} from '@testing-library/angular'
64+
65+
configure({
66+
dom: {
67+
testIdAttribute: 'data-my-test-id',
68+
},
69+
})
5070
```
5171

5272
</TabItem>

‎docs/dom-testing-library/api-events.mdx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,13 @@ fireEvent(
136136

137137
[Jest's Mock functions](https://jestjs.io/docs/en/mock-functions) can be used to
138138
test that a component will call its bound callback in response to a particular
139-
event.
139+
event.
140140

141141
<Tabs
142142
defaultValue="react"
143143
values={[
144-
{ label: 'React', value: 'react', }
144+
{ label: 'React', value: 'react', },
145+
{ label: 'Angular', value: 'angular', },
145146
]
146147
}>
147148
<TabItem value="react">
@@ -159,6 +160,31 @@ test('calls onClick prop when clicked', () => {
159160
fireEvent.click(screen.getByText(/click me/i))
160161
expect(handleClick).toHaveBeenCalledTimes(1)
161162
})
163+
```
164+
165+
</TabItem>
166+
<TabItem value="angular">
167+
168+
```ts
169+
import {render, screen, fireEvent} from '@testing-library/angular'
170+
171+
@Component({
172+
template: `<button (click)="handleClick.emit()">Click Me</button>`,
173+
})
174+
class ButtonComponent {
175+
@Output() handleClick = new EventEmitter<void>()
176+
}
177+
178+
test('calls onClick prop when clicked', async () => {
179+
const handleClick = jest.fn()
180+
await render(ButtonComponent, {
181+
componentOutputs: {
182+
handleClick: {emit: handleClick} as any,
183+
},
184+
})
185+
await fireEvent.click(screen.getByText(/click me/i))
186+
expect(handleClick).toHaveBeenCalledTimes(1)
187+
})
162188
```
163189

164190
</TabItem>

‎docs/dom-testing-library/api-within.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ could do:
1919
values={[
2020
{ label: 'Native', value: 'native', },
2121
{ label: 'React', value: 'react', },
22+
{ label: 'Angular', value: 'angular', },
2223
{ label: 'Cypress', value: 'cypress', },
2324
]
2425
}>
@@ -40,6 +41,17 @@ import {render, within} from '@testing-library/react'
4041
const {getByText} = render(<MyComponent />)
4142
const messages = getByText('messages')
4243
const helloMessage = within(messages).getByText('hello')
44+
```
45+
46+
</TabItem>
47+
<TabItem value="angular">
48+
49+
```ts
50+
import {render, within} from '@testing-library/angular'
51+
52+
const {getByText} = await render(MyComponent)
53+
const messages = getByText('messages')
54+
const helloMessage = within(messages).getByText('hello')
4355
```
4456

4557
</TabItem>

‎docs/queries/about.mdx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,15 @@ React Testing Library re-export `screen` so you can use it the same way.
187187

188188
Here's how you use it:
189189

190-
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
191-
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
190+
<Tabs
191+
defaultValue="native"
192+
values={[
193+
{ label: 'Native', value: 'native', },
194+
{ label: 'React', value: 'react', },
195+
{ label: 'Angular', value: 'angular', },
196+
{ label: 'Cypress', value: 'cypress', },
197+
]
198+
}>
192199
<TabItem value="native">
193200

194201
```js
@@ -215,6 +222,22 @@ render(
215222
</div>,
216223
)
217224

225+
const exampleInput = screen.getByLabelText('Example')
226+
```
227+
228+
</TabItem>
229+
<TabItem value="angular">
230+
231+
```ts
232+
import {render, screen} from '@testing-library/angular'
233+
234+
await render(`
235+
<div>
236+
<label for="example">Example</label>
237+
<input id="example" />
238+
</div>
239+
`)
240+
218241
const exampleInput = screen.getByLabelText('Example')
219242
```
220243

@@ -295,8 +318,9 @@ can contain options that affect the precision of string matching:
295318
- `exact`: Defaults to `true`; matches full strings, case-sensitive. When false,
296319
matches substrings and is not case-sensitive.
297320
- `exact` has no effect on `regex` or `function` arguments.
298-
- `exact` has no effect on accessible names specified with the `name` option of `*byRole`
299-
queries. You can use a regex for fuzzy matching on accessible names.
321+
- `exact` has no effect on accessible names specified with the `name` option
322+
of `*byRole` queries. You can use a regex for fuzzy matching on accessible
323+
names.
300324
- In most cases using a regex instead of a string gives you more control over
301325
fuzzy matching and should be preferred over `{ exact: false }`.
302326
- `normalizer`: An optional function which overrides normalization behavior. See

‎docs/queries/byalttext.mdx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,15 @@ as it's deprecated).
3737
<img alt="Incredibles 2 Poster" src="/incredibles-2.png" />
3838
```
3939

40-
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
41-
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
40+
<Tabs
41+
defaultValue="native"
42+
values={[
43+
{ label: 'Native', value: 'native', },
44+
{ label: 'React', value: 'react', },
45+
{ label: 'Angular', value: 'angular', },
46+
{ label: 'Cypress', value: 'cypress', },
47+
]
48+
}>
4249
<TabItem value="native">
4350

4451
```js
@@ -55,6 +62,16 @@ import {render, screen} from '@testing-library/react'
5562

5663
render(<MyComponent />)
5764
const incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)
65+
```
66+
67+
</TabItem>
68+
<TabItem value="angular">
69+
70+
```ts
71+
import {render, screen} from '@testing-library/angular'
72+
73+
await render(MyComponent)
74+
const incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)
5875
```
5976

6077
</TabItem>

‎docs/queries/bydisplayvalue.mdx‎

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,15 @@ display value.
3535
document.getElementById('lastName').value = 'Norris'
3636
```
3737

38-
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
39-
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
38+
<Tabs
39+
defaultValue="native"
40+
values={[
41+
{ label: 'Native', value: 'native', },
42+
{ label: 'React', value: 'react', },
43+
{ label: 'Angular', value: 'angular', },
44+
{ label: 'Cypress', value: 'cypress', },
45+
]
46+
}>
4047
<TabItem value="native">
4148

4249
```js
@@ -53,6 +60,16 @@ import {render, screen} from '@testing-library/react'
5360

5461
render(<MyComponent />)
5562
const lastNameInput = screen.getByDisplayValue('Norris')
63+
```
64+
65+
</TabItem>
66+
<TabItem value="angular">
67+
68+
```ts
69+
import {render, screen} from '@testing-library/angular'
70+
71+
await render(MyComponent)
72+
const lastNameInput = screen.getByDisplayValue('Norris')
5673
```
5774

5875
</TabItem>
@@ -75,8 +92,15 @@ cy.findByDisplayValue('Norris').should('exist')
7592
document.getElementById('messageTextArea').value = 'Hello World'
7693
```
7794

78-
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
79-
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
95+
<Tabs
96+
defaultValue="native"
97+
values={[
98+
{ label: 'Native', value: 'native', },
99+
{ label: 'React', value: 'react', },
100+
{ label: 'Angular', value: 'angular', },
101+
{ label: 'Cypress', value: 'cypress', },
102+
]
103+
}>
80104
<TabItem value="native">
81105

82106
```js
@@ -93,6 +117,16 @@ import {render, screen} from '@testing-library/react'
93117

94118
render(<MyComponent />)
95119
const messageTextArea = screen.getByDisplayValue('Hello World')
120+
```
121+
122+
</TabItem>
123+
<TabItem value="angular">
124+
125+
```ts
126+
import {render, screen} from '@testing-library/angular'
127+
128+
await render(MyComponent)
129+
const messageTextArea = screen.getByDisplayValue('Hello World')
96130
```
97131

98132
</TabItem>
@@ -119,8 +153,15 @@ matches the given [`TextMatch`](queries/about.mdx#textmatch).
119153
</select>
120154
```
121155

122-
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
123-
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
156+
<Tabs
157+
defaultValue="native"
158+
values={[
159+
{ label: 'Native', value: 'native', },
160+
{ label: 'React', value: 'react', },
161+
{ label: 'Angular', value: 'angular', },
162+
{ label: 'Cypress', value: 'cypress', },
163+
]
164+
}>
124165
<TabItem value="native">
125166

126167
```js
@@ -137,6 +178,16 @@ import {render, screen} from '@testing-library/react'
137178

138179
render(<MyComponent />)
139180
const selectElement = screen.getByDisplayValue('Alaska')
181+
```
182+
183+
</TabItem>
184+
<TabItem value="angular">
185+
186+
```ts
187+
import {render, screen} from '@testing-library/angular'
188+
189+
await render(MyComponent)
190+
const selectElement = screen.getByDisplayValue('Alaska')
140191
```
141192

142193
</TabItem>

‎docs/queries/bylabeltext.mdx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,15 @@ The example below will find the input node for the following DOM structures:
5353
<input aria-label="Username" />
5454
```
5555

56-
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
57-
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
56+
<Tabs
57+
defaultValue="native"
58+
values={[
59+
{ label: 'Native', value: 'native', },
60+
{ label: 'React', value: 'react', },
61+
{ label: 'Angular', value: 'angular', },
62+
{ label: 'Cypress', value: 'cypress', },
63+
]
64+
}>
5865
<TabItem value="native">
5966

6067
```js
@@ -71,6 +78,17 @@ import {render, screen} from '@testing-library/react'
7178

7279
render(<Login />)
7380

81+
const inputNode = screen.getByLabelText('Username')
82+
```
83+
84+
</TabItem>
85+
<TabItem value="angular">
86+
87+
```ts
88+
import {render, screen} from '@testing-library/angular'
89+
90+
await render(Login)
91+
7492
const inputNode = screen.getByLabelText('Username')
7593
```
7694

@@ -94,8 +112,8 @@ is robust against switching to `aria-label` or `aria-labelledby`.
94112

95113
### `selector`
96114

97-
If it is important that you query a specific element (e.g. an `<input>`) you can provide a
98-
`selector` in the options:
115+
If it is important that you query a specific element (e.g. an `<input>`) you can
116+
provide a `selector` in the options:
99117

100118
```js
101119
// Multiple elements labelled via aria-labelledby

‎docs/queries/byplaceholdertext.mdx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,15 @@ matches the given [`TextMatch`](queries/about.mdx#textmatch).
2929
<input placeholder="Username" />
3030
```
3131

32-
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
33-
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
32+
<Tabs
33+
defaultValue="native"
34+
values={[
35+
{ label: 'Native', value: 'native', },
36+
{ label: 'React', value: 'react', },
37+
{ label: 'Angular', value: 'angular', },
38+
{ label: 'Cypress', value: 'cypress', },
39+
]
40+
}>
3441
<TabItem value="native">
3542

3643
```js
@@ -47,6 +54,16 @@ import {render, screen} from '@testing-library/react'
4754

4855
render(<MyComponent />)
4956
const inputNode = screen.getByPlaceholderText('Username')
57+
```
58+
59+
</TabItem>
60+
<TabItem value="angular">
61+
62+
```ts
63+
import {render, screen} from '@testing-library/angular'
64+
65+
await render(MyComponent)
66+
const inputNode = screen.getByPlaceholderText('Username')
5067
```
5168

5269
</TabItem>

0 commit comments

Comments
 (0)