HCBS - Routing By Page Id (#54)

Co-authored-by: Rocio De Santiago <rociodesantiago@CoformaSantiago.lan>

services/ui-src/src/components/accordions/AccordionItem.test.tsx

@@ -31,7 +31,7 @@ describe("Test AccordionItem", () => {
       const button = screen.getByRole("button", { name: "Expand" });
       await userEvent.click(button);
     });
-    expect(screen.getByRole("button", { name: "Collapse" }));
+    expect(screen.getByRole("button", { name: "Collapse" })).toBeVisible();
   });
 
   testA11y(accordionItemComponent);

services/ui-src/src/components/app/AppRoutes.tsx

@@ -1,16 +1,16 @@
 import { Navigate, Route, Routes } from "react-router-dom";
 import {
   AdminPage,
+  CreateReportOptions,
   HelpPage,
   HomePage,
   ProfilePage,
   DashboardPage,
   NotFoundPage,
   AdminBannerProvider,
   ExportedReportPage,
+  ReportPageWrapper,
 } from "components";
-import { CreateReportOptions } from "components/pages/CreateReportOptions/CreateReportOptions";
-import { ReportPageWrapper } from "components/report/ReportPageWrapper";
 import { useStore } from "utils";
 
 export const AppRoutes = () => {
@@ -34,14 +34,15 @@ export const AppRoutes = () => {
             element={<DashboardPage />}
           />
           <Route path="/report/QM" element={<CreateReportOptions />} />
-          <Route
-            path="/report/:reportType/:state/:reportId"
-            element={<ReportPageWrapper />}
-          />
           <Route
             path="/report/:reportType/:state/:reportId/export"
             element={<ExportedReportPage />}
           />
+          <Route
+            path="/report/:reportType/:state/:reportId/:pageId?"
+            element={<ReportPageWrapper />}
+          />
+          {/* TO DO: Load pageId by default? */}
         </Routes>
       </AdminBannerProvider>
     </main>

services/ui-src/src/components/cards/TemplateCard.test.tsx

@@ -54,7 +54,7 @@ describe("<TemplateCard />", () => {
       const templateCardLink = screen.getByText(qmTemplateVerbiage.link.text)!;
       await userEvent.click(templateCardLink);
       const expectedRoute = "/report/QM/MN";
-      await expect(mockUseNavigate).toHaveBeenCalledWith(expectedRoute);
+      expect(mockUseNavigate).toHaveBeenCalledWith(expectedRoute);
     });
   });
 

services/ui-src/src/components/index.ts

@@ -32,8 +32,8 @@ export { ExportedReportBanner } from "./export/ExportedReportBanner";
 export { ExportedReportWrapper } from "./export/ExportedReportWrapper";
 // fields
 export { RadioField } from "./fields/RadioField";
-export { TextField } from "./fields/TextField";
 export { DateField } from "./fields/DateField";
+export { TextField } from "./fields/TextField";
 // forms
 export { AdminBannerForm } from "./forms/AdminBannerForm";
 export { AdminDashSelector } from "./forms/AdminDashSelector";
@@ -42,10 +42,19 @@ export { LoginCognito } from "./logins/LoginCognito";
 export { LoginIDM } from "./logins/LoginIDM";
 // pages
 export { AdminPage } from "./pages/Admin/AdminPage";
+export { CreateReportOptions } from "./pages/CreateReportOptions/CreateReportOptions";
+export { ExportedReportPage } from "./pages/Export/ExportedReportPage";
 export { HelpPage } from "./pages/HelpPage/HelpPage";
-export { ProfilePage } from "./pages/Profile/ProfilePage";
 export { NotFoundPage } from "./pages/NotFound/NotFoundPage";
-export { ExportedReportPage } from "./pages/Export/ExportedReportPage";
+export { ProfilePage } from "./pages/Profile/ProfilePage";
+// report
+export { MeasureReplacementModal } from "./report/MeasureReplacementModal";
+export { Page } from "./report/Page";
+export { PraDisclosure } from "./report/PraDisclosure";
+export { ReportModal } from "./report/ReportModal";
+export { ReportPageWrapper } from "./report/ReportPageWrapper";
+export { Sidebar } from "./report/Sidebar";
+export { SubnavBar } from "./report/SubnavBar";
 // menus
 export { Menu } from "./menus/Menu";
 export { MenuOption } from "./menus/MenuOption";
@@ -56,6 +65,7 @@ export { AddEditReportModal } from "./modals/AddEditReportModal";
 export { PostLogoutRedirect } from "./PostLogoutRedirect/index";
 // tables
 export { Table } from "./tables/Table";
