feat: add general UI validation for Sub-doc

react-app/src/components/ActionForm/ActionFormAttachments.tsx

@@ -46,6 +46,7 @@ export const ActionFormAttachments = ({
 
   return (
     <SectionCard
+      testId="attachment-section"
       title={
         <>
           {title} {requiredIndicatorForTitle && <RequiredIndicator />}

react-app/src/components/ActionForm/actionForm.components.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { z } from "zod";
 
 export const AttachmentFileFormatInstructions = () => (
-  <p>
+  <p data-testid="accepted-files">
     We accept the following file formats:{" "}
     <strong>.doc, .docx, .pdf, .jpg, .xlsx, and more. </strong>{" "}
     <Link

react-app/src/components/ActionForm/index.tsx

@@ -203,7 +203,7 @@ export const ActionForm = <Schema extends SchemaWithEnforcableProps>({
       {form.formState.isSubmitting && <LoadingSpinner />}
       <Form {...form}>
         <form onSubmit={onSubmit} className="my-6 space-y-8 mx-auto justify-center flex flex-col">
-          <SectionCard title={title}>
+          <SectionCard testId="detail-section" title={title}>
             <div>
               {areFieldsRequired && <RequiredFieldDescription />}
               <ActionFormDescription boldReminder={areFieldsRequired}>
@@ -217,6 +217,7 @@ export const ActionForm = <Schema extends SchemaWithEnforcableProps>({
           )}
           {additionalInformation && (
             <SectionCard
+              testId = "additional-info"
               title={
                 <>
                   {additionalInformation.title}{" "}

react-app/src/components/Cards/SectionCard.tsx

@@ -6,25 +6,28 @@ interface SectionCardProps {
   className?: string;
   title?: ReactNode;
   id?: string;
+  testId?: string;
 }
 export const SectionCard = ({
   title,
   children,
   className,
   id,
+  testId,
 }: SectionCardProps) => {
   return (
     <section
+      data-testid={testId}
       id={id}
       className={cn("p-4 border rounded-sm border-cardBorder", className)}
     >
       {title && (
         <>
-          <h1 className="text-3xl font-semibold mb-2">{title}</h1>
+          <h1 data-testid={`${testId}-title`} className="text-3xl font-semibold mb-2">{title}</h1>
           <hr className="my-6 bg-slate-200" />
         </>
       )}
-      <div className="gap-8 flex flex-col">{children}</div>
+      <div data-testid={`${testId}-child`} className="gap-8 flex flex-col">{children}</div>
     </section>
   );
 };

react-app/src/components/Form/content/ContentWrappers.tsx

@@ -62,7 +62,7 @@ export const ActionFormDescription = ({
 };
 
 export const ActionFormHeading = ({ title }: { title: string }) => {
-  return <h1 className="text-2xl font-semibold mt-4 mb-2">{title}</h1>;
+  return <h1 data-testid="AFH" className="text-2xl font-semibold mt-4 mb-2">{title}</h1>;
 };
 
 export const PreSubmitNotice = ({

test/e2e/tests/sub-doc/medicaidSPADetail.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Medicaid SPA - Sub Doc", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId('Dashboard-d').click();
+    await page.locator('a[href*="details/Medicaid%20SPA/CO-22-2020"]').click();
+  });
+
+  test.describe("UI - Validation", () => {
+    test.describe.skip("Status", () => {
+      test("should display Status items", () => {});
+    });
+    test.describe("form actions", () => {
+      test("should display the details page", async ({ page }) => {
+        // elements before to be validated
+
+        await expect(page.locator('a[href*="upload-subsequent-documents/Medicaid SPA/CO-22-2020?origin=details"]')).toBeVisible();
+        await expect(page.locator('a[href*="upload-subsequent-documents/Medicaid SPA/CO-22-2020?origin=details"]')).toContainText('Upload Subsequent Document');
+
+        // elements after to be validated
+      });
+    });
+    test.describe.skip("package details", () => {});
+    test.describe.skip("package activity", () => {});
+  });
+
+  test.describe('Naviation - Validation', () => {
+    test('navigate to withdraw package page', () => {
+      // see below
+    });
+
+    test('navigate to sub doc page', async ({ page }) => {
+      await page.locator('a[href*="/actions/upload-subsequent-documents/Medicaid SPA/CO-22-2020?origin=details"]').click();
+
+      await expect(page.getByTestId("detail-section")).toBeVisible();
+    });
+  });
+});

test/e2e/tests/sub-doc/medicaidSubDocDetail.spec.ts

@@ -0,0 +1,60 @@
+import {test, expect} from "@playwright/test";
+
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/");
+  await page.getByTestId("Dashboard-d").click();
+  await page.locator('a[href*="details/Medicaid%20SPA/CO-22-2020"]').click();
+  await page.locator('a[href*="/actions/upload-subsequent-documents/Medicaid SPA/CO-22-2020?origin=details"]').click();
+});
+
+test.describe("UI - Validation", () => {
+  test.describe("Breadcrumbs", () => {
+    test("should displays breadcrumb elements", async({ page }) => {
+      // need a better selector
+      await expect(page.locator("#root > div > main > div:nth-child(2) > nav")).toBeVisible();
+      await expect(page.locator("#root > div > main > div:nth-child(2) > nav")).toHaveText("DashboardCO-22-2020New Subsequent Documentation");
+    });
+  });
+
+  test.describe("Form Elements", () => {
+    test("Detail Section", async({ page }) => {
+      await expect(page.getByTestId("detail-section")).toBeVisible();
+
+      await expect(page.getByTestId("detail-section-title")).toBeVisible();
+      await expect(page.getByTestId("detail-section-title")).toHaveText("Medicaid SPA Subsequent Documents Details");
+
+      await expect(page.getByTestId("detail-section-child")).toBeVisible();
+      // await expect(page.getByTestId("detail-section-child")).toHaveText(); needs more detailed selectors to validate text
+    });
+
+    test("Document Section", async({ page }) => {
+      await expect(page.getByTestId("attachment-section")).toBeVisible();
+
+      await expect(page.getByTestId("attachment-section-title")).toBeVisible();
+      await expect(page.getByTestId("attachment-section-title")).toHaveText("Subsequent Medicaid SPA Documents *");
+
+      await expect(page.getByTestId("attachment-section-child")).toBeVisible();
+      await expect(page.getByTestId("attachments-instructions")).toBeVisible();
+      await expect(page.getByTestId("attachments-instructions")).toHaveText("Maximum file size of 80 MB per attachment. You can add multiple files per attachment type. Read the description for each of the attachment types on the FAQ Page.");
+      await expect(page.getByTestId("accepted-files")).toBeVisible();
+      await expect(page.getByTestId("accepted-files")).toHaveText("We accept the following file formats: .doc, .docx, .pdf, .jpg, .xlsx, and more.  See the full list.");
+
+      await expect(page.getByTestId("cmsForm179-label")).toBeVisible();
+      await expect(page.getByTestId("cmsForm179-label")).toHaveText("CMS Form 179");
+
+      // TODO: Extend to all labels
+    });
+
+    test("Reason Section", async({ page }) => {
+      await expect(page.getByTestId("additional-info")).toBeVisible();
+
+      await expect(page.getByTestId("additional-info-title")).toBeVisible();
+      await expect(page.getByTestId("additional-info-title")).toHaveText("Reason for subsequent documents *");
+
+      await expect(page.getByTestId("additional-info-child")).toBeVisible();
+    });
+  });
+});
+
+test.describe.skip("Navigation", () => {});