Merge pull request #364 from ZirkleTsing/v1

test(@uform/react-schema-renderer): add old test case

package.json

@@ -51,6 +51,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@babel/runtime-corejs3": "^7.2.0",
+    "@testing-library/jest-dom": "^4.2.3",
     "@testing-library/react": "^8.0.0",
     "@types/jest": "^24.0.18",
     "@types/node": "^12.6.8",

packages/react-schema-renderer/src/__tests__/actions.spec.tsx

@@ -0,0 +1,77 @@
+import React, { Fragment } from 'react'
+import {
+  registerFormField,
+  connect,
+  SchemaMarkupForm as SchemaForm,
+  SchemaMarkupField as Field,
+  createFormActions
+} from '../index'
+
+import { render, wait } from '@testing-library/react'
+
+beforeEach(() => {
+  registerFormField('string', connect()(props => <input {...props} value={props.value || ''} />))
+})
+
+test('createFormActions', async () => {
+  const actions = createFormActions()
+  const TestComponent = () => (
+    <SchemaForm
+      actions={actions}
+      effects={($, { setFieldState }) => {
+        $('onFormInit').subscribe(() => {
+          setFieldState('aaa', state => {
+            state.value = 'change value of aaa field onFormInit'
+          })
+        })
+      }}
+    >
+      <Fragment>
+        <Field
+          name="aaa"
+          type="string"
+          x-props={{
+            'data-testid': 'inputA'
+          }}
+        />
+        <Field
+          name="bbb"
+          type="string"
+          x-props={{
+            'data-testid': 'inputB'
+          }}
+        />
+      </Fragment>
+    </SchemaForm>
+  )
+
+  const { queryByTestId } = render(<TestComponent />)
+  expect(queryByTestId('inputA').getAttribute('value')).toEqual('change value of aaa field onFormInit')
+  await actions.setFormState(state => (state.values = { aaa: 123 }))
+  await wait(() => {
+    expect(queryByTestId('inputA').getAttribute('value')).toEqual('123')
+  })
+  await actions.setFieldState('aaa', state => (state.value = 'hello world'))
+  await wait(() => {
+    expect(queryByTestId('inputA').getAttribute('value')).toEqual('hello world')
+  })
+  const VALUE_A = 'value of aaa field'
+  const VALUE_B = 'value of bbb field'
+  const schemaData = [
+    { name: 'aaa', value: VALUE_A },
+    { name: 'bbb', value: VALUE_B }
+  ]
+  const updateQueue = []
+  schemaData.forEach(({ name, value }) => {
+    updateQueue.push(
+      actions.setFieldState(name, state => {
+        state.value = value
+      })
+    )
+  })
+  await Promise.all(updateQueue)
+  await wait(() => {
+    expect(queryByTestId('inputA').getAttribute('value')).toEqual(VALUE_A)
+    expect(queryByTestId('inputB').getAttribute('value')).toEqual(VALUE_B)
+  })
+})

packages/react-schema-renderer/src/__tests__/context.spec.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+  registerFormField,
+  connect,
+  SchemaMarkupForm as SchemaForm,
+  SchemaMarkupField as Field,
+  createFormActions,
+  FormProvider,
+  FormConsumer,
+} from '../index'
+import { render, fireEvent, act, wait } from '@testing-library/react'
+
+const sleep = async (timeout) => {
+  const noop = () => {}
+  await wait(noop, timeout)
+}
+
+beforeEach(() => {
+  registerFormField(
+    'string',
+    connect()(props => <input {...props} value={props.value || ''} />)
+  )
+})
+
+test('submit by form consumer', async () => {
+  const actions = createFormActions()
+  const TestComponent = () => (
+    <FormProvider>
+      <SchemaForm
+        actions={actions}
+        onSubmit={async () => {
+          await sleep(200)
+        }}
+      >
+        <Field name="aaa" type="string" />
+      </SchemaForm>
+      <FormConsumer>
+        {({ submit, status }) => {
+          if (status === 'submitting') {
+            return <div>Submitting</div>
+          } else {
+            return <button onClick={() => submit()}>Submit</button>
+          }
+        }}
+      </FormConsumer>
+    </FormProvider>
+  )
+
+  const { queryByText } = render(<TestComponent />)
+  act(() => {
+    fireEvent.click(queryByText('Submit'))
+  })
+  // await sleep(30)
+  // expect(queryByText('Submitting')).toBeVisible()
+  // await sleep(300)
+  // expect(queryByText('Submitting')).toBeNull()
+  // expect(queryByText('Submit')).not.toBeUndefined()
+})

packages/react-schema-renderer/src/__tests__/destruct.spec.tsx

