Update Architecture.md; Include unit tests for PageLayout; Include id attribute for PageLayout

Author: leekahung

Architecture.md

@@ -494,6 +494,7 @@ frontend/
 │   │   │   ├── InitializationForm.test.ts # InitializationForm component testing
 │   │   │   ├── Letter.test.ts      # Letter component testing
 │   │   │   ├── LetterDisclaimer.test.ts # LetterDisclaimer component testing
+│   │   │   ├── PageLayout.test.ts  # PageLayout component testing
 │   │   │   └── MessageWindow.test.ts # MessageWindow component testing
 │   │   └── utils/                  # Utility function testing
 │   │       ├── letterHelper.test.ts # letterHelper testing

frontend/src/layouts/PageLayout.tsx

@@ -13,6 +13,7 @@ export default function PageLayout({ children }: Props) {
       className={`flex items-center justify-center pt-16
         ${isChatPages ? "h-screen" : "sm:pt-32 sm:pb-16"}
         `}
+      id="page-layout"
     >
       {children}
     </div>

frontend/src/tests/components/Layout.test.tsx

@@ -0,0 +1,59 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
+import HousingContextProvider from "../../contexts/HousingContext";
+import { MemoryRouter } from "react-router-dom";
+
+beforeAll(() => {
+  if (!("scrollTo" in HTMLElement.prototype)) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    HTMLElement.prototype.scrollTo = function () {};
+  }
+  HTMLDialogElement.prototype.showModal = vi.fn();
+  HTMLDialogElement.prototype.close = vi.fn();
+});
+
+const renderLayout = async (path: string) => {
+  const { default: Layout } = await import("../../layouts/PageLayout");
+  const queryClient = new QueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <HousingContextProvider>
+        <MemoryRouter initialEntries={[path]}>
+          <Layout>
+            <div />
+          </Layout>
+        </MemoryRouter>
+      </HousingContextProvider>
+    </QueryClientProvider>
+  );
+};
+
+describe("Page Layout component", () => {
+  const pageSetup = async (path: string) => {
+    const { container } = await renderLayout(path);
+    return container.querySelector("#page-layout");
+  };
+
+  it("returns h-screen when path is index", async () => {
+    const pageLayout = await pageSetup("/");
+
+    expect(pageLayout).toHaveClass("h-screen");
+    expect(pageLayout).not.toHaveClass("sm:pt-32", "sm:pb-16");
+  });
+
+  it("returns h-screen when path starts with /letter", async () => {
+    const pageLayout = await pageSetup("/letter/oregon-law-help");
+
+    expect(pageLayout).toHaveClass("h-screen");
+    expect(pageLayout).not.toHaveClass("sm:pt-32", "sm:pb-16");
+  });
+
+  it("returns h-screen when path starts with /letter", async () => {
+    const pageLayout = await pageSetup("/about");
+
+    expect(pageLayout).not.toHaveClass("h-screen");
+    expect(pageLayout).toHaveClass("sm:pt-32", "sm:pb-16");
+  });
+});