From 148f6e3a38e42930de463a961d5e5ba7dfee2b20 Mon Sep 17 00:00:00 2001 From: Daniel Cook Date: Wed, 11 Apr 2018 08:09:43 +0100 Subject: [PATCH 1/3] Add bindQueriesToElement utility function for libraries using this API --- src/__tests__/helpers/test-utils.js | 10 ++-------- src/bind-queries-to-element.js | 13 +++++++++++++ src/index.js | 1 + 3 files changed, 16 insertions(+), 8 deletions(-) create mode 100644 src/bind-queries-to-element.js diff --git a/src/__tests__/helpers/test-utils.js b/src/__tests__/helpers/test-utils.js index 6d04a471..f1b24ef5 100644 --- a/src/__tests__/helpers/test-utils.js +++ b/src/__tests__/helpers/test-utils.js @@ -1,15 +1,9 @@ -import * as queries from '../../queries' +import {bindQueriesToElement} from '../../bind-queries-to-element' function render(html) { const container = document.createElement('div') container.innerHTML = html - const containerQueries = Object.entries(queries).reduce( - (helpers, [key, fn]) => { - helpers[key] = fn.bind(null, container) - return helpers - }, - {}, - ) + const containerQueries = bindQueriesToElement(container) return {container, ...containerQueries} } diff --git a/src/bind-queries-to-element.js b/src/bind-queries-to-element.js new file mode 100644 index 00000000..148f34ef --- /dev/null +++ b/src/bind-queries-to-element.js @@ -0,0 +1,13 @@ +import * as queries from './queries' + +function bindQueriesToElement(element) { + return Object.entries(queries).reduce( + (helpers, [key, fn]) => { + helpers[key] = fn.bind(null, element) + return helpers + }, + {}, + ) +} + +export {bindQueriesToElement} \ No newline at end of file diff --git a/src/index.js b/src/index.js index df1a0fd4..c415314d 100644 --- a/src/index.js +++ b/src/index.js @@ -9,3 +9,4 @@ export * from './wait' export * from './wait-for-element' export * from './matches' export * from './events' +export * from './bind-queries-to-element' From 715d812f7f590fe795511abcbde37ca7fb637fb1 Mon Sep 17 00:00:00 2001 From: Daniel Cook Date: Wed, 11 Apr 2018 08:22:49 +0100 Subject: [PATCH 2/3] Add documentation and update contributors --- .all-contributorsrc | 11 +++++++++++ README.md | 7 +++++++ src/bind-queries-to-element.js | 2 +- 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 9d57bf46..888e7448 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -160,6 +160,17 @@ "doc", "example" ] + }, + { + "login": "dfcook", + "name": "Daniel Cook", + "avatar_url": "https://avatars3.githubusercontent.com/u/10348212?v=4", + "profile": "https://github.com/alecook", + "contributions": [ + "code", + "doc, + "test" + ] } ] } diff --git a/README.md b/README.md index 9874d072..e6fb822f 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,7 @@ when a real user uses it. * [Using other assertion libraries](#using-other-assertion-libraries) * [`TextMatch`](#textmatch) * [`query` APIs](#query-apis) +* [`bindQueriesToElement`](#bindQueriesToElement) * [Debugging](#debugging) * [Implementations](#implementations) * [FAQ](#faq) @@ -468,6 +469,12 @@ expect(submitButton).toBeNull() // it doesn't exist expect(submitButton).not.toBeInTheDOM() ``` +## `bindQueriesToElement` + +`bindQueriesToElement` takes a DOM element and binds the raw query functions to this element, 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`. + ## Debugging When you use any `get` calls in your test cases, the current state of the `container` diff --git a/src/bind-queries-to-element.js b/src/bind-queries-to-element.js index 148f34ef..dfd435d1 100644 --- a/src/bind-queries-to-element.js +++ b/src/bind-queries-to-element.js @@ -10,4 +10,4 @@ function bindQueriesToElement(element) { ) } -export {bindQueriesToElement} \ No newline at end of file +export {bindQueriesToElement} From 2c5d9399d0059a7d78e8c810fadc53591a78b379 Mon Sep 17 00:00:00 2001 From: Daniel Cook Date: Wed, 11 Apr 2018 08:57:07 +0100 Subject: [PATCH 3/3] Rename to bindElementToQueries as this seems to be more appropriate --- .all-contributorsrc | 2 +- README.md | 6 +++--- src/__tests__/helpers/test-utils.js | 4 ++-- ...ind-queries-to-element.js => bind-element-to-queries.js} | 4 ++-- src/index.js | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) rename src/{bind-queries-to-element.js => bind-element-to-queries.js} (73%) diff --git a/.all-contributorsrc b/.all-contributorsrc index 888e7448..cbd22857 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -165,7 +165,7 @@ "login": "dfcook", "name": "Daniel Cook", "avatar_url": "https://avatars3.githubusercontent.com/u/10348212?v=4", - "profile": "https://github.com/alecook", + "profile": "https://github.com/dfcook", "contributions": [ "code", "doc, diff --git a/README.md b/README.md index e6fb822f..76fb749a 100644 --- a/README.md +++ b/README.md @@ -83,7 +83,7 @@ when a real user uses it. * [Using other assertion libraries](#using-other-assertion-libraries) * [`TextMatch`](#textmatch) * [`query` APIs](#query-apis) -* [`bindQueriesToElement`](#bindQueriesToElement) +* [`bindElementToQueries`](#bindElementToQueries) * [Debugging](#debugging) * [Implementations](#implementations) * [FAQ](#faq) @@ -469,9 +469,9 @@ expect(submitButton).toBeNull() // it doesn't exist expect(submitButton).not.toBeInTheDOM() ``` -## `bindQueriesToElement` +## `bindElementToQueries` -`bindQueriesToElement` takes a DOM element and binds the raw query functions to this element, allowing them +`bindElementToQueries` 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 f1b24ef5..ad2f29de 100644 --- a/src/__tests__/helpers/test-utils.js +++ b/src/__tests__/helpers/test-utils.js @@ -1,9 +1,9 @@ -import {bindQueriesToElement} from '../../bind-queries-to-element' +import {bindElementToQueries} from '../../bind-element-to-queries' function render(html) { const container = document.createElement('div') container.innerHTML = html - const containerQueries = bindQueriesToElement(container) + const containerQueries = bindElementToQueries(container) return {container, ...containerQueries} } diff --git a/src/bind-queries-to-element.js b/src/bind-element-to-queries.js similarity index 73% rename from src/bind-queries-to-element.js rename to src/bind-element-to-queries.js index dfd435d1..4a48d045 100644 --- a/src/bind-queries-to-element.js +++ b/src/bind-element-to-queries.js @@ -1,6 +1,6 @@ import * as queries from './queries' -function bindQueriesToElement(element) { +function bindElementToQueries(element) { return Object.entries(queries).reduce( (helpers, [key, fn]) => { helpers[key] = fn.bind(null, element) @@ -10,4 +10,4 @@ function bindQueriesToElement(element) { ) } -export {bindQueriesToElement} +export {bindElementToQueries} diff --git a/src/index.js b/src/index.js index c415314d..f569d9d7 100644 --- a/src/index.js +++ b/src/index.js @@ -9,4 +9,4 @@ export * from './wait' export * from './wait-for-element' export * from './matches' export * from './events' -export * from './bind-queries-to-element' +export * from './bind-element-to-queries'