From 915a1cbd941ad1da2df595783a4375bba7558c4a Mon Sep 17 00:00:00 2001 From: Aaron Pettengill Date: Sun, 6 Oct 2019 10:19:10 -0400 Subject: [PATCH 001/903] Update documentation for `ByLabelText` queries Relates to [this PR](https://github.com/testing-library/dom-testing-library/pull/373). --- docs/dom-testing-library/api-queries.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index 1be322750..8c383faf3 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -131,11 +131,20 @@ cy.getByLabelText('username').should('exist') -It will NOT find the input node for label text broken up by elements. For this -case, you can provide a `selector` in the options: +You may also need to filter down the results of the query. +For that you can use the `selector` option: -```html - +```js +// Label containing multiple elements + + +// Multiple elements labelled via aria-labelledby + + +Please enter your username ``` ```js From 77358a8a6b7c26c78cfdb78d9b9c5cc3bb56a135 Mon Sep 17 00:00:00 2001 From: Aaron Pettengill Date: Sun, 6 Oct 2019 10:29:40 -0400 Subject: [PATCH 002/903] Add another case --- docs/dom-testing-library/api-queries.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index 8c383faf3..390201edf 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -145,6 +145,16 @@ For that you can use the `selector` option: Please enter your username + +// Multiple labels with the same text + + ``` ```js From 4e0a3367df5dec3c8af8ffc3334501b0d508f795 Mon Sep 17 00:00:00 2001 From: Aaron Pettengill Date: Wed, 9 Oct 2019 17:52:51 -0400 Subject: [PATCH 003/903] Move example that no longer requires a selector --- docs/dom-testing-library/api-queries.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index 390201edf..742db02f2 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -96,6 +96,12 @@ The example below will find the input node for the following DOM structures: // Wrapper labels +// Wrapper labels where the label text is in another child element + + // aria-label attributes // Take care because this is not a label that users can see on the page, // so the purpose of your input must be obvious to visual users. @@ -135,12 +141,6 @@ You may also need to filter down the results of the query. For that you can use the `selector` option: ```js -// Label containing multiple elements - - // Multiple elements labelled via aria-labelledby From 3dc3df22a9ee6f65e72dd88a4bdb53a5b5e7c0c5 Mon Sep 17 00:00:00 2001 From: Rahim Alwer Date: Fri, 6 Dec 2019 10:11:29 +1100 Subject: [PATCH 004/903] docs(svelte): improve description of component api usage ref: https://github.com/testing-library/testing-library-docs/pull/299 --- docs/svelte-testing-library/api.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/svelte-testing-library/api.md b/docs/svelte-testing-library/api.md index 65182e627..c790e5030 100644 --- a/docs/svelte-testing-library/api.md +++ b/docs/svelte-testing-library/api.md @@ -50,14 +50,14 @@ Please refer to the ### Results -| Result | Description | -| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `container` | The HTML element the component is mounted into. | -| `component` | The newly created Svelte component. This is mostly useful for testing exported functions or cases where manipulating the DOM doesn't fit. Outside of said cases avoid using the component directly to build tests, instead of interacting with the rendered Svelte component, work with the DOM . | -| `debug` | Logs the `container` using [prettyDom](https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom). | -| `unmount` | Unmounts the component from the `target` by calling `component.$destroy()`. | -| `rerender` | Calls render again destroying the old component, and mounting the new component on the original `target` with any new options passed in. | -| `...queries` | Returns all [query functions](https://testing-library.com/docs/dom-testing-library/api-queries) that are binded to the `container`. If you pass in `query` arguments than this will be those, otherwise all. | +| Result | Description | +| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `container` | The HTML element the component is mounted into. | +| `component` | The newly created Svelte component. Generally, this should only be used when testing exported functions, or when you're testing developer facing API's. Outside of said cases avoid using the component directly to build tests, instead of interacting with the rendered Svelte component, work with the DOM. Have a read of [Avoid the Test User](https://kentcdodds.com/blog/avoid-the-test-user) by Kent C. Dodds to understand the difference between the **end user** and **developer user**. | +| `debug` | Logs the `container` using [prettyDom](https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom). | +| `unmount` | Unmounts the component from the `target` by calling `component.$destroy()`. | +| `rerender` | Calls render again destroying the old component, and mounting the new component on the original `target` with any new options passed in. | +| `...queries` | Returns all [query functions](https://testing-library.com/docs/dom-testing-library/api-queries) that are binded to the `container`. If you pass in `query` arguments than this will be those, otherwise all. | ## `cleanup` From 12d8c114cfa07f1e648f0acdc91016e7ea387572 Mon Sep 17 00:00:00 2001 From: Rahim Alwer Date: Fri, 6 Dec 2019 10:23:57 +1100 Subject: [PATCH 005/903] docs(svelte): recommend better transformer --- docs/svelte-testing-library/setup.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/svelte-testing-library/setup.md b/docs/svelte-testing-library/setup.md index 86f24992e..02bf0e418 100644 --- a/docs/svelte-testing-library/setup.md +++ b/docs/svelte-testing-library/setup.md @@ -28,10 +28,10 @@ with any testing framework and runner you're comfortable with. 3. You'll need to compile the Svelte components before using them in Jest, so we need to install - [jest-transform-svelte](https://github.com/rspieker/jest-transform-svelte) + [svelte-jester](https://github.com/mihar-22/svelte-jester) ``` - npm install --save-dev jest-transform-svelte + npm install --save-dev svelte-jester ``` 4. Add the following Jest configuration to your `package.json` @@ -40,7 +40,7 @@ with any testing framework and runner you're comfortable with. { "jest": { "transform": { - "^.+\\.svelte$": "jest-transform-svelte" + "^.+\\.svelte$": "svelte-jester" }, "moduleFileExtensions": ["js", "svelte"] } @@ -71,3 +71,10 @@ with any testing framework and runner you're comfortable with. ``` npm run test ``` + +## Babel / Preprocessors + +If you'd like to also include [Babel](https://babeljs.io/) or any +[Svelte preprocessors](https://github.com/kaisermann/svelte-preprocess) then +simply follow the instructions over at +[svelte-jester](https://github.com/mihar-22/svelte-jester#babel). From 4e52eb489ece7e145468ede784da3cbf1ef56f22 Mon Sep 17 00:00:00 2001 From: Rahim Alwer Date: Fri, 6 Dec 2019 12:37:57 +1100 Subject: [PATCH 006/903] docs(svelte): props can now be passed in directly ref: https://github.com/testing-library/svelte-testing-library/pull/62 --- docs/svelte-testing-library/api.md | 18 ++++++++++++++++-- docs/svelte-testing-library/example.md | 4 ++-- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/docs/svelte-testing-library/api.md b/docs/svelte-testing-library/api.md index c790e5030..43f87d87c 100644 --- a/docs/svelte-testing-library/api.md +++ b/docs/svelte-testing-library/api.md @@ -25,7 +25,7 @@ tells Svelte to apply any new changes to the DOM. ## `render` -```jsx +```js import { render } from '@testing-library/svelte' const { results } = render( @@ -41,6 +41,20 @@ These are the options you pass when instantiating your Svelte `Component`. Please refer to the [Client-side component API](https://svelte.dev/docs#Client-side_component_API). +πŸ“ If the only option you're passing in is `props`, then you can just pass them +in directly. + +```js +// With options. +const { results } = render(YourComponent, { + target: MyTarget, + props: { myProp: 'value' }, +}) + +// Props only. +const { results } = render(YourComponent, { myProp: 'value' }) +``` + ### Render Options | Option | Description | Default | @@ -69,7 +83,7 @@ Unmounts the component from the container and destroys the container. test. If you'd like to disable this then set `process.env.STL_SKIP_AUTO_CLEANUP` to true or import `dont-clean-up-after-each` from the library. -```jsx +```js import { render, cleanup } from '@testing-library/svelte' afterEach(() => { diff --git a/docs/svelte-testing-library/example.md b/docs/svelte-testing-library/example.md index c3043d828..f241f5c98 100644 --- a/docs/svelte-testing-library/example.md +++ b/docs/svelte-testing-library/example.md @@ -33,14 +33,14 @@ import { render, fireEvent } from '@testing-library/svelte' import Comp from '../Comp' test('shows proper heading when rendered', () => { - const { getByText } = render(Comp, { props: { name: 'World' } }) + const { getByText } = render(Comp, { name: 'World' }) expect(getByText('Hello World!')).toBeInTheDocument() }) // Note: This is as an async test as we are using `fireEvent` test('changes button text on click', async () => { - const { getByText } = render(Comp, { props: { name: 'World' } }) + const { getByText } = render(Comp, { name: 'World' }) const button = getByText('Button') // Using await when firing events is unique to the svelte testing library because From 1ee0eaae0045e25a1865d50aee8461a9fa2f8861 Mon Sep 17 00:00:00 2001 From: Dustin Masters Date: Sat, 7 Dec 2019 20:07:46 -0800 Subject: [PATCH 007/903] docs: fix missing space on support page (#332) --- website/pages/en/support.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/pages/en/support.js b/website/pages/en/support.js index 5f6361891..e4cbf15a8 100644 --- a/website/pages/en/support.js +++ b/website/pages/en/support.js @@ -76,7 +76,7 @@ function Support(props) { TestingJavaScript.com course.

- You can support Kent buy purchasing a license to + You can support Kent buy purchasing a license to{' '} TestingJavaScript.com From 506f77f9d18eca2779dc411fbdc8d9b875c6b488 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Sun, 8 Dec 2019 04:08:30 +0000 Subject: [PATCH 008/903] docs: update README.md [skip ci] --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index cb64c5b8d..a462dc04c 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,8 @@ See [./website/README.md](./website/README.md) for instructions on building the Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): - + + @@ -44,7 +45,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d - + @@ -98,6 +99,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Kent C. Dodds
Kent C. Dodds
🚧
Edward Coleridge Smith
Edward Coleridge Smith
πŸ“–		AdriΓ  Fontcuberta
AdriΓ  Fontcuberta
πŸ“– πŸ‘€		AdriΓ  Fontcuberta
AdriΓ  Fontcuberta
πŸ“– πŸ‘€		 Tim Deschryver
Tim Deschryver
πŸ“–		 Ben Monro
Ben Monro
πŸ“–		 Scott Sauber
Scott Sauber
πŸ“
+ + This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! From 67739a9414b595de0b9ba595a3b30ac69585b04f Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Sun, 8 Dec 2019 04:08:31 +0000 Subject: [PATCH 009/903] docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 723c9ffe3..c36e8516e 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -455,5 +455,6 @@ "projectName": "testing-library-docs", "projectOwner": "testing-library", "repoType": "github", - "repoHost": "https://github.com/" + "repoHost": "https://github.com/", + "skipCi": true } From 563929c4a826152b4c27104581149f90b62f4a8b Mon Sep 17 00:00:00 2001 From: Arturo Romero Date: Sat, 7 Dec 2019 20:08:56 -0800 Subject: [PATCH 010/903] Update example-react-router.md (#331) The first example test did not pass because we expected the element to be a heading not a div. Next the assertion for a no match route is 404 Not Found --- docs/example-react-router.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/example-react-router.md b/docs/example-react-router.md index 75e9447c9..49e792278 100644 --- a/docs/example-react-router.md +++ b/docs/example-react-router.md @@ -9,9 +9,9 @@ import React from 'react' import { withRouter } from 'react-router' import { Link, Route, Router, Switch } from 'react-router-dom' -const About = () =>

You are on the about page
-const Home = () =>
You are home
-const NoMatch = () =>
No match
+const About = () =>

You are on the about page

+const Home = () =>

You are home

+const NoMatch = () =>

404 Not Found

const LocationDisplay = withRouter(({ location }) => (
{location.pathname}
From 70e0f4d76af1f7fa60e5227e946c48dd4816f0b1 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Sat, 7 Dec 2019 21:10:11 -0700 Subject: [PATCH 011/903] docs: add arturoromeroslc as a contributor (#339) docs: add arturoromeroslc as a contributor Co-authored-by: null <46447321+allcontributors[bot]@users.noreply.github.com> --- .all-contributorsrc | 9 +++++++++ README.md | 3 +++ 2 files changed, 12 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index c36e8516e..aa6645ff4 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -449,6 +449,15 @@ "contributions": [ "doc" ] + }, + { + "login": "arturoromeroslc", + "name": "Arturo Romero", + "avatar_url": "https://avatars0.githubusercontent.com/u/7406639?v=4", + "profile": "https://github.com/arturoromeroslc", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index a462dc04c..048d94fbe 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Turadg Aleahmad
Turadg Aleahmad
πŸ“– mark g romano
mark g romano
πŸ“– + + Arturo Romero
Arturo Romero
πŸ“– + From 07304917ee217a83a2a645edc09e86d20bbc5302 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= <4002543+lgandecki@users.noreply.github.com> Date: Sun, 8 Dec 2019 20:26:10 +0400 Subject: [PATCH 012/903] fix typo --- docs/ecosystem-jest-native.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ecosystem-jest-native.md b/docs/ecosystem-jest-native.md index a21c8d48c..2a1ebb01f 100644 --- a/docs/ecosystem-jest-native.md +++ b/docs/ecosystem-jest-native.md @@ -13,7 +13,7 @@ npm install --save-dev @testing-library/jest-native ``` ```javascript -; + From 91bfbd9e37e4a14323bbe134fc474bb83db09277 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Sun, 8 Dec 2019 16:01:26 -0700 Subject: [PATCH 013/903] docs: add dustinsoftware as a contributor (#342) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index aa6645ff4..186168b02 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -458,6 +458,15 @@ "contributions": [ "doc" ] + }, + { + "login": "dustinsoftware", + "name": "Dustin Masters", + "avatar_url": "https://avatars3.githubusercontent.com/u/942358?v=4", + "profile": "https://www.dustinsoftware.com/", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 048d94fbe..e1b262de3 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Arturo Romero
Arturo Romero
πŸ“– + Dustin Masters
Dustin Masters
πŸ“– From e05111aef33ca0734f8dcaa0761b9d830ad37742 Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Mon, 9 Dec 2019 18:39:23 -0500 Subject: [PATCH 014/903] docs: add eslint-plugin-jest-dom page (#344) --- docs/ecosystem-eslint-plugin-jest-dom.md | 19 +++++++++++++++++++ website/sidebars.json | 1 + 2 files changed, 20 insertions(+) create mode 100644 docs/ecosystem-eslint-plugin-jest-dom.md diff --git a/docs/ecosystem-eslint-plugin-jest-dom.md b/docs/ecosystem-eslint-plugin-jest-dom.md new file mode 100644 index 000000000..62953480c --- /dev/null +++ b/docs/ecosystem-eslint-plugin-jest-dom.md @@ -0,0 +1,19 @@ +--- +id: ecosystem-eslint-plugin-jest-dom +title: eslint-plugin-jest-dom +--- + +[`eslint-plugin-jest-dom`][gh] is an ESLint plugin for Jest DOM that helps users +to follow best practices and anticipate common mistakes when writing tests. + +This plugin includes: + +- Several rules for linting Jest DOM specific code. +- Shareable config for recommended rules. +- Some autofixable rules. + +Find more info about available rules and configs on GitHub. + +- [eslint-plugin-jest-dom on GitHub][gh] + +[gh]: https://github.com/testing-library/eslint-plugin-jest-dom diff --git a/website/sidebars.json b/website/sidebars.json index 89daaad16..be00e320c 100755 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -112,6 +112,7 @@ "ecosystem-jest-native", "ecosystem-react-select-event", "ecosystem-eslint-plugin-testing-library", + "ecosystem-eslint-plugin-jest-dom", "ecosystem-riot-testing-library" ], "Help": ["faq", "learning", "contributing"] From 577522bfac26165f0add9e7b44a1e504fc49f9d5 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Wed, 11 Dec 2019 06:40:14 +0100 Subject: [PATCH 015/903] Update angular api (#341) - sort functions alphabetically - add docs for new functions added to the Angular Testing Library --- docs/angular-testing-library/api.md | 239 ++++++++++++++++------------ 1 file changed, 137 insertions(+), 102 deletions(-) diff --git a/docs/angular-testing-library/api.md b/docs/angular-testing-library/api.md index 4abe8852f..dc67fdb31 100644 --- a/docs/angular-testing-library/api.md +++ b/docs/angular-testing-library/api.md @@ -24,25 +24,29 @@ async function render( ## Component RenderOptions -### `detectChanges` +### `componentProperties` -Will call `detectChanges` when the component is compiled +An object to set `@Input` and `@Output` properties of the component. -**default** : `true` +**default** : `{}` **example**: ```typescript -const component = await render(AppComponent, { detectChanges: false }) +const component = await render(AppComponent, { + componentProperties: { + counterValue: 10, + send: (value) => { ... } + } +}) ``` -### `declarations` +### `componentProviders` -A collection of providers needed to render the component via Dependency -Injection, for example, injectable services or tokens. +A collection of providers to inject dependencies of the component. For more info see the -[Angular docs](https://angular.io/api/core/NgModule#providers). +[Angular docs](https://angular.io/api/core/Directive#providers). **default** : `[]` @@ -50,84 +54,78 @@ For more info see the ```typescript const component = await render(AppComponent, { - providers: [ - CustomersService, - { - provide: MAX_CUSTOMERS_TOKEN, - useValue: 10, - }, - ], + componentProviders: [AppComponentService], }) ``` -### `imports` +### `declarations` -A collection of imports needed to render the component, for example, shared -modules. Adds `NoopAnimationsModule` by default if `BrowserAnimationsModule` -isn't added to the collection +A collection of providers needed to render the component via Dependency +Injection, for example, injectable services or tokens. For more info see the -[Angular docs](https://angular.io/api/core/NgModule#imports). +[Angular docs](https://angular.io/api/core/NgModule#providers). -**default** : `[NoopAnimationsModule]` +**default** : `[]` **example**: ```typescript const component = await render(AppComponent, { - imports: [AppSharedModule, MaterialModule], + providers: [ + CustomersService, + { + provide: MAX_CUSTOMERS_TOKEN, + useValue: 10, + }, + ], }) ``` -### `schemas` - -A collection of schemas needed to render the component. Allowed values are -`NO_ERRORS_SCHEMA` and `CUSTOM_ELEMENTS_SCHEMA`. +### `detectChanges` -For more info see the -[Angular docs](https://angular.io/api/core/NgModule#schemas). +Will call `detectChanges` when the component is compiled -**default** : `[]` +**default** : `true` **example**: ```typescript -const component = await render(AppComponent, { - schemas: [NO_ERRORS_SCHEMA], -}) +const component = await render(AppComponent, { detectChanges: false }) ``` -### `componentProperties` +### `excludeComponentDeclaration` -An object to set `@Input` and `@Output` properties of the component. +Exclude the component to be automatically be added as a declaration. This is +needed when the component is declared in an imported module. -**default** : `{}` +**default** : `false` **example**: ```typescript const component = await render(AppComponent, { - componentProperties: { - counterValue: 10, - send: (value) => { ... } - } + imports: [AppModule], // a module that includes AppComponent + excludeComponentDeclaration: true, }) ``` -### `componentProviders` +### `imports` -A collection of providers to inject dependencies of the component. +A collection of imports needed to render the component, for example, shared +modules. Adds `NoopAnimationsModule` by default if `BrowserAnimationsModule` +isn't added to the collection For more info see the -[Angular docs](https://angular.io/api/core/Directive#providers). +[Angular docs](https://angular.io/api/core/NgModule#imports). -**default** : `[]` +**default** : `[NoopAnimationsModule]` **example**: ```typescript const component = await render(AppComponent, { - componentProviders: [AppComponentService], + imports: [AppSharedModule, MaterialModule], }) ``` @@ -146,22 +144,6 @@ const component = await render(AppComponent, { }) ``` -### `excludeComponentDeclaration` - -Exclude the component to be automatically be added as a declaration. This is -needed when the component is declared in an imported module. - -**default** : `false` - -**example**: - -```typescript -const component = await render(AppComponent, { - imports: [AppModule], // a module that includes AppComponent - excludeComponentDeclaration: true, -}) -``` - ### `routes` The route configuration to set up the router service via @@ -189,6 +171,24 @@ const component = await render(AppComponent, { }) ``` +### `schemas` + +A collection of schemas needed to render the component. Allowed values are +`NO_ERRORS_SCHEMA` and `CUSTOM_ELEMENTS_SCHEMA`. + +For more info see the +[Angular docs](https://angular.io/api/core/NgModule#schemas). + +**default** : `[]` + +**example**: + +```typescript +const component = await render(AppComponent, { + schemas: [NO_ERRORS_SCHEMA], +}) +``` + ## Directive RenderOptions To test a directive, the render API is a bit different. The API has the same @@ -224,23 +224,36 @@ const component = await render(SpoilerDirective, { ## `RenderResult` -### `...queries` +### `container` -The most important feature of `render` is that the queries from -[DOM Testing Library](https://testing-library.com/docs/dom-testing-library) are -automatically returned with their first argument bound to the component under -test. +The containing DOM node of your rendered Angular Component. This is a regular +DOM node, so you can call `container.querySelector` etc. to inspect the +children. -See [Queries](https://testing-library.com/docs/dom-testing-library/api-queries) -for a complete list. +### `debug` -**example**: +Prints out the component's DOM with syntax highlighting. Accepts an optional +parameter, to print out a specific DOM node. ```typescript const component = await render(AppComponent) -component.getByText('Hello world') -component.queryByLabelText('First name:') +component.debug() +component.debug(component.getByRole('alert')) +``` + +### `rerender` + +Re-render the same component with different props. +Will call `detectChanges` after props has been updated. + +```typescript +const component = await render(Counter, { componentProperties: { count: 4 }}) + +expect(component.getByTestId('count-value').textContent).toBe('4') + +component.rerender({ count: 7 }) +expect(component.getByTestId('count-value').textContent).toBe('7') ``` ### `fireEvent.***` @@ -268,29 +281,23 @@ component.change(component.getByLabelText('Username'), { component.click(component.getByText('Login')) ``` -### `type` - -Types a value in an input field with the same interactions as the user would do. - -```typescript -const component = await render(AppComponent) - -component.type(component.getByLabelText('Username'), 'Tim') -component.type(component.getByLabelText('Username'), 'Tim', { delay: 250 }) -``` +### `fixture` -### `selectOptions` +The Angular `ComponentFixture` of the component. -Select an option(s) from a select field with the same interactions as the user -would do. +For more info see the +[Angular docs](https://angular.io/api/core/testing/ComponentFixture). ```typescript const component = await render(AppComponent) -component.selectOptions(component.getByLabelText('Fruit'), 'Blueberry') -component.selectOptions(component.getByLabelText('Fruit'), ['Blueberry'. 'Grape']) +const componentInstance = component.fixture.componentInstance as AppComponent ``` +> 🚨 If you find yourself using `fixture` to access the component's internal +> values you should reconsider! This probable means, you're testing +> implementation details. + ### `navigate` Accepts a DOM element or a path as parameter. If an element is passed, @@ -306,37 +313,65 @@ await component.navigate(component.getByLabelText('To details')) await component.navigate('details/3') ``` -### `fixture` +### `...queries` -The Angular `ComponentFixture` of the component. +The most important feature of `render` is that the queries from +[DOM Testing Library](https://testing-library.com/docs/dom-testing-library) are +automatically returned with their first argument bound to the component under +test. -For more info see the -[Angular docs](https://angular.io/api/core/testing/ComponentFixture). +See [Queries](https://testing-library.com/docs/dom-testing-library/api-queries) +for a complete list. + +**example**: ```typescript const component = await render(AppComponent) -const componentInstance = component.fixture.componentInstance as AppComponent +component.getByText('Hello world') +component.queryByLabelText('First name:') ``` -> 🚨 If you find yourself using `fixture` to access the component's internal -> values you should reconsider! This probable means, you're testing -> implementation details. +### `selectOptions` -### `container` +Select an option(s) from a select field with the same interactions as the user +would do. -The containing DOM node of your rendered Angular Component. This is a regular -DOM node, so you can call `container.querySelector` etc. to inspect the -children. +```typescript +const component = await render(AppComponent) -### `debug` +component.selectOptions(component.getByLabelText('Fruit'), 'Blueberry') +component.selectOptions(component.getByLabelText('Fruit'), ['Blueberry'. 'Grape']) +``` -Prints out the component's DOM with syntax highlighting. Accepts an optional -parameter, to print out a specific DOM node. +### `type` + +Types a value in an input field with the same interactions as the user would do. ```typescript const component = await render(AppComponent) -component.debug() -component.debug(component.getByRole('alert')) +component.type(component.getByLabelText('Username'), 'Tim') +component.type(component.getByLabelText('Username'), 'Tim', { delay: 250 }) ``` + +### `waitForDomChange` + +Wait for the DOM to change. +For more info see the [DOM Testing Library docs](https://testing-library.com/docs/dom-testing-library/api-async#waitfordomchange). + +This function will also call `detectChanges` repeatably to update the DOM, is helpful to test async functionality. + +### `waitForElement` + +Wait for DOM elements to appear, disappear, or change. +For more info see the [DOM Testing Library docs](https://testing-library.com/docs/dom-testing-library/api-async#waitforelement). + +This function will also call `detectChanges` repeatably to update the DOM, is helpful to test async functionality. + +### `waitForElementToBeRemoved` + +Wait for the removal of element(s) from the DOM. +For more info see the [DOM Testing Library docs](https://testing-library.com/docs/dom-testing-library/api-async#waitforelementtoberemoved). + +This function will also call `detectChanges` repeatably to update the DOM, is helpful to test async functionality. From cbac9b1fd46971c68d3730f070534a5328528c9a Mon Sep 17 00:00:00 2001 From: Darren Lester Date: Wed, 11 Dec 2019 22:48:45 +0000 Subject: [PATCH 016/903] Fix typo (#345) --- docs/dom-testing-library/intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/dom-testing-library/intro.md b/docs/dom-testing-library/intro.md index 1cbd1b66a..1f6eeb5ca 100644 --- a/docs/dom-testing-library/intro.md +++ b/docs/dom-testing-library/intro.md @@ -25,7 +25,7 @@ principle is: > [The more your tests resemble the way your software is used, the more confidence they can give you.](guiding-principles.md) As part of this goal, the utilities this library provides facilitate querying -the DOM in the same way the user would. Finding for elements by their label text +the DOM in the same way the user would. Finding form elements by their label text (just like a user would), finding links and buttons from their text (like a user would), and more. It also exposes a recommended way to find elements by a `data-testid` as an "escape hatch" for elements where the text content and label From 2a2749da34983c03a4e33474d69a819d6529be2c Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Wed, 11 Dec 2019 15:49:12 -0700 Subject: [PATCH 017/903] docs: add darren-lester as a contributor (#346) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 ++++ README.md | 103 ++++++++++++++++++++++---------------------- 2 files changed, 61 insertions(+), 51 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 186168b02..9e539b81c 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -467,6 +467,15 @@ "contributions": [ "doc" ] + }, + { + "login": "darren-lester", + "name": "Darren Lester", + "avatar_url": "https://avatars2.githubusercontent.com/u/19534488?v=4", + "profile": "https://www.darrenlester.com/", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index e1b262de3..ffbeab556 100644 --- a/README.md +++ b/README.md @@ -35,71 +35,72 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - + + +
Kent C. Dodds
Kent C. Dodds
🚧		Alex Krolick
Alex Krolick
🚧		Sidak Singh Aulakh
Sidak Singh Aulakh
πŸ’»		Brandon Carroll
Brandon Carroll
πŸ’»		David
David
πŸ“–		Ryan James
Ryan James
πŸ“–		Brandon Johnson
Brandon Johnson
πŸ“–
Kent C. Dodds
🚧
Alex Krolick
🚧
Sidak Singh Aulakh
πŸ’»
Brandon Carroll
πŸ’»
David
πŸ“–
Ryan James
πŸ“–
Brandon Johnson
πŸ“–
Edward Coleridge Smith
Edward Coleridge Smith
πŸ“–		AdriΓ  Fontcuberta
AdriΓ  Fontcuberta
πŸ“– πŸ‘€		Tim Deschryver
Tim Deschryver
πŸ“–		Ben Monro
Ben Monro
πŸ“–		Scott Sauber
Scott Sauber
πŸ“		Shota Tamura
Shota Tamura
πŸ–‹ πŸ“–		Giorgio Polvara
Giorgio Polvara
πŸ“–
Edward Coleridge Smith
πŸ“–
AdriΓ  Fontcuberta
πŸ“– πŸ‘€
Tim Deschryver
πŸ“–
Ben Monro
πŸ“–
Scott Sauber
πŸ“
Shota Tamura
πŸ–‹ πŸ“–
Giorgio Polvara
πŸ“–
michalak111
michalak111
πŸ“– ⚠️		Huyen Nguyen
Huyen Nguyen
πŸ“–		Kieren Hughes
Kieren Hughes
πŸ“–		Sean McPherson
Sean McPherson
πŸ“–		Michael Lasky
Michael Lasky
πŸ“–		Thomas Lombart
Thomas Lombart
πŸ“–		Patrick K Long
Patrick K Long
πŸ“–
michalak111
πŸ“– ⚠️
Huyen Nguyen
πŸ“–
Kieren Hughes
πŸ“–
Sean McPherson
πŸ“–
Michael Lasky
πŸ“–
Thomas Lombart
πŸ“–
Patrick K Long
πŸ“–
Pedro Filho
Pedro Filho
πŸ“–		Tanguy Antoine
Tanguy Antoine
πŸ“–		Kevin Anderson
Kevin Anderson
πŸ“–		Dustin Myers
Dustin Myers
πŸ“–		Vojta Holik
Vojta Holik
🎨		Steve Schwarz
Steve Schwarz
πŸ“–		Aayush Rajvanshi
Aayush Rajvanshi
πŸ“–
Pedro Filho
πŸ“–
Tanguy Antoine
πŸ“–
Kevin Anderson
πŸ“–
Dustin Myers
πŸ“–
Vojta Holik
🎨
Steve Schwarz
πŸ“–
Aayush Rajvanshi
πŸ“–
Eugie Limpin
Eugie Limpin
πŸ“–		Kevin
Kevin
πŸ“–		Jennifer Shehane
Jennifer Shehane
πŸ“–		Steve Taggart
Steve Taggart
πŸ“–		Stephen Sugden
Stephen Sugden
πŸ“–		Blai Samitier
Blai Samitier
πŸ“–		Vernon Kesner
Vernon Kesner
πŸ“–
Eugie Limpin
πŸ“–
Kevin
πŸ“–
Jennifer Shehane
πŸ“–
Steve Taggart
πŸ“–
Stephen Sugden
πŸ“–
Blai Samitier
πŸ“–
Vernon Kesner
πŸ“–
Will Douglas
Will Douglas
πŸ“–		Head
Head
πŸ“–		Lee
Lee
πŸ“–		Mario BeltrΓ‘n AlarcΓ³n
Mario BeltrΓ‘n AlarcΓ³n
πŸ“–		jameslevine
jameslevine
πŸ“–		Rahim Alwer
Rahim Alwer
πŸ“–		Chenjia
Chenjia
πŸ“–
Will Douglas
πŸ“–
Head
πŸ“–
Lee
πŸ“–
Mario BeltrΓ‘n AlarcΓ³n
πŸ“–
jameslevine
πŸ“–
Rahim Alwer
πŸ“–
Chenjia
πŸ“–
Olivier Le Thanh Duong
Olivier Le Thanh Duong
πŸ“–		Jakub JastrzΔ™bski
Jakub JastrzΔ™bski
πŸ“–		Ivan Galiatin
Ivan Galiatin
πŸ“–		Hendrik RΓΆhm
Hendrik RΓΆhm
πŸ“–		Sam Kauffman
Sam Kauffman
πŸ“–		Turadg Aleahmad
Turadg Aleahmad
πŸ“–		mark g romano
mark g romano
πŸ“–
Olivier Le Thanh Duong
πŸ“–
Jakub JastrzΔ™bski
πŸ“–
Ivan Galiatin
πŸ“–
Hendrik RΓΆhm
πŸ“–
Sam Kauffman
πŸ“–
Turadg Aleahmad
πŸ“–
mark g romano
πŸ“–
Arturo Romero
Arturo Romero
πŸ“–		Dustin Masters
Dustin Masters
πŸ“–
Arturo Romero
πŸ“–
Dustin Masters
πŸ“–
Darren Lester
πŸ“–
From a8d339def485d272361d618b07f96e116bfd7cf8 Mon Sep 17 00:00:00 2001 From: Ben Monro Date: Thu, 12 Dec 2019 00:14:55 -0800 Subject: [PATCH 018/903] added note about testcafe queries. (#347) --- docs/testcafe-testing-library/intro.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/testcafe-testing-library/intro.md b/docs/testcafe-testing-library/intro.md index ca75b89aa..352f1b492 100644 --- a/docs/testcafe-testing-library/intro.md +++ b/docs/testcafe-testing-library/intro.md @@ -54,6 +54,8 @@ You can now import & use get[All]By*, query[All]By*, find[All]By\* selectors in your tests. [See `DOM Testing Library` API for reference](dom-testing-library/api-queries.md) +> A note about queries in testcafe. Testcafe has [built in waiting](https://devexpress.github.io/testcafe/documentation/test-api/built-in-waiting-mechanisms.html#wait-mechanism-for-selectors), for this reason, there's no difference between `queryBy` and `findBy` queries in testcafe testing library. `getBy` queries will throw an exception (as designed) so they will fail immediately and do not work with the built in waiting that Testcafe provides. + ## Examples To show some simple examples (from From 44bcf433fd2c3a069c186c8c818836845d79d6ce Mon Sep 17 00:00:00 2001 From: Ben Monro Date: Thu, 12 Dec 2019 00:33:02 -0800 Subject: [PATCH 019/903] removed out of date docs from testcafe. (#348) * removed out of date docs from testcafe. * Update intro.md --- docs/testcafe-testing-library/intro.md | 25 ++----------------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/docs/testcafe-testing-library/intro.md b/docs/testcafe-testing-library/intro.md index 352f1b492..f6e7694c9 100644 --- a/docs/testcafe-testing-library/intro.md +++ b/docs/testcafe-testing-library/intro.md @@ -23,26 +23,7 @@ npm install --save-dev testcafe @testing-library/testcafe `testcafe-testing-library` provides custom Selectors allowing you to query the dom. -### for v2.x: - -Add `testcafe-testing-library` to your test fixture's `beforeEach` hook: - -```javascript -import { - getByText, //or any other queries you want - addTestcafeTestingLibrary, -} from '@testing-library/testcafe' - -fixture`selectors`.beforeEach(addTestcafeTestingLibrary) - .page`http://localhost:13370` -``` - -### for v3.x+ (requires testcafe 1.4.0 or greater) - -`addTestcafeTestingLibrary` was removed in 3.x, instead you can now [inject -clientScripts][inject] as of testcafe 1.4.0. For now, the path has to be used, -but this will hopefully be changed to a module soon (pending a change to -testcafe to support `umd:main` in package.json. +Add the following to your .testcaferc.json file: ```json "clientScripts": [ @@ -150,9 +131,7 @@ window.TestingLibraryDom.configure({ testIdAttribute: 'data-automation-id' }) By default the selectors come pre-bound to `document.body`, so no need to provide a container. However, if you want to restrict your query using a -container, you can use `within`. Note similar to using a testcafe -`ClientFunction` so you will need to await `within`, and you can't make -assertions on it like you can using a `Selector`. `within` can take either a +container, you can use `within` which can take either a string or a query (get[All]By*, query[All]By*, find[All]By\*). ### Examples using `within` From 5b6982a133b7903d75603eff59624a38e49a779e Mon Sep 17 00:00:00 2001 From: Iswara Chaitanya Date: Thu, 12 Dec 2019 17:57:15 -0500 Subject: [PATCH 020/903] add jest.mock() instruction (#349) * add jest.mock() instruction This code does not work without specifically instructing the manual mock. It is only the case while automock is set to false (as it is by default, and create-react-app does not support overriding it) * Update example-intro.md Co-authored-by: Kent C. Dodds --- docs/react-testing-library/example-intro.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/react-testing-library/example-intro.md b/docs/react-testing-library/example-intro.md index 56dfa2f92..06b7a1bdf 100644 --- a/docs/react-testing-library/example-intro.md +++ b/docs/react-testing-library/example-intro.md @@ -16,6 +16,8 @@ import '@testing-library/jest-dom/extend-expect' import axiosMock from 'axios' import Fetch from '../fetch' +jest.mock('axios') + test('loads and displays greeting', async () => { const url = '/greeting' const { getByText, getByRole } = render() @@ -50,13 +52,12 @@ import { render, fireEvent, waitForElement } from '@testing-library/react' // add custom jest matchers from jest-dom import '@testing-library/jest-dom/extend-expect' - -// the axios mock is in __mocks__/ -// see https://jestjs.io/docs/en/manual-mocks import axiosMock from 'axios' - // the component to test import Fetch from '../fetch' + +// https://jestjs.io/docs/en/mock-functions#mocking-modules +jest.mock('axios') ``` ```jsx From a67c5742423639997ccc41610f16808bf353d006 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 12 Dec 2019 15:58:35 -0700 Subject: [PATCH 021/903] docs: add iswara108 as a contributor (#350) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] Co-authored-by: null <46447321+allcontributors[bot]@users.noreply.github.com> --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 9e539b81c..978480196 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -476,6 +476,15 @@ "contributions": [ "doc" ] + }, + { + "login": "iswara108", + "name": "Iswara Chaitanya", + "avatar_url": "https://avatars3.githubusercontent.com/u/9681451?v=4", + "profile": "https://github.com/iswara108", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index ffbeab556..265f604a8 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Arturo Romero
πŸ“–
Dustin Masters
πŸ“–
Darren Lester
πŸ“– +
Iswara Chaitanya
πŸ“– From ba85e9956479aace47ac7897fc608dcdac75f5ef Mon Sep 17 00:00:00 2001 From: Sam Horton Date: Fri, 13 Dec 2019 12:57:36 -0800 Subject: [PATCH 022/903] update Cypress documentation for v5 (#322) * update Cypress documentation for v5 * Update intro.md Closes #352 Co-authored-by: Kent C. Dodds --- docs/cypress-testing-library/intro.md | 43 +++++++++++++-------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/docs/cypress-testing-library/intro.md b/docs/cypress-testing-library/intro.md index 6efe883b8..debe9e8ae 100644 --- a/docs/cypress-testing-library/intro.md +++ b/docs/cypress-testing-library/intro.md @@ -22,6 +22,15 @@ Add this line to your project's `cypress/support/commands.js`: import '@testing-library/cypress/add-commands'; ``` +You can now use all of `DOM Testing Library`'s `findBy`, `findAllBy`, `queryBy` +and `queryAllBy` commands off the global `cy` object. +[See the `DOM Testing Library` docs for reference](https://testing-library.com). + +> Note: the `get*` queries are not supported because for reasonable Cypress tests you +> need retryability and `find*` queries already support that. The reason the `query*` +> variants are supported is to allow you to assert that elements do _not_ appear on +> the screen. + ## With TypeScript Typings are defined in `@types/testing-library__cypress` at [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress), @@ -35,33 +44,23 @@ and should be added as follows in `tsconfig.json`: } ``` -You can now use all of `DOM Testing Library`'s `getBy`, `getAllBy`, `queryBy` -and `queryAllBy` commands. -[See `DOM Testing Library` API for reference](dom-testing-library/api-queries.md) +You can find [all Library definitions here](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress/index.d.ts). ## Examples -You can find [all library definitions here](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress/index.d.ts). - -To show some simple examples (from [https://github.com/testing-library/cypress-testing-library/tree/master/cypress/integration](https://github.com/testing-library/cypress-testing-library/tree/master/cypress/integration)): +To show some simple examples (from +[cypress/integration/query.spec.js](https://github.com/testing-library/cypress-testing-library/blob/master/cypress/integration/query.spec.js) or [cypress/integration/find.spec.js](https://github.com/testing-library/cypress-testing-library/blob/master/cypress/integration/find.spec.js)): ```javascript -cy.findAllByText(/^Button Text \d$/) - .should('have.length', 2) - .click({ multiple: true }) - .should('contain', 'Button Clicked') -cy.queryByText('Button Text 1') - .click() - .should('contain', 'Button Clicked') -cy.queryByText('Non-existing Button Text', { timeout: 100 }).should('not.exist') -cy.queryByLabelText('Label 1') - .click() - .type('Hello Input Labelled By Id') -cy.get('#nested').within(() => { - cy.queryByText('Button Text 2').click() +cy.findAllByText('Jackie Chan').click() +cy.queryByText('Button Text').should('exist') +cy.queryByText('Non-existing Button Text').should('not.exist') +cy.queryByLabelText('Label text', {timeout: 7000}).should('exist') +cy.get('form').within(() => { + cy.findByText('Button Text').should('exist') }) -cy.get('#nested').then(subject => { - cy.queryByText(/^Button Text/, { container: subject }).click() +cy.get('form').then(subject => { + cy.findByText('Button Text', {container: subject}).should('exist') }) ``` @@ -69,6 +68,6 @@ cy.get('#nested').then(subject => { necessary because Cypress uses jQuery elements, while `DOM Testing Library` expects DOM nodes. When you pass a jQuery element as `container`, it will get the first DOM node from the collection and use that as the `container` parameter -for the DOM Testing Library functions. +for the `DOM Testing Library` functions. [gh]: https://github.com/testing-library/cypress-testing-library From ca10a21c94645bd25bf9e26cb67815429de88f1f Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Fri, 27 Dec 2019 12:06:20 -0700 Subject: [PATCH 023/903] add "screen" docs (#351) --- docs/dom-testing-library/api-queries.md | 33 +++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index c202b4e9c..7b9ff55b5 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -55,8 +55,41 @@ There are also options to adjust how node text is parsed. See [TextMatch](#textmatch) for documentation on what can be passed to a query. +## `screen` + +All of the queries exported by DOM Testing Library accept a `container` as the +first argument. Because querying the entire `document.body` is very common, DOM +Testing Library also exports a `screen` object which has every query that is +pre-bound to `document.body` (using the +[`within`](/docs/dom-testing-library/api-helpers#within-and-getqueriesforelement-apis) +functionality). + +Here's how you use it: + +```javascript +import { screen } from '@testing-library/dom' +// NOTE: many framework-implementations of Testing Library +// re-export everything from `@testing-library/dom` so you +// may be able to import screen from your framework-implementation: +// import {render, screen} from '@testing-library/react' + +const exampleHTML = ` + + +` +document.body.innerHTML = exampleHTML +const exampleInput = screen.getByLabelText(/example/i) +``` + ## Queries +> NOTE: These queries are the base queries and require you pass a `container` as +> the first argument. Most framework-implementations of Testing Library provide +> a pre-bound version of these queries when you render your components with them +> which means you do not have to provide a container. In addition, if you just +> want to query `document.body` then you can use the [`screen`](#screen) export +> as demonstrated above. + ### `ByLabelText` > getByLabelText, queryByLabelText, getAllByLabelText, queryAllByLabelText From 56b410fd254cb2274a6c9892da7e2e9bbca5452a Mon Sep 17 00:00:00 2001 From: Ozgur Aksakal Date: Tue, 7 Jan 2020 21:00:46 +0100 Subject: [PATCH 024/903] yet another who is using. (#353) * Update siteConfig.js * add logo radity --- website/siteConfig.js | 6 ++++++ website/static/img/users/radity.svg | 14 ++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 website/static/img/users/radity.svg diff --git a/website/siteConfig.js b/website/siteConfig.js index 68443ed71..99b0254a7 100755 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -100,6 +100,12 @@ const users = [ infoLink: 'https://quizlet.com/', pinned: true, }, + { + caption: 'Radity', + image: '/img/users/radity.svg', + infoLink: 'https://radity.com/', + pinned: true, + }, ] const siteConfig = { diff --git a/website/static/img/users/radity.svg b/website/static/img/users/radity.svg new file mode 100644 index 000000000..bf1fffdf7 --- /dev/null +++ b/website/static/img/users/radity.svg @@ -0,0 +1,14 @@ + + + + Radity-logo-white-bg-2@1x + Created with Sketch. + + + + + + + + + \ No newline at end of file From 733655f6fe718e81945d319b5ba47930b1b82b47 Mon Sep 17 00:00:00 2001 From: "imgbot[bot]" <31301654+imgbot[bot]@users.noreply.github.com> Date: Tue, 7 Jan 2020 14:08:39 -0700 Subject: [PATCH 025/903] [ImgBot] Optimize images (#354) /website/static/img/users/radity.svg -- 7.08kb -> 6.87kb (2.98%) Signed-off-by: ImgBotApp Co-authored-by: Imgbot --- website/static/img/users/radity.svg | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/website/static/img/users/radity.svg b/website/static/img/users/radity.svg index bf1fffdf7..c1e55c7ee 100644 --- a/website/static/img/users/radity.svg +++ b/website/static/img/users/radity.svg @@ -1,14 +1 @@ - - - - Radity-logo-white-bg-2@1x - Created with Sketch. - - - - - - - - - \ No newline at end of file +Radity-logo-white-bg-2@1xCreated with Sketch. \ No newline at end of file From 4170598f9dc7634318ddd11b95f84084bdbaf290 Mon Sep 17 00:00:00 2001 From: "Pablo R. Dinella" Date: Mon, 13 Jan 2020 16:51:51 -0300 Subject: [PATCH 026/903] Improve usage instructions for jest-dom People not familiar with jest matchers extensions might not know what to do after installing the lib, so this addition should avoid confusion. --- docs/ecosystem-jest-dom.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/ecosystem-jest-dom.md b/docs/ecosystem-jest-dom.md index 0582dd172..7cfd5b8df 100644 --- a/docs/ecosystem-jest-dom.md +++ b/docs/ecosystem-jest-dom.md @@ -10,6 +10,12 @@ provides custom DOM element matchers for Jest npm install --save-dev @testing-library/jest-dom ``` +Import @testing-library/jest-dom/extend-expect once (for instance in your tests setup file) and you're good to go: + +``` +import '@testing-library/jest-dom/extend-expect' +``` + ```jsx
Visible Example
From d37de26abb5dffabaf4b4bf21a64bda13ac187db Mon Sep 17 00:00:00 2001 From: Ahmed Talaat <46477493+ahmdtalaat@users.noreply.github.com> Date: Wed, 15 Jan 2020 00:29:25 +0200 Subject: [PATCH 027/903] fixed react-hooks-useReducer id typo (#357) --- docs/example-react-hooks-useReducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/example-react-hooks-useReducer.md b/docs/example-react-hooks-useReducer.md index 50dcf5d86..bc85ba7f6 100644 --- a/docs/example-react-hooks-useReducer.md +++ b/docs/example-react-hooks-useReducer.md @@ -1,5 +1,5 @@ --- -id: example-react-useReducer +id: example-react-hooks-useReducer title: useReducer --- From 77df64c889dbee40982b56f65da8d0cffaad1b3d Mon Sep 17 00:00:00 2001 From: Stefan Wille Date: Wed, 15 Jan 2020 22:40:40 +0100 Subject: [PATCH 028/903] Fix component name: from App to Modal (#358) --- docs/example-react-modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/example-react-modal.md b/docs/example-react-modal.md index ca8ac27e0..a494f2dec 100644 --- a/docs/example-react-modal.md +++ b/docs/example-react-modal.md @@ -12,7 +12,7 @@ const modalRoot = document.createElement('div') modalRoot.setAttribute('id', 'modal-root') document.body.appendChild(modalRoot) -const App = ({ onClose, children }) => { +const Modal = ({ onClose, children }) => { const el = document.createElement('div') useEffect(() => { From fdda7c24959642ba8f19053a30a98ec9edd90eec Mon Sep 17 00:00:00 2001 From: "Pablo R. Dinella" Date: Wed, 15 Jan 2020 21:39:43 -0300 Subject: [PATCH 029/903] Remove code snippet that will likely get outdated from jest-dom section --- docs/ecosystem-jest-dom.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/ecosystem-jest-dom.md b/docs/ecosystem-jest-dom.md index 7cfd5b8df..948b3e688 100644 --- a/docs/ecosystem-jest-dom.md +++ b/docs/ecosystem-jest-dom.md @@ -10,11 +10,7 @@ provides custom DOM element matchers for Jest npm install --save-dev @testing-library/jest-dom ``` -Import @testing-library/jest-dom/extend-expect once (for instance in your tests setup file) and you're good to go: - -``` -import '@testing-library/jest-dom/extend-expect' -``` +Then follow [usage section][gh-usage] from jest-dom's documentation to add the matchers to Jest. ```jsx @@ -34,3 +30,4 @@ Check out [jest-dom's documentation][gh] for a full list of available matchers. - [jest-dom on GitHub][gh] [gh]: https://github.com/testing-library/jest-dom +[gh-usage]: https://github.com/testing-library/jest-dom#usage From 8300a03c32c6413c1ac0f4b72b05247ad3fa3863 Mon Sep 17 00:00:00 2001 From: Vincent Taverna Date: Sat, 18 Jan 2020 10:15:26 -0500 Subject: [PATCH 030/903] Fix copy typo to buy course buy -> by --- website/pages/en/support.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/pages/en/support.js b/website/pages/en/support.js index e4cbf15a8..e19726dcb 100644 --- a/website/pages/en/support.js +++ b/website/pages/en/support.js @@ -76,7 +76,7 @@ function Support(props) { TestingJavaScript.com course.

- You can support Kent buy purchasing a license to{' '} + You can support Kent by purchasing a license to{' '} TestingJavaScript.com From 441597c2bab76b7214ecb17a4fa5db2e3df877b1 Mon Sep 17 00:00:00 2001 From: Greg Herbowicz Date: Fri, 24 Jan 2020 10:05:35 +0100 Subject: [PATCH 031/903] docs(useReducer): Too many rerenders fix (#365) --- docs/example-react-hooks-useReducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/example-react-hooks-useReducer.md b/docs/example-react-hooks-useReducer.md index bc85ba7f6..c817cb79f 100644 --- a/docs/example-react-hooks-useReducer.md +++ b/docs/example-react-hooks-useReducer.md @@ -42,7 +42,7 @@ const Example = () => {

Waiting for confirmation...

)} - + ) } From f4f4cbd110e0d3c4bbe9fe5d45a2d5517cbf62ab Mon Sep 17 00:00:00 2001 From: Dylan Irlbeck Date: Mon, 27 Jan 2020 17:50:48 -0600 Subject: [PATCH 032/903] Update Cypress intro.md (#364) Currently, the hyperlink attached to `See the DOM Testing Library docs for reference` takes you to `testing-library`'s home page (`testing-library.com`). It makes more sense (for the given text) to link to the DOM Testing Library API docs, in my opinion. --- docs/cypress-testing-library/intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/cypress-testing-library/intro.md b/docs/cypress-testing-library/intro.md index debe9e8ae..abbc9a4e6 100644 --- a/docs/cypress-testing-library/intro.md +++ b/docs/cypress-testing-library/intro.md @@ -24,7 +24,7 @@ import '@testing-library/cypress/add-commands'; You can now use all of `DOM Testing Library`'s `findBy`, `findAllBy`, `queryBy` and `queryAllBy` commands off the global `cy` object. -[See the `DOM Testing Library` docs for reference](https://testing-library.com). +[See the `DOM Testing Library` docs for reference](https://testing-library.com/docs/dom-testing-library/api-queries). > Note: the `get*` queries are not supported because for reasonable Cypress tests you > need retryability and `find*` queries already support that. The reason the `query*` From 1070edf77cc2e88106e17d5302555e8ce07ebefc Mon Sep 17 00:00:00 2001 From: Nataliia Pylypenko <33361478+pylnata@users.noreply.github.com> Date: Tue, 28 Jan 2020 20:39:14 +0100 Subject: [PATCH 033/903] Update example-react-router.md (#366) * Update example-react-router.md React must be in scope when using JSX * Update example-react-router.md exports and imports fixed --- docs/example-react-router.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/example-react-router.md b/docs/example-react-router.md index 49e792278..eedee0acf 100644 --- a/docs/example-react-router.md +++ b/docs/example-react-router.md @@ -7,7 +7,7 @@ title: React Router // app.js import React from 'react' import { withRouter } from 'react-router' -import { Link, Route, Router, Switch } from 'react-router-dom' +import { Link, Route, Switch } from 'react-router-dom' const About = () =>

You are on the about page

const Home = () =>

You are home

@@ -31,14 +31,18 @@ function App() { ) } + +export { LocationDisplay, App } ``` ```jsx // app.test.js +import React from 'react' import { Router } from 'react-router-dom' import { createMemoryHistory } from 'history' import { render, fireEvent } from '@testing-library/react' import '@testing-library/jest-dom/extend-expect' +import { LocationDisplay, App } from './app' test('full app rendering/navigating', () => { const history = createMemoryHistory() From bf88ea1d9d37e003cae82a84304ffc77bc7e7556 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Tue, 28 Jan 2020 12:39:43 -0700 Subject: [PATCH 034/903] docs: add pylnata as a contributor (#370) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 978480196..9f4c63975 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -485,6 +485,15 @@ "contributions": [ "doc" ] + }, + { + "login": "pylnata", + "name": "Nataliia Pylypenko", + "avatar_url": "https://avatars0.githubusercontent.com/u/33361478?v=4", + "profile": "https://github.com/pylnata", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 265f604a8..508543840 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Dustin Masters
πŸ“–
Darren Lester
πŸ“–
Iswara Chaitanya
πŸ“– +
Nataliia Pylypenko
πŸ“– From 60da1be7de20f80115646ab82ffeb825f7c56361 Mon Sep 17 00:00:00 2001 From: Hu Chen Date: Wed, 29 Jan 2020 06:27:44 +0800 Subject: [PATCH 035/903] Update setup.md (#369) because @babel/polyfill is deprecated in 7.4.0 https://babeljs.io/docs/en/next/babel-polyfill --- docs/dom-testing-library/setup.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/dom-testing-library/setup.md b/docs/dom-testing-library/setup.md index fa4263359..dcf56fc16 100644 --- a/docs/dom-testing-library/setup.md +++ b/docs/dom-testing-library/setup.md @@ -34,5 +34,5 @@ mocha --require jsdom-global/register ``` > Note, depending on the version of Node you're running, you may also need to -> install `@babel/polyfill` (if you're using babel 7) or `babel-polyfill` (for -> babel 6). +> add `core-js` and `regenerator-runtime` (if you're using babel 7) or +> `babel-polyfill` (for babel 6). From 0cccb303328454449137361c895c44bdfd840547 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Tue, 28 Jan 2020 15:28:11 -0700 Subject: [PATCH 036/903] docs: add huchenme as a contributor (#371) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 9f4c63975..5e60a5eef 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -494,6 +494,15 @@ "contributions": [ "doc" ] + }, + { + "login": "huchenme", + "name": "Hu Chen", + "avatar_url": "https://avatars3.githubusercontent.com/u/2078389?v=4", + "profile": "https://huchen.dev/", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 508543840..e11732378 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Darren Lester
πŸ“–
Iswara Chaitanya
πŸ“–
Nataliia Pylypenko
πŸ“– +
Hu Chen
πŸ“– From 81ce42df83af1bcdee47c2dbe0003051f9f98dd7 Mon Sep 17 00:00:00 2001 From: Josh Date: Tue, 28 Jan 2020 15:42:14 -0700 Subject: [PATCH 037/903] Add documentation for screen.debug. (#362) * Add documentation for screen.debug. * Update api-queries.md * Update api-queries.md * Update api-queries.md Co-authored-by: Kent C. Dodds --- docs/dom-testing-library/api-queries.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index 7b9ff55b5..9787eb037 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -81,6 +81,29 @@ document.body.innerHTML = exampleHTML const exampleInput = screen.getByLabelText(/example/i) ``` +### `screen.debug` + +For convenience screen also exposes a `debug` method in addition to the queries. +This method is essentially a shortcut for `console.log(prettyDOM())`. It +supports debugging the document, a single element, or an array of elements. + +```javascript +import {screen} from '@testing-library/dom' + +document.body.innerHTML = ` + + multi-test +
multi-test
+` + +// debug document +screen.debug() +// debug single element +screen.debug(screen.getByText('test')) +// debug multiple elements +screen.debug(screen.getAllByText('multi-test')) +``` + ## Queries > NOTE: These queries are the base queries and require you pass a `container` as From 246c0cfc8438a5008184fe69c4ca03f7b3ee63ac Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Tue, 28 Jan 2020 15:42:45 -0700 Subject: [PATCH 038/903] docs: add jkdowdle as a contributor (#372) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 5e60a5eef..af08984f5 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -503,6 +503,15 @@ "contributions": [ "doc" ] + }, + { + "login": "jkdowdle", + "name": "Josh", + "avatar_url": "https://avatars0.githubusercontent.com/u/19804196?v=4", + "profile": "https://github.com/jkdowdle", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index e11732378..cf031a05c 100644 --- a/README.md +++ b/README.md @@ -104,6 +104,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Iswara Chaitanya
πŸ“–
Nataliia Pylypenko
πŸ“–
Hu Chen
πŸ“– +
Josh
πŸ“– From 324790e80632902c8026d47e6ed3daf57a48afff Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 19 Feb 2020 17:15:01 -0700 Subject: [PATCH 039/903] add link to Netlify per their new terms of service --- website/core/Footer.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/website/core/Footer.js b/website/core/Footer.js index eaeb2b71d..774c3e766 100755 --- a/website/core/Footer.js +++ b/website/core/Footer.js @@ -81,6 +81,9 @@ class Footer extends React.Component { Edit Docs on GitHub + + Hosted by Netlify +
{this.props.config.copyright}
From 4547b98e4a26ff35721b903b196b186696990812 Mon Sep 17 00:00:00 2001 From: Maxence Poutord Date: Tue, 25 Feb 2020 12:31:11 +0000 Subject: [PATCH 040/903] docs: add missing examples for vue-testing-library See: https://github.com/testing-library/vue-testing-library\#more-examples --- docs/vue-testing-library/examples.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/vue-testing-library/examples.md b/docs/vue-testing-library/examples.md index db1a39120..0a1498d2d 100644 --- a/docs/vue-testing-library/examples.md +++ b/docs/vue-testing-library/examples.md @@ -102,3 +102,5 @@ Some included are: - [`vuex`](https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuex.js) - [`vue-router`](https://github.com/testing-library/vue-testing-library/tree/master/src/__tests__/vue-router.js) - [`vee-validate`](https://github.com/testing-library/vue-testing-library/tree/master/src/__tests__/validate-plugin.js) +- [`vue-i18n`](https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vueI18n.js) +- [`vuetify`](https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuetify.js) From 4bbe0f9b66f65a5f94154ac91f79a48e7b831078 Mon Sep 17 00:00:00 2001 From: numb86 <16703337+numb86@users.noreply.github.com> Date: Wed, 26 Feb 2020 18:11:50 +0900 Subject: [PATCH 041/903] docs: fix fragment identifier (#379) --- docs/react-testing-library/setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react-testing-library/setup.md b/docs/react-testing-library/setup.md index 80d75b6da..6a18df37d 100644 --- a/docs/react-testing-library/setup.md +++ b/docs/react-testing-library/setup.md @@ -102,7 +102,7 @@ module.exports = { You can define your own custom queries as described in the example in the [Helpers API](/docs/dom-testing-library/api-helpers) documentation, or via the -[`buildQueries`](/docs/dom-testing-library/api-helpers#buildQueries) helper. Then +[`buildQueries`](/docs/dom-testing-library/api-helpers#buildqueries) helper. Then you can use them in any render call using the `queries` option. To make the custom queries available globally, you can add them to your custom render method as shown below. From af00c4fd02b4f0e17c47afbe7cf1d2fc99e49a66 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Wed, 26 Feb 2020 10:39:35 +0100 Subject: [PATCH 042/903] docs: add numb86 as a contributor (#380) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ README.md | 3 +++ 2 files changed, 12 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index af08984f5..dd09e9564 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -512,6 +512,15 @@ "contributions": [ "doc" ] + }, + { + "login": "numb86", + "name": "numb86", + "avatar_url": "https://avatars1.githubusercontent.com/u/16703337?v=4", + "profile": "https://numb86.net/", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index cf031a05c..de0cd8974 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Hu Chen
πŸ“–
Josh
πŸ“– + +
numb86
πŸ“– + From 94b92eaaf2042ecb07e5477fc6352ee2005fb13d Mon Sep 17 00:00:00 2001 From: numb86 <16703337+numb86@users.noreply.github.com> Date: Fri, 28 Feb 2020 15:37:02 +0900 Subject: [PATCH 043/903] docs: fix broken link (#383) --- docs/react-testing-library/api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react-testing-library/api.md b/docs/react-testing-library/api.md index b3508770e..7c9eb45aa 100644 --- a/docs/react-testing-library/api.md +++ b/docs/react-testing-library/api.md @@ -176,7 +176,7 @@ debug() ``` This is a simple wrapper around `prettyDOM` which is also exposed and comes from -[`DOM Testing Library`](https://github.com/testing-library/dom-testing-library/blob/master/README.md#prettydom). +[`DOM Testing Library`](dom-testing-library/api-helpers.md#prettydom). ### `rerender` From cf1eebedf030fc7f0b0f805c330d92532e4fda1d Mon Sep 17 00:00:00 2001 From: Jordan Cutler Date: Tue, 3 Mar 2020 10:34:01 -0800 Subject: [PATCH 044/903] docs: add Gusto to Testing Library Users (#388) --- website/siteConfig.js | 6 ++++++ website/static/img/users/gusto.svg | 1 + 2 files changed, 7 insertions(+) create mode 100644 website/static/img/users/gusto.svg diff --git a/website/siteConfig.js b/website/siteConfig.js index 99b0254a7..0d5bc0a06 100755 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -106,6 +106,12 @@ const users = [ infoLink: 'https://radity.com/', pinned: true, }, + { + caption: 'Gusto', + image: '/img/users/gusto.svg', + infoLink: 'https://gusto.com/', + pinned: true, + }, ] const siteConfig = { diff --git a/website/static/img/users/gusto.svg b/website/static/img/users/gusto.svg new file mode 100644 index 000000000..320bfc327 --- /dev/null +++ b/website/static/img/users/gusto.svg @@ -0,0 +1 @@ + \ No newline at end of file From 34483192fa5bd76d5419eb2803e016120c6e5048 Mon Sep 17 00:00:00 2001 From: Nicholas Boll Date: Tue, 3 Mar 2020 11:34:46 -0700 Subject: [PATCH 045/903] docs: Update Cypress Testing Library scoping example (#373) * docs: Update Cypress Testing Library scoping example Recently https://github.com/testing-library/cypress-testing-library/pull/108 added a way to take the previous subject of a previous command to scope the query. Also `find*` queries handle `.should('not.exist')` and should be preferred over `query*` which require additional logic for eventual non-existence queries. * docs: update note about other query types --- docs/cypress-testing-library/intro.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/cypress-testing-library/intro.md b/docs/cypress-testing-library/intro.md index abbc9a4e6..2bc1d1228 100644 --- a/docs/cypress-testing-library/intro.md +++ b/docs/cypress-testing-library/intro.md @@ -27,9 +27,9 @@ and `queryAllBy` commands off the global `cy` object. [See the `DOM Testing Library` docs for reference](https://testing-library.com/docs/dom-testing-library/api-queries). > Note: the `get*` queries are not supported because for reasonable Cypress tests you -> need retryability and `find*` queries already support that. The reason the `query*` -> variants are supported is to allow you to assert that elements do _not_ appear on -> the screen. +> need retryability and `find*` queries already support that. `query*` queries are no longer +> necessary since v5 and will be removed in v6. `find*` fully support built-in Cypress +> assertions (removes the only use-case for `query*`). ## With TypeScript @@ -53,12 +53,12 @@ To show some simple examples (from ```javascript cy.findAllByText('Jackie Chan').click() -cy.queryByText('Button Text').should('exist') -cy.queryByText('Non-existing Button Text').should('not.exist') -cy.queryByLabelText('Label text', {timeout: 7000}).should('exist') -cy.get('form').within(() => { - cy.findByText('Button Text').should('exist') -}) +cy.findByText('Button Text').should('exist') +cy.findByText('Non-existing Button Text').should('not.exist') +cy.findByLabelText('Label text', {timeout: 7000}).should('exist') + +// findAllByText _inside_ a form element +cy.get('form').findByText('Button Text').should('exist') cy.get('form').then(subject => { cy.findByText('Button Text', {container: subject}).should('exist') }) From 3250aa771e7cf947a5a89421ba0c15657abd5716 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Tue, 3 Mar 2020 11:36:12 -0700 Subject: [PATCH 046/903] docs: add NicholasBoll as a contributor (#390) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index dd09e9564..353147073 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -521,6 +521,15 @@ "contributions": [ "doc" ] + }, + { + "login": "NicholasBoll", + "name": "Nicholas Boll", + "avatar_url": "https://avatars2.githubusercontent.com/u/338257?v=4", + "profile": "https://github.com/NicholasBoll", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index de0cd8974..265f95b68 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
numb86
πŸ“– +
Nicholas Boll
πŸ“– From 43a0600ae74df9a40bf8be5a87f8d1f3ded09fb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pete=20Nyk=C3=A4nen?= Date: Tue, 3 Mar 2020 20:41:17 +0200 Subject: [PATCH 047/903] Update Cypress documentation reference from getByLabelText to findByLabelText (#377) --- docs/dom-testing-library/api-queries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index 9787eb037..26f49316f 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -182,7 +182,7 @@ const inputNode = getByLabelText('username') ```js -cy.getByLabelText('username').should('exist') +cy.findByLabelText('username').should('exist') ``` From b96f4620dcb6a9c44dbfc9a197ad9b21e7f09f81 Mon Sep 17 00:00:00 2001 From: Billy Mathews Date: Tue, 3 Mar 2020 19:08:58 +0000 Subject: [PATCH 048/903] Add my react-testing-library talk to learning.md (#375) --- docs/learning.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/learning.md b/docs/learning.md index 85bdf5168..d9622189a 100644 --- a/docs/learning.md +++ b/docs/learning.md @@ -36,5 +36,6 @@ sidebar_label: Learning Material by [Scott Sauber](https://github.com/scottsauber) - [How to Test Asynchronous Methods](https://www.polvara.me/posts/how-to-test-asynchronous-methods/) by [Gpx](https://twitter.com/Gpx) +- [Writing better tests with react-testing-library](https://www.youtube.com/watch?v=O0VxvRqgm7g) by [Billy Mathews](https://twitter.com/BillRMathews) Feel free to contribute more! From 581cd66010407e605b1d6344a4da32b2a8943064 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Tue, 3 Mar 2020 12:09:41 -0700 Subject: [PATCH 049/903] docs: add Billy as a contributor (#391) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 10 ++++++++++ README.md | 1 + 2 files changed, 11 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 353147073..199d8cf61 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -530,6 +530,16 @@ "contributions": [ "doc" ] + }, + { + "login": "Billy", + "name": "Billy", + "avatar_url": "https://avatars2.githubusercontent.com/u/48111?v=4", + "profile": "https://github.com/billy", + "contributions": [ + "talk", + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 265f95b68..dbe9664b6 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
numb86
πŸ“–
Nicholas Boll
πŸ“– +
Billy
πŸ“’ πŸ“– From eba42571e6fcf13bfc39581d77f98b05fbb1f3d0 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 4 Mar 2020 08:41:38 -0700 Subject: [PATCH 050/903] Fix billy in README.md Whoops https://github.com/testing-library/testing-library-docs/pull/391#issuecomment-594565228 cc @Billy- --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dbe9664b6..f0ead144c 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
numb86
πŸ“–
Nicholas Boll
πŸ“– -
Billy
πŸ“’ πŸ“– +
Billy Mathews
πŸ“’ πŸ“– From 1b8c4efbfd713e0717d1ac4744144bd3722d6e65 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 4 Mar 2020 08:42:29 -0700 Subject: [PATCH 051/903] Fix billy in .all-contributorsrc Whoops https://github.com/testing-library/testing-library-docs/pull/391#issuecomment-594565228 cc @Billy- --- .all-contributorsrc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 199d8cf61..28a268cdd 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -532,10 +532,10 @@ ] }, { - "login": "Billy", - "name": "Billy", - "avatar_url": "https://avatars2.githubusercontent.com/u/48111?v=4", - "profile": "https://github.com/billy", + "login": "Billy-", + "name": "Billy Matthews", + "avatar_url": "https://avatars2.githubusercontent.com/u/4316168?v=4", + "profile": "https://github.com/Billy-", "contributions": [ "talk", "doc" From f6b73763b99dd743eac1a4492a14cf9db6463ccd Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 4 Mar 2020 12:09:57 -0700 Subject: [PATCH 052/903] add note about debug params --- docs/react-testing-library/api.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/react-testing-library/api.md b/docs/react-testing-library/api.md index 7c9eb45aa..f55b327bb 100644 --- a/docs/react-testing-library/api.md +++ b/docs/react-testing-library/api.md @@ -173,6 +173,10 @@ debug() //

Hello World

// // you can also pass an element: debug(getByTestId('messages')) +// and you can pass all the same arguemnts to debug as you can +// to prettyDOM: +// const maxLengthToPrint = 10000 +// debug(getByTestId('messages'), maxLengthToPrint, {highlight: false}) ``` This is a simple wrapper around `prettyDOM` which is also exposed and comes from From 50cba937a2c228a60d457c805429fe4c511250ca Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 4 Mar 2020 12:14:11 -0700 Subject: [PATCH 053/903] Fix arguments typo (#392) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Caught the typo in @kentcdodds live stream πŸ˜€ --- docs/react-testing-library/api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react-testing-library/api.md b/docs/react-testing-library/api.md index f55b327bb..936e67e60 100644 --- a/docs/react-testing-library/api.md +++ b/docs/react-testing-library/api.md @@ -173,7 +173,7 @@ debug() //

Hello World

// // you can also pass an element: debug(getByTestId('messages')) -// and you can pass all the same arguemnts to debug as you can +// and you can pass all the same arguments to debug as you can // to prettyDOM: // const maxLengthToPrint = 10000 // debug(getByTestId('messages'), maxLengthToPrint, {highlight: false}) From c4c0ac2f1bbbbb93401cd59fba906972d6788bcb Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 4 Mar 2020 12:15:32 -0700 Subject: [PATCH 054/903] docs: add dale-french as a contributor (#393) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ README.md | 3 ++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 28a268cdd..d36c74f8f 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -540,6 +540,15 @@ "talk", "doc" ] + }, + { + "login": "dale-french", + "name": "Dale French", + "avatar_url": "https://avatars3.githubusercontent.com/u/6544116?v=4", + "profile": "https://github.com/dale-french", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index f0ead144c..1c0411fce 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
numb86
πŸ“–
Nicholas Boll
πŸ“– -
Billy Mathews
πŸ“’ πŸ“– +
Billy Matthews
πŸ“’ πŸ“– +
Dale French
πŸ“– From f3ce6df1fac2a25a8440c460fc87bad27c9005c6 Mon Sep 17 00:00:00 2001 From: aw-davidson <32170938+aw-davidson@users.noreply.github.com> Date: Thu, 5 Mar 2020 21:10:35 -0500 Subject: [PATCH 055/903] Add docs for getElementError config option (#376) Co-authored-by: davidsa --- docs/dom-testing-library/api-configuration.md | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/docs/dom-testing-library/api-configuration.md b/docs/dom-testing-library/api-configuration.md index 66577ef74..9bd93e47e 100644 --- a/docs/dom-testing-library/api-configuration.md +++ b/docs/dom-testing-library/api-configuration.md @@ -21,6 +21,10 @@ Configuration options: `testIdAttribute`: The attribute used by [`getByTestId`](api-queries#bytestid) and related queries. Defaults to `data-testid`. +`getElementError`: A function that returns the error used when +[`getBy*`](api-queries#getby) or [`getAllBy*`](api-queries#getallby) fail. Takes +the error message and container object as arguments. + @@ -28,8 +32,17 @@ and related queries. Defaults to `data-testid`. ```js // setup-tests.js import { configure } from '@testing-library/dom' - -configure({testIdAttribute: 'data-my-test-id'}) +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' + ) + return new Error(customMessage) + }, +}) ``` @@ -38,7 +51,7 @@ configure({testIdAttribute: 'data-my-test-id'}) // setup-tests.js import { configure } from '@testing-library/react' -configure({testIdAttribute: 'data-my-test-id'}) +configure({ testIdAttribute: 'data-my-test-id' }) ``` @@ -47,7 +60,7 @@ configure({testIdAttribute: 'data-my-test-id'}) // setup-tests.js import { configure } from '@testing-library/cypress' -configure({testIdAttribute: 'data-my-test-id'}) +configure({ testIdAttribute: 'data-my-test-id' }) ``` From 444ccf791db95c7310d27396e66a4be1a8d49d9a Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 5 Mar 2020 19:11:10 -0700 Subject: [PATCH 056/903] docs: add aw-davidson as a contributor (#397) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index d36c74f8f..028e6ee85 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -549,6 +549,15 @@ "contributions": [ "doc" ] + }, + { + "login": "aw-davidson", + "name": "aw-davidson", + "avatar_url": "https://avatars2.githubusercontent.com/u/32170938?v=4", + "profile": "https://github.com/aw-davidson", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 1c0411fce..9258d6e76 100644 --- a/README.md +++ b/README.md @@ -111,6 +111,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Nicholas Boll
πŸ“–
Billy Matthews
πŸ“’ πŸ“–
Dale French
πŸ“– +
aw-davidson
πŸ“– From e49f159b97f67a4dd5d75e42e8d066a38dcd441b Mon Sep 17 00:00:00 2001 From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Date: Fri, 6 Mar 2020 18:03:38 +0700 Subject: [PATCH 057/903] docs(dom-testing-library): Fix typo (#398) --- docs/dom-testing-library/api-helpers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/dom-testing-library/api-helpers.md b/docs/dom-testing-library/api-helpers.md index 37f525849..1d3cc6cd4 100644 --- a/docs/dom-testing-library/api-helpers.md +++ b/docs/dom-testing-library/api-helpers.md @@ -87,7 +87,7 @@ and add it here! getNodeText(node: HTMLElement) ``` -Returns the complete text content of a html element, removing any extra +Returns the complete text content of an HTML element, removing any extra whitespace. The intention is to treat text in nodes exactly as how it is perceived by users in a browser, where any extra whitespace within words in the html code is not meaningful when the text is rendered. From 9dd8b32fcb993f36e2079d1da44500bc1a8eb8a1 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 6 Mar 2020 17:42:42 +0100 Subject: [PATCH 058/903] feat(byRole): Add `name` option (#368) * feat(byRole): Add `name` option * Recommend byRole more * resolve Kent's review * Try another query recommendation * Fix more by* --- docs/dom-testing-library/api-queries.md | 27 +++++++++++++++++++++++-- docs/guide-which-query.md | 11 ++++++---- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index 26f49316f..ee34ba188 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -187,8 +187,12 @@ cy.findByLabelText('username').should('exist') -It will NOT find the input node for label text broken up by elements. For this -case, you can provide a `selector` in the options: +It will NOT find the input node for label text broken up by elements. You can +use `getByRole('textbox', { name: 'Username' })` instead which is robust against +switching to `aria-label` or `aria-labelledby`. + +If it is important that you query an actual `