office-ui-fabric-react/lib/components/ExtendedPicker/BaseExtendedPicker.tests.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactTestUtils from 'react-dom/test-utils';
/* tslint:enable:no-unused-variable */
import * as renderer from 'react-test-renderer';
import { BaseExtendedPicker } from './BaseExtendedPicker';
import { BaseFloatingPicker, SuggestionsStore } from '../FloatingPicker/index';
import { BaseSelectedItemsList } from '../SelectedItemsList/index';
function onResolveSuggestions(text) {
    return [
        'black',
        'blue',
        'brown',
        'cyan',
        'green',
        'magenta',
        'mauve',
        'orange',
        'pink',
        'purple',
        'red',
        'rose',
        'violet',
        'white',
        'yellow'
    ]
        .filter(function (tag) { return tag.toLowerCase().indexOf(text.toLowerCase()) === 0; })
        .map(function (item) { return ({ key: item, name: item }); });
}
var BasePickerWithType = BaseFloatingPicker;
var BaseSelectedItemsListWithType = BaseSelectedItemsList;
var basicSuggestionRenderer = function (props) {
    return React.createElement("div", null,
        " ",
        props.name,
        " ");
};
var basicItemRenderer = function (props) {
    return React.createElement("div", null,
        " ",
        props.name,
        " ");
};
var basicRenderFloatingPicker = function (props) {
    return React.createElement(BasePickerWithType, tslib_1.__assign({}, props));
};
var basicRenderSelectedItemsList = function (props) {
    return React.createElement(BaseSelectedItemsListWithType, null);
};
var floatingPickerProps = {
    onResolveSuggestions: onResolveSuggestions,
    onRenderSuggestionsItem: basicSuggestionRenderer,
    suggestionsStore: new SuggestionsStore()
};
var selectedItemsListProps = {
    onRenderItem: basicItemRenderer
};
describe('Pickers', function () {
    describe('BasePicker', function () {
        var BaseExtendedPickerWithType = BaseExtendedPicker;
        it('renders BaseExtendedPicker correctly', function () {
            var component = renderer.create(React.createElement(BaseExtendedPickerWithType, { floatingPickerProps: floatingPickerProps, selectedItemsListProps: selectedItemsListProps, onRenderSelectedItems: basicRenderSelectedItemsList, onRenderFloatingPicker: basicRenderFloatingPicker }));
            var tree = component.toJSON();
            expect(tree).toMatchSnapshot();
        });
        it('force resolves to the first suggestion', function () {
            var root = document.createElement('div');
            document.body.appendChild(root);
            var picker = ReactDOM.render(React.createElement(BaseExtendedPickerWithType, { floatingPickerProps: floatingPickerProps, selectedItemsListProps: selectedItemsListProps, onRenderSelectedItems: basicRenderSelectedItemsList, onRenderFloatingPicker: basicRenderFloatingPicker }), root);
            if (picker.inputElement) {
                picker.inputElement.value = 'bl';
            }
            expect(picker.floatingPicker.current && picker.floatingPicker.current.suggestions.length).toBe(2);
            expect(picker.floatingPicker.current && picker.floatingPicker.current.suggestions[0].name).toBe('black');
            // Force resolve to the first suggestions
            picker.floatingPicker.current && picker.floatingPicker.current.forceResolveSuggestion();
            expect(picker.items.length).toBe(1);
            expect(picker.items[0].name).toBe('black');
            ReactDOM.unmountComponentAtNode(root);
        });
        it('Can hide and show picker', function () {
            var root = document.createElement('div');
            document.body.appendChild(root);
            var picker = ReactDOM.render(React.createElement(BaseExtendedPickerWithType, { floatingPickerProps: floatingPickerProps, selectedItemsListProps: selectedItemsListProps, onRenderSelectedItems: basicRenderSelectedItemsList, onRenderFloatingPicker: basicRenderFloatingPicker }), root);
            if (picker.inputElement) {
                picker.inputElement.value = 'bl';
            }
            expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeTruthy();
            picker.floatingPicker.current && picker.floatingPicker.current.hidePicker();
            expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeFalsy();
            picker.floatingPicker.current && picker.floatingPicker.current.showPicker();
            expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeTruthy();
            ReactDOM.unmountComponentAtNode(root);
        });
        it('Completes the suggestion', function () {
            var root = document.createElement('div');
            document.body.appendChild(root);
            var picker = ReactDOM.render(React.createElement(BaseExtendedPickerWithType, { floatingPickerProps: floatingPickerProps, selectedItemsListProps: selectedItemsListProps, onRenderSelectedItems: basicRenderSelectedItemsList, onRenderFloatingPicker: basicRenderFloatingPicker }), root);
            if (picker.inputElement) {
                picker.inputElement.value = 'bl';
                ReactTestUtils.Simulate.keyDown(picker.inputElement, { which: 40 /* down */ });
            }
            picker.floatingPicker.current && picker.floatingPicker.current.completeSuggestion();
            expect(picker.selectedItemsList.current && picker.selectedItemsList.current.items.length).toBe(1);
            expect(picker.selectedItemsList.current && picker.selectedItemsList.current.items[0].name).toBe('blue');
            ReactDOM.unmountComponentAtNode(root);
        });
    });
});
//# sourceMappingURL=BaseExtendedPicker.tests.js.map