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

wix-style-react

'use strict';

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; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _testUtils = require('react-dom/test-utils');

var _testUtils2 = _interopRequireDefault(_testUtils);

var _ButtonWithOptions = require('./ButtonWithOptions.driver');

var _ButtonWithOptions2 = _interopRequireDefault(_ButtonWithOptions);

var _ButtonWithOptions3 = require('./ButtonWithOptions');

var _ButtonWithOptions4 = _interopRequireDefault(_ButtonWithOptions3);

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

var _testkit = require('../../testkit');

var _enzyme = require('../../testkit/enzyme');

var _enzyme2 = require('enzyme');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

describe('ButtonWithOptions', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_ButtonWithOptions2.default);
  var options = [{ id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3', disabled: true }, { id: 3, value: 'Option 4' }, { id: 'divider1', value: '-' }, {
    id: 'element1',
    value: _react2.default.createElement(
      'span',
      { style: { color: 'brown' } },
      'Option 4'
    )
  }];

  var optionsArray = options.map(function (option) {
    var value = option.value,
        props = _objectWithoutProperties(option, ['value']);

    return _react2.default.createElement(
      _ButtonWithOptions4.default.Option,
      _extends({ key: option.id }, props),
      value
    );
  });

  var buttonWithOptions = function buttonWithOptions(props) {
    return _react2.default.createElement(
      _ButtonWithOptions4.default,
      props,
      _react2.default.createElement(
        _ButtonWithOptions4.default.Button,
        props,
        'Test'
      ),
      optionsArray
    );
  };

  it('should have a Button and a hidden DropdownLayout by default', function () {
    var _createDriver = createDriver(buttonWithOptions()),
        buttonDriver = _createDriver.buttonDriver,
        dropdownLayoutDriver = _createDriver.dropdownLayoutDriver;

    expect(buttonDriver.exists()).toBeTruthy();
    expect(dropdownLayoutDriver.exists()).toBeTruthy();
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should show DropdownLayout when Button is clicked', function () {
    var _createDriver2 = createDriver(buttonWithOptions()),
        buttonDriver = _createDriver2.buttonDriver,
        dropdownLayoutDriver = _createDriver2.dropdownLayoutDriver;

    buttonDriver.click();
    expect(dropdownLayoutDriver.isShown()).toBeTruthy();
  });

  it('should hide options on selection', function () {
    var _createDriver3 = createDriver(buttonWithOptions()),
        buttonDriver = _createDriver3.buttonDriver,
        dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;

    buttonDriver.click();
    dropdownLayoutDriver.clickAtOption(0);
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should hide options on outside click', function () {
    var _createDriver4 = createDriver(buttonWithOptions()),
        driver = _createDriver4.driver,
        buttonDriver = _createDriver4.buttonDriver,
        dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver;

    buttonDriver.click();
    expect(dropdownLayoutDriver.isShown()).toBeTruthy();
    driver.outsideClick();
    expect(dropdownLayoutDriver.isShown()).toBeFalsy();
  });

  it('should call onSelect when an option is pressed', function () {
    var onSelect = jest.fn();

    var _createDriver5 = createDriver(buttonWithOptions({ onSelect: onSelect })),
        buttonDriver = _createDriver5.buttonDriver,
        dropdownLayoutDriver = _createDriver5.dropdownLayoutDriver;

    buttonDriver.click();
    dropdownLayoutDriver.clickAtOption(0);
    expect(onSelect).toBeCalledWith(options[0], false);
  });

  it('should call onSelect when a selected option is pressed with an indication that this is the selected option', function () {
    var onSelect = jest.fn();

    var _createDriver6 = createDriver(buttonWithOptions({ onSelect: onSelect, selectedId: options[0].id })),
        buttonDriver = _createDriver6.buttonDriver,
        dropdownLayoutDriver = _createDriver6.dropdownLayoutDriver;

    buttonDriver.click();
    dropdownLayoutDriver.clickAtOption(0);
    expect(onSelect).toBeCalledWith(options[0], true);
  });

  it('should call onSelect when a selected option is pressed without initial selectedId and send an indication that this is the selected option', function () {
    var onSelect = jest.fn();

    var _createDriver7 = createDriver(buttonWithOptions({ onSelect: onSelect })),
        buttonDriver = _createDriver7.buttonDriver,
        dropdownLayoutDriver = _createDriver7.dropdownLayoutDriver;

    buttonDriver.click();
    dropdownLayoutDriver.clickAtOption(0);
    expect(onSelect).toBeCalledWith(options[0], false);
    dropdownLayoutDriver.clickAtOption(0);
    expect(onSelect).toBeCalledWith(options[0], true);
  });

  describe('Option children validation', function () {
    var children = void 0;
    var validator = _ButtonWithOptions4.default.Option.propTypes.children;
    var componentName = 'ButtonWithOptions.Option';
    var props = { children: children };
    var prop = 'children';

    it('should fail on multipile children', function () {
      children = ['child1', 'child2'];

      expect(validator(props, prop, componentName) instanceof Error).toBeTruthy();
    });

    it('should fail on children required', function () {
      children = undefined;

      expect(validator(props, prop, componentName) instanceof Error).toBeTruthy();
    });
  });

  describe('appearance', function () {
    it('should be possible to specify the theme of underlying elements', function () {
      var props = { theme: 'emptybluesecondary', dataHook: 'myDataHook' };
      var wrapper = (0, _enzyme2.mount)(buttonWithOptions(props));
      var testkit = (0, _enzyme.buttonWithOptionsTestkitFactory)({
        wrapper: wrapper,
        dataHook: props.dataHook
      });
      expect(testkit.dropdownLayoutDriver.hasTheme(props.theme)).toBe(true);
    });
  });

  describe('testkit', function () {
    it('should exist', function () {
      var div = document.createElement('div');
      var dataHook = 'myDataHook';
      var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
        'div',
        null,
        buttonWithOptions({ dataHook: dataHook })
      )));
      var buttonWithOptionsTestkit = (0, _testkit.buttonWithOptionsTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(buttonWithOptionsTestkit.driver.exists()).toBeTruthy();
      expect(buttonWithOptionsTestkit.buttonDriver.exists()).toBeTruthy();
      expect(buttonWithOptionsTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'myDataHook';
      var wrapper = (0, _enzyme2.mount)(buttonWithOptions({ dataHook: dataHook }));
      var buttonWithOptionsTestkit = (0, _enzyme.buttonWithOptionsTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(buttonWithOptionsTestkit.driver.exists()).toBeTruthy();
      expect(buttonWithOptionsTestkit.buttonDriver.exists()).toBeTruthy();
      expect(buttonWithOptionsTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
    });
  });

  describe('Dynamic button theme', function () {
    it('button should display the same value as the "selected" option', function () {
      var option = options[0];
      var props = {
        theme: 'no-border',
        dataHook: 'myDataHook',
        selectedId: option.id
      };
      var wrapper = (0, _enzyme2.mount)(buttonWithOptions(props));
      var testkit = (0, _enzyme.buttonWithOptionsTestkitFactory)({
        wrapper: wrapper,
        dataHook: props.dataHook
      });

      expect(testkit.buttonDriver.getButtonTextContent()).toEqual(option.value);
    });

    it('button should display the same value as the "selected" option that has span', function () {
      var expectedValue = 'Option 4';
      var option = options[5];
      var props = {
        theme: 'no-border',
        dataHook: 'myDataHook',
        selectedId: option.id
      };
      var wrapper = (0, _enzyme2.mount)(buttonWithOptions(props));
      var testkit = (0, _enzyme.buttonWithOptionsTestkitFactory)({
        wrapper: wrapper,
        dataHook: props.dataHook
      });

      expect(testkit.buttonDriver.getButtonTextContent()).toEqual(expectedValue);
    });
  });
});