diff --git a/README.md b/README.md index b187bb9d..b39a6e70 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ when a real user uses it. * [TextMatch Examples](#textmatch-examples) * [`query` APIs](#query-apis) * [`queryAll` and `getAll` APIs](#queryall-and-getall-apis) -* [`bindElementToQueries`](#bindelementtoqueries) +* [`getQueriesForElement`](#getqueriesforelement) * [Debugging](#debugging) * [`prettyDOM`](#prettydom) * [Implementations](#implementations) @@ -640,9 +640,9 @@ expect(submitButtons).toHaveLength(3) // expect 3 elements expect(submitButtons[0]).toBeInTheDOM() ``` -## `bindElementToQueries` +## `getQueriesForElement` -`bindElementToQueries` takes a DOM element and binds it to the raw query functions, allowing them +`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`. diff --git a/src/__tests__/helpers/test-utils.js b/src/__tests__/helpers/test-utils.js index ad2f29de..a21a316b 100644 --- a/src/__tests__/helpers/test-utils.js +++ b/src/__tests__/helpers/test-utils.js @@ -1,9 +1,9 @@ -import {bindElementToQueries} from '../../bind-element-to-queries' +import {getQueriesForElement} from '../../get-queries-for-element' function render(html) { const container = document.createElement('div') container.innerHTML = html - const containerQueries = bindElementToQueries(container) + const containerQueries = getQueriesForElement(container) return {container, ...containerQueries} } diff --git a/src/bind-element-to-queries.js b/src/bind-element-to-queries.js deleted file mode 100644 index 4a48d045..00000000 --- a/src/bind-element-to-queries.js +++ /dev/null @@ -1,13 +0,0 @@ -import * as queries from './queries' - -function bindElementToQueries(element) { - return Object.entries(queries).reduce( - (helpers, [key, fn]) => { - helpers[key] = fn.bind(null, element) - return helpers - }, - {}, - ) -} - -export {bindElementToQueries} diff --git a/src/get-queries-for-element.js b/src/get-queries-for-element.js new file mode 100644 index 00000000..a633de60 --- /dev/null +++ b/src/get-queries-for-element.js @@ -0,0 +1,10 @@ +import * as queries from './queries' + +function getQueriesForElement(element) { + return Object.entries(queries).reduce((helpers, [key, fn]) => { + helpers[key] = fn.bind(null, element) + return helpers + }, {}) +} + +export {getQueriesForElement} diff --git a/src/index.js b/src/index.js index 3aea34fe..59637f40 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +import {getQueriesForElement} from './get-queries-for-element' import * as queries from './queries' // exporting on the queries namespace as a convenience @@ -10,5 +11,9 @@ export * from './wait-for-element' export * from './matches' export * from './get-node-text' export * from './events' -export * from './bind-element-to-queries' +export * from './get-queries-for-element' export * from './pretty-dom' + +// The original name of bindElementToQueries was weird +// The new name is better. Remove this in the next major version bump. +export {getQueriesForElement as bindElementToQueries}