react-ions/lib/components/InlineEdit/__tests__/InlineEdit.test.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _InlineEdit = require('../InlineEdit');

var _InlineEdit2 = _interopRequireDefault(_InlineEdit);

var _Icon = require('../../Icon/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

describe('InlineEdit', function () {

  it('should render a span and buttons', function () {
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'test value', isEditing: true }));
    expect(inlineEdit).toMatchSnapshot();
  });

  it('should not render buttons', function () {
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'test value' }));
    expect(inlineEdit).toMatchSnapshot();
  });

  it('should not trigger the callback if the edit was canceled', function () {
    var changeCallback = sinon.spy();
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', isEditing: true, value: 'test value', changeCallback: changeCallback }));

    inlineEdit.update();
    inlineEdit.instance().handleSave();

    expect(changeCallback.called).toBeFalsy();
  });

  it('should not trigger the callback if the value hasn\'t changed', function () {
    var changeCallback = sinon.spy();
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', isEditing: true, value: 'test value', changeCallback: changeCallback }));
    var trigger = inlineEdit.find('.inline-button-wrapper').at(0).childAt(0);

    trigger.simulate('click');

    expect(changeCallback.called).toBeFalsy();
  });

  it('should be readonly', function () {
    var spy = sinon.spy();
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', changeCallback: spy, value: 'test value', readonly: true }));
    var editTrigger = inlineEdit.childAt(0);

    expect(inlineEdit).toMatchSnapshot();

    editTrigger.simulate('click');

    expect(spy.called).toBeFalsy();
  });

  it('should have an inline icon and label', function () {
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'test value', label: 'Email', icon: 'md-mail' }));
    expect(inlineEdit).toMatchSnapshot();
  });

  it('should set max-width for the edit component', function () {
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'test value' }));

    expect(inlineEdit.state().inlineEditMaxWidth).toEqual('calc(100% - 0px)');

    inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'test value', label: 'Email', icon: 'md-mail' }));

    expect(inlineEdit.state().inlineEditMaxWidth).not.toEqual('calc(100% - 0px)');
  });

  it('should render a select field', function () {
    var options = [{ label: 'Item 1', value: 'item_1' }, { label: 'Item 2', value: 'item_2' }, { label: 'Item 3', value: 'item_3' }, { label: 'Item 4', value: 'item_4' }];

    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'item_3', type: 'select', options: options }));
    expect(inlineEdit).toMatchSnapshot();
  });

  it('should update the state when an item is selected', function () {
    var options = [{ label: 'Item 1', value: 'item_1' }, { label: 'Item 2', value: 'item_2' }, { label: 'Item 3', value: 'item_3' }, { label: 'Item 4', value: 'item_4' }];

    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'item_3', type: 'select', options: options }));
    expect(inlineEdit.state().value).toEqual('item_3');

    inlineEdit.instance().handleSave({ target: { value: 'item_1' } });
    expect(inlineEdit.state().value).toEqual('item_1');
  });

  it('should trigger the change callback when an item is selected', function () {
    var changeCallback = sinon.spy();
    var options = [{ label: 'Item 1', value: 'item_1' }, { label: 'Item 2', value: 'item_2' }, { label: 'Item 3', value: 'item_3' }, { label: 'Item 4', value: 'item_4' }];

    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'item_3', type: 'select', options: options, changeCallback: changeCallback }));
    expect(inlineEdit.state().value).toEqual('item_3');

    inlineEdit.instance().handleSave({ target: { value: 'item_1' } });

    expect(inlineEdit.state().value).toEqual('item_1');
    expect(changeCallback.calledWithExactly({ target: { name: 'test', value: 'item_1' } })).toBeTruthy();

    inlineEdit.instance().handleSave({ target: { value: 'item_1' } });
    expect(changeCallback.calledTwice).toBeFalsy();
  });

  it('should set classes on the select field', function () {
    var options = [{ label: 'Item 1', value: 'item_1' }, { label: 'Item 2', value: 'item_2' }, { label: 'Item 3', value: 'item_3' }, { label: 'Item 4', value: 'item_4' }];

    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'item_3', type: 'select', options: options }));
    var field = inlineEdit.instance().getSelect();

    expect(field.props.optClass).toEqual('inline-edit-select');

    inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: 'item_3', type: 'select', options: options, loading: true }));
    field = inlineEdit.instance().getSelect();

    expect(field.props.optClass).toEqual('inline-edit-select loading');
  });

  it('should render a datepicker', function () {
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: '2005-04-26', type: 'date' }));

    expect(inlineEdit).toMatchSnapshot();
  });

  it('should update the state when date is updated', function () {
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: '2005-04-26', type: 'date' }));
    expect(inlineEdit.state().value).toEqual('2005-04-26');

    inlineEdit.instance().handleSave({ target: { value: '2007-02-06' } });
    expect(inlineEdit.state().value).toEqual('2007-02-06');
  });

  it('should trigger the change callback when when date is updated', function () {
    var changeCallback = sinon.spy();
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: '2005-04-26', type: 'date', changeCallback: changeCallback }));

    expect(inlineEdit.state().value).toEqual('2005-04-26');

    inlineEdit.instance().handleSave({ target: { value: '2007-02-06' } });

    expect(inlineEdit.state().value).toEqual('2007-02-06');
    expect(changeCallback.calledWithExactly({ target: { name: 'test', value: '2007-02-06' } })).toBeTruthy();

    inlineEdit.instance().handleSave({ target: { value: '2007-02-06' } });
    expect(changeCallback.calledTwice).toBeFalsy();
  });

  it('should set classes on the datepicker', function () {
    var inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: '2005-04-26', type: 'date' }));
    var field = inlineEdit.instance().getDatepicker();

    expect(field.props.optClass).toEqual('inline-edit-date');

    inlineEdit = mount(_react2.default.createElement(_InlineEdit2.default, { name: 'test', value: '2005-04-26', type: 'date', loading: true }));
    field = inlineEdit.instance().getDatepicker();

    expect(field.props.optClass).toEqual('inline-edit-date loading');
  });
});