add checks for flaking test

CDCgov · Oct 16, 2024 · 4495909 · 4495909
1 parent dd038d1
commit 4495909
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 136 deletions.
diff --git a/containers/tefca-viewer/e2e/alternate_queries.spec.ts b/containers/tefca-viewer/e2e/alternate_queries.spec.ts
@@ -0,0 +1,81 @@
+import { test, expect } from "@playwright/test";
+import { TEST_URL } from "../playwright-setup";
+import { STEP_TWO_PAGE_TITLE } from "@/app/query/components/patientSearchResults/PatientSearchResultsTable";
+import { STEP_THREE_PAGE_TITLE } from "@/app/query/components/selectQuery/SelectSavedQuery";
+import { TEST_PATIENT, TEST_PATIENT_NAME } from "./constants";
+
+test.describe("alternate queries with the Query Connector", () => {
+  test.beforeEach(async ({ page }) => {
+    // Start every test on our main landing page
+    await page.goto(TEST_URL);
+  });
+
+  test("query using form-fillable demo patient by phone number", async ({
+    page,
+  }) => {
+    await page.getByRole("button", { name: "Go to the demo" }).click();
+    await page.getByRole("button", { name: "Fill fields" }).click();
+
+    // Delete last name and MRN to force phone number as one of the 3 fields
+    await page.getByLabel("Last Name").clear();
+    await page.getByLabel("Medical Record Number").clear();
+
+    // Among verification, make sure phone number is right
+    await page.getByRole("button", { name: "Search for patient" }).click();
+    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
+    await expect(
+      page.getByRole("heading", { name: STEP_TWO_PAGE_TITLE }),
+    ).toBeVisible();
+    await page.getByRole("link", { name: "Select patient" }).click();
+    await expect(
+      page.getByRole("heading", { name: STEP_THREE_PAGE_TITLE }),
+    ).toBeVisible();
+    await page.getByRole("button", { name: "Submit" }).click();
+    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
+
+    await expect(page.getByText("Patient Name")).toBeVisible();
+    await expect(page.getByText(TEST_PATIENT_NAME)).toBeVisible();
+    await expect(page.getByText("Contact")).toBeVisible();
+    await expect(page.getByText(TEST_PATIENT.Phone)).toBeVisible();
+    await expect(page.getByText("Patient Identifiers")).toBeVisible();
+    await expect(page.getByText(TEST_PATIENT.MRN)).toBeVisible();
+  });
+
+  test("social determinants query with generalized function", async ({
+    page,
+  }) => {
+    await page.getByRole("button", { name: "Go to the demo" }).click();
+    await page.getByRole("button", { name: "Fill fields" }).click();
+    await page.getByRole("button", { name: "Search for patient" }).click();
+    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
+
+    await page.getByRole("link", { name: "Select patient" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Select a query" }),
+    ).toBeVisible();
+    await page.getByTestId("Select").selectOption("social-determinants");
+    await page.getByRole("button", { name: "Submit" }).click();
+    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
+
+    await expect(
+      page.getByRole("heading", { name: "Patient Record" }),
+    ).toBeVisible();
+  });
+
+  test("form-fillable STI query using generalized function", async ({
+    page,
+  }) => {
+    await page.getByRole("button", { name: "Go to the demo" }).click();
+    await page.getByRole("button", { name: "Fill fields" }).click();
+    await page.getByRole("button", { name: "Search for patient" }).click();
+    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
+    await page.getByRole("link", { name: "Select patient" }).click();
+    await page.getByTestId("Select").selectOption("chlamydia");
+    await page.getByRole("button", { name: "Submit" }).click();
+    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
+
+    await expect(
+      page.getByRole("heading", { name: "Patient Record" }),
+    ).toBeVisible();
+  });
+});
diff --git a/containers/tefca-viewer/e2e/constants.ts b/containers/tefca-viewer/e2e/constants.ts
@@ -0,0 +1,5 @@
+import { hyperUnluckyPatient } from "@/app/constants";
+
+export const TEST_PATIENT = hyperUnluckyPatient;
+export const TEST_PATIENT_NAME =
+  hyperUnluckyPatient.FirstName + " A. " + hyperUnluckyPatient.LastName;
diff --git a/containers/tefca-viewer/e2e/example.spec.ts b/containers/tefca-viewer/e2e/example.spec.ts
diff --git a/containers/tefca-viewer/e2e/load.spec.ts b/containers/tefca-viewer/e2e/load.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from "@playwright/test";
+import { TEST_URL } from "../playwright-setup";
+import { metadata } from "@/app/constants";
+
+test("landing page loads", async ({ page }) => {
+  await page.goto(TEST_URL);
+
+  // Check that each expected text section is present
+  await expect(
+    page.getByRole("heading", { name: "Data collection made easier" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "What is it?" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "How does it work?" }),
+  ).toBeVisible();
+
+  // Check that interactable elements are present (header and Get Started)
+  await expect(page.getByRole("link", { name: metadata.title })).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Go to the demo" }),
+  ).toBeVisible();
+});
diff --git a/containers/tefca-viewer/e2e/query_workflow.spec.ts b/containers/tefca-viewer/e2e/query_workflow.spec.ts
@@ -3,45 +3,18 @@
 import { test, expect } from "@playwright/test";
 import { TEST_URL } from "../playwright-setup";
 import { STEP_ONE_PAGE_TITLE } from "@/app/query/components/searchForm/SearchForm";
