From 80f97c0ff32a25f961bd1fe04c0eb25ae297ce10 Mon Sep 17 00:00:00 2001
From: IsaiahA21 <76446914+IsaiahA21@users.noreply.github.com>
Date: Sat, 5 Oct 2024 17:06:05 -0600
Subject: [PATCH] Refactor Apply Now button in ProjectsPage.tsx and test.ts
 files

---
 src/pages/ProjectsPage.tsx         | 16 +++++++++-------
 tests/homePage/HomePage.test.ts    |  9 +++++----
 tests/navigationBar/NavBar.test.ts |  5 +++--
 tests/project/ProjectPage.test.ts  |  8 +++++---
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/pages/ProjectsPage.tsx b/src/pages/ProjectsPage.tsx
index b5fd07c..adaa922 100644
--- a/src/pages/ProjectsPage.tsx
+++ b/src/pages/ProjectsPage.tsx
@@ -108,13 +108,15 @@ const ProjectsPage = () => {
           bring to life with Tech Start?
         </h3>
         <S.WrapDiv>
-          <HoverButton
-            mode={ButtonMode.GRADIENT}
-            glowOnHover={true}
-            link="/apply"
-            text={"Apply Now"}
-            linkIsInternal={true}
-          />
+          <div data-testid="apply_now_button">
+            <HoverButton
+              mode={ButtonMode.GRADIENT}
+              glowOnHover={true}
+              link="/apply"
+              text={"Apply Now"}
+              linkIsInternal={true}
+            />
+          </div>
         </S.WrapDiv>
       </div>
       <ProjectKeywordsSection />
diff --git a/tests/homePage/HomePage.test.ts b/tests/homePage/HomePage.test.ts
index 70257af..e2e048b 100644
--- a/tests/homePage/HomePage.test.ts
+++ b/tests/homePage/HomePage.test.ts
@@ -16,8 +16,9 @@ test('Should display Logo', async ({ page }) => {
 
 /**
  * Test join team button
+ * sidenote: Oct 4,2024 -> consistently fails on webkit
  */
-test('join button should navigate to Apply page', async function ({ page }) {
+test('join button should navigate to Apply page', async function ({ page, baseURL }) {
     await page.goto("/");
 
     // Wait for the join team button to be visible before clicking
@@ -34,10 +35,10 @@ test('join button should navigate to Apply page', async function ({ page }) {
     */
     await Promise.all([
         applyBtn.click(), // Trigger the click
-        await page.waitForURL(/.*apply/), // Wait for the navigation to /apply
+        await expect(page).toHaveURL(`${baseURL}/apply`) // Wait for the navigation to /apply
     ]);
-    
-    await expect(page).toHaveURL(/.*apply/)
+
+    await expect(page).toHaveURL(`${baseURL}/apply`);
     await page.close();
 });
 
diff --git a/tests/navigationBar/NavBar.test.ts b/tests/navigationBar/NavBar.test.ts
index d5fc998..f1b02a6 100644
--- a/tests/navigationBar/NavBar.test.ts
+++ b/tests/navigationBar/NavBar.test.ts
@@ -77,7 +77,8 @@ test('Test apply button navigates to the apply page', async ({ page, baseURL })
   await page.goto('/');
   await page.getByText('Apply', { exact: true }).click();
   await expect(page).toHaveURL(`${baseURL}/apply`);
-  await expect(page.getByRole('heading', { name: 'APPLY' })).toBeVisible();
+  // ensure there's an application section
+  await expect(page.getByRole('heading', { name: 'Applications', exact: true })).toBeVisible()
   await page.close();
 
 });
@@ -101,7 +102,7 @@ test('Test merch button navigates to the Merch page and then find the 2 merch',
 test('Test gallery button navigates to the Merch page', async function ({ page, baseURL }) {
   await page.goto('/');
   await page.getByText('Gallery', { exact: true }).click();
-  await expect(page).toHaveURL(`${ baseURL }/gallery`);
+  await expect(page).toHaveURL(`${baseURL}/gallery`);
   await page.getByRole('heading', { name: 'Gallery' }).click();
   await expect(page.getByTestId('photo-gallery-image-0')).toBeVisible();
   await expect(page.getByTestId('photo-gallery-image-32')).toBeVisible();
diff --git a/tests/project/ProjectPage.test.ts b/tests/project/ProjectPage.test.ts
index ba84968..0319e29 100644
--- a/tests/project/ProjectPage.test.ts
+++ b/tests/project/ProjectPage.test.ts
@@ -5,9 +5,11 @@ import { test, expect } from '@playwright/test';
  */
 test('Apply Now btn nagivates to the apply now page', async ({ page, baseURL }) => {
   await page.goto(`${baseURL}/projects`);
-  await page.getByText('Apply Now').click();
-  await expect(page).toHaveURL(/.*apply/);
-  await expect(page.getByRole('heading', { name: 'APPLY' })).toBeVisible();
+  // await page.getByText('Apply Now').click();
+  const applyButton = page.getByTestId('apply_now_button');
+  applyButton.click();
+  await expect(page).toHaveURL(`${baseURL}/apply`);
+  // await expect(page.getByRole('heading', { name: 'APPLY' })).toBeVisible();
   await page.close();
 
 });
\ No newline at end of file