react-forms/packages/react-form-renderer/src/tests/form-renderer/field-spy.test.js at 76195bfd8032147221156e8495e2bd5adaaa00cf · data-driven-forms/react-forms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import FormTemplate from '../../../../../__mocks__/mock-form-template';
import componentTypes from '../../component-types';
import useFieldApi from '../../use-field-api';
import FormRenderer from '../../form-renderer';

import FieldSpy from '../../field-spy';

const TextField = (props) => {
  const { input, placeholder } = useFieldApi(props);
  return <input aria-label={input.name} placeholder={placeholder} {...input} />;
};

describe('field-spy test', () => {
  let initialProps;

  beforeEach(() => {
    initialProps = {
      FormTemplate,
      componentMapper: {
        [componentTypes.TEXT_FIELD]: TextField,
      },
      onSubmit: () => {},
    };
  });

  it('should re-render child on eligible field change', async () => {
    const onChangeFn = jest.fn();
    const schema = {
      fields: [
        {
          component: componentTypes.TEXT_FIELD,
          name: 'field-1',
        },
        {
          component: componentTypes.TEXT_FIELD,
          name: 'field-2',
        },
        {
          component: 'listener',
          name: 'listener',
        },
      ],
    };

    render(
      <FormRenderer
        {...initialProps}
        schema={schema}
        componentMapper={{
          ...initialProps.componentMapper,
          listener: () => (
            <FieldSpy fields={['field-1']}>
              {() => {
                onChangeFn();
                return <></>;
              }}
            </FieldSpy>
          ),
        }}
      />
    );
    expect(onChangeFn).toBeCalledTimes(1);
    await userEvent.type(screen.getByLabelText('field-1'), 's');
    expect(onChangeFn).toBeCalledTimes(2);
  });

  it('should not re-render child on ineligible field change', async () => {
    const onChangeFn = jest.fn();
    const schema = {
      fields: [
        {
          component: componentTypes.TEXT_FIELD,
          name: 'field-1',
        },
        {
          component: componentTypes.TEXT_FIELD,
          name: 'field-2',
        },
        {
          component: 'listener',
          name: 'listener',
        },
      ],
    };

    render(
      <FormRenderer
        {...initialProps}
        schema={schema}
        componentMapper={{
          ...initialProps.componentMapper,
          listener: () => (
            <FieldSpy fields={['field-2']}>
              {() => {
                onChangeFn();
                return <></>;
              }}
            </FieldSpy>
          ),
        }}
      />
    );
    expect(onChangeFn).toBeCalledTimes(1);
    await userEvent.type(screen.getByLabelText('field-1'), 's');
    expect(onChangeFn).toBeCalledTimes(1);
  });
});