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

Simple form validation using JSON Schema and AJV

import React from 'react';
import { mount } from 'enzyme';
import FormContext from '../Form/Context';
import Field from './Field';
jest.mock('../Form/Context');
it('should match snapshot', function () {
  var field = mount(React.createElement(Field, {
    name: "username"
  }));
  expect(field).toMatchSnapshot();
});
it('should call form.touch when blurred', function () {
  var context = {
    getFieldErrors: jest.fn(function () {
      return [];
    }),
    handleFieldChange: jest.fn(),
    isFieldInvalid: jest.fn(),
    isFieldTouched: jest.fn(),
    touch: jest.fn()
  };
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  var field = mount(React.createElement(Field, {
    name: "username"
  }));
  field.find('input').simulate('blur');
  expect(context.touch).toHaveBeenCalled();
});
it('should call onBlur handler when blurred', function () {
  var onBlur = jest.fn();
  var field = mount(React.createElement(Field, {
    name: "username",
    onBlur: onBlur
  }));
  field.find('input').simulate('blur');
  expect(onBlur).toHaveBeenCalled();
});
it('should add class isSubmitted if form is submitted', function () {
  var context = {
    isFieldInvalid: jest.fn(),
    isFieldTouched: jest.fn()
  };
  var field = mount(React.createElement(Field, {
    name: "username"
  }));
  expect(field.find('.Jfv_Field').hasClass('isSubmitted')).toBe(false);
  context.isSubmitted = true;
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  field = mount(React.createElement(Field, {
    name: "username"
  }));
  expect(field.find('.Jfv_Field').hasClass('isSubmitted')).toBe(true);
});
it('should add class isTouched if field is touched', function () {
  var context = {
    isFieldInvalid: jest.fn(),
    isFieldTouched: jest.fn()
  };
  var field = mount(React.createElement(Field, {
    name: "username"
  }));
  expect(field.find('.Jfv_Field').hasClass('isTouched')).toBe(false);
  context.isFieldTouched.mockImplementation(function () {
    return true;
  });
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  field = mount(React.createElement(Field, {
    name: "username"
  }));
  expect(field.find('.Jfv_Field').hasClass('isTouched')).toBe(true);
});
it('should add class isInvalid if field is invalid', function () {
  var context = {
    isFieldInvalid: jest.fn(),
    isFieldTouched: jest.fn()
  };
  var field = mount(React.createElement(Field, {
    name: "username"
  }));
  expect(field.find('.Jfv_Field').hasClass('isInvalid')).toBe(false);
  context.isFieldInvalid.mockImplementation(function () {
    return true;
  });
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  field = mount(React.createElement(Field, {
    name: "username"
  }));
  expect(field.find('.Jfv_Field').hasClass('isInvalid')).toBe(true);
});
it('Default component input can be changed', function () {
  var Component = function Component() {
    return 'component';
  };

  var field = mount(React.createElement(Field, {
    component: Component,
    name: "username"
  }));
  expect(field.exists(Component)).toBe(true);
});
it('should call form.handleFieldChange() when field value changes', function () {
  var context = {
    handleFieldChange: jest.fn(),
    isFieldInvalid: jest.fn(),
    isFieldTouched: jest.fn()
  };
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  var field = mount(React.createElement(Field, {
    type: "text",
    name: "username"
  }));
  var input = field.find('input');
  input.getDOMNode().value = 'newvalue';
  input.simulate('change');
  expect(context.handleFieldChange).toHaveBeenCalledWith(expect.objectContaining({
    target: expect.objectContaining({
      name: 'username',
      value: 'newvalue'
    })
  }));
});
it('should call onChange handler passed as prop when field value changes', function () {
  var context = {
    handleFieldChange: jest.fn(),
    isFieldInvalid: jest.fn(),
    isFieldTouched: jest.fn()
  };
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  var handleChange = jest.fn();
  var field = mount(React.createElement(Field, {
    type: "text",
    onChange: handleChange,
    name: "username"
  }));
  var input = field.find('input');
  input.getDOMNode().value = 'newvalue';
  input.simulate('change');
  expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({
    target: expect.objectContaining({
      name: 'username',
      value: 'newvalue'
    })
  }), context.handleFieldChange);
  expect(context.handleFieldChange).not.toHaveBeenCalled();
});