fixed test

Author: jonathanwelch1-nhs

packages/cpt-ui/__tests__/EpsTabs.test.tsx

@@ -6,6 +6,7 @@ import {
   useLocation
 } from "react-router-dom"
 import {render, screen, waitFor} from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import "@testing-library/jest-dom"
 
 import EpsTabs, {TabHeader} from "@/components/EpsTabs"
@@ -15,8 +16,8 @@ function LocationIndicator() {
   return <div data-testid="current-path">{location.pathname}</div>
 }
 
-type HarnessProps = { variant?: "default" | "large" }
-function Harness({variant = "default"}: HarnessProps) {
+type HarnessProps = { variant?: "default" | "large"; includeQuery?: boolean }
+function Harness({variant = "default", includeQuery = false}: HarnessProps) {
   const location = useLocation()
   const tabHeaderArray: Array<TabHeader> = [
     {title: "(1)", link: "/prescription-list-current"},
@@ -26,12 +27,13 @@ function Harness({variant = "default"}: HarnessProps) {
 
   return (
     <EpsTabs
-      activeTabPath={location.pathname}
+      activeTabPath={includeQuery ? location.pathname + location.search : location.pathname}
       tabHeaderArray={tabHeaderArray}
       variant={variant}
     >
       <div>
         <input data-testid="dummy-input" />
+        <textarea data-testid="dummy-textarea" />
         <LocationIndicator />
         <div data-testid="panel-content">Panel</div>
       </div>
@@ -53,31 +55,31 @@ describe("EpsTabs", () => {
     expect(screen.getByTestId("current-path")).toHaveTextContent("/prescription-list-current")
 
     // ArrowRight to future
-    window.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowRight"}))
+    await userEvent.keyboard("{ArrowRight}")
     await waitFor(() => {
       expect(screen.getByTestId("current-path")).toHaveTextContent("/prescription-list-future")
     })
 
     // ArrowRight to past
-    window.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowRight"}))
+    await userEvent.keyboard("{ArrowRight}")
     await waitFor(() => {
       expect(screen.getByTestId("current-path")).toHaveTextContent("/prescription-list-past")
     })
 
     // ArrowRight at last stays on past
-    window.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowRight"}))
+    await userEvent.keyboard("{ArrowRight}")
     await waitFor(() => {
       expect(screen.getByTestId("current-path")).toHaveTextContent("/prescription-list-past")
     })
 
     // ArrowLeft goes back to future
-    window.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowLeft"}))
+    await userEvent.keyboard("{ArrowLeft}")
     await waitFor(() => {
       expect(screen.getByTestId("current-path")).toHaveTextContent("/prescription-list-future")
     })
   })
 
-  it("does not navigate when focus is inside an input", () => {
+  it("does not navigate when focus is inside an input", async () => {
     render(
       <MemoryRouter initialEntries={["/prescription-list-current"]}>
         <Routes>
@@ -89,8 +91,75 @@ describe("EpsTabs", () => {
     // Focus input then press ArrowRight – should not change tab
     const input = screen.getByTestId("dummy-input") as HTMLInputElement
     input.focus()
-    window.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowRight"}))
+    await userEvent.keyboard("{ArrowRight}")
+    expect(screen.getByTestId("current-path")).toHaveTextContent("/prescription-list-current")
+  })
+
+  it("does not navigate when focus is inside a textarea", async () => {
+    render(
+      <MemoryRouter initialEntries={["/prescription-list-current"]}>
+        <Routes>
+          <Route path="*" element={<Harness />} />
+        </Routes>
+      </MemoryRouter>
+    )
+
+    const textarea = screen.getByTestId("dummy-textarea") as HTMLTextAreaElement
+    textarea.focus()
+    await userEvent.keyboard("{ArrowRight}")
+    expect(screen.getByTestId("current-path")).toHaveTextContent("/prescription-list-current")
+  })
+
+  it("navigates correctly when activeTabPath includes a query string", async () => {
+    render(
+      <MemoryRouter initialEntries={["/prescription-list-current?nhsNumber=123456"]}>
+        <Routes>
+          <Route path="*" element={<Harness includeQuery />} />
+        </Routes>
+      </MemoryRouter>
+    )
+
+    // With query in activeTabPath, startsWith should still match and allow navigation
     expect(screen.getByTestId("current-path")).toHaveTextContent("/prescription-list-current")
+    await userEvent.keyboard("{ArrowRight}")
+    await waitFor(() => {
+      expect(screen.getByTestId("current-path")).toHaveTextContent("/prescription-list-future")
+    })
+  })
+
+  it("cleans up keydown listener on unmount", async () => {
+    const {unmount} = render(
+      <MemoryRouter initialEntries={["/prescription-list-current"]}>
+        <Routes>
+          <Route path="*" element={<Harness />} />
+        </Routes>
+      </MemoryRouter>
+    )
+
+    unmount()
+    // Dispatching events after unmount should not change the path
+    window.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowRight"}))
+    // Nothing to assert about path change here since component is unmounted;
+    // this test ensures no errors are thrown during cleanup.
+    expect(true).toBe(true)
+  })
+
+  it("sets aria-selected and tabIndex correctly for active/inactive tabs", () => {
+    render(
+      <MemoryRouter initialEntries={["/prescription-list-current"]}>
+        <Routes>
+          <Route path="*" element={<Harness />} />
+        </Routes>
+      </MemoryRouter>
+    )
+
+    const currentTab = screen.getByTestId("eps-tab-heading /prescription-list-current")
+    const futureTab = screen.getByTestId("eps-tab-heading /prescription-list-future")
+
+    expect(currentTab).toHaveAttribute("aria-selected", "true")
+    expect(currentTab).toHaveAttribute("tabIndex", "0")
+    expect(futureTab).toHaveAttribute("aria-selected", "false")
+    expect(futureTab).toHaveAttribute("tabIndex", "-1")
   })
 
   it("applies the large variant class", () => {

packages/cpt-ui/src/components/EpsTabs.tsx

@@ -38,7 +38,7 @@ export default function EpsTabs({
     }
     const tabs = tabHeaderArray
     const currentTabIndex = tabs.findIndex(
-      (tab) => tab.link.includes(activeTabPath)
+      (tab) => activeTabPath.startsWith(tab.link)
     )
 
     let newTabIndex = currentTabIndex
@@ -52,13 +52,13 @@ export default function EpsTabs({
       const newTab = tabs[newTabIndex]
       navigate(newTab.link)
     }
-  }, [navigate])
+  }, [navigate, tabHeaderArray, activeTabPath])
 
   useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown)
+    document.addEventListener("keydown", handleKeyDown)
 
     return () => {
-      window.removeEventListener("keydown", handleKeyDown)
+      document.removeEventListener("keydown", handleKeyDown)
     }
   }, [handleKeyDown])