wix-style-react
Version:
wix-style-react
223 lines (173 loc) • 9.5 kB
JavaScript
import React from 'react';
import searchDriverFactory from './Search.driver';
import Search from './Search';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import { isTestkitExists, isEnzymeTestkitExists } from '../../test/utils/testkit-sanity';
import { searchTestkitFactory } from '../../testkit';
import { searchTestkitFactory as enzymeSearchTestkitFactory } from '../../testkit/enzyme';
import { makeControlled } from '../../test/utils';
import { mount } from 'enzyme';
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 = createDriverFactory(searchDriverFactory);
describe('Controlled', function () {
var ControlledSearch = makeControlled(Search);
it('should show search options if initial value passed and down-key pressed', function () {
var driver = createDriver(React.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(React.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(React.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(React.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(React.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(React.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(React.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(React.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(React.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(React.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(React.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(React.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(React.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(React.createElement(Search, { 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(React.createElement(Search, { 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(React.createElement(Search, { 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(React.createElement(Search, { 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(React.createElement(Search, { 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(React.createElement(Search, { 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(React.createElement(Search, { 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(React.createElement(Search, { 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(React.createElement(Search, { 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(isTestkitExists(React.createElement(Search, { options: options }), searchTestkitFactory)).toBe(true);
});
it('Using Enzyme testkit', function () {
expect(isEnzymeTestkitExists(React.createElement(Search, { options: options }), enzymeSearchTestkitFactory, mount)).toBe(true);
});
});