WIP: Formatic 3000

__tests__/future/AvoidRerendering.js

@@ -0,0 +1,41 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+
+import { FormContainer, 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'],
+    ]);
+  });
+});

__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',
+    });
+  });
+});

__tests__/future/CustomFormWithFieldContainer.js

@@ -0,0 +1,33 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+
+import {
+  ExampleForm,
+  defaultValue,
+} from '@/demo/future/CustomFormWithFieldContainer';
+
+afterEach(cleanup);
+
+describe('custom form with FieldContainer', () => {
+  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/CustomFormWithHooks.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/CustomFormWithHooks';
+
+afterEach(cleanup);
+
+describe('custom form with hooks', () => {
+  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/NestedValues.js

@@ -0,0 +1,43 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+
+import { ExampleForm, defaultValue } from '@/demo/future/NestedValues';
+
+afterEach(cleanup);
+
+describe('nested values with FieldContainer', () => {
+  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({
+      name: { firstName: 'Joe', lastName: '' },
+      username: '',
+    });
+    fireEvent.change(getByLabelText('Last Name'), {
+      target: { value: 'Foo' },
+    });
+    expect(onChangeSpy.mock.calls[1][0]).toEqual({
+      name: {
+        firstName: 'Joe',
+        lastName: 'Foo',
+      },
+      username: '',
+    });
+    fireEvent.change(getByLabelText('Username'), {
+      target: { value: 'joefoo' },
+    });
+    expect(onChangeSpy.mock.calls[2][0]).toEqual({
+      name: {
+        firstName: 'Joe',
+        lastName: 'Foo',
+      },
+      username: 'joefoo',
+    });
+  });
+});

__tests__/future/StyledBuiltInField.js

@@ -0,0 +1,28 @@
+/*global jest, describe, test, expect, afterEach*/
+import React from 'react';
+import { render, cleanup } from 'react-testing-library';
+
+import { ExampleForm, defaultValue } from '@/demo/future/StyledBuiltInField';
+
+afterEach(cleanup);
+
+describe('styled built-in field', () => {
+  test('should use emotion to override styling', () => {
+    const onChangeSpy = jest.fn();
+    const { getByLabelText } = render(
+      <ExampleForm defaultValue={defaultValue} onChange={onChangeSpy} />
+    );
+    // Example upper-cases labels, and
+    // Emotion generates a class with "css-" in it, so look for that.
+    expect(
+      getByLabelText('FIRST NAME')
+        .getAttribute('class')
+        .indexOf('css-')
+    ).toBeGreaterThan(-1);
+    expect(
+      getByLabelText('LAST NAME')
+        .getAttribute('class')
+        .indexOf('css-')
+    ).toBeGreaterThan(-1);
+  });
+});

demo/future/BoilerplateReactForm.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+function TextField({ fieldKey, label, value, onChangeField }) {
+  return (
+    <div>
+      <div>
+        <label htmlFor={fieldKey}>{label}</label>
+      </div>
+      <div>
+        <input
+          id={fieldKey}
+          onChange={event => onChangeField(fieldKey, event.target.value)}
+          type="text"
+          value={value}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function ExampleForm({ defaultValue, onChange }) {
+  const [formState, setFormState] = useState(defaultValue);
+  const onChangeField = (key, value) => {
+    const newFormState = {
+      ...formState,
+      [key]: value,
+    };
+    setFormState(newFormState);
+    onChange(newFormState);
+  };
+  return (
+    <form>
+      <TextField
+        fieldKey="firstName"
+        label="First Name"
+        onChangeField={onChangeField}
+        value={formState.firstName}
+      />
+      <TextField
+        fieldKey="lastName"
+        label="Last Name"
+        onChangeField={onChangeField}
+        value={formState.lastName}
+      />
+    </form>
+  );
+}
+
+export const defaultValue = { firstName: '', lastName: '' };