Skip to content

Commit bfbf510

Browse files
committed
chore: format
1 parent 4f531fc commit bfbf510

File tree

27 files changed

+201
-174
lines changed

27 files changed

+201
-174
lines changed

docs/angular-testing-library/examples.mdx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,13 @@ describe('Counter', () => {
5757

5858
## With Standalone Components
5959

60-
Angular Testing Library can also test your standalone components.
61-
In fact, it even becomes easier because you don't have to set up the whole Angular TestBed.
62-
This was previously only [possible when you used Single Component Angular Modules (SCAMs)](https://timdeschryver.dev/blog/single-component-angular-modules-and-component-tests-go-hand-in-hand).
60+
Angular Testing Library can also test your standalone components. In fact, it
61+
even becomes easier because you don't have to set up the whole Angular TestBed.
62+
This was previously only
63+
[possible when you used Single Component Angular Modules (SCAMs)](https://timdeschryver.dev/blog/single-component-angular-modules-and-component-tests-go-hand-in-hand).
6364

64-
Let's migrate the counter component to a standalone component, and let's take a look at how this affects the test.
65+
Let's migrate the counter component to a standalone component, and let's take a
66+
look at how this affects the test.
6567

6668
```ts title="counter.component.ts"
6769
@Component({
@@ -86,8 +88,8 @@ export class CounterComponent {
8688
}
8789
```
8890

89-
Just as you would've expected, this doesn't affect the test cases.
90-
Writing tests for standalone components remains the same as for "regular" components.
91+
Just as you would've expected, this doesn't affect the test cases. Writing tests
92+
for standalone components remains the same as for "regular" components.
9193

9294
```ts title="counter.component.spec.ts"
9395
import {render, screen, fireEvent} from '@testing-library/angular'
@@ -114,7 +116,8 @@ describe('Counter', () => {
114116
})
115117
```
116118

117-
To override an import of a standalone component for your component test, you can use the [`componentImports` property](api.mdx#componentImports).
119+
To override an import of a standalone component for your component test, you can
120+
use the [`componentImports` property](api.mdx#componentImports).
118121

119122
## More examples
120123

@@ -125,7 +128,9 @@ These examples include:
125128
- `@Input` and `@Output` properties
126129
- Forms
127130
- Integration with services
128-
- And [more](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples)
131+
- And
132+
[more](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples)
129133

130134
If you're looking for an example that isn't on the list, please feel free to
131-
create a [new issue](https://github.com/testing-library/angular-testing-library/issues/new).
135+
create a
136+
[new issue](https://github.com/testing-library/angular-testing-library/issues/new).

docs/angular-testing-library/faq.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ As you write your tests, keep in mind:
3131

3232
In general, you should avoid mocking out components (see
3333
[the Guiding Principles section](guiding-principles.mdx)). However, if you need
34-
to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its [`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder).
34+
to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its
35+
[`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder).
3536

3637
```typescript
3738
import {Component, NgModule} from '@angular/core'
@@ -58,7 +59,7 @@ export class AppModule {}
5859
describe('ParentComponent', () => {
5960
it('should not render ChildComponent when shallow rendering', async () => {
6061
// all imports, declarations and exports of AppModule will be mocked.
61-
const dependencies = MockBuilder(ParentComponent, AppModule).build();
62+
const dependencies = MockBuilder(ParentComponent, AppModule).build()
6263

6364
await render(ParentComponent, dependencies)
6465

docs/angular-testing-library/version-compatibility.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: version-compatibility
33
title: Version compatibility
44
---
55

6-
An overview of the compatibility between different versions of Angular Testing Library and Angular.
6+
An overview of the compatibility between different versions of Angular Testing
7+
Library and Angular.
78

89
| Angular | Angular Testing Library |
910
| ------- | ----------------------- |
1011
| 16.x | 13.x \|\| 14.x |
1112
| >= 15.1 | 13.x \|\| 14.x |
1213
| < 15.1 | 11.x \|\| 12.x |
1314
| 14.x | 11.x \|\| 12.x |
14-

docs/dom-testing-library/api-debugging.mdx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ you'd like a solution that works for both, see
4242

4343
**Note**: The output of the DOM is colorized by default if your tests are
4444
running in a node environment. However, you may sometimes want to turn off
45-
colors, such as in cases where the output is written to a log file for
46-
debugging purposes. You can use the environment variable `COLORS` to explicitly
47-
force the colorization off or on. For example:
45+
colors, such as in cases where the output is written to a log file for debugging
46+
purposes. You can use the environment variable `COLORS` to explicitly force the
47+
colorization off or on. For example:
4848

4949
```
5050
COLORS=false npm test
@@ -105,9 +105,9 @@ This function is what also powers
105105
106106
## `screen.debug()`
107107
108-
For convenience `screen` also exposes a `debug` method.
109-
This method is essentially a shortcut for `console.log(prettyDOM())`. It
110-
supports debugging the document, a single element, or an array of elements.
108+
For convenience `screen` also exposes a `debug` method. This method is
109+
essentially a shortcut for `console.log(prettyDOM())`. It supports debugging the
110+
document, a single element, or an array of elements.
111111
112112
```javascript
113113
import {screen} from '@testing-library/dom'
@@ -129,8 +129,8 @@ screen.debug(screen.getAllByText('multi-test'))
129129
## `screen.logTestingPlaygroundURL()`
130130
131131
For debugging using [testing-playground](https://testing-playground.com), screen
132-
exposes this convenient method which logs and returns a URL that can be opened in
133-
a browser.
132+
exposes this convenient method which logs and returns a URL that can be opened
133+
in a browser.
134134
135135
```javascript
136136
import {screen} from '@testing-library/dom'

docs/dom-testing-library/setup.mdx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ the DOM and browser APIs that runs in node. If you're not using Jest and you
1818
would like to run your tests in Node, then you must install jsdom yourself.
1919
There's also a package called
2020
[global-jsdom](https://github.com/modosc/global-jsdom) which can be used to
21-
setup the global environment to simulate the browser APIs. Note that if you're using
22-
Vitest you only need to configure [`environment`](https://vitest.dev/config/#environment)
23-
to `jsdom` to achieve the same effect, you don't need global-jsdom.
21+
setup the global environment to simulate the browser APIs. Note that if you're
22+
using Vitest you only need to configure
23+
[`environment`](https://vitest.dev/config/#environment) to `jsdom` to achieve
24+
the same effect, you don't need global-jsdom.
2425

2526
First, install jsdom and global-jsdom.
2627

docs/ecosystem-user-event.mdx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -615,22 +615,27 @@ method.
615615
Usage example:
616616
617617
```jsx
618-
import React, { useState } from 'react'
618+
import React, {useState} from 'react'
619619
import {render, screen} from '@testing-library/react'
620620
import userEvent, {specialChars} from '@testing-library/user-event'
621621

622622
const InputElement = () => {
623-
const [currentValue, setCurrentValue] = useState('This is a bad example');
624-
return <div>
625-
<label htmlFor='my-input'>Example:</label>
626-
<input id='my-input' type='text' value={currentValue} onChange={(e) => setCurrentValue(e.target.value)} />
627-
</div>;
623+
const [currentValue, setCurrentValue] = useState('This is a bad example')
624+
return (
625+
<div>
626+
<label htmlFor="my-input">Example:</label>
627+
<input
628+
id="my-input"
629+
type="text"
630+
value={currentValue}
631+
onChange={e => setCurrentValue(e.target.value)}
632+
/>
633+
</div>
634+
)
628635
}
629636

630637
test('delete characters within the selectedRange', () => {
631-
render(
632-
<InputElement/>,
633-
)
638+
render(<InputElement />)
634639
const input = screen.getByLabelText(/example/i)
635640
input.setSelectionRange(10, 13)
636641
userEvent.type(input, `${specialChars.backspace}good`)

docs/example-external.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ sidebar_label: External Examples
66

77
## Code Samples
88

9-
- You can find more React Testing Library examples at [https://react-testing-examples.netlify.app/](https://react-testing-examples.netlify.app/).
9+
- You can find more React Testing Library examples at
10+
[https://react-testing-examples.netlify.app/](https://react-testing-examples.netlify.app/).
1011

1112
## Playground
1213

docs/example-formik.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,12 @@ test('rendering and submitting a basic Formik form', async () => {
6565
render(<MyForm onSubmit={handleSubmit} />)
6666
const user = userEvent.setup()
6767

68-
await user.type(screen.getByRole("textbox", { name: /first name/i }), 'John')
69-
await user.type(screen.getByRole("textbox", { name: /last name/i }), 'Dee')
70-
await user.type(screen.getByRole("textbox", { name: /email/i }), 'john.dee@someemail.com')
68+
await user.type(screen.getByRole('textbox', {name: /first name/i}), 'John')
69+
await user.type(screen.getByRole('textbox', {name: /last name/i}), 'Dee')
70+
await user.type(
71+
screen.getByRole('textbox', {name: /email/i}),
72+
'john.dee@someemail.com',
73+
)
7174

7275
await user.click(screen.getByRole('button', {name: /submit/i}))
7376

docs/example-react-router.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,8 @@ export const App = () => (
168168
```
169169

170170
In your tests, pass the history object as a whole to the Router component.
171-
**Note:** React Router v5 [only works with History v4](https://github.com/remix-run/history#documentation),
171+
**Note:** React Router v5
172+
[only works with History v4](https://github.com/remix-run/history#documentation),
172173
so make sure you have the correct version of `history` installed.
173174

174175
```jsx

docs/learning.mdx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,14 @@ sidebar_label: Learning Material
4343
[Daniel Afonso](https://twitter.com/danieljcafonso)
4444
- [Testing Apollo Components Using react-testing-library](https://www.arahansen.com/testing-apollo-components-using-react-testing-library/)
4545
by [Andrew Hansen](https://twitter.com/arahansen)
46-
- [Enzyme vs React Testing Library: A Migration Guide](https://claritydev.net/blog/enzyme-vs-react-testing-library-migration-guide) by [Alex Khomenko](https://claritydev.net)
47-
- [Testing React Hook Form With React Testing Library](https://claritydev.net/blog/testing-react-hook-form-with-react-testing-library) by [Alex Khomenko](https://claritydev.net)
48-
- [Improving React Testing Library Tests](https://claritydev.net/blog/improving-react-testing-library-tests) by [Alex Khomenko](https://claritydev.net)
49-
- [Testing Angular Challenges](https://angular-challenges.vercel.app/challenges/testing/) by [Thomas Laforge](https://twitter.com/laforge_toma)
46+
- [Enzyme vs React Testing Library: A Migration Guide](https://claritydev.net/blog/enzyme-vs-react-testing-library-migration-guide)
47+
by [Alex Khomenko](https://claritydev.net)
48+
- [Testing React Hook Form With React Testing Library](https://claritydev.net/blog/testing-react-hook-form-with-react-testing-library)
49+
by [Alex Khomenko](https://claritydev.net)
50+
- [Improving React Testing Library Tests](https://claritydev.net/blog/improving-react-testing-library-tests)
51+
by [Alex Khomenko](https://claritydev.net)
52+
- [Testing Angular Challenges](https://angular-challenges.vercel.app/challenges/testing/)
53+
by [Thomas Laforge](https://twitter.com/laforge_toma)
5054

5155
## Portuguese 🇧🇷
5256

@@ -61,6 +65,7 @@ sidebar_label: Learning Material
6165

6266
- [TESTING en REACT 🧪 ¡Aprende DESDE CERO! Con react-testing-library y Jest](https://www.youtube.com/watch?v=KYjjtRgg_H0)
6367
by [Midudev](https://twitter.com/midudev)
64-
- [Buenas prácticas con Angular Testing Library](https://dev.to/danyparedes/buenas-practicas-con-angular-testing-library-59lp) by [Danywalls](https://twitter.com/danywalls)
68+
- [Buenas prácticas con Angular Testing Library](https://dev.to/danyparedes/buenas-practicas-con-angular-testing-library-59lp)
69+
by [Danywalls](https://twitter.com/danywalls)
6570

6671
Feel free to contribute more!

0 commit comments

Comments
 (0)