Skip to content

Async state updating #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 11, 2017
Merged

Async state updating #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/FieldArray.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ export default class FieldArray extends React.PureComponent<Props, State> {
validate = (value: ?any, allValues: Object) =>
this.props.validate && this.props.validate(value, allValues)

notify = (state: FieldState) => this.setState({ state })
notify = (state: FieldState) => {
setTimeout(() => this.setState({ state }))
}

forEach = (iterator: (name: string, index: number) => void): void => {
const { name } = this.props
Expand Down
19 changes: 13 additions & 6 deletions src/FieldArray.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import arrayMutators from 'final-form-arrays'
import FieldArray from './FieldArray'

const onSubmitMock = values => {}
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

describe('FieldArray', () => {
it('should warn error if not used inside a form', () => {
Expand Down Expand Up @@ -42,7 +43,7 @@ describe('FieldArray', () => {
expect(MyComp).toHaveBeenCalledTimes(1)
})

it('should resubscribe if name changes', () => {
it('should resubscribe if name changes', async () => {
const renderArray = jest.fn(() => <div />)
class Container extends React.Component {
state = { name: 'dogs' }
Expand Down Expand Up @@ -77,9 +78,10 @@ describe('FieldArray', () => {

const button = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
TestUtils.Simulate.click(button)
await sleep(2)

expect(renderArray).toHaveBeenCalledTimes(2)
expect(renderArray.mock.calls[1][0].value).toEqual(['Garfield'])
expect(renderArray).toHaveBeenCalledTimes(4)
expect(renderArray.mock.calls[3][0].value).toEqual(['Garfield'])
})

it('should not resubscribe if name changes when not inside a <Form> (duh)', () => {
Expand Down Expand Up @@ -189,7 +191,7 @@ describe('FieldArray', () => {
TestUtils.Simulate.click(button)
})

it('should allow field-level validation', () => {
it('should allow field-level validation', async () => {
const renderArray = jest.fn(() => <div />)
const render = jest.fn(() => (
<form>
Expand Down Expand Up @@ -219,6 +221,7 @@ describe('FieldArray', () => {
expect(typeof renderArray.mock.calls[0][0].fields.push).toBe('function')

renderArray.mock.calls[0][0].fields.push('c')
await sleep(2)

expect(renderArray).toHaveBeenCalledTimes(3)
expect(renderArray.mock.calls[2][0].meta.valid).toBe(false)
Expand Down Expand Up @@ -289,7 +292,7 @@ describe('FieldArray', () => {
expect(result).toEqual(['FOO[0]', 'FOO[1]', 'FOO[2]'])
})

it('should allow Fields to be rendered', () => {
it('should allow Field components to be rendered', async () => {
const renderInput = jest.fn(({ input }) => <input {...input} />)
const dom = TestUtils.renderIntoDocument(
<Form
Expand Down Expand Up @@ -318,6 +321,7 @@ describe('FieldArray', () => {
const button = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
TestUtils.Simulate.click(button)

await sleep(2)
expect(renderInput).toHaveBeenCalled()
expect(renderInput).toHaveBeenCalledTimes(1)
expect(renderInput.mock.calls[0][0].input.name).toBe('foo[0]')
Expand All @@ -329,14 +333,15 @@ describe('FieldArray', () => {
expect(renderInput.mock.calls[1][0].input.value).toBe('dog')

TestUtils.Simulate.click(button)
await sleep(2)

// notice it doesn't NEED to be called for foo[0] because that field hasn't changed!
expect(renderInput).toHaveBeenCalledTimes(3)
expect(renderInput.mock.calls[2][0].input.name).toBe('foo[1]')
expect(renderInput.mock.calls[2][0].input.value).toBe('')
})

it('should allow Fields to be rendered for complex objects', () => {
it('should allow Fields to be rendered for complex objects', async () => {
const renderFirstNameInput = jest.fn(({ input }) => <input {...input} />)
const renderLastNameInput = jest.fn(({ input }) => <input {...input} />)
const dom = TestUtils.renderIntoDocument(
Expand Down Expand Up @@ -375,6 +380,7 @@ describe('FieldArray', () => {

const button = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
TestUtils.Simulate.click(button)
await sleep(2)

expect(renderFirstNameInput).toHaveBeenCalled()
expect(renderFirstNameInput).toHaveBeenCalledTimes(1)
Expand All @@ -399,6 +405,7 @@ describe('FieldArray', () => {
expect(renderLastNameInput).toHaveBeenCalledTimes(1)

TestUtils.Simulate.click(button)
await sleep(2)

// notice it doesn't NEED to be called for foo[0] because that field hasn't changed!
expect(renderFirstNameInput).toHaveBeenCalledTimes(3)
Expand Down