wix-style-react/dist/src/Search/Search.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Search = require('./Search.driver');

var _Search2 = _interopRequireDefault(_Search);

var _Search3 = require('./Search');

var _Search4 = _interopRequireDefault(_Search3);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _testkitSanity = require('../../test/utils/testkit-sanity');

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

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

var _utils = require('../../test/utils');

var _enzyme2 = require('enzyme');

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

var REGEXP_SPECIAL_CHARS = '^$\\.*+?)(][}{|';

var options = ['The quick', 'brown', 'fox', 'jumps over', 'the lazy', 'dog', REGEXP_SPECIAL_CHARS].map(function (value, index) {
  return { id: index, value: value };
});

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

  describe('Controlled', function () {
    var ControlledSearch = (0, _utils.makeControlled)(_Search4.default);

    it('should show search options if initial value passed and down-key pressed', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { value: 'the', options: options }));

      expect(driver.dropdownLayoutDriver.isShown()).toBe(false);
      driver.driver.pressKey('ArrowDown');
      expect(driver.dropdownLayoutDriver.isShown()).toBe(true);
    });

    it('should not show search options when focusing empty input', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options }));

      expect(driver.dropdownLayoutDriver.isShown()).toBe(false);
      driver.inputDriver.focus();
      expect(driver.dropdownLayoutDriver.isShown()).toBe(false);
    });

    it('should filter search options if initial input value passed and input focused', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options, value: 'fox' }));

      driver.inputDriver.focus();
      expect(driver.dropdownLayoutDriver.optionsLength()).toBe(1);
    });

    it('should not treat spaces around search text as part of query', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options, value: '  fox  ' }));

      driver.inputDriver.focus();
      expect(driver.dropdownLayoutDriver.optionsLength()).toBe(1);
    });

    it('should render required elements of Search box', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options }));

      expect(driver.inputDriver.hasPrefix()).toBe(true);
      expect(driver.inputDriver.getPlaceholder()).toBe('Search');
      expect(driver.inputDriver.hasMenuArrow()).toBe(false);
    });

    it('should render clear text button if input is not empty', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options, value: 'fox' }));

      expect(driver.inputDriver.hasClearButton()).toBe(true);
    });

    it('should remain focused on Search component after clear button click', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options, value: 'fox' }));

      driver.inputDriver.clickClear();
      expect(driver.inputDriver.isFocus()).toBe(true);
    });

    it('should collapse search options after clear button click', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options, value: 'fox' }));

      driver.inputDriver.clickClear();
      expect(driver.dropdownLayoutDriver.isShown()).toBe(false);
    });

    it('should do search when text was entered', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options }));

      driver.inputDriver.focus();
      driver.inputDriver.enterText('fox');
      expect(driver.dropdownLayoutDriver.optionsLength()).toBe(1);
      driver.inputDriver.clearText();
      driver.inputDriver.enterText('the');
      expect(driver.dropdownLayoutDriver.optionsLength()).toBe(2);
      driver.inputDriver.clearText();
      driver.inputDriver.enterText('');
      expect(driver.dropdownLayoutDriver.optionsLength()).toBe(options.length);
    });

    it('should treat regex characters as text', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options }));

      driver.inputDriver.focus();
      driver.inputDriver.enterText(REGEXP_SPECIAL_CHARS);
      expect(driver.dropdownLayoutDriver.optionsLength()).toBe(1);
    });

    it('should show no results if nothing was found in options', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options }));

      driver.inputDriver.focus();
      driver.inputDriver.enterText('option nowhere to be found');
      expect(driver.dropdownLayoutDriver.optionsLength()).toBe(0);
    });

    // TODO: enhance Input component
    it.skip('should focus search input if click on magnifying glass', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { options: options, value: 'fox' }));

      driver.inputDriver.clickSuffix();
      expect(driver.inputDriver.isFocus()).toBe(true);
    });

    it('should highlight the matched options text', function () {
      var driver = createDriver(_react2.default.createElement(ControlledSearch, { value: 'the', options: options }));

      expect(driver.dropdownLayoutDriver.optionAt(0).querySelector('strong').textContent).toContain('The');
    });
  });

  describe('Uncontrolled', function () {
    it('should filter search options if initial defaultValue value passed and input focused', function () {
      var _createDriver = createDriver(_react2.default.createElement(_Search4.default, { options: options, defaultValue: 'fox' })),
          inputDriver = _createDriver.inputDriver,
          dropdownLayoutDriver = _createDriver.dropdownLayoutDriver;

      inputDriver.focus();
      expect(dropdownLayoutDriver.optionsLength()).toBe(1);
    });
  });

  describe('Expandable', function () {
    it('should start as collapsed element by default when expndable=true', function () {
      var _createDriver2 = createDriver(_react2.default.createElement(_Search4.default, { options: options, expandable: true })),
          driver = _createDriver2.driver;

      expect(driver.isExpandable()).toBeTruthy();
      expect(driver.isCollapsed()).toBeTruthy();
    });

    it('should extend the search input when clicked', function () {
      var _createDriver3 = createDriver(_react2.default.createElement(_Search4.default, { options: options, expandable: true })),
          driver = _createDriver3.driver,
          inputDriver = _createDriver3.inputDriver;

      expect(driver.isCollapsed()).toBeTruthy();
      inputDriver.click();
      expect(driver.isCollapsed()).toBeFalsy();
    });

    it('should be focused on the input after expanding the search component', function () {
      var _createDriver4 = createDriver(_react2.default.createElement(_Search4.default, { options: options, expandable: true })),
          inputDriver = _createDriver4.inputDriver;

      expect(inputDriver.isFocus()).toBeFalsy();
      inputDriver.click();
      expect(inputDriver.isFocus()).toBeTruthy();
    });

    it('should not collapse the input if the input has no value and blurred', function () {
      var _createDriver5 = createDriver(_react2.default.createElement(_Search4.default, { options: options, expandable: true })),
          inputDriver = _createDriver5.inputDriver,
          driver = _createDriver5.driver;

      inputDriver.click();
      inputDriver.enterText('wix');
      inputDriver.blur();
      expect(driver.isCollapsed()).toBeFalsy();
    });

    it('should collapse the input if the input has no value and blurred', function () {
      var _createDriver6 = createDriver(_react2.default.createElement(_Search4.default, { options: options, expandable: true })),
          inputDriver = _createDriver6.inputDriver,
          driver = _createDriver6.driver;

      inputDriver.click();
      inputDriver.blur();
      expect(driver.isCollapsed()).toBeTruthy();
    });

    it('should have non-collapsed input when expandaple=true and the input has initial value', function () {
      var _createDriver7 = createDriver(_react2.default.createElement(_Search4.default, { options: options, expandable: true, defaultValue: 'Test' })),
          driver = _createDriver7.driver;

      expect(driver.isExpandable()).toBeTruthy();
      expect(driver.isCollapsed()).toBeFalsy();
    });

    it('should not be collapsed by default', function () {
      var _createDriver8 = createDriver(_react2.default.createElement(_Search4.default, { options: options })),
          driver = _createDriver8.driver,
          inputDriver = _createDriver8.inputDriver;

      expect(driver.isExpandable()).toBeFalsy();
      expect(driver.isCollapsed()).toBeFalsy();
      inputDriver.click();
      expect(driver.isCollapsed()).toBeFalsy();
    });
    it('should not be collapsed when specified with autoFocus', function () {
      var _createDriver9 = createDriver(_react2.default.createElement(_Search4.default, { expandable: true, autoFocus: true, options: options })),
          driver = _createDriver9.driver;

      expect(driver.isExpandable()).toBeTruthy();
      expect(driver.isCollapsed()).toBeFalsy();
    });
  });
});

describe('Testkits', function () {
  it('Using ReactTestUtils testkit', function () {
    expect((0, _testkitSanity.isTestkitExists)(_react2.default.createElement(_Search4.default, { options: options }), _testkit.searchTestkitFactory)).toBe(true);
  });

  it('Using Enzyme testkit', function () {
    expect((0, _testkitSanity.isEnzymeTestkitExists)(_react2.default.createElement(_Search4.default, { options: options }), _enzyme.searchTestkitFactory, _enzyme2.mount)).toBe(true);
  });
});