From 97150ec783feb675be028a787c3c80b5af2cb03e Mon Sep 17 00:00:00 2001 From: Ritik Rawat Date: Thu, 8 Oct 2020 22:58:00 +0530 Subject: [PATCH 001/631] migrate example-input-event recipe to use hooks (#639) #589 issue - [x] Input Event --- docs/example-input-event.md | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/docs/example-input-event.md b/docs/example-input-event.md index 9be077656..4b26e46ed 100644 --- a/docs/example-input-event.md +++ b/docs/example-input-event.md @@ -11,33 +11,30 @@ sidebar_label: Input Event > [`user-event`](ecosystem-user-event.md) ```jsx -import React from 'react' +import React, {useState} from 'react' import { render, fireEvent } from '@testing-library/react' -class CostInput extends React.Component { - state = { - value: '', - } +function CostInput() { + const [value, setValue] = useState('') removeDollarSign = value => (value[0] === '$' ? value.slice(1) : value) getReturnValue = value => (value === '' ? '' : `$${value}`) + handleChange = ev => { ev.preventDefault() const inputtedValue = ev.currentTarget.value - const noDollarSign = this.removeDollarSign(inputtedValue) + const noDollarSign = removeDollarSign(inputtedValue) if (isNaN(noDollarSign)) return - this.setState({ value: this.getReturnValue(noDollarSign) }) + setValue(getReturnValue(noDollarSign)) } - render() { return ( ) - } } const setup = () => { From a78a93e9015b64ab9b4a18fe7dd1b053ced89526 Mon Sep 17 00:00:00 2001 From: Luis Takahashi Date: Sat, 10 Oct 2020 18:33:08 -0300 Subject: [PATCH 002/631] Added basic formik recipe example --- docs/example-formik.md | 79 ++++++++++++++++++++++++++++++++++++++++++ website/sidebars.json | 1 + 2 files changed, 80 insertions(+) create mode 100644 docs/example-formik.md diff --git a/docs/example-formik.md b/docs/example-formik.md new file mode 100644 index 000000000..537a234b8 --- /dev/null +++ b/docs/example-formik.md @@ -0,0 +1,79 @@ +--- +id: example-react-formik +title: Formik +---Example based in this +[Async Submission Formik example](https://formik.org/docs/examples/async-submission) + +```jsx +// myForm.js +import React from 'react' +import { Formik, Field, Form } from 'formik' + +const sleep = ms => new Promise(r => setTimeout(r, ms)) + +export const MyForm = ({ onSubmit }) => { + const handleSubmit = async values => { + await sleep(500) + onSubmit(values) + } + + return ( +
+

Sign Up

+ +
+ + + + + + + + + + +
+
+ ) +} +``` + +```jsx +// myForm.test.js +import React from 'react' +import { render, screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' + +import { MyForm } from './myForm.js' + +test('rendering and submiting a basic Formik form', async () => { + const mockedOnSubmit = jest.fn() + render() + + userEvent.type(screen.getByLabelText(/first name/i), 'Jhon') + userEvent.type(screen.getByLabelText(/last name/i), 'Dee') + userEvent.type(screen.getByLabelText(/email/i), 'jhon.dee@someemail.com') + + userEvent.click(screen.getByRole('button', { name: /submit/i })) + + await waitFor(() => + expect(mockedOnSubmit).toHaveBeenCalledWith({ + email: 'jhon.dee@someemail.com', + firstName: 'Jhon', + lastName: 'Dee', + }) + ) +}) +``` diff --git a/website/sidebars.json b/website/sidebars.json index 93240c586..57f97c5c4 100755 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -133,6 +133,7 @@ "example-findByText", "example-input-event", "example-react-context", + "example-react-formik", "example-react-hooks-useReducer", "example-react-intl", "example-react-redux", From 7dbdbf42f096b5a5db0a6dd696f77b0e01b22ead Mon Sep 17 00:00:00 2001 From: Luis Takahashi Date: Sat, 10 Oct 2020 18:35:41 -0300 Subject: [PATCH 003/631] Typo fix --- docs/example-formik.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/example-formik.md b/docs/example-formik.md index 537a234b8..ceee6f080 100644 --- a/docs/example-formik.md +++ b/docs/example-formik.md @@ -1,7 +1,9 @@ --- id: example-react-formik title: Formik ----Example based in this +--- + +Example based in this [Async Submission Formik example](https://formik.org/docs/examples/async-submission) ```jsx From 875de093f681cbc9c5d0e7d08d150fa7b76b5b89 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Mon, 12 Oct 2020 14:15:00 -0600 Subject: [PATCH 004/631] Update ecosystem-user-event.md --- docs/ecosystem-user-event.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ecosystem-user-event.md b/docs/ecosystem-user-event.md index c65f63be4..acf638d7d 100644 --- a/docs/ecosystem-user-event.md +++ b/docs/ecosystem-user-event.md @@ -15,10 +15,10 @@ npm install --save-dev @testing-library/user-event import { screen } from '@testing-library/dom' import userEvent from '@testing-library/user-event' -test('types inside textarea', async () => { +test('types inside textarea', () => { document.body.innerHTML = ` - -``` - -```js -const inputNode = screen.getByLabelText('Username', { selector: 'input' }) -``` - -> **Note** -> -> `getByLabelText` will not work in the case where a `for` attribute on a -> `