wix-style-react/dist/es/src/ButtonWithOptions/ButtonWithOptions.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; };

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

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import buttonWithOptionsDriverFactory from './ButtonWithOptions.driver';
import ButtonWithOptions from './ButtonWithOptions';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import { buttonWithOptionsTestkitFactory } from '../../testkit';
import { buttonWithOptionsTestkitFactory as enzymeButtonWithOptionsTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';

describe('ButtonWithOptions', function () {
  var createDriver = createDriverFactory(buttonWithOptionsDriverFactory);
  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: React.createElement(
      'span',
      { style: { color: 'brown' } },
      'Option 4'
    )
  }];

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

    return React.createElement(
      ButtonWithOptions.Option,
      _extends({ key: option.id }, props),
      value
    );
  });

  var buttonWithOptions = function buttonWithOptions(props) {
    return React.createElement(
      ButtonWithOptions,
      props,
      React.createElement(
        ButtonWithOptions.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 = ButtonWithOptions.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 = mount(buttonWithOptions(props));
      var testkit = enzymeButtonWithOptionsTestkitFactory({
        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(ReactTestUtils.renderIntoDocument(React.createElement(
        'div',
        null,
        buttonWithOptions({ dataHook: dataHook })
      )));
      var buttonWithOptionsTestkit = 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 = mount(buttonWithOptions({ dataHook: dataHook }));
      var buttonWithOptionsTestkit = enzymeButtonWithOptionsTestkitFactory({
        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 = mount(buttonWithOptions(props));
      var testkit = enzymeButtonWithOptionsTestkitFactory({
        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 = mount(buttonWithOptions(props));
      var testkit = enzymeButtonWithOptionsTestkitFactory({
        wrapper: wrapper,
        dataHook: props.dataHook
      });

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