488 lines
31 KiB
JavaScript
488 lines
31 KiB
JavaScript
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = require("react");
|
||
|
|
var ReactTestUtils = require("react-dom/test-utils");
|
||
|
|
var useFocusRects_1 = require("./useFocusRects");
|
||
|
|
var FocusRectsProvider_1 = require("./FocusRectsProvider");
|
||
|
|
var setFocusVisibility_1 = require("./setFocusVisibility");
|
||
|
|
var KeyCodes_1 = require("./KeyCodes");
|
||
|
|
var keyboard_1 = require("./keyboard");
|
||
|
|
var enzyme_1 = require("enzyme");
|
||
|
|
describe('useFocusRects', function () {
|
||
|
|
var focusRects1;
|
||
|
|
var focusRects2;
|
||
|
|
var MockWindow = /** @class */ (function () {
|
||
|
|
function MockWindow() {
|
||
|
|
var _this = this;
|
||
|
|
this.classNames = [];
|
||
|
|
this.addEventListenerCallCount = 0;
|
||
|
|
this.removeEventListenerCallCount = 0;
|
||
|
|
this.eventListeners = {};
|
||
|
|
this.document = {
|
||
|
|
body: {
|
||
|
|
classList: {
|
||
|
|
contains: function (name) { return _this.classNames.indexOf(name) > -1; },
|
||
|
|
add: function (name) { return _this.classNames.indexOf(name) < 0 && _this.classNames.push(name); },
|
||
|
|
remove: function (name) {
|
||
|
|
return _this.classNames.indexOf(name) > -1 && _this.classNames.splice(_this.classNames.indexOf(name), 1);
|
||
|
|
},
|
||
|
|
toggle: function (name, val) {
|
||
|
|
var hasClass = _this.classNames.indexOf(name) > -1;
|
||
|
|
if (hasClass !== val) {
|
||
|
|
if (hasClass) {
|
||
|
|
_this.classNames.splice(_this.classNames.indexOf(name), 1);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_this.classNames.push(name);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
MockWindow.prototype.addEventListener = function (name, callback) {
|
||
|
|
this.eventListeners[name] = callback;
|
||
|
|
this.addEventListenerCallCount++;
|
||
|
|
};
|
||
|
|
MockWindow.prototype.removeEventListener = function (name, callback) {
|
||
|
|
if (this.eventListeners[name] === callback) {
|
||
|
|
this.eventListeners[name] = undefined;
|
||
|
|
this.removeEventListenerCallCount++;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
MockWindow.prototype.reset = function () {
|
||
|
|
this.classNames = [];
|
||
|
|
this.addEventListenerCallCount = 0;
|
||
|
|
this.removeEventListenerCallCount = 0;
|
||
|
|
this.eventListeners = {};
|
||
|
|
this.FabricConfig = undefined;
|
||
|
|
};
|
||
|
|
return MockWindow;
|
||
|
|
}());
|
||
|
|
var mockWindow = new MockWindow();
|
||
|
|
var mockTarget = {
|
||
|
|
ownerDocument: {
|
||
|
|
defaultView: mockWindow,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
var mockRefObject = { current: mockTarget };
|
||
|
|
var mockWindow2 = new MockWindow();
|
||
|
|
var mockTarget2 = {
|
||
|
|
ownerDocument: {
|
||
|
|
defaultView: mockWindow2,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
var mockRefObject2 = { current: mockTarget2 };
|
||
|
|
beforeEach(function () {
|
||
|
|
mockWindow.reset();
|
||
|
|
mockWindow2.reset();
|
||
|
|
});
|
||
|
|
describe('when attaching the classnames to the window body', function () {
|
||
|
|
it('can hint to show focus when you press a directional key', function () {
|
||
|
|
focusRects1 = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject }));
|
||
|
|
focusRects2 = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject }));
|
||
|
|
var eventListeners = mockWindow.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeDefined();
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.up });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow.classNames = [];
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.down });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow.classNames = [];
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.left });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow.classNames = [];
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.right });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow.classNames = [];
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.tab });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow.classNames = [];
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.pageUp });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow.classNames = [];
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.pageDown });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow.classNames = [];
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.home });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow.classNames = [];
|
||
|
|
mockWindow.eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.end });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(4);
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects1.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects2.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(4);
|
||
|
|
});
|
||
|
|
it('can hint to show focus when you press a directional key with multi-window', function () {
|
||
|
|
focusRects1 = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject }));
|
||
|
|
focusRects2 = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject2 }));
|
||
|
|
expect(mockWindow.eventListeners.keyup).toBeDefined();
|
||
|
|
mockWindow.eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.up });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow.classNames = [];
|
||
|
|
mockWindow.eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.down });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow2.classNames = [];
|
||
|
|
expect(mockWindow2.eventListeners.keyup).toBeDefined();
|
||
|
|
mockWindow2.eventListeners.keyup({ target: mockTarget2, which: KeyCodes_1.KeyCodes.left });
|
||
|
|
expect(mockWindow2.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow2.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
mockWindow2.classNames = [];
|
||
|
|
mockWindow2.eventListeners.keyup({ target: mockTarget2, which: KeyCodes_1.KeyCodes.right });
|
||
|
|
expect(mockWindow2.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow2.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(4);
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects1.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(4);
|
||
|
|
expect(mockWindow2.addEventListenerCallCount).toBe(4);
|
||
|
|
expect(mockWindow2.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects2.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow2.removeEventListenerCallCount).toBe(4);
|
||
|
|
});
|
||
|
|
it('no-ops when you press a non-directional key', function () {
|
||
|
|
focusRects1 = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject }));
|
||
|
|
focusRects2 = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject }));
|
||
|
|
var eventListeners = mockWindow.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeDefined();
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: 127 });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
// don't care about the state of the "hidden" class in this case
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(4);
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects1.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects2.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(4);
|
||
|
|
});
|
||
|
|
it('can hint to hide focus on mouse click', function () {
|
||
|
|
focusRects1 = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject }));
|
||
|
|
var eventListeners = mockWindow.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeDefined();
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.down });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
expect(eventListeners.mousedown).toBeDefined();
|
||
|
|
eventListeners.mousedown({ target: mockTarget });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeTruthy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(4);
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects1.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(4);
|
||
|
|
});
|
||
|
|
it('can hint to show focus when you press a custom directional key', function () {
|
||
|
|
focusRects1 = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject }));
|
||
|
|
focusRects2 = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject }));
|
||
|
|
var eventListeners = mockWindow.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeDefined();
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.f6 });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
// don't care about the state of the "hidden" class in this case
|
||
|
|
(0, keyboard_1.addDirectionalKeyCode)(KeyCodes_1.KeyCodes.f6);
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.f6 });
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeTruthy();
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(4);
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects1.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects2.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(4);
|
||
|
|
(0, keyboard_1.removeDirectionalKeyCode)(KeyCodes_1.KeyCodes.f6);
|
||
|
|
});
|
||
|
|
it('can disable focus rects', function () {
|
||
|
|
mockWindow.FabricConfig = {
|
||
|
|
disableFocusRects: true,
|
||
|
|
};
|
||
|
|
var focusRect = (0, enzyme_1.mount)(React.createElement(useFocusRects_1.FocusRects, { rootRef: mockRefObject }));
|
||
|
|
var eventListeners = mockWindow.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeUndefined();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(0);
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRect.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
describe('when attaching the classnames to the a provider element', function () {
|
||
|
|
var classNames = [];
|
||
|
|
var addEventListenerCallCount = 0;
|
||
|
|
var removeEventListenerCallCount = 0;
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
var MockProvider = React.forwardRef(function (props, ref) {
|
||
|
|
var _a = React.useState({}), eventListeners = _a[0], setEventListeners = _a[1];
|
||
|
|
var addEventListener = React.useCallback(function (name, callback) {
|
||
|
|
setEventListeners(function (currEventListeners) {
|
||
|
|
currEventListeners[name] = callback;
|
||
|
|
return currEventListeners;
|
||
|
|
});
|
||
|
|
addEventListenerCallCount++;
|
||
|
|
}, []);
|
||
|
|
var removeEventListener = React.useCallback(function (name, callback) {
|
||
|
|
if (eventListeners[name] === callback) {
|
||
|
|
setEventListeners(function (currEventListeners) {
|
||
|
|
currEventListeners[name] = undefined;
|
||
|
|
return currEventListeners;
|
||
|
|
});
|
||
|
|
removeEventListenerCallCount++;
|
||
|
|
}
|
||
|
|
}, [eventListeners]);
|
||
|
|
React.useImperativeHandle(ref, function () { return ({
|
||
|
|
addEventListener: addEventListener,
|
||
|
|
removeEventListener: removeEventListener,
|
||
|
|
eventListeners: eventListeners,
|
||
|
|
classList: {
|
||
|
|
add: function (name) {
|
||
|
|
if (classNames.indexOf(name) < 0) {
|
||
|
|
classNames.push(name);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
contains: function (name) { return classNames.indexOf(name) > -1; },
|
||
|
|
remove: function (name) {
|
||
|
|
if (classNames.indexOf(name) > -1) {
|
||
|
|
classNames.splice(classNames.indexOf(name), 1);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}); }, [addEventListener, eventListeners, removeEventListener]);
|
||
|
|
return React.createElement("div", null, props.children);
|
||
|
|
});
|
||
|
|
var FocusRectsWithProvider = function (_a) {
|
||
|
|
var providerRef = _a.providerRef, rootRef = _a.rootRef;
|
||
|
|
return (React.createElement(FocusRectsProvider_1.FocusRectsProvider, { providerRef: providerRef },
|
||
|
|
React.createElement(MockProvider, { ref: providerRef },
|
||
|
|
React.createElement(useFocusRects_1.FocusRects, { rootRef: rootRef }))));
|
||
|
|
};
|
||
|
|
beforeEach(function () {
|
||
|
|
classNames = [];
|
||
|
|
addEventListenerCallCount = 0;
|
||
|
|
removeEventListenerCallCount = 0;
|
||
|
|
});
|
||
|
|
it('can hint to show focus when you press a directional key', function () {
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
var providerRef = React.createRef();
|
||
|
|
focusRects1 = (0, enzyme_1.mount)(React.createElement(FocusRectsWithProvider, { providerRef: providerRef, rootRef: mockRefObject }));
|
||
|
|
var providerElem = providerRef.current;
|
||
|
|
var eventListeners = providerElem.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeDefined();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.up });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
classNames = [];
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.down });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.left });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.right });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.tab });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.pageUp });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.pageDown });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.home });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.end });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(0);
|
||
|
|
expect(addEventListenerCallCount).toBe(4);
|
||
|
|
expect(removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects1.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
expect(removeEventListenerCallCount).toBe(4);
|
||
|
|
});
|
||
|
|
it('no-ops when you press a non-directional key', function () {
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
var providerRef = React.createRef();
|
||
|
|
focusRects1 = (0, enzyme_1.mount)(React.createElement(FocusRectsWithProvider, { providerRef: providerRef, rootRef: mockRefObject }));
|
||
|
|
var providerElem = providerRef.current;
|
||
|
|
var eventListeners = providerElem.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeDefined();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: 127 });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeFalsy();
|
||
|
|
// don't care about the state of the "hidden" class in this case
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(0);
|
||
|
|
expect(addEventListenerCallCount).toBe(4);
|
||
|
|
expect(removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects1.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
expect(removeEventListenerCallCount).toBe(4);
|
||
|
|
});
|
||
|
|
it('can hint to hide focus on mouse click', function () {
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
var providerRef = React.createRef();
|
||
|
|
focusRects1 = (0, enzyme_1.mount)(React.createElement(FocusRectsWithProvider, { providerRef: providerRef, rootRef: mockRefObject }));
|
||
|
|
var providerElem = providerRef.current;
|
||
|
|
var eventListeners = providerElem.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeDefined();
|
||
|
|
expect(eventListeners.mousedown).toBeDefined();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.down });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.mousedown({ target: mockTarget });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeTruthy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeFalsy();
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(0);
|
||
|
|
expect(addEventListenerCallCount).toBe(4);
|
||
|
|
expect(removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects1.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
expect(removeEventListenerCallCount).toBe(4);
|
||
|
|
});
|
||
|
|
it('can hint to show focus when you press a custom directional key', function () {
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
var providerRef = React.createRef();
|
||
|
|
focusRects1 = (0, enzyme_1.mount)(React.createElement(FocusRectsWithProvider, { providerRef: providerRef, rootRef: mockRefObject }));
|
||
|
|
var providerElem = providerRef.current;
|
||
|
|
var eventListeners = providerElem.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeDefined();
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.f6 });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeFalsy();
|
||
|
|
// don't care about the state of the "hidden" class in this case
|
||
|
|
(0, keyboard_1.addDirectionalKeyCode)(KeyCodes_1.KeyCodes.f6);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes_1.KeyCodes.f6 });
|
||
|
|
});
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeTruthy();
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(0);
|
||
|
|
expect(addEventListenerCallCount).toBe(4);
|
||
|
|
expect(removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRects1.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
expect(removeEventListenerCallCount).toBe(4);
|
||
|
|
(0, keyboard_1.removeDirectionalKeyCode)(KeyCodes_1.KeyCodes.f6);
|
||
|
|
});
|
||
|
|
it('can disable focus rects', function () {
|
||
|
|
mockWindow.FabricConfig = {
|
||
|
|
disableFocusRects: true,
|
||
|
|
};
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
var providerRef = React.createRef();
|
||
|
|
var focusRect = (0, enzyme_1.mount)(React.createElement(FocusRectsWithProvider, { providerRef: providerRef, rootRef: mockRefObject }));
|
||
|
|
var providerElem = providerRef.current;
|
||
|
|
var eventListeners = providerElem.eventListeners;
|
||
|
|
expect(eventListeners.keyup).toBeUndefined();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusHiddenClassName) > -1).toBeFalsy();
|
||
|
|
expect(mockWindow.classNames.indexOf(setFocusVisibility_1.IsFocusVisibleClassName) > -1).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusHiddenClassName)).toBeFalsy();
|
||
|
|
expect(providerElem.classList.contains(setFocusVisibility_1.IsFocusVisibleClassName)).toBeFalsy();
|
||
|
|
expect(mockWindow.addEventListenerCallCount).toBe(0);
|
||
|
|
expect(addEventListenerCallCount).toBe(0);
|
||
|
|
expect(removeEventListenerCallCount).toBe(0);
|
||
|
|
ReactTestUtils.act(function () {
|
||
|
|
focusRect.unmount();
|
||
|
|
});
|
||
|
|
expect(mockWindow.removeEventListenerCallCount).toBe(0);
|
||
|
|
expect(removeEventListenerCallCount).toBe(0);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=useFocusRects.test.js.map
|