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

Simple form validation using JSON Schema and AJV

import React from 'react';
import { mount } from 'enzyme';
import FormContext from '../Form/Context';
import FieldError from './FieldError';
jest.mock('../Form/Context');
it('should match snapshot', function () {
  var context = {
    getFieldErrors: jest.fn(function () {
      return [{
        keyword: 'bad'
      }];
    }),
    isFieldTouched: jest.fn()
  };
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  var fieldError = mount(React.createElement(FieldError, {
    name: "username"
  }));
  expect(fieldError).toMatchSnapshot();
});
it('should not be displayed if field has no error', function () {
  var fieldError = mount(React.createElement(FieldError, {
    name: "username"
  }));
  expect(fieldError.find(FormContext.Consumer).exists()).toBe(true);
});
it('should call error message of first error only if field has errors', function () {
  var context = {
    errorMessages: {
      bad1: jest.fn(),
      bad2: jest.fn()
    },
    getFieldErrors: jest.fn(function () {
      return [{
        keyword: 'bad1'
      }, {
        keyword: 'bad2'
      }];
    }),
    isFieldTouched: jest.fn()
  };
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  mount(React.createElement(FieldError, {
    name: "username"
  }));
  expect(context.errorMessages.bad1).toHaveBeenCalled();
  expect(context.errorMessages.bad2).not.toHaveBeenCalled();
});
it('should allow to extend and override error messages defined in form', function () {
  var context = {
    errorMessages: {
      bad1: jest.fn(),
      bad2: jest.fn()
    },
    getFieldErrors: jest.fn(function () {
      return [{
        keyword: 'bad1'
      }, {
        keyword: 'bad2'
      }];
    }),
    isFieldTouched: jest.fn()
  };
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  var bad1Override = jest.fn();
  mount(React.createElement(FieldError, {
    errorMessages: {
      bad1: bad1Override
    },
    name: "username"
  }));
  expect(bad1Override).toHaveBeenCalled();
  expect(context.errorMessages.bad1).not.toHaveBeenCalled();
  context.getFieldErrors = jest.fn(function () {
    return [{
      keyword: 'bad3'
    }];
  });
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  var bad3 = jest.fn();
  mount(React.createElement(FieldError, {
    errorMessages: {
      bad3: bad3
    },
    name: "username"
  }));
  expect(bad3).toHaveBeenCalled();
  expect(context.errorMessages.bad1).not.toHaveBeenCalled();
});
it('should render children if providen', function () {
  var context = {
    getFieldErrors: jest.fn(function () {
      return [{
        keyword: 'bad1'
      }];
    }),
    isFieldTouched: jest.fn()
  };
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  var fieldError = mount(React.createElement(FieldError, {
    name: "username"
  }, React.createElement("span", {
    id: "message"
  })));
  expect(fieldError.exists('#message')).toBe(true);
});
it('should add class isSubmitted if form is submitted', function () {
  var context = {
    getFieldErrors: jest.fn(function () {
      return [{
        keyword: 'bad1'
      }];
    }),
    isFieldTouched: jest.fn()
  };
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  var fieldError = mount(React.createElement(FieldError, {
    name: "username"
  }));
  expect(fieldError.find('.Jfv_FieldError').hasClass('isSubmitted')).toBe(false);
  context.isSubmitted = true;
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  fieldError = mount(React.createElement(FieldError, {
    name: "username"
  }));
  expect(fieldError.find('.Jfv_FieldError').hasClass('isSubmitted')).toBe(true);
});
it('should add class isTouched if field is touched', function () {
  var context = {
    getFieldErrors: jest.fn(function () {
      return [{
        keyword: 'bad1'
      }];
    }),
    isFieldTouched: jest.fn()
  };
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  var fieldError = mount(React.createElement(FieldError, {
    name: "username"
  }));
  expect(fieldError.find('.Jfv_FieldError').hasClass('isTouched')).toBe(false);
  context.isFieldTouched.mockImplementation(function () {
    return true;
  });
  FormContext.Consumer.mockImplementationOnce(function (props) {
    return props.children(context);
  });
  fieldError = mount(React.createElement(FieldError, {
    name: "username"
  }));
  expect(fieldError.find('.Jfv_FieldError').hasClass('isTouched')).toBe(true);
});