Skip to content

Make getByText support inputs where type is either button or submit #185

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
Show file tree
Hide file tree
Changes from all commits
Commits
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
19 changes: 19 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,14 @@ matching the given [`TextMatch`](#textmatch).
const aboutAnchorNode = getByText(container, /about/i)
```

It also works properly with `input`s whose `type` attribute is either `submit`
or `button`:

```javascript
// <input type="submit" value="Send data" />
const submitButton = getByText(container, /send data/i)
```

> NOTE: see [`getByLabelText`](#getbylabeltext) for more details on how and when to use the `selector` option

The `ignore` option accepts a query selector. If the
Expand Down Expand Up @@ -702,6 +710,17 @@ This function is also used internally when querying nodes by their text content.
This enables functions like `getByText` and `queryByText` to work as expected,
finding elements in the DOM similarly to how users would do.

The function has a special behavior for some input elements:

```javascript
// <input type="submit" value="Send data" />
// <input type="button" value="Push me" />
const submitText = getNodeText(container.querySelector('input[type=submit]')) // "Send data"
const buttonText = getNodeText(container.querySelector('input[type=button]')) // "Push me"

These elements use the attribute `value` and display its value to the user.
```

## Custom Jest Matchers

When using [jest][], it is convenient to import a set of custom matchers that
Expand Down
13 changes: 13 additions & 0 deletions src/__tests__/element-queries.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,19 @@ test('can get elements by matching their text across adjacent text nodes', () =>
expect(queryByText('£24.99')).toBeTruthy()
})

test('can get input elements with type submit or button', () => {
const {queryByText} = render(`
<div>
<input type="submit" value="Send data"/>
<input type="button" value="Push me!"/>
<input type="text" value="user data" />
</div>
`)
expect(queryByText('Send data')).toBeTruthy()
expect(queryByText('Push me!')).toBeTruthy()
expect(queryByText('user data')).toBeFalsy()
})

test('matches case with RegExp matcher', () => {
const {queryByText} = render(`
<span>STEP 1 of 4</span>
Expand Down
4 changes: 4 additions & 0 deletions src/get-node-text.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
function getNodeText(node) {
const window = node.ownerDocument.defaultView

if (node.matches('input[type=submit], input[type=button]')) {
return node.value;
}

return Array.from(node.childNodes)
.filter(
child =>
Expand Down