From a57604c97dd5bb26be6640923ff123c8409f719b Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Fri, 20 Nov 2020 17:26:46 -0500 Subject: [PATCH] fix(types): allow all elements --- docs/dom-testing-library/api-async.mdx | 22 +++++------ docs/dom-testing-library/api-events.mdx | 34 ++++++++--------- docs/dom-testing-library/api-helpers.mdx | 47 +++++++++++------------- docs/dom-testing-library/api-queries.mdx | 38 +++++++++---------- docs/marko-testing-library/api.mdx | 10 ++--- docs/react-testing-library/api.mdx | 4 +- docs/vue-testing-library/api.mdx | 6 +-- 7 files changed, 78 insertions(+), 83 deletions(-) diff --git a/docs/dom-testing-library/api-async.mdx b/docs/dom-testing-library/api-async.mdx index fdae4568f..6b97a0feb 100644 --- a/docs/dom-testing-library/api-async.mdx +++ b/docs/dom-testing-library/api-async.mdx @@ -15,7 +15,7 @@ All the async utils are built on top of `waitFor`. function waitFor( callback: () => T | Promise, options?: { - container?: HTMLElement + container?: Element timeout?: number interval?: number onTimeout?: (error: Error) => Error @@ -70,7 +70,7 @@ changes. When any of those changes occur, it will re-run the callback. function waitForElementToBeRemoved( callback: (() => T) | T, options?: { - container?: HTMLElement + container?: Element timeout?: number interval?: number onTimeout?: (error: Error) => Error @@ -106,14 +106,14 @@ el.parentElement.removeChild(el) or an empty array: ```javascript -waitForElementToBeRemoved(null).catch(err => console.log(err)) -waitForElementToBeRemoved(queryByText(/not here/i)).catch(err => +waitForElementToBeRemoved(null).catch((err) => console.log(err)) +waitForElementToBeRemoved(queryByText(/not here/i)).catch((err) => console.log(err) ) -waitForElementToBeRemoved(queryAllByText(/not here/i)).catch(err => +waitForElementToBeRemoved(queryAllByText(/not here/i)).catch((err) => console.log(err) ) -waitForElementToBeRemoved(() => getByText(/not here/i)).catch(err => +waitForElementToBeRemoved(() => getByText(/not here/i)).catch((err) => console.log(err) ) @@ -128,7 +128,7 @@ The options object is forwarded to `waitFor`. function wait( callback: () => void, options?: { - container?: HTMLElement + container?: Element timeout?: number interval?: number mutationObserverOptions?: MutationObserverInit @@ -148,7 +148,7 @@ practice to use an empty callback because it will make the tests more fragile. ```typescript function waitForDomChange(options?: { - container?: HTMLElement + container?: Element timeout?: number mutationObserverOptions?: MutationObserverInit }): Promise @@ -165,7 +165,7 @@ changed: const container = document.createElement('div') waitForDomChange({ container }) .then(() => console.log('DOM changed!')) - .catch(err => console.log(`Error you need to deal with: ${err}`)) + .catch((err) => console.log(`Error you need to deal with: ${err}`)) container.append(document.createElement('p')) // if 👆 was the only code affecting the container and it was not run, // waitForDomChange would throw an error @@ -179,7 +179,7 @@ container ```javascript const container = document.createElement('div') container.setAttribute('data-cool', 'true') -waitForDomChange({ container }).then(mutationsList => { +waitForDomChange({ container }).then((mutationsList) => { const mutation = mutationsList[0] console.log( `was cool: ${mutation.oldValue}\ncurrently cool: ${mutation.target.dataset.cool}` @@ -211,7 +211,7 @@ changes. function waitForElement( callback: () => T, options?: { - container?: HTMLElement + container?: Element timeout?: number mutationObserverOptions?: MutationObserverInit } diff --git a/docs/dom-testing-library/api-events.mdx b/docs/dom-testing-library/api-events.mdx index 3cba83169..32c6a7353 100644 --- a/docs/dom-testing-library/api-events.mdx +++ b/docs/dom-testing-library/api-events.mdx @@ -3,8 +3,8 @@ id: api-events title: Firing Events --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' > Most projects have a few use cases for `fireEvent`, but the majority of the > time you should probably use @@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem'; ## `fireEvent` ```typescript -fireEvent(node: HTMLElement, event: Event) +fireEvent(node: Element, event: Event) ``` Fire DOM events. @@ -32,7 +32,7 @@ fireEvent( ## `fireEvent[eventName]` ```typescript -fireEvent[eventName](node: HTMLElement, eventProperties: Object) +fireEvent[eventName](node: Element, eventProperties: Object) ``` Convenience methods for firing DOM events. Check out @@ -107,7 +107,7 @@ You can find out which key code to use at ## `createEvent[eventName]` ```typescript -createEvent[eventName](node: HTMLElement, eventProperties: Object) +createEvent[eventName](node: Element, eventProperties: Object) ``` Convenience methods for creating DOM events that can then be fired by @@ -149,20 +149,20 @@ bound callback. }> - ```jsx - import { render, screen, fireEvent } from '@testing-library/react' +```jsx +import { render, screen, fireEvent } from '@testing-library/react' - const Button = ({ onClick, children }) => ( - - ) +const Button = ({ onClick, children }) => ( + +) - test('calls onClick prop when clicked', () => { - const handleClick = jest.fn() - render() - fireEvent.click(screen.getByText(/click me/i)) - expect(handleClick).toHaveBeenCalledTimes(1) - }) - ``` +test('calls onClick prop when clicked', () => { + const handleClick = jest.fn() + render() + fireEvent.click(screen.getByText(/click me/i)) + expect(handleClick).toHaveBeenCalledTimes(1) +}) +``` diff --git a/docs/dom-testing-library/api-helpers.mdx b/docs/dom-testing-library/api-helpers.mdx index 258fcec6e..9681855ac 100644 --- a/docs/dom-testing-library/api-helpers.mdx +++ b/docs/dom-testing-library/api-helpers.mdx @@ -3,8 +3,8 @@ id: api-helpers title: Helpers --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' ## Custom Queries @@ -68,8 +68,7 @@ module.exports = { The `buildQueries` helper allows you to create custom queries with all standard [variants](api-queries.mdx) of queries in testing-library. -See the -[Add custom queries](react-testing-library/setup.mdx#add-custom-queries) +See the [Add custom queries](react-testing-library/setup.mdx#add-custom-queries) section of the custom render guide for example usage. ### Using other assertion libraries @@ -87,7 +86,7 @@ and add it here! ## `getNodeText` ```typescript -getNodeText(node: HTMLElement) +getNodeText(node: Element) ``` Returns the complete text content of an HTML element, removing any extra @@ -138,32 +137,32 @@ could do: }> - ```js - import { within } from '@testing-library/dom' +```js +import { within } from '@testing-library/dom' - const { getByText } = within(document.getElementById('messages')) - const helloMessage = getByText('hello') - ``` +const { getByText } = within(document.getElementById('messages')) +const helloMessage = getByText('hello') +``` - ```jsx - import { render, within } from '@testing-library/react' +```jsx +import { render, within } from '@testing-library/react' - const { getByLabelText } = render() - const signinModal = getByLabelText('Sign In') - within(signinModal).getByPlaceholderText('Username') - ``` +const { getByLabelText } = render() +const signinModal = getByLabelText('Sign In') +within(signinModal).getByPlaceholderText('Username') +``` - ```js - cy.get('form').within(() => { - cy.findByText('Button Text').should('be.disabled') - }) - ``` +```js +cy.get('form').within(() => { + cy.findByText('Button Text').should('be.disabled') +}) +``` @@ -258,11 +257,7 @@ tree of a node. This can be helpful for instance when debugging tests. It is defined as: ```typescript -function prettyDOM( - node: HTMLElement, - maxLength?: number, - options?: Options -): string +function prettyDOM(node: Element, maxLength?: number, options?: Options): string ``` It receives the root node to print out, an optional extra parameter to limit the diff --git a/docs/dom-testing-library/api-queries.mdx b/docs/dom-testing-library/api-queries.mdx index bd5da1eef..1a1e589ab 100644 --- a/docs/dom-testing-library/api-queries.mdx +++ b/docs/dom-testing-library/api-queries.mdx @@ -3,8 +3,8 @@ id: api-queries title: Queries --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' ## Variants @@ -127,13 +127,13 @@ screen.debug(screen.getAllByText('multi-test')) ```typescript getByLabelText( - container: HTMLElement, // if you're using `screen`, then skip this argument + container: Element, // if you're using `screen`, then skip this argument text: TextMatch, options?: { selector?: string = '*', exact?: boolean = true, normalizer?: NormalizerFn, - }): HTMLElement + }): Element ``` This will search for the label that matches the given [`TextMatch`](#textmatch), @@ -244,12 +244,12 @@ const inputNode = screen.getByLabelText('Username', { selector: 'input' }) ```typescript getByPlaceholderText( - container: HTMLElement, // if you're using `screen`, then skip this argument + container: Element, // if you're using `screen`, then skip this argument text: TextMatch, options?: { exact?: boolean = true, normalizer?: NormalizerFn, - }): HTMLElement + }): Element ``` This will search for all elements with a placeholder attribute and find one that @@ -301,14 +301,14 @@ cy.findByPlaceholderText('Username').should('exist') ```typescript getByText( - container: HTMLElement, // if you're using `screen`, then skip this argument + container: Element, // if you're using `screen`, then skip this argument text: TextMatch, options?: { selector?: string = '*', exact?: boolean = true, ignore?: string|boolean = 'script, style', normalizer?: NormalizerFn, - }): HTMLElement + }): Element ``` This will search for all elements that have a text node with `textContent` @@ -375,12 +375,12 @@ If you'd rather disable this behavior, set `ignore` to `false`. ```typescript getByAltText( - container: HTMLElement, // if you're using `screen`, then skip this argument + container: Element, // if you're using `screen`, then skip this argument text: TextMatch, options?: { exact?: boolean = true, normalizer?: NormalizerFn, - }): HTMLElement + }): Element ``` This will return the element (normally an ``) that has the given `alt` @@ -433,12 +433,12 @@ cy.findByAltText(/incredibles.*? poster/i).should('exist') ```typescript getByTitle( - container: HTMLElement, // if you're using `screen`, then skip this argument + container: Element, // if you're using `screen`, then skip this argument title: TextMatch, options?: { exact?: boolean = true, normalizer?: NormalizerFn, - }): HTMLElement + }): Element ``` Returns the element that has the matching `title` attribute. @@ -493,12 +493,12 @@ cy.findByTitle('Close').should('exist') ```typescript getByDisplayValue( - container: HTMLElement, // if you're using `screen`, then skip this argument + container: Element, // if you're using `screen`, then skip this argument value: TextMatch, options?: { exact?: boolean = true, normalizer?: NormalizerFn, - }): HTMLElement + }): Element ``` Returns the `input`, `textarea`, or `select` element that has the matching @@ -635,7 +635,7 @@ cy.findByDisplayValue('Alaska').should('exist') ```typescript getByRole( - container: HTMLElement, // if you're using `screen`, then skip this argument + container: Element, // if you're using `screen`, then skip this argument role: TextMatch, options?: { exact?: boolean = true, @@ -647,7 +647,7 @@ getByRole( pressed?: boolean, queryFallbacks?: boolean, level?: number, - }): HTMLElement + }): Element ``` Queries for elements with the given role (and it also accepts a @@ -884,12 +884,12 @@ To learn more about the `aria-level` property, see ```typescript getByTestId( - container: HTMLElement, // if you're using `screen`, then skip this argument + container: Element, // if you're using `screen`, then skip this argument text: TextMatch, options?: { exact?: boolean = true, normalizer?: NormalizerFn, - }): HTMLElement + }): Element ``` A shortcut to `` container.querySelector(`[data-testid="${yourId}"]`) `` (and it @@ -1006,7 +1006,7 @@ To override normalization to remove some Unicode characters whilst keeping some ```javascript screen.getByText('text', { - normalizer: str => + normalizer: (str) => getDefaultNormalizer({ trim: false })(str).replace(/[\u200E-\u200F]*/g, ''), }) ``` diff --git a/docs/marko-testing-library/api.mdx b/docs/marko-testing-library/api.mdx index f352a79c9..67a332abb 100644 --- a/docs/marko-testing-library/api.mdx +++ b/docs/marko-testing-library/api.mdx @@ -68,8 +68,8 @@ available options which you could provide as the third argument to `render`. By default for client side tests, `Marko Testing Library` will create a `div` and append that `div` to the `document.body` and this is where your component -will be rendered. If you provide your own HTMLElement `container` via this -option, it will not be appended to the `document.body` automatically. +will be rendered. If you provide your own Element `container` via this option, +it will not be appended to the `document.body` automatically. For example: If you are unit testing a `tablebody` element, it cannot be a child of a `div`. In this case, you can specify a `table` as the render `container`. @@ -229,9 +229,9 @@ option. ## `cleanup` -With client side tests your components are rendered into a placeholder -HTMLElement. To ensure that your components are properly removed, and destroyed, -you can call `cleanup` at any time which will remove any attached components. +With client side tests your components are rendered into a placeholder Element. +To ensure that your components are properly removed, and destroyed, you can call +`cleanup` at any time which will remove any attached components. ```javascript import { cleanup } from '@marko/testing-library' diff --git a/docs/react-testing-library/api.mdx b/docs/react-testing-library/api.mdx index ed5bafa39..7245276d5 100644 --- a/docs/react-testing-library/api.mdx +++ b/docs/react-testing-library/api.mdx @@ -67,7 +67,7 @@ available options which you could provide as a second argument to `render`. By default, `React Testing Library` will create a `div` and append that `div` to the `document.body` and this is where your React component will be rendered. If -you provide your own HTMLElement `container` via this option, it will not be +you provide your own Element `container` via this option, it will not be appended to the `document.body` automatically. For example: If you are unit testing a `tablebody` element, it cannot be a child @@ -249,7 +249,7 @@ const TestComponent = () => { const [count, setCounter] = useState(0) return ( - ) diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx index 94f3ef571..86b5b6ea9 100644 --- a/docs/vue-testing-library/api.mdx +++ b/docs/vue-testing-library/api.mdx @@ -109,7 +109,7 @@ const { getByLabelText, queryAllByTestId } = render(Component) By default, `Vue Testing Library` will create a `div` and append it to the `baseElement`. This is where your component will be rendered. If you provide -your own HTMLElement container via this option, it will not be appended to the +your own Element container via this option, it will not be appended to the `baseElement` automatically. ```js @@ -189,8 +189,8 @@ It returns a Promise through `wait()`, so you can `await updateProps(...)`. ## `fireEvent` Vue Testing Library re-exports all DOM Testing Library -[firing events](dom-testing-library/api-events.mdx). -However, it alters them so that all events are async. +[firing events](dom-testing-library/api-events.mdx). However, it alters them so +that all events are async. ```js await fireEvent.click(getByText('Click me'))