react-form-controlled/module/Fieldset.test.js

Intuitive react forms for building powerful applications

import React from 'react';
import { mount } from 'enzyme';
import Form, { Input, Fieldset, FieldsetIndex, If, Last } from '../src';

describe('Fieldset', () => {
  it('should be able to create object', done => {
    const value = {
      data: {
        inputValue: 123
      }
    };

    function onChange(state) {
      expect(state.data.inputValue).toBe('222');
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(
        Fieldset,
        { name: 'data' },
        React.createElement(Input, { name: 'inputValue' })
      )
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').props().value).toBe(123);

    wrapper.find('input').simulate('change', { target: {
        value: '222'
      } });
  });

  it('should be able to create object as html fieldset', done => {
    const value = {
      data: {
        inputValue: 123
      }
    };

    function onChange(state) {
      expect(state.data.inputValue).toBe('222');
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(
        'fieldset',
        { name: 'data' },
        React.createElement(Input, { name: 'inputValue' })
      )
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').props().value).toBe(123);

    wrapper.find('input').simulate('change', { target: {
        value: '222'
      } });
  });

  it('should be able to create complex object', done => {
    const value = {
      data: [{
        inputValue: 123
      }]
    };

    function onChange(state) {
      expect(state.data[0].inputValue).toBe('222');
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(
        Fieldset,
        { name: 'data', skipMap: true },
        React.createElement(
          Fieldset,
          { name: '0' },
          React.createElement(Input, { name: 'inputValue' })
        )
      )
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').props().value).toBe(123);

    wrapper.find('input').simulate('change', { target: {
        value: '222'
      } });
  });

  it('should be able to simplify complex object', done => {
    const value = {
      data: [{
        inputValue: 123
      }]
    };

    function onChange(state) {
      expect(state.data[0].inputValue).toBe('222');
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(
        Fieldset,
        { name: 'data.0' },
        React.createElement(Input, { name: 'inputValue' })
      )
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').props().value).toBe(123);

    wrapper.find('input').simulate('change', { target: {
        value: '222'
      } });
  });

  it('should be able to simplify complex object by array notation', done => {
    const value = {
      data: [{
        inputValue: 123
      }]
    };

    function onChange(state) {
      expect(state.data[0].inputValue).toBe('222');
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(
        Fieldset,
        { name: 'data[0]' },
        React.createElement(Input, { name: 'inputValue' })
      )
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').props().value).toBe(123);

    wrapper.find('input').simulate('change', { target: {
        value: '222'
      } });
  });

  it('should be able to simplify complex object by dot and array notation', done => {
    const value = {
      data: [{
        inputValue: 123
      }]
    };

    function onChange(state) {
      expect(state.data[0].inputValue).toBe('222');
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(Input, { name: 'data[0].inputValue' })
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').props().value).toBe(123);

    wrapper.find('input').simulate('change', { target: {
        value: '222'
      } });
  });

  it('should be able to simplify array object', done => {
    const value = {
      data: [{
        inputValue: 123
      }, {
        inputValue: 222
      }]
    };

    function onChange(state) {
      expect(state.data[0].inputValue).toBe('333');
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(
        Fieldset,
        { name: 'data' },
        React.createElement(Input, { name: 'inputValue' })
      )
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').at(0).props().value).toBe(123);
    expect(wrapper.find('input').at(1).props().value).toBe(222);

    wrapper.find('input').first().simulate('change', { target: {
        value: '333'
      } });
  });

  it('should be able to simplify array object with complex array', () => {
    const value = {
      data: [[1, 2, 3], [4, 5, 6]]
    };

    const wrapper = mount(React.createElement(
      Form,
      { value: value },
      React.createElement(
        'fieldset',
        { name: 'data' },
        React.createElement(Input, { name: '.' })
      )
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').length).toBe(6);
    expect(wrapper.find('input').get(0).value).toBe('1');
    expect(wrapper.find('input').get(1).value).toBe('2');
    expect(wrapper.find('input').get(2).value).toBe('3');
    expect(wrapper.find('input').get(3).value).toBe('4');
  });

  it('should be able to simplify array object with index', () => {
    const value = {
      data: [{
        inputValue: 123
      }, {
        inputValue: 222
      }]
    };

    const wrapper = mount(React.createElement(
      Form,
      { value: value },
      React.createElement(
        Fieldset,
        { name: 'data' },
        React.createElement(FieldsetIndex, {
          render: ({ index }) => React.createElement(
            'span',
            null,
            `${index + 1}.`
          )
        }),
        React.createElement(Input, { name: 'inputValue' })
      )
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('span').length).toBe(2);
    expect(wrapper.find('span').at(0).text()).toBe('1.');
    expect(wrapper.find('span').at(1).text()).toBe('2.');
  });

  it('should be able to get original path for event onChange', done => {
    const value = {
      data: [{
        inputValue: 123
      }, {
        inputValue: 222
      }]
    };

    function onChange(state, component) {
      expect(component.getPath()).toBe('data.0.inputValue');
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(
        Fieldset,
        { name: 'data' },
        React.createElement(Input, { name: 'inputValue' })
      )
    ));

    wrapper.find('input').first().simulate('change', { target: {
        value: '333'
      } });
  });

  it('should be able to use simple array', () => {
    const value = {
      data: [123, 222]
    };

    const wrapper = mount(React.createElement(
      Form,
      { value: value },
      React.createElement(
        Fieldset,
        { name: 'data' },
        React.createElement(Input, { name: '.' })
      )
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').length).toBe(2);
    expect(wrapper.find('input').at(0).props().value).toBe('123');
    expect(wrapper.find('input').at(1).props().value).toBe('222');
  });

  it('should be able to use provideIndex', done => {
    const value = {
      data: [123, 222]
    };

    function onClick(index, evn, id) {
      expect(index).toBe(0);
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value },
      React.createElement(
        Fieldset,
        { name: 'data' },
        React.createElement(Input, { name: '.' }),
        React.createElement(FieldsetIndex, {
          render: ({ index }) => React.createElement('button', { onClick: evn => onClick(index, evn) })
        })
      )
    ));

    wrapper.find('button').first().simulate('click');
  });

  it('should be able to use provideIndex on child', done => {
    const value = {
      data: [123, 222]
    };

    function onClick(index, evn, id) {
      expect(index).toBe(0);
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value },
      React.createElement(
        Fieldset,
        { name: 'data' },
        React.createElement(Input, { name: '.' }),
        React.createElement(FieldsetIndex, {
          render: ({ index }) => React.createElement('button', { onClick: evn => onClick(index, evn) })
        })
      )
    ));

    wrapper.find('button').first().simulate('click');
  });

  it('should be able to get parent value', done => {
    const value = {
      test: '111',
      data: [{
        options: [1, 2, 3],
        selected: 2
      }]
    };

    let count = 0;

    function onChange(state) {
      count += 1;

      if (count === 1) {
        expect(state.data[0].selected).toBe('222');

        expect(wrapper.find('textarea').at(0).props().value).toBe(1);

        wrapper.find('textarea').first().simulate('change', { target: {
            value: '33333'
          } });
      } else if (count === 2) {
        expect(state.data[0].options[0]).toBe('33333');
        done();
      }
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(
        'fieldset',
        { name: 'data' },
        React.createElement(
          'fieldset',
          { name: 'options' },
          React.createElement('textarea', { name: '.' }),
          React.createElement('input', { type: 'radio', name: '..selected' })
        )
      )
    ));

    expect(wrapper.find('textarea').get(0).value).toBe('1');
    expect(wrapper.find('input').length).toBe(3);
    expect(wrapper.find('input').get(0).value).toBe('2');

    wrapper.find('input').first().simulate('change', { target: {
        value: '222'
      } });
  });
  /*
    it('should be able to get index value', () => {
      const value = {
        test: 0,
        data: [123, 222],
      };
  
      const wrapper = mount((
        <Form value={value}>
          <Fieldset name="data">
            <Input type="radio" name="..test" valueIndex />
          </Fieldset>
        </Form>
      ));
  
      expect(wrapper.find('input').get(0).checked).toBe(true);
    });
  
    it('should be able to get indexes', (done) => {
      const value = {
        test: 0,
        data: [123, 222],
      };
  
      function onClick(names, evn, id) {
        expect(names[0]).toBe(0);
        done();
      }
  
      const wrapper = mount((
        <Form value={value}>
          <Fieldset name="data">
            <button onClick={onClick} provideIndexes />
          </Fieldset>
        </Form>
      ));
  
      wrapper.find('button').first().simulate('click');
    });
  */
  it('should be able to use if', () => {
    const value = {
      data: [{
        selected: true,
        options: [1]
      }]
    };

    function checkValue(value) {
      return value === true;
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value },
      React.createElement(
        'fieldset',
        { name: 'data' },
        React.createElement(
          'fieldset',
          { name: 'options' },
          React.createElement(
            If,
            { name: '..selected', cond: value => checkValue(value) },
            React.createElement('textarea', { name: '..selected' })
          )
        )
      )
    ));

    expect(wrapper.find('textarea').get(0).value).toBe('true');
  });

  it('should be able to use if', () => {
    const value = {
      data: [{
        selected: false,
        options: [1]
      }]
    };

    function checkValue(value) {
      if (value !== false) {
        throw new Error('value must be false');
      }
      return value === true;
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value },
      React.createElement(
        'fieldset',
        { name: 'data' },
        React.createElement(
          'fieldset',
          { name: 'options' },
          React.createElement(
            If,
            { name: '..selected', cond: value => checkValue(value) },
            React.createElement('textarea', { name: '..selected' })
          )
        )
      )
    ));

    expect(wrapper.find('textarea').length).toBe(0);
  });

  it('should be able to use render', done => {
    const value = {
      data: [{
        inputValue: 123
      }, {
        inputValue: 222
      }]
    };

    function onChange(state) {
      expect(state.data[0].inputValue).toBe('333');
      done();
    }

    const wrapper = mount(React.createElement(
      Form,
      { value: value, onChange: onChange },
      React.createElement(Fieldset, {
        name: 'data',
        render: ({ value }) => React.createElement(
          'div',
          null,
          value.map((val, index) => {
            return React.createElement(
              'fieldset',
              { name: index, key: index },
              React.createElement('input', { name: 'inputValue' })
            );
          })
        )
      })
    ));

    expect(wrapper.find('form').length).toBe(1);
    expect(wrapper.find('input').get(0).value).toBe('123');
    expect(wrapper.find('input').get(1).value).toBe('222');

    wrapper.find('input').first().simulate('change', { target: {
        value: '333'
      } });
  });
});
//# sourceMappingURL=Fieldset.test.js.map