Skip to content

Reorganize query documentation #33

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.

Sign up for GitHub

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 2 commits into from
Feb 13, 2019
Merged

Reorganize query documentation #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dbc3bb5
reorganize query documentation
alexkrolick Feb 13, 2019
febfb19
Add searchable text for each query variant
alexkrolick Feb 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions docs/api-helpers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,23 @@ const buttonText = getNodeText(container.querySelector('input[type=button]')) //
These elements use the attribute `value` and display its value to the user.
```

## `within` and `getQueriesForElement` APIs

`within` (an alias to `getQueriesForElement`) takes a DOM element and binds it
to the raw query functions, allowing them to be used without specifying a
container. It is the recommended approach for libraries built on this API and is
in use in `react-testing-library` and `vue-testing-library`.

Example: To get the text 'hello' only within a section called 'messages', you
could do:

```javascript
import { within } from 'dom-testing-library'

const { getByText } = within(document.getElementById('messages'))
const helloMessage = getByText('hello')
```

## Debugging

When you use any `get` calls in your test cases, the current state of the
Expand Down
94 changes: 59 additions & 35 deletions docs/api-queries.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,44 @@ id: api-queries
title: Queries
---

## Variants

> `getBy` queries are shown by default in the [query documentation](#queries)
> below.

### getBy

[`getBy*`](#query-apis) queries returns the first matching node for a query, and
throw an error if no elements match.

### getAllBy

[`getAllBy*`](#queryall-and-getall-apis) queries return an array of all matching
nodes for a query, and throw an error if no elements match.

### queryBy

[`queryBy*`](#query-apis) queries returns the first matching node for a query,
and return `null` if no elements match.

### queryAllBy

[`queryAllBy*`](#queryall-and-getall-apis) queries return an array of all
matching nodes for a query, and return an empty array (`[]`) if no elements
match.

## Options

The argument to a query can be a _string_, _regular expression_, or _function_.
There are also options to adjust how node text is parsed.

See [TextMatch](#textmatch) for documentation on what can be passed to a query.

## Queries

> **Note**
>
> - Each of the `get` APIs below have a matching
> [`getAll`](#queryall-and-getall-apis) API that returns all elements instead
> of just the first one, and
> [`query`](#query-apis)/[`queryAll`](#queryall-and-getall-apis) that return
> `null`/`[]` instead of throwing an error.
> - See [TextMatch](#textmatch) for details on the `exact`, `trim`, and
> `collapseWhitespace` options.
### `ByLabelText`

### `getByLabelText`
> getByLabelText, queryByLabelText, getAllByLabelText, queryAllByLabelText

```typescript
getByLabelText(
Expand Down Expand Up @@ -69,7 +94,10 @@ const inputNode = getByLabelText(container, 'username', { selector: 'input' })
> this behavior (for example you wish to assert that it doesn't exist), then use
> `queryByLabelText` instead.

### `getByPlaceholderText`
### `ByPlaceholderText`

> getByPlaceholderText, queryByPlaceholderText, getAllByPlaceholderText,
> queryAllByPlaceholderText

```typescript
getByPlaceholderText(
Expand All @@ -94,7 +122,9 @@ const inputNode = getByPlaceholderText(container, 'Username')
> A placeholder is not a good substitute for a label so you should generally use
> `getByLabelText` instead.

### `getByText`
### `ByText`

> getByText, queryByText, getAllByText, queryAllByText

```typescript
getByText(
Expand Down Expand Up @@ -137,7 +167,9 @@ content is in an inline script file, then the script tag could be returned.

If you'd rather disable this behavior, set `ignore` to `false`.

### `getByAltText`
### `ByAltText`

> getByAltText, queryByAltText, getAllByAltText, queryAllByAltText

```typescript
getByAltText(
Expand All @@ -163,7 +195,9 @@ as it's deprecated).
const incrediblesPosterImg = getByAltText(container, /incredibles.*poster$/i)
```

### `getByTitle`
### `ByTitle`

> getByTitle, queryByTitle, getAllByTitle, queryAllByTitle

```typescript
getByTitle(
Expand All @@ -189,7 +223,10 @@ Will also find a `title` element within an SVG.
const closeElement = getByTitle(container, 'Close')
```

### `getByDisplayValue`
### `ByDisplayValue`

> getByDisplayValue, queryByDisplayValue, getAllByDisplayValue,
> queryAllByDisplayValue

```typescript
getByDisplayValue(
Expand Down Expand Up @@ -238,7 +275,9 @@ const selectElement = getByDisplayName(container, 'Alaska')
In case of `select`, this will search for a `<select>` whose selected `<option>`
matches the given [`TextMatch`](#textmatch).

### `getByRole`
### `ByRole`

> getByRole, queryByRole, getAllByRole, queryAllByRole

```typescript
getByRole(
Expand All @@ -258,7 +297,9 @@ accepts a [`TextMatch`](#textmatch)).
const dialogContainer = getByRole(container, 'dialog')
```

### `getByTestId`
### `ByTestId`

> getByTestId, queryByTestId, getAllByTestId, queryAllByTestId

```typescript
getByTestId(
Expand Down Expand Up @@ -391,7 +432,7 @@ getByText(container, (content, element) => {

## `query` APIs

Each of the `get` APIs listed in [the 'Usage'](#usage) section above have a
Each of the `get` APIs listed in the [queries](#queries) section above have a
complimentary `query` API. The `get` APIs will throw errors if a proper node
cannot be found. This is normally the desired effect. However, if you want to
make an assertion that an element is _not_ present in the DOM, then you can use
Expand All @@ -415,20 +456,3 @@ const submitButtons = queryAllByText(container, 'submit')
expect(submitButtons).toHaveLength(3) // expect 3 elements
expect(submitButtons[0]).toBeTruthy()
```

## `within` and `getQueriesForElement` APIs

`within` (an alias to `getQueriesForElement`) takes a DOM element and binds it
to the raw query functions, allowing them to be used without specifying a
container. It is the recommended approach for libraries built on this API and is
in use in `react-testing-library` and `vue-testing-library`.

Example: To get the text 'hello' only within a section called 'messages', you
could do:

```javascript
import { within } from 'dom-testing-library'

const { getByText } = within(document.getElementById('messages'))
const helloMessage = getByText('hello')
```