From ea810b7fc9eb450a2a9a1623e4e6a1df0c8f9b5e Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Wed, 21 Jul 2021 18:38:18 -0400 Subject: [PATCH] docs: use `kcd-scripts` Prettier config (#894) * docs: install kcd-scripts Prettier config * docs: format with new Prettier config --- .github/ISSUE_TEMPLATE/bug_report.md | 34 +- .github/ISSUE_TEMPLATE/feature_request.md | 17 +- .prettierrc.js | 7 +- .vscode/settings.json | 4 +- CODE_OF_CONDUCT.md | 58 +- README.md | 34 +- blog/2019-03-17-code-blocks.mdx | 2 +- blog/2019-04-25-new-org.mdx | 8 +- docs/angular-testing-library/api.mdx | 38 +- docs/angular-testing-library/examples.mdx | 8 +- docs/cypress-testing-library/intro.mdx | 14 +- .../dom-testing-library/api-accessibility.mdx | 4 +- docs/dom-testing-library/api-async.mdx | 25 +- .../dom-testing-library/api-configuration.mdx | 14 +- .../api-custom-queries.mdx | 10 +- docs/dom-testing-library/api-debugging.mdx | 16 +- docs/dom-testing-library/api-events.mdx | 26 +- docs/dom-testing-library/api-within.mdx | 6 +- docs/dom-testing-library/cheatsheet.mdx | 8 +- docs/dom-testing-library/example-intro.mdx | 4 +- docs/dom-testing-library/faq.mdx | 2 +- docs/dom-testing-library/install.mdx | 2 +- docs/ecosystem-jest-dom.mdx | 2 +- docs/ecosystem-jest-native.mdx | 2 +- docs/ecosystem-react-select-event.mdx | 10 +- docs/ecosystem-riot-testing-library.mdx | 6 +- docs/ecosystem-rtl-simple-queries.md | 8 +- docs/ecosystem-testing-library-selector.md | 4 +- docs/ecosystem-user-event.mdx | 68 +- docs/example-drag.mdx | 14 +- docs/example-external.mdx | 2 +- docs/example-findByText.md | 12 +- docs/example-formik.md | 12 +- docs/example-input-event.mdx | 28 +- docs/example-reach-router.mdx | 12 +- docs/example-react-context.mdx | 22 +- docs/example-react-hooks-useReducer.mdx | 8 +- docs/example-react-intl.mdx | 18 +- docs/example-react-modal.mdx | 14 +- docs/example-react-router.mdx | 32 +- docs/example-react-transition-group.mdx | 48 +- docs/example-update-props.mdx | 8 +- docs/guide-events.mdx | 17 +- docs/guides-using-fake-timers.mdx | 9 +- docs/marko-testing-library/api.mdx | 32 +- docs/nightwatch-testing-library/intro.mdx | 14 +- docs/pptr-testing-library/intro.mdx | 6 +- docs/preact-testing-library/api.mdx | 12 +- docs/preact-testing-library/example.mdx | 12 +- docs/queries/about.mdx | 26 +- docs/queries/byalttext.mdx | 4 +- docs/queries/bydisplayvalue.mdx | 12 +- docs/queries/bylabeltext.mdx | 12 +- docs/queries/byplaceholdertext.mdx | 4 +- docs/queries/byrole.mdx | 8 +- docs/queries/bytestid.mdx | 4 +- docs/queries/bytext.mdx | 12 +- docs/queries/bytitle.mdx | 4 +- .../example-intro.mdx | 8 +- docs/react-native-testing-library/setup.mdx | 12 +- docs/react-testing-library/api.mdx | 54 +- docs/react-testing-library/cheatsheet.mdx | 6 +- docs/react-testing-library/example-intro.mdx | 47 +- docs/react-testing-library/faq.mdx | 28 +- docs/react-testing-library/intro.mdx | 2 +- .../migrate-from-enzyme.mdx | 8 +- docs/react-testing-library/setup.mdx | 48 +- docs/svelte-testing-library/api.mdx | 22 +- docs/svelte-testing-library/example.mdx | 6 +- docs/svelte-testing-library/setup.mdx | 2 +- docs/testcafe-testing-library/intro.mdx | 46 +- docs/vue-testing-library/api.mdx | 4 +- docs/vue-testing-library/cheatsheet.mdx | 7 +- docs/vue-testing-library/examples.mdx | 8 +- docs/vue-testing-library/faq.mdx | 6 +- docs/vue-testing-library/intro.mdx | 7 +- docs/webdriverio-testing-library/intro.mdx | 16 +- package-lock.json | 22016 ++++++++++++---- package.json | 16 +- src/components/GridBlock/index.jsx | 2 +- src/components/MarkdownBlock/index.jsx | 6 +- src/components/Showcase/index.jsx | 4 +- src/css/custom.css | 4 +- src/pages/help.js | 14 +- src/pages/index.js | 41 +- src/pages/users.js | 4 +- 86 files changed, 18079 insertions(+), 5224 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea782..8bc4a7ed8 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,35 +4,33 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- -**Describe the bug** -A clear and concise description of what the bug is. +**Describe the bug** A clear and concise description of what the bug is. + +**To Reproduce** Steps to reproduce the behavior: -**To Reproduce** -Steps to reproduce the behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error -**Expected behavior** -A clear and concise description of what you expected to happen. +**Expected behavior** A clear and concise description of what you expected to +happen. -**Screenshots** -If applicable, add screenshots to help explain your problem. +**Screenshots** If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] -**Additional context** -Add any other context about the problem here. +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] + +**Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7d6..2866f790f 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,17 +4,16 @@ about: Suggest an idea for this project title: '' labels: '' assignees: '' - --- -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] +**Is your feature request related to a problem? Please describe.** A clear and +concise description of what the problem is. Ex. I'm always frustrated when [...] -**Describe the solution you'd like** -A clear and concise description of what you want to happen. +**Describe the solution you'd like** A clear and concise description of what you +want to happen. -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. +**Describe alternatives you've considered** A clear and concise description of +any alternative solutions or features you've considered. -**Additional context** -Add any other context or screenshots about the feature request here. +**Additional context** Add any other context or screenshots about the feature +request here. diff --git a/.prettierrc.js b/.prettierrc.js index 30f575a92..4679d9bf6 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,6 +1 @@ -module.exports = { - proseWrap: 'always', - singleQuote: true, - semi: false, - trailingComma: 'es5', -} \ No newline at end of file +module.exports = require('kcd-scripts/prettier') diff --git a/.vscode/settings.json b/.vscode/settings.json index 3c9f7f1e3..176df8375 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,9 +1,9 @@ { "editor.rulers": [ 60, // try to keep examples this long - 80, // hard wrap + 80 // hard wrap ], "files.associations": { "*.md": "mdx" - }, + } } diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 26cd10755..6a568d709 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -5,31 +5,31 @@ In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and expression, -level of experience, education, socio-economic status, nationality, personal -appearance, race, religion, or sexual identity and orientation. +size, disability, ethnicity, sex characteristics, gender identity and +expression, level of experience, education, socio-economic status, nationality, +personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting ## Our Responsibilities @@ -37,11 +37,11 @@ Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. +Project maintainers have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, or to ban temporarily or permanently any +contributor for other behaviors that they deem inappropriate, threatening, +offensive, or harmful. ## Scope @@ -55,11 +55,12 @@ further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at alexander.krolick+testing@gmail.com. All -complaints will be reviewed and investigated and will result in a response that -is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. +reported by contacting the project team at alexander.krolick+testing@gmail.com. +All complaints will be reviewed and investigated and will result in a response +that is deemed necessary and appropriate to the circumstances. The project team +is obligated to maintain confidentiality with regard to the reporter of an +incident. Further details of specific enforcement policies may be posted +separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other @@ -67,8 +68,9 @@ members of the project's leadership. ## Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 1.4, available at +https://www.contributor-covenant.org/version/1/4/code-of-conduct.html [homepage]: https://www.contributor-covenant.org diff --git a/README.md b/README.md index 7ce26e30f..662e1e190 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,4 @@ -testing-library-docs --------------------- - +## testing-library-docs [![Open Collective Sponsors and Backers][opencollective-badge]][opencollective] @@ -8,7 +6,10 @@ testing-library-docs [![Code of Conduct][coc-badge]][coc] -Documentation site for [React Testing Library](https://github.com/testing-library/react-testing-library), [DOM Testing Library](https://github.com/testing-library/dom-testing-library), and [related projects](https://github.com/testing-library) +Documentation site for +[React Testing Library](https://github.com/testing-library/react-testing-library), +[DOM Testing Library](https://github.com/testing-library/dom-testing-library), +and [related projects](https://github.com/testing-library) **https://testing-library.com** @@ -16,13 +17,18 @@ Documentation site for [React Testing Library](https://github.com/testing-librar [![Netlify Status][netlify-badge]][build] -[netlify-badge]: https://api.netlify.com/api/v1/badges/24366204-84ca-41e9-b573-2a64f0845e46/deploy-status +[netlify-badge]: + https://api.netlify.com/api/v1/badges/24366204-84ca-41e9-b573-2a64f0845e46/deploy-status [build]: https://app.netlify.com/sites/testing-library/deploys [opencollective]: https://opencollective.com/testing-library/ -[opencollective-badge]: https://img.shields.io/opencollective/all/testing-library.svg?label=opencollective%20backers&style=flat-square -[allcontributors-badge]: https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square -[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square -[coc]: https://github.com/testing-library/react-testing-library/blob/main/CODE_OF_CONDUCT.md +[opencollective-badge]: + https://img.shields.io/opencollective/all/testing-library.svg?label=opencollective%20backers&style=flat-square +[allcontributors-badge]: + https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square +[coc-badge]: + https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square +[coc]: + https://github.com/testing-library/react-testing-library/blob/main/CODE_OF_CONDUCT.md This website was created with [Docusaurus](https://v2.docusaurus.io). @@ -69,8 +75,7 @@ For more information about docs, click [here](https://v2.docusaurus.io/docs) ## Editing an existing blog post -Edit blog posts by navigating to `blog` and editing the corresponding -post: +Edit blog posts by navigating to `blog` and editing the corresponding post: `blog/post-to-be-edited.mdx` @@ -126,7 +131,8 @@ For more information about adding new docs, click ## Contributors -Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): +Thanks goes to these wonderful people +([emoji key](https://allcontributors.org/docs/en/emoji-key)): @@ -355,4 +361,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! +This project follows the +[all-contributors](https://github.com/all-contributors/all-contributors) +specification. Contributions of any kind welcome! diff --git a/blog/2019-03-17-code-blocks.mdx b/blog/2019-03-17-code-blocks.mdx index a9e4f2d2f..b17d70ea2 100755 --- a/blog/2019-03-17-code-blocks.mdx +++ b/blog/2019-03-17-code-blocks.mdx @@ -1,7 +1,7 @@ --- title: Multi-Framework Code Blocks author: Alex Krolick -authorURL: "http://github.com/alexkrolick" +authorURL: 'http://github.com/alexkrolick' --- Many of the code samples have been updated to include tabs to switch between diff --git a/blog/2019-04-25-new-org.mdx b/blog/2019-04-25-new-org.mdx index 470ce04be..1583d150d 100644 --- a/blog/2019-04-25-new-org.mdx +++ b/blog/2019-04-25-new-org.mdx @@ -1,10 +1,12 @@ --- # prettier doesn't like how long this line is.: "" # prettier-ignore: "" -title: "Testing Library Updates: new release, github org, open collective, and twitter account" +title: + 'Testing Library Updates: new release, github org, open collective, and + twitter account' author: Kent C. Dodds -authorURL: "https://kentcdodds.com" -authorImageURL: "https://avatars0.githubusercontent.com/u/1500684?s=120&v=4" +authorURL: 'https://kentcdodds.com' +authorImageURL: 'https://avatars0.githubusercontent.com/u/1500684?s=120&v=4' --- Hello friends! I'm pleased to announce the recent updates to the testing-library diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx index 2b5889a45..876e15402 100644 --- a/docs/angular-testing-library/api.mdx +++ b/docs/angular-testing-library/api.mdx @@ -24,11 +24,11 @@ Angular: ```typescript async function render( component: Type, - renderOptions?: RenderComponentOptions + renderOptions?: RenderComponentOptions, ): Promise> async function render( component: Type, - renderOptions?: RenderDirectiveOptions + renderOptions?: RenderDirectiveOptions, ): Promise> ``` @@ -53,9 +53,11 @@ await render(AppComponent, { ### `componentProviders` -A collection of providers needed to render the component via Dependency Injection. +A collection of providers needed to render the component via Dependency +Injection. -These will be provided at the component level. To inject dependencies at the module level, use [`providers`](#providers). +These will be provided at the component level. To inject dependencies at the +module level, use [`providers`](#providers). For more info see the [Angular docs](https://angular.io/api/core/Directive#providers). @@ -72,7 +74,8 @@ await render(AppComponent, { ### `declarations` -A collection of components, directives and pipes needed to render the component. For example, nested components of the component. +A collection of components, directives and pipes needed to render the component. +For example, nested components of the component. For more info see the [Angular docs](https://angular.io/api/core/NgModule#declarations). @@ -83,7 +86,7 @@ For more info see the ```typescript await render(AppComponent, { - declarations: [ CustomerDetailComponent, ButtonComponent ] + declarations: [CustomerDetailComponent, ButtonComponent], }) ``` @@ -96,7 +99,7 @@ Will call `detectChanges` when the component is compiled **example**: ```typescript -await render(AppComponent, { detectChanges: false }) +await render(AppComponent, {detectChanges: false}) ``` ### `excludeComponentDeclaration` @@ -136,9 +139,11 @@ await render(AppComponent, { ### `providers` -A collection of providers needed to render the component via Dependency Injection. +A collection of providers needed to render the component via Dependency +Injection. -These will be provided at the module level. To inject dependencies at the component level, use [`componentProviders`](#componentProviders). +These will be provided at the module level. To inject dependencies at the +component level, use [`componentProviders`](#componentProviders). For more info see the [Angular docs](https://angular.io/api/core/NgModule#providers). @@ -170,7 +175,7 @@ merged. ```typescript await render(AppComponent, { - queries: { ...queries, ...customQueries }, + queries: {...queries, ...customQueries}, }) ``` @@ -280,7 +285,7 @@ Prints out the component's DOM with syntax highlighting. Accepts an optional parameter, to print out a specific DOM node. ```typescript -const { debug } = await render(AppComponent) +const {debug} = await render(AppComponent) debug() ``` @@ -291,11 +296,11 @@ Re-render the same component with different props. Will call `detectChanges` after props has been updated. ```typescript -const { rerender } = await render(Counter, { componentProperties: { count: 4 } }) +const {rerender} = await render(Counter, {componentProperties: {count: 4}}) expect(screen.getByTestId('count-value').textContent).toBe('4') -rerender({ count: 7 }) +rerender({count: 7}) expect(screen.getByTestId('count-value').textContent).toBe('7') ``` @@ -304,7 +309,8 @@ expect(screen.getByTestId('count-value').textContent).toBe('7') Trigger a change detection cycle for the component. -For more info see the [Angular docs](https://angular.io/api/core/testing/ComponentFixture#detectChanges). +For more info see the +[Angular docs](https://angular.io/api/core/testing/ComponentFixture#detectChanges). ### `debugElement` @@ -320,7 +326,7 @@ For more info see the [Angular docs](https://angular.io/api/core/testing/ComponentFixture). ```typescript -const { fixture } = await render(AppComponent) +const {fixture} = await render(AppComponent) const componentInstance = fixture.componentInstance as AppComponent ``` @@ -357,7 +363,7 @@ for a complete list. **example**: ```typescript -const { getByText, queryByLabelText} = await render(AppComponent) +const {getByText, queryByLabelText} = await render(AppComponent) getByText('Hello world') queryByLabelText('First name:') diff --git a/docs/angular-testing-library/examples.mdx b/docs/angular-testing-library/examples.mdx index f3e394249..5bddb7a48 100644 --- a/docs/angular-testing-library/examples.mdx +++ b/docs/angular-testing-library/examples.mdx @@ -35,13 +35,13 @@ export class CounterComponent { counter.component.spec.ts ```typescript -import { render, screen, fireEvent } 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 () => { await render(CounterComponent, { - componentProperties: { counter: 5 }, + componentProperties: {counter: 5}, }) expect(screen.getByText('Current Count: 5')) @@ -49,7 +49,7 @@ describe('Counter', () => { test('should increment the counter on click', async () => { await render(CounterComponent, { - componentProperties: { counter: 5 }, + componentProperties: {counter: 5}, }) fireEvent.click(screen.getByText('+')) diff --git a/docs/cypress-testing-library/intro.mdx b/docs/cypress-testing-library/intro.mdx index cb6dacf7b..537723dfb 100644 --- a/docs/cypress-testing-library/intro.mdx +++ b/docs/cypress-testing-library/intro.mdx @@ -53,19 +53,17 @@ To show some simple examples (from [cypress/integration/find.spec.js](https://github.com/testing-library/cypress-testing-library/blob/97939da7d4707a71049884c0324c0eda56e26fc2/cypress/integration/find.spec.js)): ```javascript -cy.findByRole('button', { name: /Jackie Chan/i }).click() -cy.findByRole('button', { name: /Button Text/i }).should('exist') -cy.findByRole('button', { name: /Non-existing Button Text/i }).should( - 'not.exist' -) -cy.findByLabelText(/Label text/i, { timeout: 7000 }).should('exist') +cy.findByRole('button', {name: /Jackie Chan/i}).click() +cy.findByRole('button', {name: /Button Text/i}).should('exist') +cy.findByRole('button', {name: /Non-existing Button Text/i}).should('not.exist') +cy.findByLabelText(/Label text/i, {timeout: 7000}).should('exist') // findAllByText _inside_ a form element cy.get('form') - .findByText('button', { name: /Button Text/i }) + .findByText('button', {name: /Button Text/i}) .should('exist') cy.findByRole('dialog').within(() => { - cy.findByRole('button', { name: /confirm/i }) + cy.findByRole('button', {name: /confirm/i}) }) ``` diff --git a/docs/dom-testing-library/api-accessibility.mdx b/docs/dom-testing-library/api-accessibility.mdx index 11e2f2ccd..9b5e4e761 100644 --- a/docs/dom-testing-library/api-accessibility.mdx +++ b/docs/dom-testing-library/api-accessibility.mdx @@ -26,7 +26,7 @@ See for more information about implicit ARIA roles. ```javascript -import { getRoles } from '@testing-library/dom' +import {getRoles} from '@testing-library/dom' const nav = document.createElement('nav') nav.innerHTML = ` @@ -64,7 +64,7 @@ nodes which match that role. This can be helpful for finding ways to query the DOM under test with [getByRole](queries/byrole.mdx). ```javascript -import { logRoles } from '@testing-library/dom' +import {logRoles} from '@testing-library/dom' const nav = document.createElement('nav') nav.innerHTML = ` diff --git a/docs/dom-testing-library/api-async.mdx b/docs/dom-testing-library/api-async.mdx index 156b44725..f466e8270 100644 --- a/docs/dom-testing-library/api-async.mdx +++ b/docs/dom-testing-library/api-async.mdx @@ -22,7 +22,7 @@ accept the waitFor options as the last argument (e.g. DOM might not happen immediately. ```js -const button = screen.getByRole('button', { name: 'Click Me' }) +const button = screen.getByRole('button', {name: 'Click Me'}) fireEvent.click(button) await screen.findByText('Clicked once') fireEvent.click(button) @@ -40,7 +40,7 @@ function waitFor( interval?: number onTimeout?: (error: Error) => Error mutationObserverOptions?: MutationObserverInit - } + }, ): Promise ``` @@ -56,7 +56,8 @@ await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1)) ``` `waitFor` may run the callback a number of times until the timeout is reached. -Note that the number of calls is constrained by the `timeout` and `interval` options. +Note that the number of calls is constrained by the `timeout` and `interval` +options. This can be useful if you have a unit test that mocks API calls and you need to wait for your mock promises to all resolve. @@ -95,7 +96,7 @@ function waitForElementToBeRemoved( interval?: number onTimeout?: (error: Error) => Error mutationObserverOptions?: MutationObserverInit - } + }, ): Promise ``` @@ -112,7 +113,7 @@ Here is an example where the promise resolves because the element is removed: const el = document.querySelector('div.getOuttaHere') waitForElementToBeRemoved(document.querySelector('div.getOuttaHere')).then(() => - console.log('Element no longer in DOM') + console.log('Element no longer in DOM'), ) el.setAttribute('data-neat', true) @@ -126,15 +127,15 @@ el.parentElement.removeChild(el) or an empty array: ```javascript -waitForElementToBeRemoved(null).catch((err) => console.log(err)) -waitForElementToBeRemoved(queryByText(/not here/i)).catch((err) => - console.log(err) +waitForElementToBeRemoved(null).catch(err => console.log(err)) +waitForElementToBeRemoved(queryByText(/not here/i)).catch(err => + console.log(err), ) -waitForElementToBeRemoved(queryAllByText(/not here/i)).catch((err) => - console.log(err) +waitForElementToBeRemoved(queryAllByText(/not here/i)).catch(err => + console.log(err), ) -waitForElementToBeRemoved(() => getByText(/not here/i)).catch((err) => - console.log(err) +waitForElementToBeRemoved(() => getByText(/not here/i)).catch(err => + console.log(err), ) // Error: The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal. diff --git a/docs/dom-testing-library/api-configuration.mdx b/docs/dom-testing-library/api-configuration.mdx index 7d772dff2..98eee3e70 100644 --- a/docs/dom-testing-library/api-configuration.mdx +++ b/docs/dom-testing-library/api-configuration.mdx @@ -26,14 +26,14 @@ label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }> ```js title="setup-tests.js" -import { configure } from '@testing-library/dom' +import {configure} from '@testing-library/dom' import serialize from 'my-custom-dom-serializer' configure({ testIdAttribute: 'data-my-test-id', getElementError: (message, container) => { const customMessage = [message, serialize(container.firstChild)].join( - '\n\n' + '\n\n', ) return new Error(customMessage) }, @@ -44,18 +44,18 @@ configure({ ```js title="setup-tests.js" -import { configure } from '@testing-library/react' +import {configure} from '@testing-library/react' -configure({ testIdAttribute: 'data-my-test-id' }) +configure({testIdAttribute: 'data-my-test-id'}) ``` ```js title="setup-tests.js" -import { configure } from '@testing-library/cypress' +import {configure} from '@testing-library/cypress' -configure({ testIdAttribute: 'data-my-test-id' }) +configure({testIdAttribute: 'data-my-test-id'}) ``` @@ -98,7 +98,7 @@ To disable a suggestion for a single query just add `{suggest:false}` as an option. ```js -screen.getByTestId('foo', { suggest: false }) // will not throw a suggestion +screen.getByTestId('foo', {suggest: false}) // will not throw a suggestion ``` ### `testIdAttribute` diff --git a/docs/dom-testing-library/api-custom-queries.mdx b/docs/dom-testing-library/api-custom-queries.mdx index 633e2c70c..bcbc6af28 100644 --- a/docs/dom-testing-library/api-custom-queries.mdx +++ b/docs/dom-testing-library/api-custom-queries.mdx @@ -24,15 +24,15 @@ to use a different data-attribute. (Note: test files would import ```js // test-utils.js const domTestingLib = require('@testing-library/dom') -const { queryHelpers } = domTestingLib +const {queryHelpers} = domTestingLib export const queryByTestId = queryHelpers.queryByAttribute.bind( null, - 'data-test-id' + 'data-test-id', ) export const queryAllByTestId = queryHelpers.queryAllByAttribute.bind( null, - 'data-test-id' + 'data-test-id', ) export function getAllByTestId(container, id, ...rest) { @@ -40,7 +40,7 @@ export function getAllByTestId(container, id, ...rest) { if (!els.length) { throw queryHelpers.getElementError( `Unable to find an element by: [data-test-id="${id}"]`, - container + container, ) } return els @@ -52,7 +52,7 @@ export function getByTestId(...args) { if (result.length > 1) { throw queryHelpers.getElementError( `Found multiple elements with the [data-test-id="${id}"]`, - container + container, ) } return result[0] diff --git a/docs/dom-testing-library/api-debugging.mdx b/docs/dom-testing-library/api-debugging.mdx index d06fde88c..2817a074f 100644 --- a/docs/dom-testing-library/api-debugging.mdx +++ b/docs/dom-testing-library/api-debugging.mdx @@ -51,24 +51,26 @@ It is defined as: ```typescript interface Options extends prettyFormat.OptionsReceived { - filterNode?: (node: Node) => boolean; + filterNode?: (node: Node) => boolean } function prettyDOM( node: HTMLElement, maxLength?: number, - options?: Options + options?: Options, ): string ``` It receives the root node to print out, an optional extra parameter to limit the size of the resulting string, for cases when it becomes too large. It has a last -parameter which allows you to configure your formatting. -In addition to the options listed you can also pass the [options](https://github.com/facebook/jest/tree/master/packages/pretty-format#usage-with-options) +parameter which allows you to configure your formatting. In addition to the +options listed you can also pass the +[options](https://github.com/facebook/jest/tree/master/packages/pretty-format#usage-with-options) of `pretty-format`. -By default, `