react-jsonschema-form-validation/dist/Form/Form.test.js

Simple form validation using JSON Schema and AJV

import React from 'react';
import { mount } from 'enzyme';
import Form from './Form';
import Field from '../Field';
var testSchema = {
  type: 'object',
  properties: {
    type: {
      type: 'string',
      enum: ['te', 'ta']
    }
  },
  required: ['type']
};
it('should match snapshot', function () {
  var wrapper = mount(React.createElement(Form, {
    onSubmit: function onSubmit() {},
    schema: {}
  }));
  expect(wrapper).toMatchSnapshot();
});
it('should call onSubmit handler when form submitted', function () {
  var onSubmit = jest.fn();
  var data = {
    type: 'te'
  };
  var wrapper = mount(React.createElement(Form, {
    data: data,
    onSubmit: onSubmit,
    schema: testSchema
  }));
  wrapper.find('form').simulate('submit', {
    preventDefault: function preventDefault() {}
  });
  expect(onSubmit).toHaveBeenCalled();
});
it('should not call onSubmit handler as the form is not valid', function () {
  var onSubmit = jest.fn();
  var data = {
    type: 'pioiv'
  };
  var wrapper = mount(React.createElement(Form, {
    data: data,
    onSubmit: onSubmit,
    schema: testSchema
  }));
  wrapper.find('form').simulate('submit', {
    preventDefault: function preventDefault() {}
  });
  expect(onSubmit).not.toHaveBeenCalled();
});
describe('Form.getFieldErrors()', function () {
  it('should return a list of fields having errors', function () {
    var data = {
      type: 'uuu'
    };
    var wrapper = mount(React.createElement(Form, {
      data: data,
      onSubmit: function onSubmit() {},
      schema: testSchema
    }));
    expect(wrapper.instance().getFieldErrors('type').length).toStrictEqual(1);
    data = {
      type: 'te'
    };
    wrapper = mount(React.createElement(Form, {
      data: data,
      onSubmit: function onSubmit() {},
      schema: testSchema
    }));
    expect(wrapper.instance().getFieldErrors('type').length).toStrictEqual(0);
    data = {
      type: null
    };
    wrapper = mount(React.createElement(Form, {
      data: data,
      onSubmit: function onSubmit() {},
      schema: testSchema
    }));
    expect(wrapper.instance().getFieldErrors('type').length).toStrictEqual(1);
  });
});
describe('Form.handleFieldChange(event, value)', function () {
  it('should call onChange props with updated data based on event', function () {
    var data = {
      type: 'uuu'
    };
    var handleChange = jest.fn();
    var wrapper = mount(React.createElement(Form, {
      data: data,
      onChange: handleChange,
      onSubmit: function onSubmit() {},
      schema: testSchema
    }));
    var form = wrapper.instance();
    var event = {
      target: {
        name: 'type',
        value: 'aaa'
      }
    };
    form.handleFieldChange(event);
    var expected = {
      type: 'aaa'
    };
    expect(handleChange).toHaveBeenCalledWith(expect.objectContaining(expected), event);
  });
  it('should create an event like object if event param is a string', function () {
    var data = {
      type: 'uuu'
    };
    var handleChange = jest.fn();
    var wrapper = mount(React.createElement(Form, {
      data: data,
      onChange: handleChange,
      onSubmit: function onSubmit() {},
      schema: testSchema
    }));
    var form = wrapper.instance();
    var event = {
      target: {
        name: 'type',
        value: 'aaa'
      }
    };
    form.handleFieldChange(event.target.name, event.target.value);
    var expected = {
      type: 'aaa'
    };
    expect(handleChange).toHaveBeenCalledWith(expect.objectContaining(expected), event);
  });
  it('should not fail if onChange handler is not present', function () {
    var data = {
      type: 'uuu'
    };
    var wrapper = mount(React.createElement(Form, {
      data: data,
      onSubmit: function onSubmit() {},
      schema: testSchema
    }));
    var form = wrapper.instance();
    var event = {
      target: {
        name: 'type',
        value: 'aaa'
      }
    };
    expect(function () {
      form.handleFieldChange(event);
    }).not.toThrow();
  });
});
describe('Form.isFieldTouched(fieldNames)', function () {
  it('should return true if at least one of the fields named on the list is touched, false otherwise', function () {
    var wrapper = mount(React.createElement(Form, {
      onSubmit: function onSubmit() {},
      schema: {}
    }, React.createElement(Field, {
      id: "test-type",
      name: "type",
      type: "text"
    }), React.createElement(Field, {
      id: "test-name",
      name: "name",
      type: "text"
    })));
    expect(wrapper.instance().isFieldTouched(['type'])).toStrictEqual(false);
    expect(wrapper.instance().isFieldTouched(['name'])).toStrictEqual(false);
    expect(wrapper.instance().isFieldTouched(['type', 'name'])).toStrictEqual(false);
    wrapper.find('#test-type').hostNodes().simulate('blur', {
      preventDefault: function preventDefault() {}
    });
    expect(wrapper.instance().isFieldTouched(['type'])).toStrictEqual(true);
    expect(wrapper.instance().isFieldTouched(['name'])).toStrictEqual(false);
    expect(wrapper.instance().isFieldTouched(['type', 'name'])).toStrictEqual(true);
    wrapper.find('#test-name').hostNodes().simulate('blur', {
      preventDefault: function preventDefault() {}
    });
    expect(wrapper.instance().isFieldTouched(['type'])).toStrictEqual(true);
    expect(wrapper.instance().isFieldTouched(['name'])).toStrictEqual(true);
    expect(wrapper.instance().isFieldTouched(['type', 'name'])).toStrictEqual(true);
  });
});
describe('Form.isFieldInvalid(fieldNames)', function () {
  it('should return true if at least one of the fields named on the list has an error, false otherwise', function () {
    var data = {
      type: 'deon',
      name: 'Testing'
    };
    var newSchema = {
      type: 'object',
      properties: {
        type: {
          type: 'string',
          enum: ['te', 'ta']
        },
        name: {
          type: 'string',
          minLength: 6
        }
      },
      required: ['type', 'name']
    };
    var wrapper = mount(React.createElement(Form, {
      data: data,
      onSubmit: function onSubmit() {},
      schema: newSchema
    }));
    expect(wrapper.instance().isFieldInvalid('type')).toBe(true);
    expect(wrapper.instance().isFieldInvalid(['name'])).toBe(false);
    var newData = {
      type: 'te',
      name: 'HE'
    };
    wrapper = mount(React.createElement(Form, {
      data: newData,
      onSubmit: function onSubmit() {},
      schema: newSchema
    }));
    expect(wrapper.instance().isFieldInvalid('type')).toBe(false);
    expect(wrapper.instance().isFieldInvalid(['name'])).toBe(true);
  });
});
describe('Form.isFieldTouched(fieldName)', function () {
  it('should return true if the field of name "fieldName" is touched, false otherwise', function () {
    var wrapper = mount(React.createElement(Form, {
      onSubmit: function onSubmit() {},
      schema: {}
    }, React.createElement(Field, {
      id: "test-type",
      name: "type",
      type: "text"
    })));
    expect(wrapper.instance().isFieldTouched('type')).toStrictEqual(false);
    wrapper.find('#test-type').hostNodes().simulate('blur');
    expect(wrapper.instance().isFieldTouched('type')).toStrictEqual(true);
  });
});
describe('Form.isTouched()', function () {
  it('should return true if one of the fields in the form is touched, false otherwise', function () {
    var wrapper = mount(React.createElement(Form, {
      onSubmit: function onSubmit() {},
      schema: {}
    }, React.createElement(Field, {
      id: "test-type",
      name: "type",
      type: "text"
    }), React.createElement(Field, {
      id: "test-name",
      name: "name",
      type: "text"
    }), React.createElement(Field, {
      id: "test-description",
      name: "description",
      type: "text"
    })));
    expect(wrapper.instance().isTouched()).toStrictEqual(false);
    wrapper.find('#test-type').hostNodes().simulate('blur', {
      preventDefault: function preventDefault() {}
    });
    expect(wrapper.instance().isTouched()).toStrictEqual(true);
    wrapper.find('#test-name').hostNodes().simulate('blur', {
      preventDefault: function preventDefault() {}
    });
    wrapper.find('#test-description').hostNodes().simulate('blur');
    expect(wrapper.instance().isTouched()).toStrictEqual(true);
  });
});
describe('Form.touch(fieldName)', function () {
  it('should add the field named "fieldName" with true value in the touched list in form state', function () {
    var wrapper = mount(React.createElement(Form, {
      onSubmit: function onSubmit() {},
      schema: {}
    }, React.createElement(Field, {
      id: "test-type",
      name: "type",
      type: "text"
    }), React.createElement(Field, {
      id: "test-name",
      name: "name",
      type: "text"
    }), React.createElement(Field, {
      id: "test-description",
      name: "description",
      type: "text"
    })));
    expect(wrapper.state().touchedFields).toEqual([]);
    wrapper.instance().touch('type');
    expect(wrapper.state().touchedFields).toEqual(['type']);
    wrapper.instance().touch('name');
    expect(wrapper.state().touchedFields).toEqual(['type', 'name']);
    wrapper.instance().touch('description');
    expect(wrapper.state().touchedFields).toEqual(['type', 'name', 'description']);
  });
});
it('should clean the event loop when unmounting', function () {
  var wrapper = mount(React.createElement(Form, {
    onSubmit: function onSubmit() {},
    schema: {}
  }));
  var componentWillUnmountSpy = jest.spyOn(Form.prototype, 'componentWillUnmount');
  var cancelSpy = jest.spyOn(wrapper.instance().throttledValidator, 'cancel');
  wrapper.unmount();
  expect(componentWillUnmountSpy).toHaveBeenCalled();
  expect(cancelSpy).toHaveBeenCalled();
  componentWillUnmountSpy.mockRestore();
  cancelSpy.mockRestore();
});