Skip to content

Update Testing Libraries naming in docs #125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Jun 1, 2019
4 changes: 2 additions & 2 deletions .vscode/markdown.code-snippets
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"",
"<!--Native-->",
"```js",
"import { $1 } from 'dom-testing-library'",
"import { $1 } from '@testing-library/dom'",
"",
"const container = document.body",
"const $3 = $1(container, '$2')",
Expand All @@ -50,4 +50,4 @@
],
"description": "Create a Docusaurus multi-language code block"
}
}
}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ testing-library-docs
[![Code of Conduct][coc-badge]][coc]
<!-- prettier-ignore-end -->

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)

See [./website/README.md](./website/README.md) for instructions on building the site

Expand Down
2 changes: 1 addition & 1 deletion docs/angular-testing-library/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ after each interaction.
You can also import these event via `@angular-extensions/testing-library`, but
the Angular's change detection will not be triggered automatically.

The same counts for all the queries provided by `dom-testing-library`, these are
The same counts for all the queries provided by `DOM Testing Library`, these are
also re-exported and can be imported via `@angular-extensions/testing-library`.

```typescript
Expand Down
2 changes: 1 addition & 1 deletion docs/bs-react-testing-library/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Bindings for several testing libraries have been ported to [ReasonML][re].
`react-testing-library`.

[`bs-dom-testing-library`][gh-dom] contains [BuckleScript][bs] bindings for
`dom-testing-library`.
`DOM Testing Library`.

```
npm install --save-dev bs-dom-testing-library
Expand Down
8 changes: 4 additions & 4 deletions docs/cypress-testing-library/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ Add this line to your project's `cypress/support/commands.js`:
import 'cypress-testing-library/add-commands';
```

You can now use all of `dom-testing-library`'s `getBy`, `getAllBy`, `queryBy`
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)
[See `DOM Testing Library` API for reference](dom-testing-library/api-queries.md)

## Examples

Expand All @@ -45,9 +45,9 @@ cy.get('form').then(subject => {
```

`cypress-testing-library` supports both jQuery elements and DOM nodes. This is
necessary because Cypress uses jQuery elements, while `dom-testing-library`
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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's remove the backtics around these. It only sorta made sense before, but I don't think it makes any sense now.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! 👍

Yet, backticks are used in several other places (here, for instance, or a couple of lines above your comment).

Shoud we remove all backticks when talking about the library, now that it doesn't look like "code" anymore? Or there's another reason to modify this particular line I'm failing to see?


