Add tests

- extend dispatchMockEvent test helper to support both keyCode and code
- duplicate two tests to cover the KeyboardEvent.code logic via escKeyDownWithCode and tabKeyDownWithCode

Author: robinmetral

specs/Modal.events.spec.js

@@ -11,7 +11,9 @@ import {
   mouseDownAt,
   mouseUpAt,
   escKeyDown,
+  escKeyDownWithCode,
   tabKeyDown,
+  tabKeyDownWithCode,
   withModal,
   withElementCollector,
   createHTMLElement
@@ -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", () => {
@@ -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", () => {

specs/helper.js

@@ -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.
  */