WIP: Formatic 3000

__tests__/future/AutoFields.js

@@ -0,0 +1,131 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+import { useField } from '@/src/future';
+import { ExampleForm, defaultValue } from '@/demo/future/AutoFields';
+
+afterEach(cleanup);
+
+describe('AutoFields', () => {
+  test('renders fields from defaultValues', () => {
+    const onChangeSpy = jest.fn();
+    const { getByLabelText } = render(
+      <ExampleForm defaultValue={defaultValue} onChange={onChangeSpy} />
+    );
+    fireEvent.change(getByLabelText('First Name'), {
+      target: { value: 'Joe' },
+    });
+    expect(onChangeSpy).toHaveBeenLastCalledWith({
+      firstName: 'Joe',
+      lastName: '',
+      age: 0,
+    });
+    fireEvent.change(getByLabelText('Last Name'), {
+      target: { value: 'Foo' },
+    });
+    expect(onChangeSpy).toHaveBeenLastCalledWith({
+      firstName: 'Joe',
+      lastName: 'Foo',
+      age: 0,
+    });
+
+    fireEvent.change(getByLabelText('Age'), {
+      target: { value: 32 },
+    });
+    expect(onChangeSpy).toHaveBeenLastCalledWith({
+      firstName: 'Joe',
+      lastName: 'Foo',
+      age: 32,
+    });
+  });
+
+  test('renders fields from values', () => {
+    const onChangeSpy = jest.fn();
+    const { getByLabelText } = render(
+      <ExampleForm onChange={onChangeSpy} value={defaultValue} />
+    );
+    fireEvent.change(getByLabelText('First Name'), {
+      target: { value: 'Joe' },
+    });
+    expect(onChangeSpy).toHaveBeenLastCalledWith({
+      firstName: 'Joe',
+      lastName: '',
+      age: 0,
+    });
+    fireEvent.change(getByLabelText('Last Name'), {
+      target: { value: 'Foo' },
+    });
+    expect(onChangeSpy).toHaveBeenLastCalledWith({
+      firstName: 'Joe',
+      lastName: 'Foo',
+      age: 0,
+    });
+
+    fireEvent.change(getByLabelText('Age'), {
+      target: { value: 32 },
+    });
+    expect(onChangeSpy).toHaveBeenLastCalledWith({
+      firstName: 'Joe',
+      lastName: 'Foo',
+      age: 32,
+    });
+  });
+
+  test('component prop overrides default field components', () => {
+    function CustomTextField({ fieldKey, label }) {
+      const { value, onChangeTargetValue } = useField(fieldKey);
+      return (
+        <div>
+          <div>
+            <label htmlFor={fieldKey}>Custom {label}</label>
+          </div>
+          <div>
+            <input
+              id={fieldKey}
+              onChange={onChangeTargetValue}
+              type="text"
+              value={value}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    const onChangeSpy = jest.fn();
+    const components = { string: CustomTextField };
+    const { getByLabelText } = render(
+      <ExampleForm
+        components={components}
+        onChange={onChangeSpy}
+        value={defaultValue}
+      />
+    );
+
+    fireEvent.change(getByLabelText('Custom First Name'), {
+      target: { value: 'Joe' },
+    });
+    expect(onChangeSpy).toHaveBeenLastCalledWith({
+      firstName: 'Joe',
+      lastName: '',
+      age: 0,
+    });
+
+    fireEvent.change(getByLabelText('Custom Last Name'), {
+      target: { value: 'Foo' },
+    });
+    expect(onChangeSpy).toHaveBeenLastCalledWith({
+      firstName: 'Joe',
+      lastName: 'Foo',
+      age: 0,
+    });
+
+    fireEvent.change(getByLabelText('Age'), {
+      target: { value: 32 },
+    });
+    expect(onChangeSpy).toHaveBeenLastCalledWith({
+      firstName: 'Joe',
+      lastName: 'Foo',
+      age: 32,
+    });
+  });
+});

__tests__/future/AvoidRerendering.js

@@ -0,0 +1,81 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+
+import { FormContainer, AutoFields, TextField, useField } from '@/src/future';
+
+afterEach(cleanup);
+
+describe('avoid rerendering', () => {
+  const defaultValue = { firstName: '', lastName: '' };
+
+  test('should avoid unnecessary rerendering with uncontrolled container', async () => {
+    const renderSpy = jest.fn();
+    function FirstName() {
+      renderSpy('firstName');
+      const { value } = useField('firstName');
+      return <div>First Name: {value}</div>;
+    }
+    function LastName() {
+      renderSpy('lastName');
+      const { value } = useField('lastName');
+      return <div>First Name: {value}</div>;
+    }
+    const { getByLabelText } = render(
+      <FormContainer defaultValue={defaultValue}>
+        <FirstName />
+        <LastName />
+        <TextField fieldKey="firstName" id="firstName" label="First Name" />
+        <TextField fieldKey="lastName" id="lastName" label="Last Name" />
+      </FormContainer>
+    );
+    fireEvent.change(getByLabelText('First Name'), {
+      target: { value: 'Joe' },
+    });
+    expect(renderSpy.mock.calls).toEqual([
+      ['firstName'],
+      ['lastName'],
+      ['firstName'],
+    ]);
+  });
+
+  test('avoids unnecessary renders of AutoFields', () => {
+    function CustomTextField({ fieldKey, label }) {
+      const { value, onChangeTargetValue } = useField(fieldKey);
+      const randomId = Math.random();
+      return (
+        <>
+          <label htmlFor={randomId}>{label}</label>
+          <input
+            id={randomId}
+            onChange={onChangeTargetValue}
+            type="text"
+            value={value}
+          />
+        </>
+      );
+    }
+
+    const components = {
+      string: CustomTextField,
+    };
+
+    const { getByLabelText } = render(
+      <FormContainer defaultValue={defaultValue}>
+        <AutoFields components={components} />
+      </FormContainer>
+    );
+
+    const getInputId = id => getByLabelText(id).id;
+
+    const intitialLastNameId = getInputId('Last Name');
+    const initialFirstNameId = getInputId('First Name');
+
+    fireEvent.change(getByLabelText('First Name'), {
+      target: { value: 'Joe' },
+    });
+
+    expect(getInputId('First Name')).not.toBe(initialFirstNameId);
+    expect(getInputId('Last Name')).toBe(intitialLastNameId);
+  });
+});

__tests__/future/BuiltInField.js

@@ -0,0 +1,30 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+
+import { ExampleForm, defaultValue } from '@/demo/future/BuiltInField';
+
+afterEach(cleanup);
+
+describe('built-in field', () => {
+  test('should fire onChange correctly', () => {
+    const onChangeSpy = jest.fn();
+    const { getByLabelText } = render(
+      <ExampleForm defaultValue={defaultValue} onChange={onChangeSpy} />
+    );
+    fireEvent.change(getByLabelText('First Name'), {
+      target: { value: 'Joe' },
+    });
+    expect(onChangeSpy.mock.calls[0][0]).toEqual({
+      firstName: 'Joe',
+      lastName: '',
+    });
+    fireEvent.change(getByLabelText('Last Name'), {
+      target: { value: 'Foo' },
+    });
+    expect(onChangeSpy.mock.calls[1][0]).toEqual({
+      firstName: 'Joe',
+      lastName: 'Foo',
+    });
+  });
+});

__tests__/future/BuiltInFieldAutoInputId.js

@@ -0,0 +1,62 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+
+import { FormContainer, TextField } from '@/src/future';
+
+afterEach(cleanup);
+
+describe('built-in field with auto input ids', () => {
+  test('should have auto-generated input ids', () => {
+    const onChangeSpy = jest.fn();
+    const defaultValue = {
+      firstName: '',
+      lastName: '',
+    };
+
+    const renderForm = () => (
+      <FormContainer defaultValue={defaultValue} onChange={onChangeSpy}>
+        <div data-testid="firstNameWrapper">
+          <TextField fieldKey="firstName" label="First Name" />
+        </div>
+        <div data-testid="lastNameWrapper">
+          <TextField fieldKey="lastName" label="Last Name" />
+        </div>
+      </FormContainer>
+    );
+    const { getByTestId, rerender } = render(renderForm());
+
+    const firstNameInput = getByTestId('firstNameWrapper').querySelector(
+      'input'
+    );
+    const lastNameInput = getByTestId('lastNameWrapper').querySelector('input');
+
+    const firstNameId = firstNameInput.getAttribute('id');
+    const lastNameId = lastNameInput.getAttribute('id');
+
+    expect(firstNameId).toBeTruthy();
+    expect(lastNameId).toBeTruthy();
+    expect(firstNameId).not.toEqual(lastNameId);
+
+    fireEvent.change(firstNameInput, {
+      target: { value: 'Joe' },
+    });
+    expect(onChangeSpy.mock.calls[0][0]).toEqual({
+      firstName: 'Joe',
+      lastName: '',
+    });
+    fireEvent.change(lastNameInput, {
+      target: { value: 'Foo' },
+    });
+    expect(onChangeSpy.mock.calls[1][0]).toEqual({
+      firstName: 'Joe',
+      lastName: 'Foo',
+    });
+
+    rerender(renderForm());
+
+    // Ids should not change when rerendering.
+    expect(firstNameId).toEqual(firstNameInput.getAttribute('id'));
+    expect(lastNameId).toEqual(lastNameInput.getAttribute('id'));
+  });
+});

__tests__/future/BuiltInInput.js

@@ -0,0 +1,30 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+
+import { ExampleForm, defaultValue } from '@/demo/future/BuiltInInput';
+
+afterEach(cleanup);
+
+describe('built-in input', () => {
+  test('should fire onChange correctly', () => {
+    const onChangeSpy = jest.fn();
+    const { getByLabelText } = render(
+      <ExampleForm defaultValue={defaultValue} onChange={onChangeSpy} />
+    );
+    fireEvent.change(getByLabelText('First Name'), {
+      target: { value: 'Joe' },
+    });
+    expect(onChangeSpy.mock.calls[0][0]).toEqual({
+      firstName: 'Joe',
+      lastName: '',
+    });
+    fireEvent.change(getByLabelText('Last Name'), {
+      target: { value: 'Foo' },
+    });
+    expect(onChangeSpy.mock.calls[1][0]).toEqual({
+      firstName: 'Joe',
+      lastName: 'Foo',
+    });
+  });
+});

__tests__/future/ControlledCustomFormWithHooks.js

@@ -0,0 +1,35 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+
+import {
+  ExampleForm,
+  value,
+} from '@/demo/future/ControlledCustomFormWithHooks';
+
+afterEach(cleanup);
+
+describe('controlled custom form with hooks', () => {
+  test('should fire onChange correctly', () => {
+    const onChangeSpy = jest.fn();
+    const { getByLabelText, rerender } = render(
+      <ExampleForm onChange={onChangeSpy} value={value} />
+    );
+    fireEvent.change(getByLabelText('First Name'), {
+      target: { value: 'Joe' },
+    });
+    const newValue = onChangeSpy.mock.calls[0][0];
+    expect(newValue).toEqual({
+      firstName: 'Joe',
+      lastName: '',
+    });
+    rerender(<ExampleForm onChange={onChangeSpy} value={newValue} />);
+    fireEvent.change(getByLabelText('Last Name'), {
+      target: { value: 'Foo' },
+    });
+    expect(onChangeSpy.mock.calls[1][0]).toEqual({
+      firstName: 'Joe',
+      lastName: 'Foo',
+    });
+  });
+});