office-ui-fabric-react/lib/components/pickers/AutoFill/BaseAutoFill.test.js

Reusable React components for building experiences for Office 365.

"use strict";
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var ReactDOM = require("react-dom");
var ReactTestUtils = require("react-addons-test-utils");
var BaseAutoFill_1 = require("./BaseAutoFill");
var KeyCodes_1 = require("../../../utilities/KeyCodes");
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