wix-style-react/dist/es/src/EditableSelector/EditableRow/EditableRow.spec.js

wix-style-react

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React from 'react';
import sinon from 'sinon';
import ReactTestUtils from 'react-dom/test-utils';
import editableRowDriverFactory from './EditableRow.driver';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import { editableRowTestkitFactory } from '../../../testkit';
import EditableRow from './EditableRow';
import { editableRowTestkitFactory as enzymeEditableRowTestkitFactory } from '../../../testkit/enzyme';
import { mount } from 'enzyme';

describe('EditableRow', function () {
  var createDriver = createDriverFactory(editableRowDriverFactory);
  var props = void 0;

  beforeEach(function () {
    props = {};
  });

  it('should focus on input when mounted', function () {
    var driver = createDriver(React.createElement(EditableRow, props));
    expect(driver.isInputFocused()).toEqual(true);
  });

  it('should toggle accept button disabled state according to input presence', function () {
    var driver = createDriver(React.createElement(EditableRow, props));
    expect(driver.isApproveDisabled()).toBe(true);
    driver.setText('new option');
    expect(driver.isApproveDisabled()).toBe(false);
  });

  it('should set input text from props', function () {
    var text = 'new option';
    props.newOption = text;
    var driver = createDriver(React.createElement(EditableRow, props));
    expect(driver.getText()).toEqual(text);
  });

  it('should trigger onApprove callback when approve button is clicked', function () {
    props.onApprove = sinon.spy();
    var driver = createDriver(React.createElement(EditableRow, props));
    var text = 'new option';
    driver.setText(text);
    driver.clickApprove();
    expect(props.onApprove.calledOnce).toBe(true);
    expect(props.onApprove.calledWith(text)).toBe(true);
  });

  it('should trigger onApprove callback when enter key is pressed', function () {
    props.onApprove = sinon.spy();
    var driver = createDriver(React.createElement(EditableRow, props));
    var text = 'new option';
    driver.setText(text);
    driver.keyDown(13); //enter
    expect(props.onApprove.calledOnce).toBe(true);
    expect(props.onApprove.calledWith(text)).toBe(true);
  });

  it('should trigger onCancel callback when cancel button is clicked', function () {
    props.onCancel = sinon.spy();
    var driver = createDriver(React.createElement(EditableRow, props));
    driver.clickCancel();
    expect(props.onCancel.calledOnce).toBe(true);
  });

  it('should trigger onCancel callback when escape key is pressed', function () {
    props.onCancel = sinon.spy();
    var driver = createDriver(React.createElement(EditableRow, props));
    driver.keyDown(27); //esc
    expect(props.onCancel.calledOnce).toBe(true);
  });

  describe('testkit', function () {
    it('should exist', function () {
      var div = document.createElement('div');
      var dataHook = 'myDataHook';
      var wrapper = div.appendChild(ReactTestUtils.renderIntoDocument(React.createElement(
        'div',
        null,
        React.createElement(EditableRow, _extends({}, props, { dataHook: dataHook }))
      )));
      var editableRowTestkit = editableRowTestkitFactory({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(editableRowTestkit.exists()).toBeTruthy();
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'myDataHook';
      var wrapper = mount(React.createElement(EditableRow, _extends({}, props, { dataHook: dataHook })));
      var editableRowTestkit = enzymeEditableRowTestkitFactory({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(editableRowTestkit.exists()).toBeTruthy();
    });
  });
});