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

wix-style-react

import React from 'react';
import color from 'color';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import colorPickerDriverFactory from './ColorPicker.driver.private';

import ColorPicker from './ColorPicker';

describe('ColorPicker', function () {
  var createDriver = createDriverFactory(colorPickerDriverFactory);
  var driver = void 0;

  function createComponent(props) {
    driver = createDriver(React.createElement(ColorPicker, 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(color(driver.historyCurrentColor()).hex()).toBe(value);
      expect(color(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(color(driver.historyCurrentColor()).hex()).toBe('#000000');
      expect(color(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(color(driver.historyCurrentColor()).hex()).toBe('#000000');
      expect(color(driver.historyPreviousColor()).hex()).toBe(value);
      driver.clickOnPreviousColor();
      expect(color(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(color(driver.historyCurrentColor()).hex()).toBe('#000000');
      expect(color(driver.historyPreviousColor()).hex()).toBe(value);
      driver.confirm();
      expect(color(driver.historyCurrentColor()).hex()).toBe('#000000');
      expect(color(driver.historyPreviousColor()).hex()).toBe('#000000');
    });
  });
});