Skip to content

Commit

Permalink
test: add cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@qiqiboy
qiqiboy committed Mar 26, 2020
1 parent d8ed897 commit f061697
Show file tree
Hide file tree
Showing 4 changed files with 201 additions and 48 deletions.
78 changes: 51 additions & 27 deletions tests/Field.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
import React from 'react';
import { fireEvent, waitFor } from '@testing-library/react';
import { fireEvent, waitFor, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Field } from '../src';
import { renderForm, renderField } from './helper';

describe('name', () => {
test('mount name "a"', () => {
const nativeConsoleError = console.error;

beforeEach(() => {
console.error = jest.fn();
});

afterEach(() => {
console.error = nativeConsoleError;
});

test('should register form value with name "a"', () => {
const { getFormutil } = renderForm(<Field name="a" children={null} />);
const $formutil = getFormutil();

expect($formutil.$$registers.a).toBeTruthy();
});

test('unmount name "a"', async () => {
test('should unregister form value with name "a"', async () => {
const { getFormutil, rerender } = renderForm(<Field name="a" children={null} />);

rerender(null);
Expand All @@ -22,18 +32,34 @@ describe('name', () => {
expect($formutil.$$deepRegisters.a).toBeUndefined();
});

test('mount name "a.b[1].c[2].d"', () => {
test('should register form value with nested-path name "a.b[1].c[2].d"', () => {
const { getFormutil } = renderForm(<Field name="a.b[1].c[2].d" children={null} />);
const $formutil = getFormutil();

// @ts-ignore
expect($formutil.$$deepRegisters.a.b[1].c[2].d).toBeTruthy();
expect($formutil.$params.a.b[1].c[2].d).toBe('');
});

test('should show wanrings when missing name ', () => {
renderForm(<Field children={null} />);

expect(console.error).toHaveBeenLastCalledWith(
'Warning: You should assign a name to <Field />, otherwise it will be isolated!'
);
});

test('should show wanrings if not underneath a Form ', () => {
render(<Field name="a" children={null} />);

expect(console.error).toHaveBeenLastCalledWith(
"Warning: You should enusre that the <Field /> with the name 'a' must be used underneath a <Form /> component or withForm() HOC, otherwise it's isolated."
);
});
});

describe('$defaultValue', () => {
test('as variable', () => {
test('should set initial value', () => {
const { getFieldutil } = renderField({
name: 'a',
$defaultValue: 'a'
Expand All @@ -42,7 +68,7 @@ describe('$defaultValue', () => {
expect(getFieldutil().$value).toBe('a');
});

test('as function', () => {
test('should set initial value that equal function returns', () => {
const { getFieldutil } = renderField({
name: 'a',
$defaultValue() {
Expand All @@ -60,7 +86,7 @@ describe('$defaultState', () => {
$touched: true
};

test('as object', () => {
test('should set initial state by a object', () => {
const { getFieldutil } = renderField({
name: 'a',
$defaultState: initializedState
Expand All @@ -69,7 +95,7 @@ describe('$defaultState', () => {
expect(getFieldutil().$getState()).toMatchObject(initializedState);
});

test('as function', () => {
test('should set initial state by function returns', () => {
const { getFieldutil } = renderField({
name: 'a',
$defaultState() {
Expand All @@ -87,11 +113,11 @@ describe('$validators', () => {
async: jest.fn()
};
const $validators = {
syncValidate: value => {
syncValidate: (value) => {
spyValidators.sync();
return !!value || 'sync-validate!';
},
asyncValidate: jest.fn(value => {
asyncValidate: jest.fn((value) => {
return new Promise((resolve, reject) =>
setTimeout(() => {
spyValidators.async();
Expand All @@ -101,7 +127,7 @@ describe('$validators', () => {
})
};

test('sync&async validate', async () => {
test("should be called and validate field's error", async () => {
const { getFieldutil, rerender } = renderField({
name: 'a',
$validators,
Expand Down Expand Up @@ -146,10 +172,10 @@ describe('$validators', () => {

describe('$validateLazy', () => {
const $validators = {
syncValidate: jest.fn(value => {
syncValidate: jest.fn((value) => {
return !!value || 'sync-validate!';
}),
asyncValidate: jest.fn(value => {
asyncValidate: jest.fn((value) => {
return new Promise((resolve, reject) =>
setTimeout(() => {
reject(new Error('async-validate!'));
Expand All @@ -158,7 +184,7 @@ describe('$validateLazy', () => {
})
};

test('stop when get the first error', async () => {
test('should cancel the rest validators calls when get the first error', async () => {
const { getFieldutil, rerender } = renderField({
name: 'a',
$validators,
Expand All @@ -183,7 +209,7 @@ describe('$validateLazy', () => {
});

describe('$reserveOnUnmount', () => {
test('keep value even Field unmount', async () => {
test('should keep value in form when Field removed', async () => {
const { getFormutil, rerender } = renderForm(<Field name="a" children={null} />);

expect(getFormutil().$params).toHaveProperty('a');
Expand All @@ -200,7 +226,7 @@ describe('$reserveOnUnmount', () => {
});

describe('$parser & $formatter', () => {
test('transform $viewValue <-> $value', async () => {
test('should transform $viewValue <-> $value', async () => {
const { getFieldutil, getElement, rerender } = renderField({
name: 'a',
$defaultValue: '0',
Expand Down Expand Up @@ -241,17 +267,17 @@ describe('$parser & $formatter', () => {
});

describe('$ref', () => {
test('as function', async () => {
test('should pass $fieldutil as argument to function', async () => {
let $ref;
const { getFieldutil } = renderField({
name: 'a',
$ref: ref => ($ref = ref)
$ref: (ref) => ($ref = ref)
});

expect($ref).toBe(getFieldutil());
});

test('as createRef()', async () => {
test('should setin $fieldutil to createRef()', async () => {
let $ref = React.createRef<any>();
const { getFieldutil } = renderField({
name: 'a',
Expand All @@ -263,7 +289,7 @@ describe('$ref', () => {
});

describe('$memo', () => {
test("should not rerender if props deep equal", async () => {
test('should not rerender if props deep equal', async () => {
const renderA = jest.fn();
const renderB = jest.fn();
const getFormContent = () => (
Expand Down Expand Up @@ -301,7 +327,7 @@ describe('$memo', () => {
getFormutil().$setValues({
a: 1,
b: 1
})
});
expect(renderA).toBeCalledTimes(2);
expect(renderB).toBeCalledTimes(2);
});
Expand Down Expand Up @@ -346,7 +372,7 @@ describe('$memo', () => {
expect(renderB).toBeCalledTimes(1);
});

test("$memo=[...deps] should rerender if deps changed", async () => {
test('$memo=[...deps] should rerender if deps changed', async () => {
const renderA = jest.fn();
const renderB = jest.fn();
const getFormContent = (...deps) => (
Expand Down Expand Up @@ -542,7 +568,7 @@ describe('$fieldutil', () => {
$focused: '$setFocused'
};

Object.keys(stateMap).forEach(key => {
Object.keys(stateMap).forEach((key) => {
const method = stateMap[key];

test(method + '()', async () => {
Expand All @@ -552,9 +578,7 @@ describe('$fieldutil', () => {
name: 'a'
});

await getFieldutil()
[method](true, callback)
.then(callback);
await getFieldutil()[method](true, callback).then(callback);

expect(getFieldutil()[key]).toBe(true);
expect(callback).toBeCalledTimes(2);
Expand All @@ -563,7 +587,7 @@ describe('$fieldutil', () => {
});

test('$validate() / $onValidate()', async () => {
const callback = jest.fn(v => !!v);
const callback = jest.fn((v) => !!v);

const { getFieldutil } = renderField({
name: 'b',
Expand Down
33 changes: 12 additions & 21 deletions tests/Form.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,8 @@ import { waitFor } from '@testing-library/react';
import { Field } from '../src';
import { renderForm } from './helper';

const nativeConsoleLog = console.log;
const spyConsoleLog = jest.fn((...args) => nativeConsoleLog(...args));

beforeAll(() => (console.log = spyConsoleLog));
afterAll(() => (console.log = nativeConsoleLog));
beforeEach(() => {
spyConsoleLog.mockClear();
});

describe('$defaultValues', () => {
test('as shallow object', () => {
test('should set form initial values from a shallow object', () => {
const { getFormutil } = renderForm(
<>
<Field name="a" children={null} />
Expand All @@ -33,7 +24,7 @@ describe('$defaultValues', () => {
});
});

test('as nested object', () => {
test('should set form initial values from a nested object', () => {
const { getFormutil } = renderForm(
<>
<Field name="a.b" children={null} />
Expand All @@ -57,7 +48,7 @@ describe('$defaultValues', () => {
});
});

test('as function', () => {
test('should set form initial values from a function', () => {
const { getFormutil } = renderForm(
<>
<Field name="a" children={null} />
Expand All @@ -79,7 +70,7 @@ describe('$defaultValues', () => {
});

describe('$defaultStates', () => {
test('as shallow object', () => {
test('should set form initial states from a shallow object', () => {
const { getFormutil } = renderForm(
<>
<Field name="a" children={null} />
Expand Down Expand Up @@ -109,7 +100,7 @@ describe('$defaultStates', () => {
});
});

test('as nested object', () => {
test('should set form initial states from a nested object', () => {
const { getFormutil } = renderForm<
{
a: {
Expand Down Expand Up @@ -156,7 +147,7 @@ describe('$defaultStates', () => {
});
});

test('as function', () => {
test('should set form initial states from a function', () => {
const { getFormutil } = renderForm(
<>
<Field name="a" children={null} />
Expand Down Expand Up @@ -188,7 +179,7 @@ describe('$defaultStates', () => {
});

describe('$processer', () => {
test('called', async () => {
test('should be called and modify form values when exists', async () => {
const $processerSpy = jest.fn(($state, name) => {
if (name === 'a.b') {
$state.$value = 10;
Expand Down Expand Up @@ -224,8 +215,8 @@ describe('$processer', () => {
});

describe('$ref', () => {
test('pass createRef()', async () => {
let formutilRef = React.createRef(null);
test('should setin $formutil to createRef()', async () => {
let formutilRef = React.createRef<any>();
const { getFormutil } = renderForm(
<>
<Field name="a" $defaultValue={1} children={null} />
Expand All @@ -238,7 +229,7 @@ describe('$ref', () => {
expect(formutilRef.current).toBe(getFormutil());
});

test('pass function', async () => {
test('should pass $formutil as the argument to function', async () => {
let refSpy = jest.fn();
const { getFormutil } = renderForm(
<>
Expand All @@ -255,7 +246,7 @@ describe('$ref', () => {
});

describe('$validator', () => {
test('called', async () => {
test('should be called and validate form values\'s errors', async () => {
const $validatorSpy = jest.fn(params => {
if (!params.a?.b) {
return {
Expand Down Expand Up @@ -302,7 +293,7 @@ describe('$validator', () => {
});

describe('$onFormChange', () => {
test('called', async () => {
test('should be called when field value changed', async () => {
let changeSpy = jest.fn();
const { getFormutil } = renderForm(
<>
Expand Down
Loading

0 comments on commit f061697

Please sign in to comment.