@@ -0,0 +1,66 @@
+import React, { Fragment } from 'react'
+import {
+  connect,
+  registerFormField,
+  SchemaMarkupForm as SchemaForm,
+  SchemaMarkupField as Field
+} from '../index'
+import { toArr } from '@uform/shared'
+import { render, wait } from '@testing-library/react'
+
+beforeEach(() => {
+  registerFormField(
+    'string',
+    connect()(props => <input {...props} value={(props.value || []).join('')} />)
+  )
+
+  registerFormField('array', props => {
+    const { value, renderField } = props
+    return (
+      <Fragment>
+        {toArr(value).map((item, index) => {
+          return (
+            <div data-testid="item" key={index}>
+              {renderField(index)}
+            </div>
+          )
+        })}
+      </Fragment>
+    )
+  })
+})
+
+test('destruct with initial values', async () => {
+  const TestComponent = () => {
+    return (
+      <SchemaForm initialValues={{ aa: 123, bb: 321 }}>
+        <Field type="string" name="[aa,bb]" />
+      </SchemaForm>
+    )
+  }
+
+  const { queryByText } = render(<TestComponent />)
+  wait(() => {
+    expect(queryByText('123321')).toBeNull()
+  })
+})
+
+test('destruct with initial values in array', async () => {
+  const TestComponent = () => {
+    return (
+      <SchemaForm initialValues={{ array: [{ aa: 123, bb: 321 }] }}>
+        <Field type="array" name="array">
+          <Field type="object">
+            <Field type="string" name="[aa,bb]" />
+          </Field>
+        </Field>
+      </SchemaForm>
+    )
+  }
+
+  const { queryByText } = render(<TestComponent />)
+
+  await wait(() => {
+    expect(queryByText('123321')).toBeNull()
+  })
+})

packages/react-schema-renderer/src/__tests__/display.spec.tsx

@@ -0,0 +1,149 @@
+import React, { Fragment } from 'react'
+import {
+  registerFormField,
+  connect,
+  SchemaMarkupForm as SchemaForm,
+  SchemaMarkupField as Field
+} from '../index'
+import { render, fireEvent, wait } from '@testing-library/react'
+
+beforeEach(() => {
+  registerFormField('string', connect()(props => <div>{props.value}</div>))
+})
+
+test('display is false will remove react node', async () => {
+  const TestComponent = () => {
+    return (
+      <SchemaForm
+        effects={($, { setFieldState }) => {
+          $('onFormInit').subscribe(() => {
+            setFieldState('aa', state => {
+              state.display = false
+            })
+          })
+        }}
+      >
+        <Field type="string" name="aa" default="123321" />
+      </SchemaForm>
+    )
+  }
+
+  const { queryByText } = render(<TestComponent />)
+  await wait(() => {
+    expect(queryByText('123321')).toBeNull()
+  })
+})
+
+test('display is false will remove react children node', async () => {
+  const TestComponent = () => {
+    return (
+      <SchemaForm
+        effects={($, { setFieldState }) => {
+          $('onFormInit').subscribe(() => {
+            setFieldState('obj', state => {
+              state.display = false
+            })
+          })
+        }}
+      >
+        <Field type="object" name="obj">
+          <Field type="string" name="aa" default="123321" />
+        </Field>
+      </SchemaForm>
+    )
+  }
+
+  const { queryByText } = render(<TestComponent />)
+  wait(() => {
+    expect(queryByText('123321')).toBeNull()
+  })
+})
+
+test('display is false will not remove value(include default value)', async () => {
+  const onSubmitHandler = jest.fn()
+  const TestComponent = () => {
+    return (
+      <SchemaForm
+        initialValues={{ obj: { aa: '123321' } }}
+        onSubmit={onSubmitHandler}
+        effects={($, { setFieldState }) => {
+          $('onFieldChange', 'bb').subscribe(({ value }) => {
+            if (value === '123') {
+              setFieldState('obj', state => {
+                state.display = false
+              })
+            }
+          })
+        }}
+      >
+        <Fragment>
+          <Field type="object" name="obj">
+            <Field type="string" name="aa" />
+          </Field>
+          <Field type="string" name="bb" default="123" />
+          <button type="submit">Submit</button>
+        </Fragment>
+      </SchemaForm>
+    )
+  }
+
+  const { queryByText } = render(<TestComponent />)
+
+  await wait(() => {
+    expect(queryByText('123321')).toBeNull()
+  })
+  fireEvent.click(queryByText('Submit'))
+  await wait(() => {
+    expect(onSubmitHandler).toHaveBeenCalledWith({
+      obj: { aa: '123321' },
+      bb: '123'
+    })
+  })
+})
+
+test('display is false will not validate(include children)', async () => {
+  const onSubmitHandler = jest.fn()
+  const onValidateFailedHandler = jest.fn()
+  const TestComponent = () => {
+    return (
+      <SchemaForm
+        initialValues={{ obj: { aa: '123321' } }}
+        onSubmit={onSubmitHandler}
+        onValidateFailed={onValidateFailedHandler}
+        effects={($, { setFieldState }) => {
+          $('onFieldChange', 'bb').subscribe(({ value }) => {
+            if (value === '123') {
+              setFieldState('obj', state => {
+                state.display = false
+              })
+            }
+          })
+        }}
+      >
+        <Fragment>
+          <Field type="object" name="obj">
+            <Field type="string" name="aa" required />
+          </Field>
+          <Field type="string" name="bb" default="123" />
+          <button type="submit">Submit</button>
+        </Fragment>
+      </SchemaForm>
+    )
+  }
+
+  const { queryByText } = render(<TestComponent />)
+
+  await wait(() => {
+    expect(queryByText('123321')).toBeNull()
+  })
+  fireEvent.click(queryByText('Submit'))
+  await wait(() => {
+    expect(onSubmitHandler).toHaveBeenCalledWith({
+      obj: { aa: '123321' },
+      bb: '123'
+    })
+    expect(onValidateFailedHandler).toHaveBeenCalledTimes(0)
+  })
+})
+
+// display 有问题