wix-style-react
Version:
wix-style-react
234 lines (189 loc) • 9.48 kB
JavaScript
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; };
import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import dropdownDriverFactory from './Dropdown.driver';
import Dropdown from './Dropdown';
import { dropdownTestkitFactory } from '../../testkit';
import { dropdownTestkitFactory as enzymeDropdownTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';
import { sleep } from 'wix-ui-test-utils/react-helpers';
import { createRendererWithDriver, cleanup } from '../../test/utils/unit';
var NewDropdown = function NewDropdown(props) {
return React.createElement(Dropdown, _extends({}, props, { upgrade: true }));
};
describe('Dropdown', function () {
var render = createRendererWithDriver(dropdownDriverFactory);
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: React.createElement(
'span',
{ style: { color: 'brown' } },
'Option 4'
) }];
};
afterEach(function () {
cleanup();
});
describe('Uncontrolled SelectedId', function () {
it('should select item with selectedId on init state', function () {
var _createDriver = createDriver(React.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(React.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(React.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(React.createElement(NewDropdown, { options: getOptions() })),
dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver,
inputDriver = _createDriver4.inputDriver;
inputDriver.click();
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
return sleep(200).then(function () {
inputDriver.click();
expect(dropdownLayoutDriver.isShown()).toBeFalsy();
});
});
it('should be read only', function () {
var _createDriver5 = createDriver(React.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(React.createElement(NewDropdown, { options: getOptions(), initialSelectedId: 0 })),
_driver = _render.driver,
rerender = _render.rerender;
var dropdownLayoutDriver = _driver.dropdownLayoutDriver;
expect(dropdownLayoutDriver.isOptionSelected(0)).toBeTruthy();
rerender(React.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(React.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(React.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(React.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(React.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(React.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(React.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(React.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(React.createElement(NewDropdown, { options: getOptions() })),
_driver = _render4.driver,
rerender = _render4.rerender;
var inputDriver = _driver.inputDriver;
inputDriver.enterText('foo');
expect(inputDriver.getValue()).toBe('foo');
rerender(React.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(ReactTestUtils.renderIntoDocument(React.createElement(
'div',
null,
React.createElement(NewDropdown, { dataHook: dataHook })
)));
var dropdownTestkit = 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 = mount(React.createElement(NewDropdown, { dataHook: dataHook }));
var dropdownTestkit = enzymeDropdownTestkitFactory({
wrapper: wrapper,
dataHook: dataHook
});
expect(dropdownTestkit.driver.exists()).toBeTruthy();
expect(dropdownTestkit.inputDriver.exists()).toBeTruthy();
expect(dropdownTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
});
});
});