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

var _AutoComplete2 = _interopRequireDefault(_AutoComplete);

var _AutoComplete3 = require('./AutoComplete');

var _AutoComplete4 = _interopRequireDefault(_AutoComplete3);

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

var asciiA = '97';

describe('Autocomplete', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_AutoComplete2.default);

  var options = [{ id: 0, value: 'aaa' }, { id: 1, value: 'abb' }, { id: 2, value: 'bbb', disabled: true }, { id: 3, value: 'bcc' }, { id: 'divider1', value: '-' }, { id: 'element1', value: _react2.default.createElement(
      'span',
      { style: { color: 'brown' } },
      'ccc'
    ) }];

  var predicate = function predicate(option) {
    return option.value.toString().toLowerCase().indexOf('a') !== -1;
  };

  it('should not filter anything without predicate function', function () {
    var _createDriver = createDriver(_react2.default.createElement(_AutoComplete4.default, { options: options })),
        dropdownLayoutDriver = _createDriver.dropdownLayoutDriver;

    expect(dropdownLayoutDriver.optionsLength()).toBe(options.length);
  });

  ['ArrowUp', 'ArrowDown'].forEach(function (key) {
    it('should not filter items according to predicate function when pressing ' + key, function () {
      var _createDriver2 = createDriver(_react2.default.createElement(_AutoComplete4.default, { options: options, predicate: predicate })),
          inputDriver = _createDriver2.inputDriver,
          dropdownLayoutDriver = _createDriver2.dropdownLayoutDriver;

      inputDriver.trigger('keyDown', { key: key });
      expect(dropdownLayoutDriver.optionsLength()).toBe(options.length);
    });
  });

  it('should filter items according to predicate function when typing characters', function () {
    var _createDriver3 = createDriver(_react2.default.createElement(_AutoComplete4.default, { options: options, predicate: predicate })),
        inputDriver = _createDriver3.inputDriver,
        dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;

    inputDriver.trigger('keyDown', { key: asciiA });
    expect(dropdownLayoutDriver.optionsLength()).toBe(2);
  });

  it('should show all items when focusing even if some text exist', function () {
    var _createDriver4 = createDriver(_react2.default.createElement(_AutoComplete4.default, { options: options, predicate: predicate })),
        dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver,
        inputDriver = _createDriver4.inputDriver;

    inputDriver.enterText('aaa');
    inputDriver.focus();
    expect(dropdownLayoutDriver.optionsLength()).toBe(options.length);
  });

  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(_AutoComplete4.default, { dataHook: dataHook })
      )));
      var autoCompleteTestkit = (0, _testkit.autoCompleteTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(autoCompleteTestkit.driver.exists()).toBeTruthy();
      expect(autoCompleteTestkit.inputDriver.exists()).toBeTruthy();
      expect(autoCompleteTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
    });
  });

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