wix-style-react/dist/src/ColorPicker/ColorPicker.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _color = require('color');

var _color2 = _interopRequireDefault(_color);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _ColorPickerDriver = require('./ColorPicker.driver.private');

var _ColorPickerDriver2 = _interopRequireDefault(_ColorPickerDriver);

var _ColorPicker = require('./ColorPicker');

var _ColorPicker2 = _interopRequireDefault(_ColorPicker);

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

describe('ColorPicker', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_ColorPickerDriver2.default);
  var driver = void 0;

  function createComponent(props) {
    driver = createDriver(_react2.default.createElement(_ColorPicker2.default, props));
  }

  it('should successfully render a component', function () {
    var onChange = jest.fn();
    var onCancel = jest.fn();
    var onConfirm = jest.fn();
    createComponent({ value: '#000000', onChange: onChange, onCancel: onCancel, onConfirm: onConfirm });
    expect(driver.exists()).toBeTruthy();
    expect(driver.historyPanelExists()).toBeFalsy();
  });

  it('should update the color after clicking Enter', function () {
    var onChange = jest.fn();
    var onCancel = jest.fn();
    var onConfirm = jest.fn();
    var sampleColor = '#000000';
    var expectedColor = { color: [0, 0, 0], model: 'rgb', valpha: 1 };

    createComponent({
      value: '',
      onChange: onChange,
      onCancel: onCancel,
      onConfirm: onConfirm
    });
    driver.typeValueOnHexInput(sampleColor);
    driver.keyDownOnHexInput('Enter');

    expect(onConfirm).toHaveBeenCalledWith(expectedColor);
  });

  describe('History', function () {
    it('should show history panel with current color selected as previous', function () {
      var onChange = jest.fn();
      var onCancel = jest.fn();
      var onConfirm = jest.fn();
      var value = '#000000';
      createComponent({
        value: value,
        onChange: onChange,
        onCancel: onCancel,
        onConfirm: onConfirm,
        showHistory: true
      });
      expect(driver.historyPanelExists()).toBeTruthy();
      expect((0, _color2.default)(driver.historyCurrentColor()).hex()).toBe(value);
      expect((0, _color2.default)(driver.historyPreviousColor()).hex()).toBe(value);
    });

    it('should not update previous color after current color change but not confirm', function () {
      var onChange = jest.fn();
      var onCancel = jest.fn();
      var onConfirm = jest.fn();
      var value = '#00FF00';
      createComponent({
        value: value,
        onChange: onChange,
        onCancel: onCancel,
        onConfirm: onConfirm,
        showHistory: true
      });
      driver.selectBlackColor();
      expect((0, _color2.default)(driver.historyCurrentColor()).hex()).toBe('#000000');
      expect((0, _color2.default)(driver.historyPreviousColor()).hex()).toBe(value);
    });

    it('should set previous color to be active color', function () {
      var onChange = jest.fn();
      var onCancel = jest.fn();
      var onConfirm = jest.fn();
      var value = '#00FF00';
      createComponent({
        value: value,
        onChange: onChange,
        onCancel: onCancel,
        onConfirm: onConfirm,
        showHistory: true
      });
      driver.selectBlackColor();
      expect((0, _color2.default)(driver.historyCurrentColor()).hex()).toBe('#000000');
      expect((0, _color2.default)(driver.historyPreviousColor()).hex()).toBe(value);
      driver.clickOnPreviousColor();
      expect((0, _color2.default)(driver.historyCurrentColor()).hex()).toBe(value);
    });

    it('should update previous color after confirm click', function () {
      var onChange = jest.fn();
      var onCancel = jest.fn();
      var onConfirm = jest.fn();
      var value = '#00FF00';
      createComponent({
        value: value,
        onChange: onChange,
        onCancel: onCancel,
        onConfirm: onConfirm,
        showHistory: true
      });
      driver.selectBlackColor();
      expect((0, _color2.default)(driver.historyCurrentColor()).hex()).toBe('#000000');
      expect((0, _color2.default)(driver.historyPreviousColor()).hex()).toBe(value);
      driver.confirm();
      expect((0, _color2.default)(driver.historyCurrentColor()).hex()).toBe('#000000');
      expect((0, _color2.default)(driver.historyPreviousColor()).hex()).toBe('#000000');
    });
  });
});