486 lines
28 KiB
JavaScript
486 lines
28 KiB
JavaScript
import * as React from 'react';
|
|
import * as ReactTestUtils from 'react-dom/test-utils';
|
|
import { FocusRects } from './useFocusRects';
|
|
import { FocusRectsProvider } from './FocusRectsProvider';
|
|
import { IsFocusHiddenClassName, IsFocusVisibleClassName } from './setFocusVisibility';
|
|
import { KeyCodes } from './KeyCodes';
|
|
import { addDirectionalKeyCode, removeDirectionalKeyCode } from './keyboard';
|
|
import { mount } from '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 = mount(React.createElement(FocusRects, { rootRef: mockRefObject }));
|
|
focusRects2 = mount(React.createElement(FocusRects, { rootRef: mockRefObject }));
|
|
var eventListeners = mockWindow.eventListeners;
|
|
expect(eventListeners.keyup).toBeDefined();
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.up });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow.classNames = [];
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.down });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow.classNames = [];
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.left });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow.classNames = [];
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.right });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow.classNames = [];
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.tab });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow.classNames = [];
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.pageUp });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow.classNames = [];
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.pageDown });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow.classNames = [];
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.home });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow.classNames = [];
|
|
mockWindow.eventListeners.keyup({ target: mockTarget, which: KeyCodes.end });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(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 = mount(React.createElement(FocusRects, { rootRef: mockRefObject }));
|
|
focusRects2 = mount(React.createElement(FocusRects, { rootRef: mockRefObject2 }));
|
|
expect(mockWindow.eventListeners.keyup).toBeDefined();
|
|
mockWindow.eventListeners.keyup({ target: mockTarget, which: KeyCodes.up });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow.classNames = [];
|
|
mockWindow.eventListeners.keyup({ target: mockTarget, which: KeyCodes.down });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow2.classNames = [];
|
|
expect(mockWindow2.eventListeners.keyup).toBeDefined();
|
|
mockWindow2.eventListeners.keyup({ target: mockTarget2, which: KeyCodes.left });
|
|
expect(mockWindow2.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow2.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
mockWindow2.classNames = [];
|
|
mockWindow2.eventListeners.keyup({ target: mockTarget2, which: KeyCodes.right });
|
|
expect(mockWindow2.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow2.classNames.indexOf(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 = mount(React.createElement(FocusRects, { rootRef: mockRefObject }));
|
|
focusRects2 = mount(React.createElement(FocusRects, { rootRef: mockRefObject }));
|
|
var eventListeners = mockWindow.eventListeners;
|
|
expect(eventListeners.keyup).toBeDefined();
|
|
eventListeners.keyup({ target: mockTarget, which: 127 });
|
|
expect(mockWindow.classNames.indexOf(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 = mount(React.createElement(FocusRects, { rootRef: mockRefObject }));
|
|
var eventListeners = mockWindow.eventListeners;
|
|
expect(eventListeners.keyup).toBeDefined();
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.down });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeTruthy();
|
|
expect(eventListeners.mousedown).toBeDefined();
|
|
eventListeners.mousedown({ target: mockTarget });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeTruthy();
|
|
expect(mockWindow.classNames.indexOf(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 = mount(React.createElement(FocusRects, { rootRef: mockRefObject }));
|
|
focusRects2 = mount(React.createElement(FocusRects, { rootRef: mockRefObject }));
|
|
var eventListeners = mockWindow.eventListeners;
|
|
expect(eventListeners.keyup).toBeDefined();
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.f6 });
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
// don't care about the state of the "hidden" class in this case
|
|
addDirectionalKeyCode(KeyCodes.f6);
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.f6 });
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(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);
|
|
removeDirectionalKeyCode(KeyCodes.f6);
|
|
});
|
|
it('can disable focus rects', function () {
|
|
mockWindow.FabricConfig = {
|
|
disableFocusRects: true,
|
|
};
|
|
var focusRect = mount(React.createElement(FocusRects, { rootRef: mockRefObject }));
|
|
var eventListeners = mockWindow.eventListeners;
|
|
expect(eventListeners.keyup).toBeUndefined();
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(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, { providerRef: providerRef },
|
|
React.createElement(MockProvider, { ref: providerRef },
|
|
React.createElement(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 = 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.up });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
|
|
classNames = [];
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.down });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.left });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.right });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.tab });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.pageUp });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.pageDown });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.home });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.end });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(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 = 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(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(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 = 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.down });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.mousedown({ target: mockTarget });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeTruthy();
|
|
expect(providerElem.classList.contains(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 = 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.f6 });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusVisibleClassName)).toBeFalsy();
|
|
// don't care about the state of the "hidden" class in this case
|
|
addDirectionalKeyCode(KeyCodes.f6);
|
|
ReactTestUtils.act(function () {
|
|
eventListeners.keyup({ target: mockTarget, which: KeyCodes.f6 });
|
|
});
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(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);
|
|
removeDirectionalKeyCode(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 = mount(React.createElement(FocusRectsWithProvider, { providerRef: providerRef, rootRef: mockRefObject }));
|
|
var providerElem = providerRef.current;
|
|
var eventListeners = providerElem.eventListeners;
|
|
expect(eventListeners.keyup).toBeUndefined();
|
|
expect(mockWindow.classNames.indexOf(IsFocusHiddenClassName) > -1).toBeFalsy();
|
|
expect(mockWindow.classNames.indexOf(IsFocusVisibleClassName) > -1).toBeFalsy();
|
|
expect(providerElem.classList.contains(IsFocusHiddenClassName)).toBeFalsy();
|
|
expect(providerElem.classList.contains(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
|