diff --git a/README.md b/README.md index 119237c8..0f1c20ad 100644 --- a/README.md +++ b/README.md @@ -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 +// +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 @@ -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 +// +// +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 diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 0f9b2535..bc30089a 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -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(` +
+ + + +
+ `) + expect(queryByText('Send data')).toBeTruthy() + expect(queryByText('Push me!')).toBeTruthy() + expect(queryByText('user data')).toBeFalsy() +}) + test('matches case with RegExp matcher', () => { const {queryByText} = render(` STEP 1 of 4 diff --git a/src/get-node-text.js b/src/get-node-text.js index 1f7c3ecd..82af6b67 100644 --- a/src/get-node-text.js +++ b/src/get-node-text.js @@ -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 =>