split into 3 tests

Khan · Jan 28, 2025 · 4709f0b · 4709f0b
1 parent 88b44a5
commit 4709f0b
Showing 1 changed file with 69 additions and 11 deletions.
diff --git a/packages/wonder-blocks-popover/src/components/__tests__/focus-manager.test.tsx b/packages/wonder-blocks-popover/src/components/__tests__/focus-manager.test.tsx
@@ -178,7 +178,7 @@ describe("FocusManager", () => {
         expect(focusableElementInside).toHaveAttribute("tabIndex", "-1");
     });
 
-    it("should keep the original focusability of the internal elements when tabindex is set explicitly", async () => {
+    it("changeFocusabilityInsidePopover(true) should keep the original tabindex when explicitly set to 0", async () => {
         // Arrange
         const externalNodes = (
             <div>
@@ -196,10 +196,42 @@ describe("FocusManager", () => {
             <FocusManager anchorElement={anchorElementNode}>
                 <div>
                     <button tabIndex={0}>first focusable element inside</button>
+                </div>
+            </FocusManager>,
+        );
+
+        // Act
+        // focus on the previous element before the popover (anchor element)
+        anchorElementNode.focus();
+
+        const firstFocusableElementInside = await screen.findByText(
+            "first focusable element inside",
+        );
+
+        // Assert
+        expect(firstFocusableElementInside).toHaveAttribute("tabIndex", "0");
+    });
+
+    it("changeFocusabilityInsidePopover(true) should keep the original tabindex when explicitly set to -1", async () => {
+        // Arrange
+        const externalNodes = (
+            <div>
+                <button>Open popover</button>
+            </div>
+        );
+        render(externalNodes);
+
+        // get the anchor reference to be able pass it to the FocusManager
+        const anchorElementNode = await screen.findByRole("button", {
+            name: "Open popover",
+        });
+
+        render(
+            <FocusManager anchorElement={anchorElementNode}>
+                <div>
                     <button tabIndex={-1}>
-                        second focusable element inside
+                        {"first focusable(...?) element inside"}
                     </button>
-                    <button>third focusable element inside</button>
                 </div>
             </FocusManager>,
         );
@@ -209,18 +241,44 @@ describe("FocusManager", () => {
         anchorElementNode.focus();
 
         const firstFocusableElementInside = await screen.findByText(
-            "first focusable element inside",
+            "first focusable(...?) element inside",
         );
-        const secondFocusableElementInside = await screen.findByText(
-            "second focusable element inside",
+
+        // Assert
+        expect(firstFocusableElementInside).toHaveAttribute("tabIndex", "-1");
+    });
+
+    it("changeFocusabilityInsidePopover(true) should add tabindex of 0 when not set", async () => {
+        // Arrange
+        const externalNodes = (
+            <div>
+                <button>Open popover</button>
+            </div>
         );
-        const thirdFocusableElementInside = await screen.findByText(
-            "third focusable element inside",
+        render(externalNodes);
+
+        // get the anchor reference to be able pass it to the FocusManager
+        const anchorElementNode = await screen.findByRole("button", {
+            name: "Open popover",
+        });
+
+        render(
+            <FocusManager anchorElement={anchorElementNode}>
+                <div>
+                    <button>first focusable element inside</button>
+                </div>
+            </FocusManager>,
+        );
+
+        // Act
+        // focus on the previous element before the popover (anchor element)
+        anchorElementNode.focus();
+
+        const firstFocusableElementInside = await screen.findByText(
+            "first focusable element inside",
         );
 
         // Assert
-        expect(firstFocusableElementInside).toHaveAttribute("tabIndex", "0"); // explicit set to 0
-        expect(secondFocusableElementInside).toHaveAttribute("tabIndex", "-1"); // explicit set to -1
-        expect(thirdFocusableElementInside).toHaveAttribute("tabIndex", "0"); // not set, should default to 0
+        expect(firstFocusableElementInside).toHaveAttribute("tabIndex", "0");
     });
 });