fix(TS): Add missing getAll and queryAll functions to TS definitions (#…

…88)
testing-library · May 18, 2018 · fc09a99 · fc09a99
1 parent de769ec
commit fc09a99
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -91,6 +91,7 @@ facilitate testing implementation details). Read more about this in
   * [`prettyDOM`](#prettydom)
 * [`TextMatch`](#textmatch)
 * [`query` APIs](#query-apis)
+* [`queryAll` and `getAll` APIs](#queryall-and-getall-apis)
 * [Examples](#examples)
 * [FAQ](#faq)
 * [Other Solutions](#other-solutions)
@@ -563,6 +564,16 @@ const submitButton = queryByText('submit')
 expect(submitButton).toBeNull() // it doesn't exist
 ```
 
+## `queryAll` and `getAll` APIs
+
+Each of the `query` APIs have a corresponsing `queryAll` version that always returns an Array of matching nodes. `getAll` is the same but throws when the array has a length of 0.
+
+```javascript
+const submitButtons = queryAllByText('submit')
+expect(submitButtons).toHaveLength(3) // expect 3 elements
+expect(submitButtons[0]).toBeInTheDOM()
+```
+
 ## Examples
 
 You'll find examples of testing with different libraries in

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
   "author": "Kent C. Dodds <[email protected]> (http://kentcdodds.com/)",
   "license": "MIT",
   "dependencies": {
-    "dom-testing-library": "^2.0.0",
+    "dom-testing-library": "^2.3.1",
     "wait-for-expect": "^0.5.0"
   },
   "devDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom'
 import {Simulate} from 'react-dom/test-utils'
-import {bindElementToQueries, prettyDOM} from 'dom-testing-library'
+import {getQueriesForElement, prettyDOM} from 'dom-testing-library'
 
 function render(ui, {container = document.createElement('div')} = {}) {
   ReactDOM.render(ui, container)
@@ -14,7 +14,7 @@ function render(ui, {container = document.createElement('div')} = {}) {
       // Intentionally do not return anything to avoid unnecessarily complicating the API.
       // folks can use all the same utilities we return in the first place that are bound to the container
     },
-    ...bindElementToQueries(container),
+    ...getQueriesForElement(container),
   }
 }
 

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -1,4 +1,14 @@
 import {Simulate as ReactSimulate} from 'react-dom/test-utils'
+import {
+  AllByAttribute,
+  AllByText,
+  BoundFunction,
+  GetByAttribute,
+  GetByText,
+  getQueriesForElement,
+  QueryByAttribute,
+  QueryByText,
+} from 'dom-testing-library'
 
 type TextMatchFunction = (content: string, element: HTMLElement) => boolean
 type TextMatch = string | RegExp | TextMatchFunction
@@ -8,38 +18,33 @@ type TextMatchOptions = {
   collapseWhitespace?: boolean
 }
 
-interface RenderResult {
+interface GetsAndQueries {
+  queryByTestId: BoundFunction<QueryByAttribute>
+  queryAllByTestId: BoundFunction<AllByAttribute>
+  getByTestId: BoundFunction<GetByAttribute>
+  getAllByTestId: BoundFunction<AllByAttribute>
+  queryByText: BoundFunction<QueryByText>
+  queryAllByText: BoundFunction<AllByText>
+  getByText: BoundFunction<GetByText>
+  getAllByText: BoundFunction<AllByText>
+  queryByPlaceholderText: BoundFunction<QueryByAttribute>
+  queryAllByPlaceholderText: BoundFunction<AllByAttribute>
+  getByPlaceholderText: BoundFunction<GetByAttribute>
+  getAllByPlaceholderText: BoundFunction<AllByAttribute>
+  queryByLabelText: BoundFunction<QueryByAttribute>
+  queryAllByLabelText: BoundFunction<AllByAttribute>
+  getByLabelText: BoundFunction<GetByAttribute>
+  getAllByLabelText: BoundFunction<AllByAttribute>
+  queryByAltText: BoundFunction<QueryByAttribute>
+  queryAllByAltText: BoundFunction<AllByAttribute>
+  getByAltText: BoundFunction<GetByAttribute>
+  getAllByAltText: BoundFunction<AllByAttribute>
+}
+
+interface RenderResult extends GetsAndQueries {
   container: HTMLDivElement
   rerender: (ui: React.ReactElement<any>) => void
   unmount: VoidFunction
-  queryByTestId: (
-    id: TextMatch,
-    options?: TextMatchOptions,
-  ) => HTMLElement | null
-  getByTestId: (id: TextMatch, options?: TextMatchOptions) => HTMLElement
-  queryByText: (id: TextMatch, options?: TextMatchOptions) => HTMLElement | null
-  getByText: (text: TextMatch, options?: TextMatchOptions) => HTMLElement
-  queryByPlaceholderText: (
-    id: TextMatch,
-    options?: TextMatchOptions,
-  ) => HTMLElement | null
-  getByPlaceholderText: (
-    text: TextMatch,
-    options?: TextMatchOptions,
-  ) => HTMLElement
-  queryByLabelText: (
-    text: TextMatch,
-    options?: TextMatchOptions,
-  ) => HTMLElement | null
-  getByLabelText: (
-    id: TextMatch,
-    options?: {selector?: string} & TextMatchOptions,
-  ) => HTMLElement
-  queryByAltText: (
-    text: TextMatch,
-    options?: TextMatchOptions,
-  ) => HTMLElement | null
-  getByAltText: (text: TextMatch, options?: TextMatchOptions) => HTMLElement
 }
 
 export function render(
@@ -147,3 +152,5 @@ export const fireEvent: FireFunction & FireObject
 export function renderIntoDocument(ui: React.ReactElement<any>): RenderResult
 
 export function cleanup(): void
+
+export function getQueriesForElement(element: HTMLElement): GetsAndQueries