-import { hyperUnluckyPatient } from "@/app/constants";
 import {
   CONTACT_US_DISCLAIMER_EMAIL,
   CONTACT_US_DISCLAIMER_TEXT,
 } from "@/app/query/designSystem/SiteAlert";
-import { STEP_TWO_PAGE_TITLE } from "@/app/query/components/patientSearchResults/PatientSearchResultsTable";
-import { STEP_THREE_PAGE_TITLE } from "@/app/query/components/selectQuery/SelectSavedQuery";
-
-const TEST_PATIENT = hyperUnluckyPatient;
-const TEST_PATIENT_NAME =
-  hyperUnluckyPatient.FirstName + " A. " + hyperUnluckyPatient.LastName;
+import { TEST_PATIENT, TEST_PATIENT_NAME } from "./constants";
 
 test.describe("querying with the Query Connector", () => {
   test.beforeEach(async ({ page }) => {
     // Start every test on our main landing page
     await page.goto(TEST_URL);
   });
 
-  test("landing page loads", async ({ page }) => {
-    // Check that each expected text section is present
-    await expect(
-      page.getByRole("heading", { name: "Data collection made easier" }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole("heading", { name: "What is it?" }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole("heading", { name: "How does it work?" }),
-    ).toBeVisible();
-
-    // Check that interactable elements are present (header and Get Started)
-    await expect(
-      page.getByRole("link", { name: "TEFCA Viewer" }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole("button", { name: "Go to the demo" }),
-    ).toBeVisible();
-  });
-
   test("unsuccessful user query: no patients", async ({ page }) => {
     await page.getByRole("button", { name: "Go to the demo" }).click();
     await page.getByRole("button", { name: "Fill fields" }).click();
@@ -87,6 +60,17 @@ test.describe("querying with the Query Connector", () => {
     await expect(
       page.getByRole("heading", { name: "Select a query" }),
     ).toBeVisible();
+
+    await page.getByRole("button", { name: "Customize Query" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Customize Query" }),
+    ).toBeVisible();
+    await expect(
+      page.getByText("0 labs found, 0 medications found, 0 conditions found."),
+    ).not.toBeVisible();
+
+    await page.getByText("Return to patient search").click();
+
     await page.getByRole("button", { name: "Submit" }).click();
     await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
 
@@ -109,87 +93,20 @@ test.describe("querying with the Query Connector", () => {
       `${CONTACT_US_DISCLAIMER_TEXT} ${CONTACT_US_DISCLAIMER_EMAIL}`,
     );
 
-    // Check to see if the accordion button is open
     await expect(
       page.getByRole("button", { name: "Observations", expanded: true }),
     ).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Medication Requests", expanded: true }),
+    ).toBeVisible();
 
     // We can also just directly ask the page to find us filtered table rows
-    await expect(page.locator("tbody").locator("tr")).toHaveCount(5);
+    await expect(page.locator("tbody").locator("tr")).toHaveCount(7);
 
     // Now let's use the return to search to go back to a blank form
     await page.getByRole("button", { name: "New patient search" }).click();
     await expect(
       page.getByRole("heading", { name: STEP_ONE_PAGE_TITLE, exact: true }),
     ).toBeVisible();
   });
-
-  test("query using form-fillable demo patient by phone number", async ({
-    page,
-  }) => {
-    await page.getByRole("button", { name: "Go to the demo" }).click();
-    await page.getByRole("button", { name: "Fill fields" }).click();
-
-    // Delete last name and MRN to force phone number as one of the 3 fields
-    await page.getByLabel("Last Name").clear();
-    await page.getByLabel("Medical Record Number").clear();
-
-    // Among verification, make sure phone number is right
-    await page.getByRole("button", { name: "Search for patient" }).click();
-    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
-    await expect(
-      page.getByRole("heading", { name: STEP_TWO_PAGE_TITLE }),
-    ).toBeVisible();
-    await page.getByRole("link", { name: "Select patient" }).click();
-    await expect(
-      page.getByRole("heading", { name: STEP_THREE_PAGE_TITLE }),
-    ).toBeVisible();
-    await page.getByRole("button", { name: "Submit" }).click();
-    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
-
-    await expect(page.getByText("Patient Name")).toBeVisible();
-    await expect(page.getByText(TEST_PATIENT_NAME)).toBeVisible();
-    await expect(page.getByText("Contact")).toBeVisible();
-    await expect(page.getByText(TEST_PATIENT.Phone)).toBeVisible();
-    await expect(page.getByText("Patient Identifiers")).toBeVisible();
-    await expect(page.getByText(TEST_PATIENT.MRN)).toBeVisible();
-  });
-
-  test("social determinants query with generalized function", async ({
-    page,
-  }) => {
-    await page.getByRole("button", { name: "Go to the demo" }).click();
-    await page.getByRole("button", { name: "Fill fields" }).click();
-    await page.getByRole("button", { name: "Search for patient" }).click();
-    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
-
-    await page.getByRole("link", { name: "Select patient" }).click();
-    await expect(
-      page.getByRole("heading", { name: "Select a query" }),
-    ).toBeVisible();
-    await page.getByTestId("Select").selectOption("social-determinants");
-    await page.getByRole("button", { name: "Submit" }).click();
-    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
-
-    await expect(
-      page.getByRole("heading", { name: "Patient Record" }),
-    ).toBeVisible();
-  });
-
-  test("form-fillable STI query using generalized function", async ({
-    page,
-  }) => {
-    await page.getByRole("button", { name: "Go to the demo" }).click();
-    await page.getByRole("button", { name: "Fill fields" }).click();
-    await page.getByRole("button", { name: "Search for patient" }).click();
-    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
-    await page.getByRole("link", { name: "Select patient" }).click();
-    await page.getByTestId("Select").selectOption("chlamydia");
-    await page.getByRole("button", { name: "Submit" }).click();
-    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
-
-    await expect(
-      page.getByRole("heading", { name: "Patient Record" }),
-    ).toBeVisible();
-  });
 });
diff --git a/containers/tefca-viewer/src/app/constants.ts b/containers/tefca-viewer/src/app/constants.ts
@@ -314,3 +314,8 @@ export const valueSetTypeToClincalServiceTypeMap = {
   medications: ["mrtc"],
   conditions: ["dxtc", "sdtc"],
 };
+
+export const metadata = {
+  title: "Query Connector",
+  description: "Try out TEFCA with queries for public health use cases.",
+};
diff --git a/containers/tefca-viewer/src/app/layout.tsx b/containers/tefca-viewer/src/app/layout.tsx
@@ -3,11 +3,6 @@ import Header from "./query/components/header/header";
 import Footer from "./footer";
 import { DataProvider } from "./utils";
 
-export const metadata = {
-  title: "TEFCA Viewer",
-  description: "Try out TEFCA with queries for public health use cases.",
-};
-
 /**
  * Establishes the layout for the application.
  * @param props - Props for the component.

diff --git a/containers/tefca-viewer/src/app/query/components/SelectQuery.tsx b/containers/tefca-viewer/src/app/query/components/SelectQuery.tsx
@@ -89,9 +89,13 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
     }).catch(console.error);
     goForward();
   }
+  console.log(loadingQueryValueSets, queryValueSets);
 
+  const displayLoading = loadingResultResponse || loadingQueryValueSets;
   return (
     <>
+      {displayLoading && <LoadingView loading={loadingResultResponse} />}
+
       {showCustomizeQuery ? (
         <CustomizeQuery
           useCaseQueryResponse={resultsQueryResponse}
@@ -102,16 +106,16 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
         ></CustomizeQuery>
       ) : (
         <SelectSavedQuery
-          goBack={goBack}
           selectedQuery={selectedQuery}
+          fhirServer={fhirServer}
+          loadingQueryValueSets={loadingQueryValueSets}
+          goBack={goBack}
           setSelectedQuery={setSelectedQuery}
           setShowCustomizedQuery={setShowCustomizedQuery}
           handleSubmit={onSubmit}
-          fhirServer={fhirServer}
           setFhirServer={setFhirServer}
         ></SelectSavedQuery>
       )}
-      {loadingResultResponse && <LoadingView loading={loadingResultResponse} />}
     </>
   );
 };

diff --git a/containers/tefca-viewer/src/app/query/components/header/header.tsx b/containers/tefca-viewer/src/app/query/components/header/header.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { Modal, ModalButton } from "../../designSystem/Modal";
 import { ModalRef } from "@trussworks/react-uswds";
 import styles from "./header.module.css";
+import { metadata } from "@/app/constants";
 /**
  * Produces the header.
  * @returns The HeaderComponent component.
@@ -33,9 +34,9 @@ export default function HeaderComponent() {
                 <a
                   className="text-base-lightest font-sans-xl text-bold"
                   href="/tefca-viewer"
-                  title="TEFCA Viewer"
+                  title={metadata.title}
                 >
-                  TEFCA Viewer
+                  {metadata.title}
                 </a>
               </em>
             </div>

diff --git a/containers/tefca-viewer/src/app/query/components/selectQuery/SelectSavedQuery.tsx b/containers/tefca-viewer/src/app/query/components/selectQuery/SelectSavedQuery.tsx
@@ -10,12 +10,13 @@ import styles from "./selectQuery.module.css";
 import { useState } from "react";
 
 type SelectSavedQueryProps = {
+  selectedQuery: string;
+  fhirServer: FHIR_SERVERS;
+  loadingQueryValueSets: boolean;
   goBack: () => void;
   setSelectedQuery: (selectedQuery: USE_CASES) => void;
-  selectedQuery: string;
   setShowCustomizedQuery: (showCustomize: boolean) => void;
   handleSubmit: () => void;
-  fhirServer: FHIR_SERVERS;
   setFhirServer: React.Dispatch<React.SetStateAction<FHIR_SERVERS>>;
 };
 
@@ -36,6 +37,7 @@ type SelectSavedQueryProps = {
 const SelectSavedQuery: React.FC<SelectSavedQueryProps> = ({
   selectedQuery,
   fhirServer,
+  loadingQueryValueSets,
   goBack,
   setSelectedQuery,
   setShowCustomizedQuery,
@@ -122,7 +124,7 @@ const SelectSavedQuery: React.FC<SelectSavedQueryProps> = ({
       <div className="padding-top-6">
         <Button
           type="button"
-          disabled={!selectedQuery}
+          disabled={!selectedQuery && !loadingQueryValueSets}
           className={selectedQuery ? "usa-button" : "usa-button disabled"}
           onClick={() => handleSubmit()}
         >