format docs

Author: alexkrolick

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  proseWrap: 'always',
+  singleQuote: true,
+  semi: false,
+  trailingComma: 'es5',
+}

docs/api-async.md

@@ -11,7 +11,7 @@ function wait(
   options?: {
     timeout?: number
     interval?: number
-  },
+  }
 ): Promise<void>
 ```
 
@@ -30,8 +30,8 @@ getByLabelText(container, 'username').value = 'chucknorris'
 // ...
 ```
 
-This can be useful if you have a unit test that mocks API calls and you need
-to wait for your mock promises to all resolve.
+This can be useful if you have a unit test that mocks API calls and you need to
+wait for your mock promises to all resolve.
 
 The default `callback` is a no-op function (used like `await wait()`). This can
 be helpful if you only need to wait for one tick of the event loop (in the case
@@ -53,12 +53,14 @@ function waitForElement<T>(
     container?: HTMLElement
     timeout?: number
     mutationObserverOptions?: MutationObserverInit
-  },
+  }
 ): Promise<T>
 ```
 
-When in need to wait for DOM elements to appear, disappear, or change you can use `waitForElement`.
-The `waitForElement` function is a small wrapper around the [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+When in need to wait for DOM elements to appear, disappear, or change you can
+use `waitForElement`. The `waitForElement` function is a small wrapper around
+the
+[`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
 
 Here's a simple example:
 
@@ -71,7 +73,7 @@ Here's a simple example:
 // and returns the value returned by the callback.
 const usernameElement = await waitForElement(
   () => getByLabelText(container, 'username'),
-  {container},
+  { container }
 )
 usernameElement.value = 'chucknorris'
 // ...
@@ -85,19 +87,30 @@ const [usernameElement, passwordElement] = await waitForElement(
     getByLabelText(container, 'username'),
     getByLabelText(container, 'password'),
   ],
