From 840a0f6ca5f700d37a56d5d90faa58640ef56fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robin=20M=C3=A9tral?= <robin.metral@sumup.com>
Date: Fri, 24 Jun 2022 15:48:54 +0200
Subject: [PATCH] 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
---
 specs/Modal.events.spec.js | 38 ++++++++++++++++++++++++++++++++++++++
 specs/helper.js            | 28 +++++++++++++++++++++++-----
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/specs/Modal.events.spec.js b/specs/Modal.events.spec.js
index 0e61c1bf..8c9d5f2b 100644
--- a/specs/Modal.events.spec.js
+++ b/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", () => {
diff --git a/specs/helper.js b/specs/helper.js
index 9ff09c84..825b5510 100644
--- a/specs/helper.js
+++ b/specs/helper.js
@@ -182,9 +182,9 @@ const dispatchMockEvent = eventCtor => (key, code) => (element, opts) =>
       {},
       {
         key: key,
-        keyCode: code,
         which: code
       },
+      code,
       opts
     )
   );
@@ -192,13 +192,31 @@ const dispatchMockEvent = eventCtor => (key, code) => (element, 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.
  */