fix(TS): examples + types (testing-library#77)

* Update README with new match examples * Update types (probably invalid typescript syntax) * Remove example that messes up TOC * Fix union type
alexkrolick · Sep 13, 2018 · fb662cc · fb662cc
1 parent f16d581
commit fb662cc
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 25 deletions.
diff --git a/packages/react-testing-library/README.md b/packages/react-testing-library/README.md
@@ -473,22 +473,37 @@ fireEvent.click(getElementByText('Submit'), rightClick)
 Several APIs accept a `TextMatch` which can be a `string`, `regex` or a
 `function` which returns `true` for a match and `false` for a mismatch.
 
-Here's an example
+See [dom-testing-library#textmatch][dom-testing-lib-textmatch] for options.
+
+Examples:
 
 ```javascript
-// <div>Hello World</div>
-// all of the following will find the div
-getByText('Hello World') // full match
-getByText('llo worl') // substring match
-getByText('hello world') // strings ignore case
-getByText(/Hello W?oRlD/i) // regex
-getByText((content, element) => content.startsWith('Hello')) // function
-
-// all of the following will NOT find the div
-getByText('Goodbye World') // non-string match
-getByText(/hello world/) // case-sensitive regex with different case
-// function looking for a span when it's actually a div
-getByText((content, element) => {
+// <div>
+//  Hello World
+// </div>
+
+// WILL find the div:
+
+// Matching a string:
+getByText(container, 'Hello World') // full string match
+getByText(container, 'llo Worl'), {exact: false} // substring match
+getByText(container, 'hello world', {exact: false}) // ignore case
+
+// Matching a regex:
+getByText(container, /World/) // substring match
+getByText(container, /world/i) // substring match, ignore case
+getByText(container, /^hello world$/i) // full string match, ignore case
+getByText(container, /Hello W?oRlD/i) // advanced regex
+
+// Matching with a custom function:
+getByText(container, (content, element) => content.startsWith('Hello'))
+
+// WILL NOT find the div:
+
+getByText(container, 'Goodbye World') // full string does not match
+getByText(container, /hello world/) // case-sensitive regex with different case
+// function looking for a span when it's actually a div:
+getByText(container, (content, element) => {
   return element.tagName.toLowerCase() === 'span' && content.startsWith('Hello')
 })
 ```
@@ -863,6 +878,7 @@ Links:
 [set-immediate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
 [guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
 [data-testid-blog-post]: https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269
+[dom-testing-lib-textmatch]: https://github.com/kentcdodds/dom-testing-library#textmatch
 [bugs]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
 [requests]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
 [good-first-issue]: https://github.com/kentcdodds/react-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+

diff --git a/packages/react-testing-library/typings/index.d.ts b/packages/react-testing-library/typings/index.d.ts
@@ -2,22 +2,44 @@ import {Simulate as ReactSimulate} from 'react-dom/test-utils'
 
 type TextMatchFunction = (content: string, element: HTMLElement) => boolean
 type TextMatch = string | RegExp | TextMatchFunction
-type ExactTextMatch = string | RegExp | TextMatchFunction
+type TextMatchOptions = {
+  exact?: boolean = false
+  trim?: boolean = true
+  collapseWhitespace?: boolean = true
+}
 
 interface RenderResult {
   container: HTMLDivElement
   rerender: (ui: React.ReactElement<any>) => void
   unmount: VoidFunction
-  queryByTestId: (id: ExactTextMatch) => HTMLElement | null
-  getByTestId: (id: ExactTextMatch) => HTMLElement
-  queryByText: (id: TextMatch) => HTMLElement | null
-  getByText: (text: TextMatch) => HTMLElement
-  queryByPlaceholderText: (id: TextMatch) => HTMLElement | null
-  getByPlaceholderText: (text: TextMatch) => HTMLElement
-  queryByLabelText: (text: TextMatch) => HTMLElement | null
-  getByLabelText: (id: TextMatch, options?: {selector: string}) => HTMLElement
-  queryByAltText: (text: TextMatch) => HTMLElement | null
-  getByAltText: (text: TextMatch) => HTMLElement
+  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(