Refactor Apply Now button in ProjectsPage.tsx and test.ts files

techstartucalgary · Oct 5, 2024 · 80f97c0 · 80f97c0
1 parent 4185db2
commit 80f97c0
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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();
 
 });