Skip to content

Commit

Permalink
Add tests
Browse files Browse the repository at this point in the history
- extend dispatchMockEvent test helper to support both keyCode and code
- duplicate two tests to cover the KeyboardEvent.code logic via escKeyDownWithCode and tabKeyDownWithCode
  • Loading branch information
Robin Métral authored and diasbruno committed Oct 14, 2022
1 parent 742e9f5 commit 840a0f6
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 5 deletions.
38 changes: 38 additions & 0 deletions specs/Modal.events.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import {
mouseDownAt,
mouseUpAt,
escKeyDown,
escKeyDownWithCode,
tabKeyDown,
tabKeyDownWithCode,
withModal,
withElementCollector,
createHTMLElement
Expand Down Expand Up @@ -109,6 +111,23 @@ export default () => {
});
});

it("traps tab in the modal on shift + tab with KeyboardEvent.code", () => {
const topButton = <button>top</button>;
const bottomButton = <button>bottom</button>;
const modalContent = (
<div>
{topButton}
{bottomButton}
</div>
);
const props = { isOpen: true };
withModal(props, modalContent, modal => {
const content = mcontent(modal);
tabKeyDownWithCode(content, { shiftKey: true });
document.activeElement.textContent.should.be.eql("bottom");
});
});

describe("shouldCloseOnEsc", () => {
context("when true", () => {
it("should close on Esc key event", () => {
Expand All @@ -129,6 +148,25 @@ export default () => {
}
);
});

it("should close on Esc key event with KeyboardEvent.code", () => {
const requestCloseCallback = sinon.spy();
withModal(
{
isOpen: true,
shouldCloseOnEsc: true,
onRequestClose: requestCloseCallback
},
null,
modal => {
escKeyDownWithCode(mcontent(modal));
requestCloseCallback.called.should.be.ok();
// Check if event is passed to onRequestClose callback.
const event = requestCloseCallback.getCall(0).args[0];
event.should.be.ok();
}
);
});
});

context("when false", () => {
Expand Down
28 changes: 23 additions & 5 deletions specs/helper.js
Original file line number Diff line number Diff line change
Expand Up @@ -182,23 +182,41 @@ const dispatchMockEvent = eventCtor => (key, code) => (element, opts) =>
{},
{
key: key,
keyCode: code,
which: code
},
code,
opts
)
);

const dispatchMockKeyDownEvent = dispatchMockEvent(Simulate.keyDown);

/**
* Dispatch an 'esc' key down event from an element.
* @deprecated will be replaced by `escKeyDownWithCode` when `react-modal`
* drops support for React <18.
*
* Dispatch an 'esc' key down event using the legacy KeyboardEvent.keyCode.
*/
export const escKeyDown = dispatchMockKeyDownEvent("ESC", { keyCode: 27 });
/**
* Dispatch an 'esc' key down event.
*/
export const escKeyDownWithCode = dispatchMockKeyDownEvent("ESC", {
code: "Escape"
});
/**
* @deprecated will be replaced by `escKeyDownWithCode` when `react-modal`
* drops support for React <18.
*
* Dispatch a 'tab' key down event using the legacy KeyboardEvent.keyCode.
*/
export const escKeyDown = dispatchMockKeyDownEvent("ESC", 27);
export const tabKeyDown = dispatchMockKeyDownEvent("TAB", { keyCode: 9 });
/**
* Dispatch a 'tab' key down event from an element.
* Dispatch a 'tab' key down event.
*/
export const tabKeyDown = dispatchMockKeyDownEvent("TAB", 9);
export const tabKeyDownWithCode = dispatchMockKeyDownEvent("TAB", {
code: "Tab"
});
/**
* Dispatch a 'click' event at a node.
*/
Expand Down

0 comments on commit 840a0f6

Please sign in to comment.