office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
80 lines (78 loc) • 3.9 kB
JavaScript
define(["require", "exports", "react", "react-dom", "react-addons-test-utils", "./index"], function (require, exports, React, ReactDOM, ReactTestUtils, index_1) {
"use strict";
/* tslint:enable:no-unused-variable */
var expect = chai.expect;
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 basicRenderer = function (props) {
return React.createElement("div", null,
" ",
props.item.name,
" ");
};
var basicSuggestionRenderer = function (props) {
return React.createElement("div", null,
" ",
props.name,
" ");
};
describe('Pickers', function () {
describe('BasePicker', function () {
var BasePickerWithType = index_1.BasePicker;
it('can provide custom renderers', function () {
var root = document.createElement('div');
document.body.appendChild(root);
var picker = ReactDOM.render(React.createElement(BasePickerWithType, { onResolveSuggestions: onResolveSuggestions, onRenderItem: function (props) { return React.createElement("div", { key: props.item.name }, basicRenderer(props)); }, onRenderSuggestionsItem: basicSuggestionRenderer }), root);
var input = document.querySelector('.ms-BasePicker-input');
input.focus();
input.value = 'bl';
ReactTestUtils.Simulate.change(input);
var suggestions = document.querySelector('.ms-Suggestions');
expect(suggestions).to.exist;
var suggestionOptions = document.querySelectorAll('.ms-Suggestions-item');
expect(suggestionOptions.length).to.be.equal(2, 'There were not 2 suggestions');
ReactTestUtils.Simulate.click(suggestionOptions[0]);
expect(picker.items.length).to.be.equal(1, 'There was not only 1 item selected');
expect(picker.items[0].name).to.be.equal('black', 'The selected item did not have the correct text');
ReactDOM.unmountComponentAtNode(root);
});
});
describe('TagPicker', function () {
it('can search for and select tags', function () {
var root = document.createElement('div');
document.body.appendChild(root);
var picker = ReactDOM.render(React.createElement(index_1.TagPicker, { onResolveSuggestions: onResolveSuggestions }), root);
var input = document.querySelector('.ms-BasePicker-input');
input.focus();
input.value = 'bl';
ReactTestUtils.Simulate.change(input);
var suggestions = document.querySelector('.ms-Suggestions');
expect(suggestions).to.exist;
var suggestionOptions = document.querySelectorAll('.ms-Suggestions-item');
expect(suggestionOptions.length).to.be.equal(2, 'There were not 2 suggestions');
ReactTestUtils.Simulate.click(suggestionOptions[0]);
expect(picker.items.length).to.be.equal(1, 'There was not only 1 item selected');
expect(picker.items[0].name).to.be.equal('black', 'The selected item did not have the correct text');
ReactDOM.unmountComponentAtNode(root);
});
});
});
});
//# sourceMappingURL=BasePicker.test.js.map