diff --git a/react-app/src/components/TimeoutModal/index.tsx b/react-app/src/components/TimeoutModal/index.tsx index 6be317f05..bf9a9e9bb 100644 --- a/react-app/src/components/TimeoutModal/index.tsx +++ b/react-app/src/components/TimeoutModal/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useGetUser } from "@/api"; import { Button, Dialog, @@ -7,12 +7,12 @@ import { DialogHeader, DialogTitle, } from "@/components"; +import { useCountdown, useIdle } from "@/hooks"; +import { DialogDescription } from "@radix-ui/react-dialog"; import { Auth } from "aws-amplify"; -import { useIdle, useCountdown } from "@/hooks"; -import { useGetUser } from "@/api"; import { intervalToDuration } from "date-fns"; import pluralize from "pluralize"; -import { DialogDescription } from "@radix-ui/react-dialog"; +import { useEffect, useState } from "react"; const TWENTY_MINS_IN_MILS = 1000 * 60 * 20; const TEN_MINS_IN_MILS = 60 * 10; diff --git a/react-app/src/main.tsx b/react-app/src/main.tsx index 1765de936..a414b9299 100644 --- a/react-app/src/main.tsx +++ b/react-app/src/main.tsx @@ -1,14 +1,13 @@ +import config from "@/config"; +import "@fontsource/open-sans"; +import { QueryClientProvider } from "@tanstack/react-query"; +import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; +import { asyncWithLDProvider } from "launchdarkly-react-client-sdk"; import React from "react"; import ReactDOM from "react-dom/client"; import { RouterProvider } from "react-router"; -import "@fontsource/open-sans"; import "./index.css"; import { queryClient, router } from "./router"; -import { QueryClientProvider } from "@tanstack/react-query"; -import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; -import { TimeoutModal } from "@/components"; -import config from "@/config"; -import { asyncWithLDProvider } from "launchdarkly-react-client-sdk"; const ldClientId = config.launchDarkly?.CLIENT_ID; if (ldClientId === undefined) { @@ -30,7 +29,6 @@ const initializeLaunchDarkly = async () => { - diff --git a/react-app/src/router.test.tsx b/react-app/src/router.test.tsx new file mode 100644 index 000000000..32300ed3c --- /dev/null +++ b/react-app/src/router.test.tsx @@ -0,0 +1,46 @@ +import { render, screen } from "@testing-library/react"; +import { createMemoryRouter, RouterProvider } from "react-router"; +import { describe, expect, it, vi } from "vitest"; +import { router } from "./router"; + +vi.mock(import("@/components"), async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + Layout: vi.fn(() =>
Mock Layout
), + TimeoutModal: vi.fn(() =>
Mock TimeoutModal
), + }; +}); + +vi.mock(import("@/features"), async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + Welcome: () =>
Mock Welcome
, + Dashboard: () =>
Mock Dashboard
, + dashboardLoader: vi.fn(), + loader: vi.fn(), + }; +}); + +describe("RoutesWithTimeout", () => { + it("should not render on `/faq` route", async () => { + const testRouter = createMemoryRouter(router.routes[0].children, { + initialEntries: ["/faq"], + }); + + render(); + + expect(screen.queryByText("Mock TimeoutModal")).not.toBeInTheDocument(); + }); + + it("should render on `/dashboard` route", async () => { + const testRouter = createMemoryRouter(router.routes[0].children, { + initialEntries: ["/dashboard"], + }); + + render(); + + expect(screen.getByText("Mock TimeoutModal")).toBeInTheDocument(); + }); +}); diff --git a/react-app/src/router.tsx b/react-app/src/router.tsx index 0dc701b45..b2a89cf50 100644 --- a/react-app/src/router.tsx +++ b/react-app/src/router.tsx @@ -1,15 +1,22 @@ -import { createBrowserRouter } from "react-router"; -import * as F from "@/features"; import * as C from "@/components"; +import { TimeoutModal } from "@/components"; +import * as F from "@/features"; import { postSubmissionLoader, PostSubmissionWrapper, } from "@/features/forms/post-submission/post-submission-forms"; import { QueryClient } from "@tanstack/react-query"; +import { createBrowserRouter, Outlet } from "react-router"; export const queryClient = new QueryClient(); - export const FAQ_TAB = "faq-tab"; +const RoutesWithTimeout = () => ( + <> + + + +); + export const router = createBrowserRouter([ { path: "/", @@ -18,100 +25,105 @@ export const router = createBrowserRouter([ { path: "/", index: true, element: }, { path: "/faq", element: }, { path: "/faq/:id", element: }, - { - path: "/dashboard", - element: , - loader: F.dashboardLoader(queryClient), - }, - { - path: "/details/:authority/:id", - element: , - loader: F.packageDetailsLoader, - }, - { - path: "/new-submission/spa/medicaid/create", - element: , - }, - { - path: "/new-submission/spa/chip/create", - element: , - }, - { - path: "/new-submission/waiver/b/capitated/amendment/create", - element: , - }, - { - path: "/new-submission/waiver/b/capitated/initial/create", - element: , - }, - { - path: "/new-submission/waiver/b/capitated/renewal/create", - element: , - }, - { - path: "/new-submission/waiver/b/b4/renewal/create", - element: , - }, - { - path: "/new-submission/waiver/b/b4/initial/create", - element: , - }, - { - path: "/new-submission/waiver/b/b4/amendment/create", - element: , - }, - { - path: "/new-submission/waiver/app-k", - element: , - }, - { - path: "/new-submission/waiver/temporary-extensions", - element: , - }, - { - path: "/new-submission", - element: , - }, - { - path: "/new-submission/spa", - element: , - }, - { - path: "/new-submission/waiver", - element: , - }, - { - path: "/new-submission/waiver/b", - element: , - }, - { - path: "/new-submission/waiver/b/b4", - element: , - }, - { - path: "/new-submission/waiver/b/capitated", - element: , - }, - { - path: "/new-submission/spa/medicaid", - element: , - }, - { - path: "/new-submission/spa/chip", - element: , - }, - { - path: "/new-submission/spa/medicaid/landing/medicaid-eligibility", - element: , - }, { path: "/webforms", element: }, { path: "/webform/:id/:version", element: }, - { path: "/profile", element: }, - { path: "/guides/abp", element: }, { - path: "/actions/:type/:authority/:id", - element: , - loader: postSubmissionLoader, + element: , + children: [ + { + path: "/dashboard", + element: , + loader: F.dashboardLoader(queryClient), + }, + { + path: "/details/:authority/:id", + element: , + loader: F.packageDetailsLoader, + }, + { + path: "/new-submission/spa/medicaid/create", + element: , + }, + { + path: "/new-submission/spa/chip/create", + element: , + }, + { + path: "/new-submission/waiver/b/capitated/amendment/create", + element: , + }, + { + path: "/new-submission/waiver/b/capitated/initial/create", + element: , + }, + { + path: "/new-submission/waiver/b/capitated/renewal/create", + element: , + }, + { + path: "/new-submission/waiver/b/b4/renewal/create", + element: , + }, + { + path: "/new-submission/waiver/b/b4/initial/create", + element: , + }, + { + path: "/new-submission/waiver/b/b4/amendment/create", + element: , + }, + { + path: "/new-submission/waiver/app-k", + element: , + }, + { + path: "/new-submission/waiver/temporary-extensions", + element: , + }, + { + path: "/new-submission", + element: , + }, + { + path: "/new-submission/spa", + element: , + }, + { + path: "/new-submission/waiver", + element: , + }, + { + path: "/new-submission/waiver/b", + element: , + }, + { + path: "/new-submission/waiver/b/b4", + element: , + }, + { + path: "/new-submission/waiver/b/capitated", + element: , + }, + { + path: "/new-submission/spa/medicaid", + element: , + }, + { + path: "/new-submission/spa/chip", + element: , + }, + { + path: "/new-submission/spa/medicaid/landing/medicaid-eligibility", + element: , + }, + { path: "/profile", element: }, + { path: "/guides/abp", element: }, + { + path: "/actions/:type/:authority/:id", + element: , + loader: postSubmissionLoader, + }, + ], }, ], loader: F.loader(queryClient),