Merge branch 'cypress-parallel' of github.com:coronasafe/care_fe into…

… cypress-parallel

.envrc

@@ -0,0 +1 @@
+test -f .env.local && dotenv .env.local

.github/workflows/cypress.yaml

@@ -39,9 +39,6 @@ jobs:
       - name: Check care is up ♻
         run: curl -o /dev/null -s -w "%{http_code}\n" http://localhost:9000
 
-      - name: Change api proxy url 📝
-        run: 'sed --in-place "s^target: .*,^target: \"http://localhost:9000\",^g" vite.config.ts'
-
       - name: Install dependencies 📦
         run: npm install
 
@@ -61,6 +58,7 @@ jobs:
           parallel: true
           group: "UI-Chrome"
         env:
+          CARE_API: http://localhost:9000
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_OPTIONS: --max_old_space_size=4096

cypress/e2e/assets_spec/assets_manage.cy.ts

@@ -56,7 +56,7 @@ describe("Asset", () => {
       "[email protected]",
       "Vendor's Name",
       serialNumber,
-      "2021-12-25",
+      "25122021",
       "Test note for asset creation!"
     );
 
@@ -80,7 +80,7 @@ describe("Asset", () => {
       "[email protected]",
       "Vendor's Name",
       serialNumber,
-      "2021-12-25",
+      "25122021",
       "Test note for asset creation!"
     );
 

cypress/e2e/patient_spec/patient_crud.cy.ts

@@ -3,7 +3,8 @@ import { afterEach, before, beforeEach, cy, describe, it } from "local-cypress";
 const username = "devdistrictadmin";
 const password = "Coronasafe@123";
 const phone_number = "9" + Math.floor(100000000 + Math.random() * 900000000);
-const emergency_phone_number = "9430123487";
+const emergency_phone_number =
+  "9" + Math.floor(100000000 + Math.random() * 900000000);
 const yearOfBirth = "2023";
 let patient_url = "";
 
@@ -27,7 +28,7 @@ describe("Patient Creation with consultation", () => {
     cy.get("#add-patient-details").should("be.visible");
     cy.get("#add-patient-details").click();
     cy.get("input[name='facilities']")
-      .type("cypress facility")
+      .type("dummy facility")
       .then(() => {
         cy.get("[role='option']").first().click();
       });
@@ -104,9 +105,11 @@ describe("Patient Creation with consultation", () => {
     cy.get("[data-testid=name] input").clear();
     cy.get("[data-testid=name] input").type("Test E2E User Edited");
     cy.get("#phone_number-div").clear();
-    cy.get("#phone_number-div").type("+919846856666");
+    cy.get("#phone_number-div").type("+91").type(phone_number);
     cy.get("#emergency_phone_number-div").clear();
-    cy.get("#emergency_phone_number-div").type("+919120330220");
+    cy.get("#emergency_phone_number-div")
+      .type("+91")
+      .type(emergency_phone_number);
     cy.get("#present_health").type("Severe Cough");
     cy.get("#ongoing_medication").type("Paracetamol");
     cy.get("#allergies").type("Dust");
@@ -142,10 +145,7 @@ describe("Patient Creation with consultation", () => {
       "contain",
       "Test E2E User Edited"
     );
-    cy.get("[data-testid=patient-dashboard]").should(
-      "contain",
-      "+919120330220"
-    );
+    cy.get("[data-testid=patient-dashboard]").should("contain", phone_number);
     const patientDetails_values: string[] = [
       "Severe Cough",
       "Paracetamol",
@@ -165,6 +165,7 @@ describe("Patient Creation with consultation", () => {
     cy.intercept("GET", "**/api/v1/patient/**").as("getFacilities");
     cy.visit(patient_url + "/consultation");
     cy.wait("@getFacilities").its("response.statusCode").should("eq", 200);
+    cy.get("#history_of_present_illness").scrollIntoView;
     cy.get("#history_of_present_illness").should("be.visible");
     cy.get("#history_of_present_illness").click().type("histroy");
     cy.get("#consultation_status")

cypress/e2e/users_spec/user_crud.cy.ts

@@ -38,7 +38,7 @@ describe("User management", () => {
     cy.intercept(/\/api\/v1\/facility/).as("facility");
     cy.get("[name='facilities']")
       .click()
-      .type("cypress facility")
+      .type("Dummy Facility 1")
       .wait("@facility");
     cy.get("li[role='option']").first().click();
     cy.get("input[type='checkbox']").click();
@@ -93,7 +93,7 @@ describe("User management", () => {
       cy.get("button[id='facilities']").click();
       cy.wait("@userFacility")
         .getAttached("div[id=facility_0] > div > span")
-        .contains("cypress facility");
+        .contains("Dummy Facility 1");
     });
   });
 
@@ -102,7 +102,7 @@ describe("User management", () => {
     cy.intercept(/\/api\/v1\/facility/).as("getFacilities");
     cy.get("[name='facility']")
       .click()
-      .type("cypress facility")
+      .type("Dummy Facility 1")
       .wait("@getFacilities");
     cy.get("li[role='option']").first().click();
     cy.intercept(/\/api\/v1\/users\/\w+\/add_facility\//).as("addFacility");

cypress/pageobject/Asset/AssetCreation.ts

@@ -67,9 +67,10 @@ export class AssetPage {
     cy.get("[data-testid=asset-support-email-input] input").type(supportEmail);
     cy.get("[data-testid=asset-vendor-name-input] input").type(vendorName);
     cy.get("[data-testid=asset-serial-number-input] input").type(serialNumber);
-    cy.get("[data-testid=asset-last-serviced-on-input] input").type(
-      lastServicedOn
-    );
+    cy.get(
+      "[data-testid=asset-last-serviced-on-input] input[type='text']"
+    ).click();
+    cy.get("#date-input").click().type(lastServicedOn);
     cy.get("[data-testid=asset-notes-input] textarea").type(notes);
   }
 

package.json

@@ -132,7 +132,7 @@
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "cypress": "^12.17.4",
+    "cypress": "^13.1.0",
     "cypress-localstorage-commands": "^2.2.3",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",

src/CAREUI/interactive/Switch.tsx

@@ -0,0 +1,39 @@
+import { classNames } from "../../Utils/utils";
+
+interface Props<T extends string> {
+  tabs: Record<T, string>;
+  selected: T;
+  onChange: (tab: T) => void;
+  size?: "sm" | "md" | "lg";
+}
+
+export default function Switch<T extends string>({
+  size = "sm",
+  ...props
+}: Props<T>) {
+  return (
+    <ul role="list" className="flex">
+      {Object.keys(props.tabs).map((tab) => {
+        return (
+          <li
+            key={tab}
+            tabIndex={0}
+            className={classNames(
+              "cursor-pointer select-none border shadow-sm outline-none transition-all duration-200 ease-in-out first:rounded-l last:rounded-r focus:ring-1",
+              size === "sm" && "px-2 py-1 text-xs",
+              size === "md" && "px-3 py-2 text-sm",
+              size === undefined && "px-3 py-2 text-sm",
+              size === "lg" && "px-4 py-3 text-base",
+              props.selected === tab
+                ? "border-primary-500 bg-primary-500 font-semibold text-white hover:bg-primary-600 focus:border-primary-500 focus:ring-primary-500"
+                : "border-gray-400 bg-gray-50 hover:bg-gray-200 focus:border-primary-500 focus:ring-primary-500"
+            )}
+            onClick={() => props.onChange(tab as T)}
+          >
+            {props.tabs[tab as T]}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

src/Components/ExternalResult/ExternalResultUpload.tsx

@@ -8,6 +8,8 @@ import { externalResultUploadCsv } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 const PageTitle = lazy(() => import("../Common/PageTitle"));
 import { useTranslation } from "react-i18next";
+import { Cancel, Submit } from "../Common/components/ButtonV2";
+import useAppHistory from "../../Common/hooks/useAppHistory";
 
 export default function ExternalResultUpload() {
   const { sample_format_external_result_import } = useConfig();
@@ -20,6 +22,7 @@ export default function ExternalResultUpload() {
     setCsvData(data);
   };
   const { t } = useTranslation();
+  const { goBack } = useAppHistory();
 
   const papaparseOptions = {
     header: true,
@@ -67,11 +70,11 @@ export default function ExternalResultUpload() {
         backUrl="/external_results"
         className="mt-4"
       />
-      <div className="mx-auto mt-6 max-w-3xl">
-        <div className="py-4">
+      <div className="mx-auto mt-6 flex max-w-3xl justify-center">
+        <div className="py-4 md:w-[500px]">
           <div className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
             <div className="my-2 sm:col-span-2 sm:mt-0">
-              <div className="mx-auto flex max-w-lg flex-col justify-center rounded-md border-2 border-dashed border-gray-300 pb-6 pt-5 text-center">
+              <div className="mx-auto flex flex-col justify-center rounded-md border-2 border-dashed border-gray-300 pb-6 pt-5 text-center">
                 <span className="flex justify-center">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -131,14 +134,14 @@ export default function ExternalResultUpload() {
             })}
           </div>
           <div className=""></div>
-          <div className="mt-2 text-center">
-            <button
-              disabled={loading}
-              className="btn btn-primary mx-auto block"
+          <div className="mt-2 flex flex-col justify-end gap-2 text-center md:flex-row">
+            <Cancel onClick={() => goBack()} />
+            <Submit
               onClick={handleSubmit}
-            >
-              {t("save")}
-            </button>
+              disabled={loading}
+              label={t("save")}
+              data-testid="submit-button"
+            />
           </div>
         </div>
       </div>