tests.js

import React from 'react';
import { mount } from 'enzyme';
import { toImmutable, Immutable, Store } from 'nuclear-js';
import flux from 'core/flux';
import Form from './index'

describe('jordan react_components/form', function() {
  let component;
  beforeEach(function() {
  });

  afterEach(function() {
    flux.reset();
  });

  describe('Basic form, new data', function() {
    beforeEach(function() {
      flux.registerStores({
        formData: Store({
          getInitialState() {
            return toImmutable({
              name: '',
            })
          },
        }),
      });

      @Form({
        initialStateGetter: ['formData'],
      })
      class TestForm extends React.Component {
        constructor(props) {
          super(props)

          props.form.field('name')
            .addValidationFn((val) => {
              if (val === 'jordan') {
                return { msg: 'terrible name' };
              }
            })
        }

        renderErrors(fieldName) {
          const { form } = this.props;
          const field = form.field(fieldName);
          const { details, hasErrors } = field.getErrors();

          if (!hasErrors) {
            return null;
          }

          return (
            <p className="error" errorForField={ fieldName }>
              { details.msg }
            </p>
          )
        }

        render() {
          const { form } = this.props;

          const nameField = form.field('name');

          console.log('rerendering', nameField.getValue())
          return(
            <div>
              <input
                type="text"
                onChange={ (e) => nameField.setValue(e.target.value) }
                value={ nameField.getValue() }
              />
              { this.renderErrors('name') }
            </div>
          )
        }
      }

      component = mount(<TestForm />);
    });

    afterEach(function() {
      flux.reset();
    });

    it('should render fields with values', function() {
      expect(component.find('input').props().value).to.equal('');
    });

    it('editing an input should update the value and the formData', function() {
      // since it's an HoC go down two component to get the form through props
      const { form } = component.children().children().props();

      component.find('input').simulate('change', {
        target: {
          value: 'new name'
        },
      });
      expect(component.find('input').props().value).to.equal('new name');
      expect(form.getValue().toJS()).to.eql({
        name: 'new name',
      })
    });
  });

  describe('Basic form, existing data', function() {
    beforeEach(function() {
      flux.registerStores({
        formData: Store({
          getInitialState() {
            return toImmutable({
              id: 1,
              name: 'name',
              key: 'api_key',
              variations: [
                { name: 'var1' },
                { name: 'var2' },
              ],
            });
          },
        }),
      });

      @Form({
        initialStateGetter: ['formData'],
      })
      class TestForm extends React.Component {
        constructor(props) {
          super(props)

          props.form.field('name')
            .addValidationFn((val) => {
              if (val === 'jordan') {
                return { msg: 'terrible name' };
              }
            })
        }

        renderErrors(fieldName) {
          const { form } = this.props;
          const field = form.field(fieldName);
          const { details, hasErrors } = field.getErrors();

          if (!hasErrors) {
            return null;
          }

          return (
            <p className="error" errorForField={ fieldName }>
              { details.msg }
            </p>
          )
        }

        render() {
          const { form } = this.props;

          const nameField = form.field('name');

          return(
            <div>
              <input
                type="text"
                onChange={ (e) => nameField.setValue(e.target.value) }
                value={ nameField.getValue() }
              />
              { this.renderErrors('name') }
            </div>
          )
        }
      }

      component = mount(<TestForm />);
    });

    afterEach(function() {
      flux.reset();
    });

    it('should render fields with values', function() {
      expect(component.find('input').props().value).to.equal('name');
    });

    it('editing an input should update the value and the formData', function() {
      // since it's an HoC go down two component to get the form through props
      const { form } = component.children().children().props();

      component.find('input').simulate('change', {
        target: {
          value: 'new name'
        },
      });
      expect(component.find('input').props().value).to.equal('new name');
      expect(form.getValue().toJS()).to.eql({
        id: 1,
        name: 'new name',
        key: 'api_key',
        variations: [
          { name: 'var1' },
          { name: 'var2' },
        ],
      })
    });

    it('editing an input with invalid value should show an error and update error state in form', function() {
      // since it's an HoC go down two component to get the form through props
      const { form } = component.children().children().props();

      component.find('input').simulate('change', {
        target: {
          value: 'jordan'
        },
      });
      expect(component.find('.error').length).to.equal(1);
      // TODO test form.field('name').getErrors()
      // TODO test form.getErrors()
    });
  });
});