From c9dd083eaea3fd69824dbdd00cd8f73322a56dbe Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Tue, 5 Mar 2024 21:32:42 -0500
Subject: [PATCH] e2e tests

---
 components/Form/FileInput.tsx   |  2 +-
 components/Form/ToggleField.tsx |  3 +--
 components/Form/formSchemas.ts  |  2 +-
 components/Form/index.tsx       |  2 +-
 e2e/example.spec.ts             |  7 -------
 e2e/form.spec.ts                | 23 +++++++++++------------
 6 files changed, 15 insertions(+), 24 deletions(-)
 delete mode 100644 e2e/example.spec.ts

diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index 796c4c4..29a058d 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -127,7 +127,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
 
       {/* File info */}
       {fileInfo && (
-          <div className="flex gap-4 p-4 items-center border-t border-grey-500">
+          <div className="file-info flex gap-4 p-4 items-center border-t border-grey-500">
             <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
             <div className="grow">
               <div className="flex justify-between text-sm text-slate-500">
diff --git a/components/Form/ToggleField.tsx b/components/Form/ToggleField.tsx
index 282c411..bd8836a 100644
--- a/components/Form/ToggleField.tsx
+++ b/components/Form/ToggleField.tsx
@@ -54,8 +54,7 @@ const ToggleField = ({
       </div>
       <div className="flex gap-3 itens-center">
         <SwitchPrimitive.Root
-          className="relative h-[25px] w-[42px] cursor-default rounded-full bg-indigo-900 outline-none"
-          checked={checked}
+          className="toggle-switch relative h-[25px] w-[42px] cursor-default rounded-full bg-indigo-900 outline-none"
           onCheckedChange={(isChecked) => handleCheckedChange(isChecked)}
         >
           <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
diff --git a/components/Form/formSchemas.ts b/components/Form/formSchemas.ts
index b942160..1a14a5d 100644
--- a/components/Form/formSchemas.ts
+++ b/components/Form/formSchemas.ts
@@ -10,7 +10,7 @@ export const initialValues: FormValues = {
   testingCenter2: "",
   testingCenter3: "",
   testingCenter4: "",
-  toleranceWindow: false,
+  toleranceWindow: false
 }
 
 export const validationSchema = Yup.object({
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index 7a9ba91..3a6a0e2 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -141,7 +141,7 @@ const FormComponent: React.FC = () => {
                   </Button>
                   </div>
                   {/* Success message - Display a success message if the form has been submitted successfully */}
-                  {formSubmitted && <div className="sucess-message text-center text-green-500">Success</div>}
+                  {formSubmitted && <div className="success-message text-center text-green-500">Success</div>}
                 </div>
               </div>
 
diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts
deleted file mode 100644
index de18990..0000000
--- a/e2e/example.spec.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { expect, test } from "@playwright/test"
-
-test("has title", async ({ page }) => {
-  await page.goto("./")
-
-  await expect(page).toHaveTitle(/Next.js Enterprise Boilerplate/)
-})
diff --git a/e2e/form.spec.ts b/e2e/form.spec.ts
index 2cdbd49..795a7c5 100644
--- a/e2e/form.spec.ts
+++ b/e2e/form.spec.ts
@@ -6,11 +6,12 @@ import { expect, test } from "@playwright/test"
 test("form loads correctly with initial state", async ({ page }) => {
     await page.goto("/"); //Home URL
   
-    // Check if specific fields are present and empty
-    await expect(page.locator('input[name="importName"]')).toBeEmpty();
-    await expect(page.locator('input[name="manifestFile"]')).toBeEmpty();
+    // Check if specific fields are present and the default selected option is the placeholder value
+    await expect(page.locator('select[name="importName"] option').first()).toHaveText('Select Import Name:');
+    
+    // Check if the file upload field indicates that no file is selected
+    await expect(page.locator('.file-info')).not.toBeVisible();
 
-    await expect(page.locator('input[name="toleranceWindow"]')).not.toBeChecked();
     // Verify that no option is selected initially for "splitSchedule"
     await expect(page.locator('input[name="splitSchedule"]:checked')).toHaveCount(0);
 
@@ -31,9 +32,6 @@ test("form loads correctly with initial state", async ({ page }) => {
   
     // Check if the file name is displayed correctly
     await expect(page.locator('.file-info')).toHaveText(/testFile.txt/);
-  
-    // Optionally, check for the upload progress bar to reach 100%
-    await expect(page.locator('.upload-progress')).toHaveCSS('width', '100%');
   });
 
   //Toggle and submit interactions
@@ -41,21 +39,22 @@ test("form loads correctly with initial state", async ({ page }) => {
     await page.goto("/");
   
     // Toggle a switch
-    await page.locator('input[name="toleranceWindow"]').click();
-    await expect(page.locator('input[name="toleranceWindow"]')).toBeChecked();
+    await page.locator('.toggle-switch').click();
+    // Wait for the 'aria-checked' attribute to become 'true'
+    await expect(page.locator('.toggle-switch')).toHaveAttribute('aria-checked', 'true', { timeout: 5000 });
   
     // Fill in other required fields
     // Select an option from "importName" dropdown
     await page.locator('select[name="importName"]').selectOption({ label: "Import ABC" });
 
     // Upload a file for "manifestFile"
-    await page.locator('input[name="manifestFile"]').setInputFiles('/e2e/testFile.txt');
+    await page.locator('input[type="file"]').setInputFiles('/e2e/testFile.txt');
 
     // Select an option for "splitSchedule"
-    await page.locator('input[name="splitSchedule"][value="Yes"]').click();
+    await page.locator('button[role="radio"][value="Yes"]').click();
 
     // Select an option for "client"
-    await page.locator('input[name="client"][value="Single"]').click();
+    await page.locator('button[role="radio"][value="Single"]').click();
 
     // Enable and click the submit button
     const submitButton = page.locator('button', { hasText: 'Continue Import' });