docs(readme): migrate docs to the testing library website

mihar-22 · mihar-22 · commit 6209f288c7ad · 2019-09-30T15:09:44.000+10:00
diff --git a/README.md b/README.md
@@ -35,17 +35,6 @@ practices.</p>
 - [The Problem](#the-problem)
 - [The Solution](#the-solution)
 - [Installation](#installation)
-- [Usage](#usage)
-  - [`render`](#render)
-  - [`cleanup`](#cleanup)
-  - [`act`](#act)
-  - [`fireEvent`](#fireevent)
-  - [`@testing-library/dom`](#testing-librarydom)
-- [Example](#example)
-  - [Component](#component)
-  - [Test](#test)
-- [Hooks](#hooks)
-- [Guiding Principles](#guiding-principles)
 - [Docs](#docs)
 - [Issues](#issues)
   - [🐛 Bugs](#-bugs)
@@ -58,11 +47,8 @@ practices.</p>
 
 ## The Problem
 
-You want to write maintainable tests for your Preact components. As a part of this goal, you want
-your tests to avoid including implementation details of your components and rather focus on making
-your tests give you the confidence for which they are intended. As part of this, you want your
-testbase to be maintainable in the long run so refactors of your components (changes to
-implementation but not functionality) don't break your tests and slow you and your team down.
+You want to write tests for your Preact components so that they avoid including implementation
+details, and are maintainable in the long run.
 
 ## The Solution
 
@@ -91,228 +77,10 @@ This library has `peerDependencies` listings for `preact >= 10`.
 
 📝 If you're looking for a solution for Preact 8.x then install `preact-testing-library`.
 
-## Usage
-
-### `render`
-
-```jsx
-import { render } from '@testing-library/preact'
-
-const { returns } = render(<YourComponent />, { arguments })
-```
-
-| Arguments     | Description                                                                                                                                                            | Default       |
-| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
-| `container`   | The HTML element the component is mounted to.                                                                                                                          | baseElement   |
-| `baseElement` | The root HTML element to which the container is appended to.                                                                                                           | document.body |
-| `queries`     | Queries to bind to the baseElement. See [getQueriesForElement](https://testing-library.com/docs/dom-testing-library/api-helpers#within-and-getqueriesforelement-apis). | null          |
-| `hydrate`     | Used when the component has already been mounted and requires a rerender. Not needed for most people. The rerender function passed back to you does this already.      | false         |
-| `wrapper`     | A parent component to wrap YourComponent.                                                                                                                              | null          |
-
-| Returns       | Description                                                                                                                                                                                             |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `container`   | The HTML element the component is mounted to.                                                                                                                                                           |
-| `baseElement` | The root HTML element to which the container is appended to.                                                                                                                                            |
-| `debug`       | Logs the baseElement using [prettyDom](https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom).                                                                                     |
-| `unmount`     | Unmounts the component from the container.                                                                                                                                                              |
-| `rerender`    | Calls render again passing in the original arguments and sets hydrate to true.                                                                                                                          |
-| `asFragment`  | Returns the innerHTML of the container.                                                                                                                                                                 |
-| `...queries`  | Returns all [query functions](https://testing-library.com/docs/dom-testing-library/api-queries) to be used on the baseElement. If you pass in `query` arguments than this will be those, otherwise all. |
-
-### `cleanup`
-
-Unmounts the component from the container and destroys the container.
-
-📝 When you import anything from the library, this automatically runs after each test. If you'd like
-to disable this then set `process.env.PTL_SKIP_AUTO_CLEANUP` to true when running your tests.
-
-```jsx
-import { render, cleanup } from '@testing-library/preact'
-
-afterEach(() => {
-  cleanup
-}) // Default on import: runs it after each test.
-
-render(<YourComponent />)
-
-cleanup() // Or like this for more control.
-```
-
-### `act`
-
-Just a convenience export that points to preact/test-utils/act. All renders and events being fired
-are wrapped in `act`, so you don't really need this. It's responsible for flushing all effects and
-rerenders after invoking it.
-
-📝 If you'd love to learn more, checkout
-[this explanation](https://github.com/threepointone/react-act-examples/blob/master/sync.md). Even
-thought it's for React, it gives you an idea of why it's needed.
-
-### `fireEvent`
-
-Passes it to the @testing-library/dom
-[fireEvent](https://testing-library.com/docs/dom-testing-library/api-events). It's also wrapped in
-`act` so you don't need to worry about doing it.
-
-📝 Keep in mind mainly when using `h / Preact.createElement` that React uses a Synthetic event
-system, and Preact uses the browser's native `addEventListener` for event handling. This means
-events like `onChange` and `onDoubleClick` in React, are `onInput` and `onDblClick` in Preact. The
-double click example will give you an idea of how to test using those functions.
-
-```jsx
-const cb = jest.fn();
-
-function Counter() {
-    useEffect(cb);
-
-    const [count, setCount] = useState(0);
-
-    return <button onClick={() => setCount(count + 1)}>{count}</button>;
-}
-
-const { container: { firstChild: buttonNode }, } = render(<Counter />);
-
-// Clear the first call to useEffect that the initial render triggers.
-cb.mockClear();
-
-// Fire event Option 1.
-fireEvent.click(buttonNode);
-
-// Fire event Option 2.
-fireEvent(
-button,
-new Event('MouseEvent', {
-  bubbles: true,
-  cancelable: true,
-  button: 0,
-});
-
-expect(buttonNode).toHaveTextContent('1');
-expect(cb).toHaveBeenCalledTimes(1);
-```
-
-```jsx
-const handler = jest.fn()
-
-const {
-  container: { firstChild: input },
-} = render(<input type="text" onInput={handler} />)
-
-fireEvent.input(input, { target: { value: 'a' } })
-
-expect(handler).toHaveBeenCalledTimes(1)
-```
-
-```jsx
-const ref = createRef()
-const spy = jest.fn()
-
-render(
-  h(elementType, {
-    onDblClick: spy,
-    ref,
-  }),
-)
-
-fireEvent['onDblClick'](ref.current)
-
-expect(spy).toHaveBeenCalledTimes(1)
-```
-
-### `@testing-library/dom`
-
-This library re-exports everything from `@testing-library/dom`. See the
-[documentation](https://testing-library.com/docs/dom-testing-library/intro) to see what goodies you
-can use. The helper functions like `wait` can be particularly useful.
-
-## Example
-
-#### Component
-
-_Note: Preact Testing Library works with both Preact Hooks and Classes. Your tests will be the same
-however you write your components._
-
-```jsx
-function HiddenMessage({ children }) {
-  const [showMessage, setShowMessage] = useState(false)
-
-  return (
-    <div>
-      <label htmlFor="toggle">Show Message</label>
-      <input
-        id="toggle"
-        type="checkbox"
-        onChange={e => setShowMessage(e.target.checked)}
-        checked={showMessage}
-      />
-      {showMessage ? children : null}
-    </div>
-  )
-}
-```
-
-#### Test
-
-```jsx
-// NOTE: jest-dom adds handy assertions to Jest and it is recommended, but not required.
-import '@testing-library/jest-dom/extend-expect'
-
-import { h } from 'preact'
-import { render, fireEvent } from '@testing-library/preact'
-import HiddenMessage from '../hidden-message'
-
-test('shows the children when the checkbox is checked', () => {
-  const testMessage = 'Test Message'
-
-  const { queryByText, getByLabelText, getByText } = render(
-    <HiddenMessage>{testMessage}</HiddenMessage>,
-  )
-
-  // query* functions will return the element or null if it cannot be found.
-  // get* functions will return the element or throw an error if it cannot be found.
-  expect(queryByText(testMessage)).toBeNull()
-
-  // The queries can accept a regex to make your selectors more resilient to content tweaks and changes.
-  fireEvent.click(getByLabelText(/show/i))
-
-  // .toBeInTheDocument() is an assertion that comes from jest-dom.
-  // Otherwise you could use .toBeDefined().
-  expect(getByText(testMessage)).toBeInTheDocument()
-})
-```
-
-## Hooks
-
-If you are interested in testing a custom hook, the preact-hooks-testing-library will be coming
-soon.
-
-> It is not recommended to test single-use custom hooks in isolation from the components where it's
-> being used. It's better to test the component that's using the hook rather than the hook itself.
-> The preact-hooks-testing-library will be intended to be used for reusable hooks/libraries.
-
-## Guiding Principles
-
-We try to only expose methods and utilities that encourage you to write tests that closely resemble
-how your Preact components are used.
-
-Utilities are included in this project based on the following
-[guiding principles](https://twitter.com/kentcdodds/status/977018512689455106).
-
 ## Docs
 
-For more information checkout:
-
-- The react-testing-library [documentation][react-testing-library-docs].
-- The react-testing-library
-  [sandbox](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples).
-- Extend Jest with [custom matchers](https://github.com/testing-library/jest-dom) to test the state
-  of the DOM.
-- The testing library [documentation](https://testing-library.com/docs/intro).
-  - [Queries](https://testing-library.com/docs/dom-testing-library/api-queries).
-  - [Events](https://testing-library.com/docs/dom-testing-library/api-events).
-
-Even though they are all React based examples, it should be close to identical in Preact. Take note
-of the [differences between React and Preact](https://preactjs.com/guide/v10/differences-to-react).
+See the [docs](https://testing-library.com/docs/preact-testing-library/intro) over at the Testing
+Library website.
 
 ## Issues
 
