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

var _Dropdown2 = _interopRequireDefault(_Dropdown);

var _Dropdown3 = require('./Dropdown');

var _Dropdown4 = _interopRequireDefault(_Dropdown3);

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

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

var _enzyme2 = require('enzyme');

var _reactHelpers = require('wix-ui-test-utils/react-helpers');

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

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

var NewDropdown = function NewDropdown(props) {
  return _react2.default.createElement(_Dropdown4.default, _extends({}, props, { upgrade: true }));
};

describe('Dropdown', function () {
  var render = (0, _unit.createRendererWithDriver)(_Dropdown2.default);
  var createDriver = function createDriver(jsx) {
    return render(jsx).driver;
  };

  var getOptions = function getOptions() {
    return [{ 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'
      ) }];
  };

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

  describe('Uncontrolled SelectedId', function () {
    it('should select item with selectedId on init state', function () {
      var _createDriver = createDriver(_react2.default.createElement(NewDropdown, { options: getOptions(), initialSelectedId: 0 })),
          inputDriver = _createDriver.inputDriver,
          dropdownLayoutDriver = _createDriver.dropdownLayoutDriver;

      expect(dropdownLayoutDriver.isOptionSelected(0)).toBeTruthy();
      expect(inputDriver.getValue()).toBe('Option 1');
    });

    it('should select an item when clicked', function () {
      var _createDriver2 = createDriver(_react2.default.createElement(NewDropdown, { options: getOptions() })),
          driver = _createDriver2.driver,
          dropdownLayoutDriver = _createDriver2.dropdownLayoutDriver;

      driver.focus();
      dropdownLayoutDriver.clickAtOption(0);
      expect(dropdownLayoutDriver.isOptionSelected(0)).toBeTruthy();
    });

    it('should enter the selected option text when selected', function () {
      var _createDriver3 = createDriver(_react2.default.createElement(NewDropdown, { options: getOptions() })),
          driver = _createDriver3.driver,
          inputDriver = _createDriver3.inputDriver,
          dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;

      driver.focus();
      dropdownLayoutDriver.clickAtOption(0);
      expect(inputDriver.getValue()).toBe('Option 1');
    });

    it('should close when clicking on input (header)', function () {
      var _createDriver4 = createDriver(_react2.default.createElement(NewDropdown, { options: getOptions() })),
          dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver,
          inputDriver = _createDriver4.inputDriver;

      inputDriver.click();
      expect(dropdownLayoutDriver.isShown()).toBeTruthy();

      return (0, _reactHelpers.sleep)(200).then(function () {
        inputDriver.click();
        expect(dropdownLayoutDriver.isShown()).toBeFalsy();
      });
    });

    it('should be read only', function () {
      var _createDriver5 = createDriver(_react2.default.createElement(NewDropdown, { options: getOptions() })),
          driver = _createDriver5.driver;

      expect(driver.isReadOnly()).toBeTruthy();
    });

    describe('initiallySelected', function () {
      it('should keep selectedId and value when initialSelectedId changed', function () {
        var _render = render(_react2.default.createElement(NewDropdown, { options: getOptions(), initialSelectedId: 0 })),
            _driver = _render.driver,
            rerender = _render.rerender;

        var dropdownLayoutDriver = _driver.dropdownLayoutDriver;

        expect(dropdownLayoutDriver.isOptionSelected(0)).toBeTruthy();
        rerender(_react2.default.createElement(NewDropdown, { options: getOptions(), initialSelectedId: 1 }));
        expect(dropdownLayoutDriver.isOptionSelected(0)).toBeTruthy();
      });
    });

    it('should update selectedId when options change and id doesn\'t exist anymore', function () {
      var _render2 = render(_react2.default.createElement(NewDropdown, {
        options: [{ id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }],
        initialSelectedId: 0
      })),
          _driver = _render2.driver,
          rerender = _render2.rerender;

      var inputDriver = _driver.inputDriver,
          dropdownLayoutDriver = _driver.dropdownLayoutDriver;


      expect(dropdownLayoutDriver.optionById(0).isSelected()).toBeTruthy();
      expect(inputDriver.getValue()).toBe('Option 1');
      rerender(_react2.default.createElement(NewDropdown, { options: [{ id: 1, value: 'Option 2' }] }));

      expect(dropdownLayoutDriver.options().some(function (option) {
        return option.isSelected();
      })).toBeFalsy();
      expect(inputDriver.getValue()).toBe('');
    });

    describe('PropTypes Validation', function () {
      var consoleErrorSpy = void 0;

      beforeEach(function () {
        consoleErrorSpy = jest.spyOn(global.console, 'error').mockImplementation(jest.fn());
      });
      afterEach(function () {
        consoleErrorSpy.mockRestore();
      });

      it('should log error when selectedId and initialSelectedId are used together', function () {
        render(_react2.default.createElement(NewDropdown, {
          options: getOptions(),
          selectedId: 0,
          initialSelectedId: 0
        }));
        expect(consoleErrorSpy).toHaveBeenCalledTimes(1);
        expect(consoleErrorSpy).toBeCalledWith(expect.stringContaining('\'selectedId\' and \'initialSelectedId\' cannot both be used at the same time.'));
      });
    });
  });

  describe('Controlled SelectedId', function () {
    it('should keep current selection and value when option clicked', function () {
      var _createDriver6 = createDriver(_react2.default.createElement(NewDropdown, { options: getOptions(), selectedId: 0 })),
          driver = _createDriver6.driver,
          dropdownLayoutDriver = _createDriver6.dropdownLayoutDriver,
          inputDriver = _createDriver6.inputDriver;

      driver.focus();
      dropdownLayoutDriver.clickAtOption(1);

      expect(dropdownLayoutDriver.isOptionSelected(0)).toBeTruthy();
      expect(inputDriver.getValue()).toBe('Option 1');
    });

    it('should have no selection if selectedId does not exist', function () {
      var _createDriver7 = createDriver(_react2.default.createElement(NewDropdown, {
        options: [{ id: 0, value: 'Option 1' }],
        selectedId: 99
      })),
          dropdownLayoutDriver = _createDriver7.dropdownLayoutDriver;

      expect(dropdownLayoutDriver.optionById(0).isSelected()).toBeFalsy();
    });

    it('should update selection and value when selectedId changes', function () {
      var _render3 = render(_react2.default.createElement(NewDropdown, { options: getOptions(), selectedId: 0 })),
          _driver = _render3.driver,
          rerender = _render3.rerender;

      var dropdownLayoutDriver = _driver.dropdownLayoutDriver,
          inputDriver = _driver.inputDriver;


      expect(dropdownLayoutDriver.isOptionSelected(0)).toBeTruthy();
      expect(inputDriver.getValue()).toBe('Option 1');

      rerender(_react2.default.createElement(NewDropdown, { options: getOptions(), selectedId: 1 }));

      expect(dropdownLayoutDriver.isOptionSelected(1)).toBeTruthy();
      expect(inputDriver.getValue()).toBe('Option 2');
    });
  });

  describe('Rerender', function () {
    it('should keep value when unrelated prop updates', function () {
      var _render4 = render(_react2.default.createElement(NewDropdown, { options: getOptions() })),
          _driver = _render4.driver,
          rerender = _render4.rerender;

      var inputDriver = _driver.inputDriver;


      inputDriver.enterText('foo');
      expect(inputDriver.getValue()).toBe('foo');
      rerender(_react2.default.createElement(NewDropdown, { options: getOptions(), status: 'error' }));

      expect(inputDriver.getValue()).toBe('foo');
    });
  });

  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,
        _react2.default.createElement(NewDropdown, { dataHook: dataHook })
      )));
      var dropdownTestkit = (0, _testkit.dropdownTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
      expect(dropdownTestkit.driver.exists()).toBeTruthy();
      expect(dropdownTestkit.inputDriver.exists()).toBeTruthy();
      expect(dropdownTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'myDataHook';
      var wrapper = (0, _enzyme2.mount)(_react2.default.createElement(NewDropdown, { dataHook: dataHook }));
      var dropdownTestkit = (0, _enzyme.dropdownTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(dropdownTestkit.driver.exists()).toBeTruthy();
      expect(dropdownTestkit.inputDriver.exists()).toBeTruthy();
      expect(dropdownTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
    });
  });
});