office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
266 lines (264 loc) • 15.3 kB
JavaScript
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", 'react', 'react-dom', 'react-addons-test-utils', '../../utilities/KeyCodes', './index'], function (require, exports, React, ReactDOM, ReactTestUtils, KeyCodes_1, index_1) {
"use strict";
var assert = chai.assert;
var _lastFocusedElement;
function _onFocus(ev) {
_lastFocusedElement = ev.target;
}
describe('FocusZone', function () {
it('can use arrows vertically', function () {
var component = ReactTestUtils.renderIntoDocument(React.createElement("div", __assign({}, { onFocusCapture: _onFocus }),
React.createElement(index_1.FocusZone, {direction: index_1.FocusZoneDirection.vertical},
React.createElement("button", {className: 'a'}, "a"),
React.createElement("button", {className: 'b'}, "b"),
React.createElement("button", {className: 'c'}, "c"))
));
var focusZone = ReactDOM.findDOMNode(component).firstChild;
var buttonA = focusZone.querySelector('.a');
var buttonB = focusZone.querySelector('.b');
var buttonC = focusZone.querySelector('.c');
// Assign bounding locations to buttons.
buttonA.getBoundingClientRect = function () { return ({
top: 0, bottom: 30,
left: 0, right: 100,
width: 100,
height: 30
}); };
buttonA.isVisible = true;
buttonA.focus = function () { return ReactTestUtils.Simulate.focus(buttonA); };
buttonB.getBoundingClientRect = function () { return ({
top: 30, bottom: 60,
left: 0, right: 100,
width: 100,
height: 30
}); };
buttonB.isVisible = true;
buttonB.focus = function () { return ReactTestUtils.Simulate.focus(buttonB); };
buttonC.getBoundingClientRect = function () { return ({
top: 60, bottom: 90,
left: 0, right: 100,
width: 100,
height: 30
}); };
buttonC.isVisible = true;
buttonC.focus = function () { return ReactTestUtils.Simulate.focus(buttonC); };
// Focus the first button.
ReactTestUtils.Simulate.focus(buttonA);
assert(_lastFocusedElement === buttonA, 'buttonA was not focused');
// Pressing down should go to b.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.down });
assert(_lastFocusedElement === buttonB, 'pressing down did not focus b');
// Pressing down should go to c.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.down });
assert(_lastFocusedElement === buttonC, 'pressing down did not focus c');
// Pressing down should stay on c.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.down });
assert(_lastFocusedElement === buttonC, 'pressing down again did not stay on c');
// Pressing up should go to b.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.up });
assert(_lastFocusedElement === buttonB, 'pressing up did not focus b');
// Pressing up should go to a.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.up });
assert(_lastFocusedElement === buttonA, 'pressing up did not focus a');
// Pressing up should stay on a.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.up });
assert(_lastFocusedElement === buttonA, 'pressing up again did not stay on a');
// Click on c to focus it.
ReactTestUtils.Simulate.focus(buttonC);
assert(_lastFocusedElement === buttonC, 'buttonC was not focused');
// Pressing up should move to b.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.up });
assert(_lastFocusedElement === buttonB, 'pressing up after clicking on c did not focus b');
// Test that pressing horizontal buttons don't move focus.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.left });
assert(_lastFocusedElement === buttonB, 'pressing left did not keep focus on b');
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.right });
assert(_lastFocusedElement === buttonB, 'pressing right did not keep focus on b');
// Press home should go to the first target.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.home });
assert(_lastFocusedElement === buttonA, 'pressing home did not move focus to a');
// // Press end should go to the last target.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.end });
assert(_lastFocusedElement === buttonC, 'pressing end did not move focus to c');
});
it('can use arrows horizontally', function () {
var component = ReactTestUtils.renderIntoDocument(React.createElement("div", __assign({}, { onFocusCapture: _onFocus }),
React.createElement(index_1.FocusZone, {direction: index_1.FocusZoneDirection.horizontal},
React.createElement("button", {className: 'a'}, "a"),
React.createElement("button", {className: 'b'}, "b"),
React.createElement("button", {className: 'c'}, "c"))
));
var focusZone = ReactDOM.findDOMNode(component).firstChild;
var buttonA = focusZone.querySelector('.a');
var buttonB = focusZone.querySelector('.b');
var buttonC = focusZone.querySelector('.c');
// Assign bounding locations to buttons.
buttonA.getBoundingClientRect = function () { return ({
left: 0, right: 30,
top: 0, bottom: 100,
width: 30,
height: 100
}); };
buttonA.isVisible = true;
buttonA.focus = function () { return ReactTestUtils.Simulate.focus(buttonA); };
buttonB.getBoundingClientRect = function () { return ({
left: 30, right: 60,
top: 0, bottom: 100,
width: 30,
height: 100
}); };
buttonB.isVisible = true;
buttonB.focus = function () { return ReactTestUtils.Simulate.focus(buttonB); };
buttonC.getBoundingClientRect = function () { return ({
left: 60, right: 90,
top: 0, bottom: 100,
width: 30,
height: 100
}); };
buttonC.isVisible = true;
buttonC.focus = function () { return ReactTestUtils.Simulate.focus(buttonC); };
// Focus the first button.
ReactTestUtils.Simulate.focus(buttonA);
assert(_lastFocusedElement === buttonA, 'buttonA was not focused');
// Pressing right should go to b.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.right });
assert(_lastFocusedElement === buttonB, 'pressing right did not focus b');
// Pressing right should go to c.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.right });
assert(_lastFocusedElement === buttonC, 'pressing right did not focus c');
// Pressing right should stay on c.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.right });
assert(_lastFocusedElement === buttonC, 'pressing right again did not stay on c');
// Pressing left should go to b.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.left });
assert(_lastFocusedElement === buttonB, 'pressing left did not focus b');
// Pressing left should go to a.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.left });
assert(_lastFocusedElement === buttonA, 'pressing left did not focus a');
// Pressing left should stay on a.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.left });
assert(_lastFocusedElement === buttonA, 'pressing left again did not stay on a');
// Click on c to focus it.
ReactTestUtils.Simulate.focus(buttonC);
assert(_lastFocusedElement === buttonC, 'buttonC was not focused');
// Pressing left should move to b.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.left });
assert(_lastFocusedElement === buttonB, 'pressing left after clicking on c did not focus b');
// Test that pressing vertical buttons don't move focus.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.up });
assert(_lastFocusedElement === buttonB, 'pressing up did not keep focus on b');
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.down });
assert(_lastFocusedElement === buttonB, 'pressing down did not keep focus on b');
// Press home should go to the first target.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.home });
assert(_lastFocusedElement === buttonA, 'pressing home did not move focus to a');
// // Press end should go to the last target.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.end });
assert(_lastFocusedElement === buttonC, 'pressing end did not move focus to c');
});
it('can use arrows bidirectionally', function () {
var component = ReactTestUtils.renderIntoDocument(React.createElement("div", __assign({}, { onFocusCapture: _onFocus }),
React.createElement(index_1.FocusZone, null,
React.createElement("button", {className: 'a'}, "a"),
React.createElement("button", {className: 'b'}, "b"),
React.createElement("button", {className: 'c'}, "c"),
React.createElement("button", {className: 'hidden'}, "hidden"),
React.createElement("button", {className: 'd'}, "d"),
React.createElement("button", {className: 'e'}, "e"))
));
var focusZone = ReactDOM.findDOMNode(component).firstChild;
var buttonA = focusZone.querySelector('.a');
var buttonB = focusZone.querySelector('.b');
var buttonC = focusZone.querySelector('.c');
var hiddenButton = focusZone.querySelector('.hidden');
var buttonD = focusZone.querySelector('.d');
var buttonE = focusZone.querySelector('.e');
// Set up a grid like so:
// A B
// C hiddenButton
// D E
//
// We will iterate from A to B, press down to skip hidden and go to C,
// down again to E, left to D, then back up to A.
buttonA.getBoundingClientRect = function () { return ({
left: 0, right: 20,
top: 0, bottom: 20,
width: 20,
height: 20
}); };
buttonA.isVisible = true;
buttonA.focus = function () { return ReactTestUtils.Simulate.focus(buttonA); };
buttonB.getBoundingClientRect = function () { return ({
left: 20, right: 40,
top: 0, bottom: 20,
width: 20,
height: 20
}); };
buttonB.isVisible = true;
buttonB.focus = function () { return ReactTestUtils.Simulate.focus(buttonB); };
buttonC.getBoundingClientRect = function () { return ({
left: 0, right: 20,
top: 20, bottom: 40,
width: 20,
height: 20
}); };
buttonC.isVisible = true;
buttonC.focus = function () { return ReactTestUtils.Simulate.focus(buttonC); };
// hidden button should be ignored.
hiddenButton.getBoundingClientRect = function () { return ({
left: 2, right: 40,
top: 20, bottom: 40,
width: 20,
height: 20
}); };
hiddenButton.hidden = true;
hiddenButton.focus = function () { return ReactTestUtils.Simulate.focus(hiddenButton); };
buttonD.getBoundingClientRect = function () { return ({
left: 0, right: 20,
top: 40, bottom: 60,
width: 20,
height: 20
}); };
buttonD.isVisible = true;
buttonD.focus = function () { return ReactTestUtils.Simulate.focus(buttonD); };
buttonE.getBoundingClientRect = function () { return ({
left: 20, right: 40,
top: 40, bottom: 60,
width: 20,
height: 20
}); };
buttonE.isVisible = true;
buttonE.focus = function () { return ReactTestUtils.Simulate.focus(buttonE); };
// Focus the first button.
ReactTestUtils.Simulate.focus(buttonA);
assert(_lastFocusedElement === buttonA, 'buttonA was not focused');
// Pressing right should go to b.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.right });
assert(_lastFocusedElement === buttonB, 'pressing right did not focus b');
// Pressing down should go to c.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.down });
assert(_lastFocusedElement === buttonC, 'pressing down did not focus c');
// Pressing down should go to e.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.down });
assert(_lastFocusedElement === buttonE, 'pressing down did not focus e');
// Pressing left should go to d.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.left });
assert(_lastFocusedElement === buttonD, 'pressing left did not focus d');
// Pressing up should go to c.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.up });
assert(_lastFocusedElement === buttonC, 'pressing up did not focus c');
// Pressing up should go to a.
ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes_1.KeyCodes.up });
assert(_lastFocusedElement === buttonA, 'pressing up did not focus a');
});
});
});
//# sourceMappingURL=FocusZone.test.js.map