wix-style-react/dist/src/BadgeSelect/BadgeSelect.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 _BadgeSelectDriver = require('./BadgeSelect.driver.private');

var _BadgeSelectDriver2 = _interopRequireDefault(_BadgeSelectDriver);

var _BadgeSelect = require('./BadgeSelect');

var _BadgeSelect2 = _interopRequireDefault(_BadgeSelect);

var _constants = require('wix-ui-backoffice/dist/src/components/Badge/constants');

var _unit = require('../../test/utils/unit');

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

describe('BadgeSelect', function () {
  var render = (0, _unit.createRendererWithDriver)(_BadgeSelectDriver2.default);
  var createDriver = function createDriver(jsx) {
    return render(jsx).driver;
  };
  var initialOptionId = 0;
  var options = Object.values(_constants.SKIN).map(function (skin, id) {
    return {
      id: id.toString(),
      skin: skin,
      text: skin
    };
  });

  function createComponent() {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var combinedProps = _extends({
      options: options,
      selectedId: initialOptionId.toString()
    }, props);

    return createDriver(_react2.default.createElement(_BadgeSelect2.default, combinedProps));
  }

  afterEach(function () {
    (0, _unit.cleanup)();
  });

  it('should have a badge and hidden options by default', function () {
    var _createComponent = createComponent(),
        driver = _createComponent.driver,
        badgeDriver = _createComponent.badgeDriver;

    expect(driver.exists()).toBeTruthy();
    expect(driver.isDropdownShown()).toBeFalsy();
    expect(badgeDriver.exists()).toBeTruthy();
  });

  it('should show badge with initial selected skin and text', function () {
    var _createComponent2 = createComponent(),
        badgeDriver = _createComponent2.badgeDriver;

    expect(badgeDriver.getSkin()).toBe(options[initialOptionId].skin);
    expect(badgeDriver.text()).toBe(options[initialOptionId].text);
  });

  it('should show badge with correct general props as default', function () {
    var _createComponent3 = createComponent(),
        badgeDriver = _createComponent3.badgeDriver;

    expect(badgeDriver.getType()).toBe(_constants.TYPE.solid);
    expect(badgeDriver.getSize()).toBe(_constants.SIZE.medium);
    expect(badgeDriver.isUppercase()).toBe(true);
  });

  it('should render badge with a suffix icon', function () {
    var _createComponent4 = createComponent(),
        badgeDriver = _createComponent4.badgeDriver;

    expect(badgeDriver.getSuffixIcon()).toBe.defined;
  });

  it('should show badge with props given', function () {
    var _createComponent5 = createComponent({
      type: _constants.TYPE.outlined,
      size: _constants.SIZE.small,
      uppercase: false
    }),
        badgeDriver = _createComponent5.badgeDriver;

    expect(badgeDriver.getType()).toBe(_constants.TYPE.outlined);
    expect(badgeDriver.getSize()).toBe(_constants.SIZE.small);
    expect(badgeDriver.isUppercase()).toBe(false);
  });

  it('should show badge selector when badge is clicked', function () {
    var _createComponent6 = createComponent(),
        driver = _createComponent6.driver;

    driver.click();
    expect(driver.isDropdownShown()).toBeTruthy();
  });

  it('should hide options on selection', function () {
    var _createComponent7 = createComponent(),
        driver = _createComponent7.driver;

    driver.click();
    driver.clickAtOption(2);
    expect(driver.isDropdownShown()).toBeFalsy();
  });

  it('should hide options on outside click', function () {
    var _createComponent8 = createComponent(),
        driver = _createComponent8.driver;

    driver.click();
    expect(driver.isDropdownShown()).toBeTruthy();
    driver.clickOutside();
    expect(driver.isDropdownShown()).toBeFalsy();
  });

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

    var _createComponent9 = createComponent({ onSelect: onSelect }),
        driver = _createComponent9.driver;

    driver.clickAtOption(selectedIndex);
    expect(onSelect).toBeCalledWith(options[selectedIndex]);
  });

  describe('uncontrolled mode', function () {
    it('should pick the first option if no selectedId given', function () {
      var uncontrolledProps = { selectedId: undefined };

      var _createComponent10 = createComponent(uncontrolledProps),
          badgeDriver = _createComponent10.badgeDriver;

      expect(badgeDriver.getSkin()).toBe(options[0].skin);
      expect(badgeDriver.text()).toBe(options[0].text);
    });

    it('should change badge after an option is selected', function () {
      var uncontrolledProps = { selectedId: undefined };

      var _createComponent11 = createComponent(uncontrolledProps),
          driver = _createComponent11.driver,
          badgeDriver = _createComponent11.badgeDriver;

      var selectedIndex = 3;

      driver.click();
      driver.clickAtOption(selectedIndex);
      expect(badgeDriver.getSkin()).toBe(options[selectedIndex].skin);
      expect(badgeDriver.text()).toBe(options[selectedIndex].text);
    });
  });

  describe('controlled mode', function () {
    it('should not change badge after an option is selected', function () {
      var _createComponent12 = createComponent(),
          driver = _createComponent12.driver,
          badgeDriver = _createComponent12.badgeDriver;

      var selectedIndex = 3;

      driver.clickAtOption(selectedIndex);
      expect(badgeDriver.getSkin()).toBe(options[0].skin);
      expect(badgeDriver.text()).toBe(options[0].text);
    });

    it('should change badge only on selectedIndex change', function () {
      var dataHook = 'badge-select';

      var _render = render(_react2.default.createElement(_BadgeSelect2.default, { selectedId: '0', dataHook: dataHook, options: options })),
          driver = _render.driver,
          rerender = _render.rerender;

      var selectedIndex = 3;

      driver.driver.clickAtOption(selectedIndex);

      rerender(_react2.default.createElement(_BadgeSelect2.default, {
        selectedId: '' + selectedIndex,
        dataHook: dataHook,
        options: options
      }));

      expect(driver.badgeDriver.getSkin()).toBe(options[selectedIndex].skin);
      expect(driver.badgeDriver.text()).toBe(options[selectedIndex].text);
    });
  });
});