react-key-value/dist/key-value.spec.js

Key value visualizer/editor written in React

'use strict';

var _enzyme = require('enzyme');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _keyValue = require('./key-value');

var _keyValue2 = _interopRequireDefault(_keyValue);

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

describe('ReactKeyValue', function () {
  it('should have the proper class name', function () {
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, null));
    $.hasClass('key-value').should.be.true();
  });

  it('should set the default props', function () {
    var $ = (0, _enzyme.mount)(_react2.default.createElement(_keyValue2.default, null));
    $.props().rows.length.should.exactly(0);
    $.props().onChange.should.be.a.Function();
  });
  it('should get the initial state from the props', function () {
    var rows = [{ keyItem: 'a', valueItem: 'A' }];
    var $ = (0, _enzyme.mount)(_react2.default.createElement(_keyValue2.default, { rows: rows }));
    $.state().rows.should.eql(rows);
  });
  it('should update the state when adding new rows', function () {
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, {
      rows: [{ keyItem: 'a', valueItem: 'A' }]
    }));
    $.find('.key-value-add-new').find('button').simulate('click');
    $.state('rows').should.eql([{ keyItem: 'a', valueItem: 'A' }, { keyItem: '', valueItem: '' }]);
  });
  it('should set the placeholder texts for the key input field', function () {
    var keyInputPlaceholder = 'Key name';
    var valueInputPlaceholder = 'and its value';
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, {
      rows: [{ keyItem: 'a', valueItem: 'A' }],
      keyInputPlaceholder: keyInputPlaceholder,
      valueInputPlaceholder: valueInputPlaceholder
    }));
    $.find('.key-value-add-new').find('button').simulate('click');
    $.find('.key-value-row-key-item').find('input').at(0).props().placeholder.should.eql(keyInputPlaceholder);
    $.find('.key-value-row-value-item').find('input').at(0).props().placeholder.should.eql(valueInputPlaceholder);
  });
  it('should hide the valueInputLabel and the keyInputLabel', function () {
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, { hideLabels: true }));
    $.find('.key-value-add-new').find('button').simulate('click');
    $.find('.key-value-row-key-item').find('span').length.should.exactly(0);
    $.find('.key-value-row-value-item').find('span').length.should.exactly(0);
  });
  it('should show the valueInputLabel and the keyInputLabel by default', function () {
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, null));
    $.find('.key-value-add-new').find('button').simulate('click');
    $.find('.key-value-row-key-item').find('span').length.should.exactly(1);
    $.find('.key-value-row-value-item').find('span').length.should.exactly(1);
  });
  it('should update the state when a key changes', function () {
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, {
      rows: [{ keyItem: 'a', valueItem: 'A' }, { keyItem: 'b', valueItem: 'B' }]
    }));
    $.find('.key-value-row-key-item').at(1).find('input').simulate('change', { currentTarget: { value: 'z' } });
    $.state('rows').should.eql([{ keyItem: 'a', valueItem: 'A' }, { keyItem: 'z', valueItem: 'B' }]);
  });
  it('should update the state when a value changes', function () {
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, {
      rows: [{ keyItem: 'a', valueItem: 'A' }, { keyItem: 'b', valueItem: 'B' }]
    }));
    $.find('.key-value-row-value-item').at(0).find('input').simulate('change', { currentTarget: { value: 'Z' } });
    $.state('rows').should.eql([{ keyItem: 'a', valueItem: 'Z' }, { keyItem: 'b', valueItem: 'B' }]);
  });
  it('should handle removing a row', function () {
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, {
      rows: [{ keyItem: 'a', valueItem: 'A' }, { keyItem: 'b', valueItem: 'B' }, { keyItem: 'c', valueItem: 'C' }]
    }));
    $.find('.key-value-row-remove').at(1).find('button').simulate('click');
    $.state('rows').should.eql([{ keyItem: 'a', valueItem: 'A' }, { keyItem: 'c', valueItem: 'C' }]);
  });
  it('should render the correct amount of rows with the correct content, set by props.rows', function () {
    var $ = (0, _enzyme.mount)(_react2.default.createElement(_keyValue2.default, {
      rows: [{ keyItem: 'a', valueItem: 'A' }, { keyItem: 'b', valueItem: 'B' }]
    }));
    $.props().rows.length.should.exactly(2);
    $.find('.key-value-row-key-item').at(0).find('input').props().value.should.eql('a');
    $.find('.key-value-row-value-item').at(0).find('input').props().value.should.eql('A');
    $.find('.key-value-row-key-item').at(1).find('input').props().value.should.eql('b');
    $.find('.key-value-row-value-item').at(1).find('input').props().value.should.eql('B');
  });
  it('should render an "Add new" button', function () {
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, null));
    (0, _enzyme.shallow)($.instance().renderAddButton()).is('button').should.be.true();
    (0, _enzyme.shallow)($.instance().renderAddButton()).find('button').text().should.eql('Add new');
  });
  it('should render an "Add new" button with a custom method', function () {
    // eslint-disable-next-line react/display-name
    var renderCustomAddButton = function renderCustomAddButton() {
      return _react2.default.createElement(
        'div',
        { className: 'custom-add-button' },
        'Clicking on this item is pointless!'
      );
    };
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, { customAddButtonRenderer: renderCustomAddButton }));
    (0, _enzyme.shallow)($.instance().renderAddButton()).is('div').should.be.true();
    (0, _enzyme.shallow)($.instance().renderAddButton()).find('div').text().should.eql('Clicking on this item is pointless!');
  });
  it('should return a json representation of rows', function () {
    var rows = [{
      keyItem: 'foo',
      valueItem: 'bar'
    }, {
      keyItem: 'lorem',
      valueItem: 'ipsum'
    }];
    var $ = (0, _enzyme.shallow)(_react2.default.createElement(_keyValue2.default, { rows: rows }));
    $.instance().toJSON().should.eql({
      foo: 'bar',
      lorem: 'ipsum'
    });
  });
});