[gh]: https://github.com/testing-library/cypress-testing-library
2 changes: 1 addition & 1 deletion docs/dom-testing-library/api-configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Defaults to `data-testid`. See [`getByTestId`](#getbytestid).

```js
// setup-tests.js
import { configure } from 'dom-testing-library'
import { configure } from '@testing-library/dom'

configure({testIdAttribute: 'my-data-test-id'})`
```
Expand Down
8 changes: 4 additions & 4 deletions docs/dom-testing-library/api-helpers.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ title: Helpers

## Custom Queries

`dom-testing-library` exposes many of the helper functions that are used to
`DOM Testing Library` exposes many of the helper functions that are used to
implement the default queries. You can use the helpers to build custom queries.
For example, the code below shows a way to override the default `testId` queries
to use a different data-attribute. (Note: test files would import
`test-utils.js` instead of using `dom-testing-library` directly).
`test-utils.js` instead of using `DOM Testing Library` directly).

```js
// test-utils.js
const domTestingLib = require('dom-testing-library')
const domTestingLib = require('@testing-library/dom')
const { queryHelpers } = domTestingLib

export const queryByTestId = queryHelpers.queryByAttribute.bind(
Expand Down Expand Up @@ -116,7 +116,7 @@ could do:
<!--Native-->

```js
import { within } from 'dom-testing-library'
import { within } from '@testing-library/dom'

const { getByText } = within(document.getElementById('messages'))
const helloMessage = getByText('hello')
Expand Down
24 changes: 12 additions & 12 deletions docs/dom-testing-library/api-queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ The example below will find the input node for the following DOM structures:
<!--Native-->

```javascript
import { getByLabelText } from 'dom-testing-library'
import { getByLabelText } from '@testing-library/dom'

const container = document.body
const inputNode = getByLabelText(container, 'Username')
Expand Down Expand Up @@ -172,7 +172,7 @@ matches the given [`TextMatch`](#textmatch).
<!--Native-->

```js
import { getByPlaceholderText } from 'dom-testing-library'
import { getByPlaceholderText } from '@testing-library/dom'

const container = document.body
const inputNode = getByPlaceholderText(container, 'Username')
Expand Down Expand Up @@ -229,7 +229,7 @@ matching the given [`TextMatch`](#textmatch).
<!--Native-->

```js
import { getByText } from 'dom-testing-library'
import { getByText } from '@testing-library/dom'

const container = document.body
const aboutAnchorNode = getByText(container, /about/i)
Expand Down Expand Up @@ -305,7 +305,7 @@ as it's deprecated).
<!--Native-->

```js
import { getByAltText } from 'dom-testing-library'
import { getByAltText } from '@testing-library/dom'

const container = document.body
const incrediblesPosterImg = getByAltText(container, /incredibles.*? poster/i)
Expand Down Expand Up @@ -360,7 +360,7 @@ Will also find a `title` element within an SVG.
<!--Native-->

```js
import { getByTitle } from 'dom-testing-library'
import { getByTitle } from '@testing-library/dom'

const container = document.body
const deleteElement = getByTitle(container, 'Delete')
Expand Down Expand Up @@ -419,7 +419,7 @@ document.getElementById('lastName').value = 'Norris'
<!--Native-->

```js
import { getByDisplayValue } from 'dom-testing-library'
import { getByDisplayValue } from '@testing-library/dom'

const container = document.body
const lastNameInput = getByDisplayValue(container, 'Norris')
Expand Down Expand Up @@ -457,7 +457,7 @@ document.getElementById('messageTextArea').value = 'Hello World'
<!--Native-->

```js
import { getByDisplayValue } from 'dom-testing-library'
import { getByDisplayValue } from '@testing-library/dom'

const container = document.body
const messageTextArea = getByDisplayValue(container, 'Hello World')
Expand Down Expand Up @@ -499,7 +499,7 @@ matches the given [`TextMatch`](#textmatch).
<!--Native-->

```js
import { getByDisplayValue } from 'dom-testing-library'
import { getByDisplayValue } from '@testing-library/dom'

const container = document.body
const selectElement = getByDisplayValue(container, 'Alaska')
Expand Down Expand Up @@ -549,7 +549,7 @@ accepts a [`TextMatch`](#textmatch)).
<!--Native-->

```js
import { getByRole } from 'dom-testing-library'
import { getByRole } from '@testing-library/dom'

const container = document.body
const dialogContainer = getByRole(container, 'dialog')
Expand Down Expand Up @@ -599,7 +599,7 @@ also accepts a [`TextMatch`](#textmatch)).
<!--Native-->

```js
import { getByTestId } from 'dom-testing-library'
import { getByTestId } from '@testing-library/dom'

const container = document.body
const usernameInput = getByTestId(container, 'username-input')
Expand Down Expand Up @@ -632,7 +632,7 @@ cy.getByTestId('username-input').should('exist')

#### Overriding `data-testid`

The `...ByTestId` functions in `dom-testing-library` use the attribute
The `...ByTestId` functions in `DOM Testing Library` use the attribute
`data-testid` by default, following the precedent set by
[React Native Web](https://github.com/testing-library/react-testing-library/issues/1)
which uses a `testID` prop to emit a `data-testid` attribute on the element, and
Expand Down Expand Up @@ -661,7 +661,7 @@ affect the precision of string matching:

### Normalization

Before running any matching logic against text in the DOM, `dom-testing-library`
Before running any matching logic against text in the DOM, `DOM Testing Library`
automatically normalizes that text. By default, normalization consists of
trimming whitespace from the start and end of text, and collapsing multiple
adjacent whitespace characters into a single space.
Expand Down
2 changes: 1 addition & 1 deletion docs/dom-testing-library/cheatsheet.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: cheatsheet
title: Cheatsheet
---

A short guide to all the exported functions in `dom-testing-library`
A short guide to all the exported functions in `DOM Testing Library`

## Queries

Expand Down
2 changes: 1 addition & 1 deletion docs/dom-testing-library/example-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
// Tip: all queries are also exposed on an object
// called "queries" which you could import here as well
wait,
} from 'dom-testing-library'
} from '@testing-library/dom'
// adds special assertions like toHaveTextContent
import 'jest-dom/extend-expect'

Expand Down
12 changes: 6 additions & 6 deletions docs/dom-testing-library/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's `devDependencies`:

```
npm install --save-dev dom-testing-library
npm install --save-dev @testing-library/dom
```

## Wrappers
Expand All @@ -21,29 +21,29 @@ wrapper:

## Ecosystem

`dom-testing-library` works well with these companion libraries:
`DOM Testing Library` works well with these companion libraries:

- [user-event](ecosystem-user-event.md) browser event simulation
- [jest-dom](ecosystem-jest-dom.md) custom Jest matchers

## Main Exports

You can
[review the `dom-testing-library` package.json here](https://unpkg.com/dom-testing-library/package.json).
[review the `DOM Testing Library` package.json here](https://unpkg.com/@testing-library/dom/package.json).

In particular, the `main`, `module`, and `umd:main` fields are useful. Each of
these points to a file that's useful in certain situations. Typically, your
testing framework will resolve to the correct one for your situation, but if it
does not, then you can either configure your testing framework to resolve to the
right file when you require/import `dom-testing-library` or you can import the
right file when you require/import `@testing-library/dom` or you can import the
file you need more explicitly. For example:

```js
import { within } from 'dom-testing-library/dist/dom-testing-library.umd.js'
import { within } from '@testing-library/dom/dist/@testing-library/dom.umd.js'
```

You can
[review the published `dist` files here](https://unpkg.com/dom-testing-library/dist).
[review the published `dist` files here](https://unpkg.com/@testing-library/dom/dist/).

The `main` file is configured to compile down to support the version of node
that is referenced in the `package.json` `engines.node` field. But the `module`
Expand Down
4 changes: 2 additions & 2 deletions docs/dom-testing-library/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ functionality) don't break your tests and slow you and your team down.

## This solution

The `dom-testing-library` is a very light-weight solution for testing DOM nodes
The `DOM Testing Library` is a very light-weight solution for testing DOM nodes
(whether simulated with [`JSDOM`](https://github.com/jsdom/jsdom) as provided by
default with [Jest][jest] or in the browser). The main utilities it provides
involve querying the DOM for nodes in a way that's similar to how the user finds
elements on the page. In this way, the library helps ensure your tests give you
confidence in your UI code. The `dom-testing-library`'s primary guiding
confidence in your UI code. The `DOM Testing Library`'s primary guiding
principle is:

> [The more your tests resemble the way your software is used, the more confidence they can give you.](guiding-principles.md)
Expand Down
4 changes: 2 additions & 2 deletions docs/dom-testing-library/setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ sidebar_label: Setup
---

If you're running your tests in the browser bundled with webpack (or similar)
then `dom-testing-library` should work out of the box for you. However, most
people using `dom-testing-library` are using it with
then `DOM Testing Library` should work out of the box for you. However, most
people using `DOM Testing Library` are using it with
[the Jest testing framework](https://jestjs.io/) with the `testEnvironment` set
to
[`jest-environment-jsdom`](https://www.npmjs.com/package/jest-environment-jsdom)
Expand Down
4 changes: 2 additions & 2 deletions docs/ecosystem-native-testing-library.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ sidebar_label: native-testing-library
---

Native Testing Library is a testing library for **React Native** inspired by
`dom-testing-library`. Because React Native does not run in a browser
`DOM Testing Library`. Because React Native does not run in a browser
environment, the core queries are implemented independently, unlike other
wrappers that user dom-testing-library as the base. You'll find much more
wrappers that use `DOM Testing Library` as the base. You'll find much more
information about the library, including examples, on the project website:

- [Docs](https://native-testing-library.com)
Expand Down
4 changes: 2 additions & 2 deletions docs/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ slow you and your team down.

## This solution

The core library, [`dom-testing-library`][dom], is a light-weight solution for
The core library, [`DOM Testing Library`][dom], is a light-weight solution for
testing web pages by querying and interacting with DOM nodes (whether simulated
with [`JSDOM`][jsdom]/[Jest][jest] or in the browser). The main utilities it
provides involve querying the DOM for nodes in a way that's similar to how the
Expand All @@ -36,7 +36,7 @@ is also a plugin to use testing-library queries for end-to-end tests in
1. A test runner or framework
2. Specific to a testing framework

`dom-testing-library` works with any environment that provides DOM APIs, such as
`DOM Testing Library` works with any environment that provides DOM APIs, such as
Jest, Mocha + JSDOM, or a real browser

[jest]: https://jestjs.io
Expand Down
10 changes: 5 additions & 5 deletions docs/native-testing-library/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ sidebar_label: Intro
---

Native Testing Library is a testing library for **React Native** inspired by
`dom-testing-library`. Because React Native does not run in a browser
`DOM Testing Library`. Because React Native does not run in a browser
environment, the core queries are implemented independently, unlike other
wrappers that use `dom-testing-library` as the base. You'll find much more
wrappers that use `DOM Testing Library` as the base. You'll find much more
information about the library, including examples, on the project sites:

- [Docs][docs]
Expand Down Expand Up @@ -41,14 +41,14 @@ write tests using that philosophy in React Native.
the testing library API as closely as possible while still accounting for the
differences in the platforms. Accomplishing this is no small feat because of the
differences between the two platforms. Although most framework implementations
like `react-testing-library` are thin layers over `dom-testing-library`, this
like `react-testing-library` are thin layers over `DOM Testing Library`, this
library needed to have its own base implementation as well as a user-facing API.
This library uses the
[react-test-renderer](https://reactjs.org/docs/test-renderer.html), whereas
`dom-testing-library` uses ReactDOM and JSDOM. The main philosophy is that you
`DOM Testing Library` uses ReactDOM and JSDOM. The main philosophy is that you
should find elements that are on the "screen" the way users would. This approach
is meant to give you confidence that your app is working as a cohesive unit.
Just like the `dom-testing-library`, `native-testing-library`'s primary guiding
Just like the `DOM Testing Library`, `native-testing-library`'s primary guiding
principle is:

> [The more your tests resemble the way your software is used, the more confidence they can give you.](guiding-principles.md)
Expand Down
Loading