Repository: kentcdodds/dom-testing-library
Pull request #18 (2018-04-11 07:23:32)

#17: Add bindElementToQueries utility function for libraries using this API
<!--
Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->

**What**: Add bindElementToQueries utility function, taking a DOM element and binding the functions from queries.js

<!-- Why are these changes necessary? -->

**Why**: Reduce duplicated code in libraries using this API and the tests for this library themselves.

<!-- How were these changes implemented? -->

**How**: Added file bind-element-to-queries.js, moved the Object.assign code from the test helper and added it to the export from index.js

<!-- Have you done all of these things?  -->

**Checklist**:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

* [x] Documentation
* [x] Tests
* [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
* [x] Added myself to contributors table <!-- this is optional, see the contributing guidelines for instructions -->

<!-- feel free to add additional comments -->



Patch:
diff --git a/.all-contributorsrc b/.all-contributorsrc
index 9d57bf4..cbd2285 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/dfcook",
+      "contributions": [
+        "code",
+        "doc,
+        "test"
+      ]
     }
   ]
 }
diff --git a/README.md b/README.md
index 9874d07..76fb749 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)
+* [`bindElementToQueries`](#bindElementToQueries)
 * [Debugging](#debugging)
 * [Implementations](#implementations)
 * [FAQ](#faq)
@@ -468,6 +469,12 @@ expect(submitButton).toBeNull() // it doesn't exist
 expect(submitButton).not.toBeInTheDOM()
 ```
 
+## `bindElementToQueries`
+
+`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`.
+
 ## Debugging
 
 When you use any `get` calls in your test cases, the current state of the `container`
diff --git a/src/bind-element-to-queries.js b/src/bind-element-to-queries.js
new file mode 100644
index 0000000..4a48d04
--- /dev/null
+++ b/src/bind-element-to-queries.js
@@ -0,0 +1,13 @@
+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/index.js b/src/index.js
index df1a0fd..f569d9d 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-element-to-queries'


Test patch:
diff --git a/src/__tests__/helpers/test-utils.js b/src/__tests__/helpers/test-utils.js
index 6d04a47..ad2f29d 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 {bindElementToQueries} from '../../bind-element-to-queries'
 
 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 = bindElementToQueries(container)
   return {container, ...containerQueries}
 }