office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
70 lines (68 loc) • 4.72 kB
JavaScript
define(["require", "exports", "react", "react-dom", "react-addons-test-utils", "./BaseAutoFill", "../../../utilities/KeyCodes"], function (require, exports, React, ReactDOM, ReactTestUtils, BaseAutoFill_1, KeyCodes_1) {
"use strict";
var assert = chai.assert;
describe('BaseAutoFill', function () {
var autoFill;
var autoFillInput;
var baseNode = document.createElement('div');
document.body.appendChild(baseNode);
beforeEach(function () {
var component = ReactDOM.render(React.createElement(BaseAutoFill_1.BaseAutoFill, { ref: function (c) { return autoFill = c; }, suggestedDisplayValue: 'hello' }), baseNode);
autoFillInput = ReactDOM.findDOMNode(component);
});
it('correctly autofills', function (done) {
ReactDOM.render(React.createElement(BaseAutoFill_1.BaseAutoFill, { ref: function (c) { return autoFill = c; }, onInputValueChange: function (text) {
assert(text === 'hel', 'text was ' + text);
assert(autoFill.value === 'hel', 'autoFill value was ' + autoFill.value);
done();
}, suggestedDisplayValue: 'hello' }), baseNode);
autoFillInput.value = 'hel';
ReactTestUtils.Simulate.change(autoFillInput);
ReactDOM.render(React.createElement(BaseAutoFill_1.BaseAutoFill, { ref: function (c) { return autoFill = c; }, onInputValueChange: function (text) {
assert(text === 'hel', 'text was ' + text);
assert(autoFill.value === 'hel', 'autoFill value was ' + autoFill.value);
done();
}, suggestedDisplayValue: 'hello' }), baseNode);
assert(autoFill.inputElement.value === 'hello');
});
it('does not autofill if suggestedDisplayValue does not match input', function (done) {
autoFillInput.value = 'hep';
ReactTestUtils.Simulate.change(autoFillInput);
ReactDOM.render(React.createElement(BaseAutoFill_1.BaseAutoFill, { ref: function (c) { return autoFill = c; }, onInputValueChange: function (text) {
assert(autoFill.value === 'hep', 'text was ' + autoFill.value);
assert(text === 'hep', 'text was ' + text);
assert(autoFill.inputElement.value === 'hep');
done();
}, suggestedDisplayValue: 'hello' }), baseNode);
ReactTestUtils.Simulate.change(autoFillInput);
});
it('does not autofill if left or right arrow has been pressed', function () {
autoFillInput.value = 'hel';
ReactTestUtils.Simulate.change(autoFillInput);
ReactDOM.render(React.createElement(BaseAutoFill_1.BaseAutoFill, { ref: function (c) { return autoFill = c; }, suggestedDisplayValue: 'hello' }), baseNode);
ReactTestUtils.Simulate.keyDown(autoFillInput, { keyCode: KeyCodes_1.KeyCodes.left, which: KeyCodes_1.KeyCodes.left });
// Because reacttestutils doesn't allow you to enter text normally we need to reset the autofillinput value to hel.
// If we don't the change event will cause the current input value, 'hello', to be set.
autoFillInput.value = 'hel';
ReactTestUtils.Simulate.change(autoFillInput);
assert(autoFill.value === 'hel', 'text was ' + autoFill.value);
assert(autoFill.inputElement.value === 'hel');
});
it('will autofill if keyCode up or down is pressed', function () {
autoFillInput.value = 'hel';
ReactTestUtils.Simulate.change(autoFillInput);
ReactDOM.render(React.createElement(BaseAutoFill_1.BaseAutoFill, { ref: function (c) { return autoFill = c; }, suggestedDisplayValue: 'hello' }), baseNode);
assert(autoFill.value === 'hel', 'text was ' + autoFill.value);
assert(autoFill.inputElement.value === 'hel');
ReactTestUtils.Simulate.keyDown(autoFillInput, { keyCode: KeyCodes_1.KeyCodes.left, which: KeyCodes_1.KeyCodes.left });
autoFillInput.value = 'hel';
ReactTestUtils.Simulate.keyDown(autoFillInput, { keyCode: KeyCodes_1.KeyCodes.up, which: KeyCodes_1.KeyCodes.up });
autoFillInput.value = 'hel';
ReactTestUtils.Simulate.change(autoFillInput);
ReactDOM.render(React.createElement(BaseAutoFill_1.BaseAutoFill, { ref: function (c) { return autoFill = c; }, suggestedDisplayValue: 'hello' }), baseNode);
assert(autoFill.value === 'hel');
assert(autoFill.inputElement.value === 'hello');
});
});
});
//# sourceMappingURL=BaseAutoFill.test.js.map