+export { TableStatusIcon } from "./tables/TableStatusIcon";
 // dashboard
 export { DashboardPage } from "./pages/Dashboard/DashboardPage";
 export { DashboardTable } from "./pages/Dashboard/DashboardTable";

services/ui-src/src/components/report/Elements.tsx

@@ -1,14 +1,14 @@
+import { useNavigate, useParams } from "react-router-dom";
 import { Button, Heading, Stack, Image, Text } from "@chakra-ui/react";
-import { useStore } from "utils";
 import {
   HeaderTemplate,
   SubHeaderTemplate,
   ParagraphTemplate,
   AccordionTemplate,
   ButtonLinkTemplate,
   PageElement,
-} from "../../types/report";
-import { TemplateCardAccordion } from "components/accordions/TemplateCardAccordion";
+} from "types";
+import { TemplateCardAccordion } from "components";
 import arrowLeftIcon from "assets/icons/arrows/icon_arrow_left_blue.png";
 
 export interface PageElementProps {
@@ -58,10 +58,14 @@ export const accordionElement = (props: PageElementProps) => {
 };
 
 export const buttonLinkElement = (props: PageElementProps) => {
+  const { reportType, state, reportId } = useParams();
+  const navigate = useNavigate();
   const button = props.element as ButtonLinkTemplate;
-  const { setCurrentPageId } = useStore();
+  const nav = () =>
+    navigate(`/report/${reportType}/${state}/${reportId}/${button.to}`);
+
   return (
-    <Button variant="return" onClick={() => setCurrentPageId(button.to)}>
+    <Button variant="return" onClick={() => nav()}>
       <Image src={arrowLeftIcon} alt="Arrow left" className="icon" />
       {button.label}
     </Button>

services/ui-src/src/components/report/MeasureTable.test.tsx

@@ -4,6 +4,7 @@ import { MeasureTableElement } from "./MeasureTable";
 import { mockUseStore } from "utils/testing/setupJest";
 import { useStore } from "utils/state/useStore";
 import { ElementType, PageElement } from "types";
+import { MemoryRouter } from "react-router-dom";
 
 jest.mock("utils/state/useStore");
 const mockedUseStore = useStore as jest.MockedFunction<typeof useStore>;
@@ -15,10 +16,12 @@ const mockedMeasureTableElement = {
 };
 
 const MeasureTableComponent = (
-  <MeasureTableElement
-    element={mockedMeasureTableElement as unknown as PageElement}
-    formkey={""}
-  ></MeasureTableElement>
+  <MemoryRouter>
+    <MeasureTableElement
+      element={mockedMeasureTableElement as unknown as PageElement}
+      formkey={""}
+    ></MeasureTableElement>
+  </MemoryRouter>
 );
 
 /* To do: add real test */

services/ui-src/src/components/report/MeasureTable.tsx

@@ -1,3 +1,4 @@
+import { useNavigate, useParams } from "react-router-dom";
 import {
   Button,
   Table,
@@ -9,24 +10,22 @@ import {
   Text,
   Link,
 } from "@chakra-ui/react";
-import { useStore } from "utils";
-import { MeasureReplacementModal } from "./MeasureReplacementModal";
+import { MeasureReplacementModal, TableStatusIcon } from "components";
 import {
   isMeasureTemplate,
   MeasurePageTemplate,
   MeasureTableTemplate,
-} from "../../types/report";
+} from "types";
+import { useStore } from "utils";
 import { PageElementProps } from "./Elements";
-import { TableStatusIcon } from "components/tables/TableStatusIcon";
 
 export const MeasureTableElement = (props: PageElementProps) => {
   const table = props.element as MeasureTableTemplate;
   const {
     report,
-    setMeasure,
+    // setMeasure,
     setModalComponent,
     setModalOpen,
-    setCurrentPageId,
   } = useStore();
   const measures = report?.pages.filter((page) =>
     isMeasureTemplate(page)
@@ -48,9 +47,14 @@ export const MeasureTableElement = (props: PageElementProps) => {
     setModalComponent(modal);
   };
 
-  const onEdit = (measure: MeasurePageTemplate) => {
-    setCurrentPageId(measure.id);
-    setMeasure(measure.cmit!);
+  const { reportType, state, reportId } = useParams();
+  const navigate = useNavigate();
+
+  // TO-DO: Where does cmit need to be set? Does it happen onEdit click?
+  const handleEditClick = (measureId: string) => {
+    const path = `/report/${reportType}/${state}/${reportId}/${measureId}`;
+    navigate(path);
+    // setMeasure(measure.cmit!);
   };
 
   // Build Rows
@@ -73,7 +77,8 @@ export const MeasureTableElement = (props: PageElementProps) => {
         </Td>
 
         <Td>
-          <Button variant="outline" onClick={() => onEdit(measure)}>
+          {/* TO-DO: Fix format of measure id */}
+          <Button variant="outline" onClick={() => handleEditClick(measure.id)}>
             Edit
           </Button>
         </Td>

services/ui-src/src/components/report/Page.test.tsx

@@ -1,11 +1,14 @@
-import { render } from "@testing-library/react";
+import { useNavigate, useParams } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/react";
 import { ElementType, PageElement } from "types/report";
-import { Page } from "./Page";
+import { useStore } from "utils";
 import { mockUseStore } from "utils/testing/setupJest";
-import { useStore } from "utils/state/useStore";
+import { Page } from "./Page";
 
 jest.mock("react-router-dom", () => ({
   useNavigate: jest.fn(),
+  useParams: jest.fn(),
 }));
 
 jest.mock("utils/state/useStore");
@@ -23,6 +26,14 @@ jest.mock("./StatusTable", () => {
   return { StatusTableElement: () => <div>Status Table</div> };
 });
 
+const mockNavigate = jest.fn();
+(useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+(useParams as jest.Mock).mockReturnValue({
+  reportType: "exampleReport",
+  state: "exampleState",
+  reportId: "123",
+});
+
 const elements: PageElement[] = [
   {
     type: ElementType.Header,
@@ -86,6 +97,31 @@ describe("Page Component", () => {
     const { container } = render(<Page elements={[element]} />);
     expect(container).not.toBeEmptyDOMElement();
   });
+
+  test("should render and navigate correctly for ButtonLink element", async () => {
+    render(
+      <Page
+        elements={[
+          {
+            type: ElementType.ButtonLink,
+            to: "report-page-id",
+            label: "click me",
+          },
+        ]}
+      />
+    );
+
+    // Button renders
+    const button = screen.getByRole("button", { name: /click me/i });
+    expect(button).toBeInTheDocument();
+
+    // Navigation
+    await userEvent.click(button);
+    expect(mockNavigate).toHaveBeenCalledWith(
+      "/report/exampleReport/exampleState/123/report-page-id"
+    );
+  });
+
   test("should not render if it is passed missing types", () => {
     // Page Element prevents us from doing this with typescript, but the real world may have other plans
     const badObject = { type: "unused element name" };

services/ui-src/src/components/report/ReportPageWrapper.test.tsx

@@ -1,4 +1,4 @@
-import { render, waitFor } from "@testing-library/react";
+import { screen, render, waitFor } from "@testing-library/react";
 import {
   ElementType,
   MeasurePageTemplate,
@@ -116,28 +116,31 @@ describe("ReportPageWrapper", () => {
       reportId: "QMNJ123",
     });
   });
-  test("should not render if missing params", () => {
+  test("should not render if missing params", async () => {
     mockUseParams.mockReturnValue({
       reportType: undefined,
       state: undefined,
       reportId: undefined,
     });
-    const { getByText } = render(<ReportPageWrapper />);
-    expect(getByText("bad params")).toBeTruthy(); // To be updated with real error page
+    render(<ReportPageWrapper />);
+    await waitFor(() => expect(mockGetReport).toHaveBeenCalled);
+    expect(screen.getByText("bad params")).toBeTruthy(); // To be updated with real error page
   });
-  test("should render Loading if report not loaded", () => {
+  test("should render Loading if report not loaded", async () => {
     mockGetReport.mockResolvedValueOnce(undefined);
-    const { getByText } = render(<ReportPageWrapper />);
-    expect(getByText("Loading")).toBeTruthy(); // To be updated with real loading page
+    render(<ReportPageWrapper />);
+    await waitFor(() => expect(mockGetReport).toHaveBeenCalled);
+    expect(screen.getByText("Loading")).toBeTruthy(); // To be updated with real loading page
   });
   test("should render if report exists", async () => {
-    const { queryAllByText, getByText } = render(<ReportPageWrapper />);
+    render(<ReportPageWrapper />);
+    await waitFor(() => expect(mockGetReport).toHaveBeenCalled);
 
     await waitFor(() => {
-      expect(queryAllByText("General Information")).toBeDefined();
+      expect(screen.queryAllByText("General Information")).toBeDefined();
     });
 
-    expect(getByText("Continue")).toBeTruthy();
-    expect(queryAllByText("General Information")[0]).toBeTruthy();
+    expect(screen.getByText("Continue")).toBeTruthy();
+    expect(screen.queryAllByText("General Information")[0]).toBeTruthy();
   });
 });