wix-style-react/dist/src/Dropdown/Dropdown.deprecated.spec.js

wix-style-react

'use strict';

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');

var _deprecationLog = require('../utils/deprecationLog');

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

describe('Dropdown (Deprecated mode)', 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)();
  });

  it('should select item with selectedId on init state', function () {
    var _createDriver = createDriver(_react2.default.createElement(_Dropdown4.default, { options: getOptions(), selectedId: 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(_Dropdown4.default, { 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(_Dropdown4.default, { options: getOptions() })),
        driver = _createDriver3.driver,
        inputDriver = _createDriver3.inputDriver,
        dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;

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

  it('should update text when selected option changes', function () {
    var options = getOptions();
    var dataHook = 'dropdown-comp';

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

    var driver = dropdownDriver.driver,
        inputDriver = dropdownDriver.inputDriver,
        dropdownLayoutDriver = dropdownDriver.dropdownLayoutDriver;


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

    options[0].value = 'Updated';
    rerender(_react2.default.createElement(_Dropdown4.default, { dataHook: dataHook, options: options, selectedId: 0 }));

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

  it('should close when clicking on input (header)', function () {
    var _createDriver4 = createDriver(_react2.default.createElement(_Dropdown4.default, { 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(_Dropdown4.default, { options: getOptions() })),
        driver = _createDriver5.driver;

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

  describe('upgrade deprecation log', function () {
    var consoleErrorSpy = void 0;

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

    describe('without upgrade', function () {
      var depLogSpy = void 0;

      beforeEach(function () {
        depLogSpy = jest.spyOn(_deprecationLog.depLogger, 'log');
      });

      afterEach(function () {
        return depLogSpy.mockRestore();
      });

      it('should show deprecationLog when \'upgrade\' is not true', function () {
        render(_react2.default.createElement(_Dropdown4.default, { options: getOptions() }));
        expect(depLogSpy).toBeCalledWith('Dropdown: New API! Please upgrade by passing the prop \'upgrade=true\', and refer to documentation.');
      });

      it('should log error when initialSelectedId is used without upgrade', function () {
        render(_react2.default.createElement(_Dropdown4.default, { options: getOptions(), initialSelectedId: 0 }));
        expect(consoleErrorSpy).toHaveBeenCalledTimes(1);
        expect(consoleErrorSpy).toBeCalledWith(expect.stringContaining('\'initialSelectedId\' can be used only if you pass \'upgrade=true\' as well.'));
      });
    });
  });

  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(_Dropdown4.default, { 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(_Dropdown4.default, { 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();
    });
  });
});