-  {container},
+  { container }
 )
 ```
 
-Using [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) is more efficient than polling the DOM at regular intervals with `wait`. This library sets up a [`'mutationobserver-shim'`](https://github.com/megawac/MutationObserver.js) on the global `window` object for cross-platform compatibility with older browsers and the [`jsdom`](https://github.com/jsdom/jsdom/issues/639) that is usually used in Node-based tests.
+Using
+[`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+is more efficient than polling the DOM at regular intervals with `wait`. This
+library sets up a
+[`'mutationobserver-shim'`](https://github.com/megawac/MutationObserver.js) on
+the global `window` object for cross-platform compatibility with older browsers
+and the [`jsdom`](https://github.com/jsdom/jsdom/issues/639) that is usually
+used in Node-based tests.
 
-The default `container` is the global `document`. Make sure the elements you wait for will be attached to it, or set a different `container`.
+The default `container` is the global `document`. Make sure the elements you
+wait for will be attached to it, or set a different `container`.
 
 The default `timeout` is `4500ms` which will keep you under
 [Jest's default timeout of `5000ms`](https://facebook.github.io/jest/docs/en/jest-object.html#jestsettimeouttimeout).
 
-<a name="mutationobserveroptions"></a>The default `mutationObserverOptions` is `{subtree: true, childList: true, attributes: true, characterData: true}` which will detect
-additions and removals of child elements (including text nodes) in the `container` and any of its descendants. It will also detect attribute changes.
+<a name="mutationobserveroptions"></a>The default `mutationObserverOptions` is
+`{subtree: true, childList: true, attributes: true, characterData: true}` which
+will detect additions and removals of child elements (including text nodes) in
+the `container` and any of its descendants. It will also detect attribute
+changes.
 
 ### `waitForDomChange`
 
@@ -109,33 +122,37 @@ function waitForDomChange<T>(options?: {
 }): Promise<T>
 ```
 
-When in need to wait for the DOM to change you can use `waitForDomChange`. The `waitForDomChange`
-function is a small wrapper around the
+When in need to wait for the DOM to change you can use `waitForDomChange`. The
+`waitForDomChange` function is a small wrapper around the
 [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
 
-Here is an example where the promise will be resolved because the container is changed:
+Here is an example where the promise will be resolved because the container is
+changed:
 
 ```javascript
 const container = document.createElement('div')
-waitForDomChange({container})
+waitForDomChange({ container })
   .then(() => console.log('DOM changed!'))
   .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
 ```
 
-The promise will resolve with a [`mutationsList`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver) which you can use to determine what kind of a change (or changes) affected the container
+The promise will resolve with a
+[`mutationsList`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver)
+which you can use to determine what kind of a change (or changes) affected the
+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
-    }`,
+    }`
   )
 })
 container.setAttribute('data-cool', 'false')
@@ -146,12 +163,23 @@ container.setAttribute('data-cool', 'false')
 */
 ```
 
-Using [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) is more efficient than polling the DOM at regular intervals with `wait`. This library sets up a [`'mutationobserver-shim'`](https://github.com/megawac/MutationObserver.js) on the global `window` object for cross-platform compatibility with older browsers and the [`jsdom`](https://github.com/jsdom/jsdom/issues/639) that is usually used in Node-based tests.
+Using
+[`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+is more efficient than polling the DOM at regular intervals with `wait`. This
+library sets up a
+[`'mutationobserver-shim'`](https://github.com/megawac/MutationObserver.js) on
+the global `window` object for cross-platform compatibility with older browsers
+and the [`jsdom`](https://github.com/jsdom/jsdom/issues/639) that is usually
+used in Node-based tests.
 
-The default `container` is the global `document`. Make sure the elements you wait for will be attached to it, or set a different `container`.
+The default `container` is the global `document`. Make sure the elements you
+wait for will be attached to it, or set a different `container`.
 
 The default `timeout` is `4500ms` which will keep you under
 [Jest's default timeout of `5000ms`](https://facebook.github.io/jest/docs/en/jest-object.html#jestsettimeouttimeout).
 
-<a name="mutationobserveroptions"></a>The default `mutationObserverOptions` is `{subtree: true, childList: true, attributes: true, characterData: true}` which will detect
-additions and removals of child elements (including text nodes) in the `container` and any of its descendants. It will also detect attribute changes.
+<a name="mutationobserveroptions"></a>The default `mutationObserverOptions` is
+`{subtree: true, childList: true, attributes: true, characterData: true}` which
+will detect additions and removals of child elements (including text nodes) in
+the `container` and any of its descendants. It will also detect attribute
+changes.

docs/api-configuration.md

@@ -7,11 +7,13 @@ title: Configuration
 
 The library can be configured via the `configure` function, which accepts:
 
-- a plain JS object; this will be merged into the existing configuration. e.g. `configure({testIdAttribute: 'not-data-testid'})`
-- a function; the function will be given the existing configuration, and should return a plain JS object which will be merged as above, e.g.
+- a plain JS object; this will be merged into the existing configuration. e.g.
+  `configure({testIdAttribute: 'not-data-testid'})`
+- a function; the function will be given the existing configuration, and should
+  return a plain JS object which will be merged as above, e.g.
   `configure(existingConfig => ({something: [...existingConfig.something, 'extra value for the something array']}))`
 
 Configuration options:
 
 `testIdAttribute`: The attribute used by `getByTestId` and related queries.
-Defaults to `data-testid`. See [`getByTestId`](#getbytestid).
+Defaults to `data-testid`. See [`getByTestId`](#getbytestid).

docs/api-events.md

@@ -18,7 +18,7 @@ fireEvent(
   new MouseEvent('click', {
     bubbles: true,
     cancelable: true,
-  }),
+  })
 )
 ```
 
@@ -34,7 +34,7 @@ for a full list as well as default `eventProperties`.
 
 ```javascript
 // <button>Submit</button>
-const rightClick = {button: 2}
+const rightClick = { button: 2 }
 fireEvent.click(getByText('Submit'), rightClick)
 // default `button` property for click events is set to `0` which is a left click.
 ```
@@ -47,22 +47,25 @@ those properties will be assigned to the node which is receiving the event.
 This is particularly useful for a change event:
 
 ```javascript
-fireEvent.change(getByLabelText(/username/i), {target: {value: 'a'}})
+fireEvent.change(getByLabelText(/username/i), { target: { value: 'a' } })
 
 // note: attempting to manually set the files property of an HTMLInputElement
 // results in an error as the files property is read-only.
 // this feature works around that by using Object.defineProperty.
 fireEvent.change(getByLabelText(/picture/i), {
   target: {
-    files: [new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})],
+    files: [new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' })],
   },
 })
 ```
 
-**Keyboard events**: There are three event types related to keyboard input - `keyPress`, `keyDown`, and `keyUp`. When firing these you need to reference an element in the DOM and the key you want to fire.
+**Keyboard events**: There are three event types related to keyboard input -
+`keyPress`, `keyDown`, and `keyUp`. When firing these you need to reference an
+element in the DOM and the key you want to fire.
 
 ```javascript
-fireEvent.keyDown(domNode, {key: 'Enter', code: 13})
+fireEvent.keyDown(domNode, { key: 'Enter', code: 13 })
 ```
 
-You can find out which key code to use at [https://keycode.info/](https://keycode.info/).
+You can find out which key code to use at
+[https://keycode.info/](https://keycode.info/).

docs/api-helpers.md

@@ -5,28 +5,32 @@ title: Helpers
 
 ## Custom Queries
 
-`dom-testing-library` exposes many of the helper functions that are used to implement the default queries. You can use the helpers to build custom queries. For example, the code below shows a way to override the default `testId` queries to use a different data-attribute. (Note: test files would import `test-utils.js` instead of using `dom-testing-library` directly).
+`dom-testing-library` exposes many of the helper functions that are used to
+implement the default queries. You can use the helpers to build custom queries.
+For example, the code below shows a way to override the default `testId` queries
+to use a different data-attribute. (Note: test files would import
+`test-utils.js` instead of using `dom-testing-library` directly).
 
 ```js
 // test-utils.js
 const domTestingLib = require('dom-testing-library')
-const {queryHelpers} = domTestingLib
+const { queryHelpers } = domTestingLib
 
 export const queryByTestId = queryHelpers.queryByAttribute.bind(
   null,
-  'data-test-id',
+  'data-test-id'
 )
 export const queryAllByTestId = queryHelpers.queryAllByAttribute.bind(
   null,
-  'data-test-id',
+  'data-test-id'
 )
 
 export function getAllByTestId(container, id, ...rest) {
   const els = queryAllByTestId(container, id, ...rest)
   if (!els.length) {
     throw queryHelpers.getElementError(
       `Unable to find an element by: [data-test-id="${id}"]`,
-      container,
+      container
     )
   }
   return els
@@ -93,16 +97,16 @@ These elements use the attribute `value` and display its value to the user.
 
 ## Debugging
 
-When you use any `get` calls in your test cases, the current state of the `container`
-(DOM) gets printed on the console. For example:
+When you use any `get` calls in your test cases, the current state of the
+`container` (DOM) gets printed on the console. For example:
 
 ```javascript
 // <div>Hello world</div>
 getByText(container, 'Goodbye world') // will fail by throwing error
 ```
 
-The above test case will fail, however it prints the state of your DOM under test,
-so you will get to see:
+The above test case will fail, however it prints the state of your DOM under
+test, so you will get to see:
 
 ```
 Unable to find an element with the text: Goodbye world. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
@@ -114,18 +118,19 @@ Here is the state of your container:
 </div>
 ```
 
-Note: Since the DOM size can get really large, you can set the limit of DOM content
-to be printed via environment variable `DEBUG_PRINT_LIMIT`. The default value is
-`7000`. You will see `...` in the console, when the DOM content is stripped off,
-because of the length you have set or due to default size limit. Here's how you
-might increase this limit when running tests:
+Note: Since the DOM size can get really large, you can set the limit of DOM
+content to be printed via environment variable `DEBUG_PRINT_LIMIT`. The default
+value is `7000`. You will see `...` in the console, when the DOM content is
+stripped off, because of the length you have set or due to default size limit.
+Here's how you might increase this limit when running tests:
 
 ```
 DEBUG_PRINT_LIMIT=10000 npm test
 ```
 
-This works on macOS/linux, you'll need to do something else for windows. If you'd
-like a solution that works for both, see [`cross-env`](https://www.npmjs.com/package/cross-env)
+This works on macOS/linux, you'll need to do something else for windows. If
+you'd like a solution that works for both, see
+[`cross-env`](https://www.npmjs.com/package/cross-env)
 
 ### `prettyDOM`
 
@@ -153,4 +158,5 @@ console.log(prettyDOM(div))
 // </div>
 ```
 
-This function is what also powers [the automatic debugging output described above](#debugging).
+This function is what also powers
+[the automatic debugging output described above](#debugging).