docs: move readme content to docs #704
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 07ee027:
|
Codecov Report
@@ Coverage Diff @@
## main #704 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 50 50
Lines 934 934
Branches 368 368
=========================================
Hits 934 934 Continue to review full report at Codecov.
|
| ## Table of Contents | ||
|
|
||
| <!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
| <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
|
|
||
| - [The problem](#the-problem) | ||
| - [The solution](#the-solution) | ||
| - [Installation](#installation) | ||
| - [Docs](#docs) | ||
| - [Known limitations](#known-limitations) | ||
| - [Issues](#issues) | ||
| - [🐛 Bugs](#-bugs) | ||
| - [💡 Feature Requests](#-feature-requests) | ||
| - [❓ Questions](#-questions) | ||
| - [Contributors](#contributors) | ||
| - [LICENSE](#license) | ||
|
|
||
| <!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
|
|
There was a problem hiding this comment.
I'm not sure ToC is even needed anymore as the README is a lot shorter.
There was a problem hiding this comment.
The DOM Testing Library readme is about the same length and still has a table of contents, so I'd rather be consistent here.
| userEvent.tab() | ||
|
|
||
| expect(checkbox).toHaveFocus() | ||
| }) | ||
| ``` | ||
|
|
||
| ### `hover(element)` | ||
|
|
||
| Hovers over `element`. | ||
|
|
||
| ```jsx | ||
| import React from 'react' | ||
| import {render, screen} from '@testing-library/react' | ||
| import userEvent from '@testing-library/user-event' | ||
| import Tooltip from '../tooltip' | ||
|
|
||
| test('hover', () => { | ||
| const messageText = 'Hello' | ||
| render( | ||
| <Tooltip messageText={messageText}> | ||
| <TrashIcon aria-label="Delete" /> | ||
| </Tooltip>, | ||
| ) | ||
|
|
||
| userEvent.hover(screen.getByLabelText(/delete/i)) | ||
| expect(screen.getByText(messageText)).toBeInTheDocument() | ||
| userEvent.unhover(screen.getByLabelText(/delete/i)) | ||
| expect(screen.queryByText(messageText)).not.toBeInTheDocument() | ||
| }) | ||
| ``` | ||
|
|
||
| ### `unhover(element)` | ||
|
|
||
| Unhovers out of `element`. | ||
|
|
||
| > See [above](#hoverelement) for an example | ||
|
|
||
| ### `paste(element, text, eventInit, options)` | ||
|
|
||
| Allows you to simulate the user pasting some text into an input. | ||
|
|
||
| ```javascript | ||
| test('should paste text in input', () => { | ||
| render(<MyInput />) | ||
|
|
||
| const text = 'Hello, world!' | ||
| const element = getByRole('textbox', {name: /paste your greeting/i}) | ||
| userEvent.paste(element, text) | ||
| expect(element).toHaveValue(text) | ||
| }) | ||
| ``` | ||
|
|
||
| You can use the `eventInit` if what you're pasting should have `clipboardData` | ||
| (like `files`). | ||
|
|
||
| ### `specialChars` | ||
|
|
||
| A handful set of special characters used in [type](#typeelement-text-options) | ||
| method. | ||
|
|
||
| | Key | Character | | ||
| | ---------- | -------------- | | ||
| | arrowLeft | `{arrowleft}` | | ||
| | arrowRight | `{arrowright}` | | ||
| | arrowDown | `{arrowdown}` | | ||
| | arrowUp | `{arrowup}` | | ||
| | home | `{home}` | | ||
| | end | `{end}` | | ||
| | enter | `{enter}` | | ||
| | escape | `{esc}` | | ||
| | delete | `{del}` | | ||
| | backspace | `{backspace}` | | ||
| | selectAll | `{selectall}` | | ||
| | space | `{space}` | | ||
| | whitespace | `' '` | | ||
|
|
||
| Usage example: | ||
|
|
||
| ```jsx | ||
| import React from 'react' | ||
| import {render, screen} from '@testing-library/react' | ||
| import userEvent, {specialChars} from '@testing-library/user-event' | ||
|
|
||
| test('delete characters within the selectedRange', () => { | ||
| render( | ||
| <div> | ||
| <label htmlFor="my-input">Example:</label> | ||
| <input id="my-input" type="text" value="This is a bad example" /> | ||
| </div>, | ||
| ) | ||
| const input = screen.getByLabelText(/example/i) | ||
| input.setSelectionRange(10, 13) | ||
| userEvent.type(input, `${specialChars.backspace}good`) | ||
|
|
||
| expect(input).toHaveValue('This is a good example') | ||
| }) | ||
| ``` | ||
| [**Read The Docs**](https://testing-library.com/docs/ecosystem-user-event) | | ||
| [Edit the docs](https://github.com/testing-library/testing-library-docs) | ||
|
|
There was a problem hiding this comment.
I think we can drop this section as the link to the docs is already present above and easy to find.
There was a problem hiding this comment.
This is also similar to the DOM Testing Library readme, though the link is formatted differently. Personally I don't think there's harm in having it an extra time since it's short and users may be scrolling to this point to try to find the old API section. If we just removed this it may be confusing.
|
🎉 This PR is included in version 13.2.1 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
testing-library/testing-library-docs#519
Checklist: