279 test for viewing projects (#323)

* test(frontend): 🧪 Write test for project page

Check if project page has title and subtitle. Add testids to elements in project page and individual project page. Check if individual project page has title and paragraph.

* test(frontend): 🧪 Added failing mobile project test

* test(frontend): ✅ Fixed mobile project test and added hamburger to close navbar

* fix(frontend): 💄 change tests for mobile to handle new navbar functionality

* fix(frontend): 🐛 run the tests on server instead of localhost

* refactor(frontend): ♻️ run prettier

* refactor(frontend): ♻️ run prettier

---------

Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no>
Co-authored-by: Jakobgg1243 <Jakob.gregusson@gmail.com>
Co-authored-by: Mats Nyfløt <mnyflot@gmail.com>

frontend/playwright.config.ts

@@ -9,6 +9,7 @@ import { defineConfig, devices } from "@playwright/test";
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
+//const baseURL = `http://localhost:3000/`;
 const baseURL = `http://web.hypso.ies.ntnu.no:3000/`;
 
 export default defineConfig({

frontend/tests/project.desktop.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from "@playwright/test";
+
+//BASE_URL: http://web.hypso.ies.ntnu.no:3000/
+
+test.describe("All Project Page Test", () => {
+    test("CheckHeadingAndSubtitleIsVisible", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("button", { name: "Projects" }).click();
+        await expect(page).toHaveURL("/projects");
+        await expect(page.getByTestId("pageHeader")).toBeVisible();
+        await expect(page.getByTestId("pageSubtitle")).toBeVisible();
+    });
+    test("CheckIfCardIsClickable", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("button", { name: "Projects" }).click();
+        await expect(page).toHaveURL("/projects");
+        await expect(page.getByTestId("projectCard").first()).toBeVisible();
+        await page.getByTestId("projectCard").first().click();
+        //Checks if the URL matches /projects/anySlug
+        await expect(page).toHaveURL(/\/projects\/.+$/);
+    });
+});
+
+test.describe("Individual Project Page Test", () => {
+    test("TestHeadingAndParagraphIsVisible", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("button", { name: "Projects" }).click();
+        await page.getByTestId("projectCard").first().click();
+        await expect(page).toHaveURL(/\/projects\/.+$/);
+        await expect(page.getByRole("heading").first()).toBeVisible();
+        await expect(page.getByTestId("blockParagraph").first()).toBeVisible();
+    });
+});

frontend/tests/project.mobile.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from "@playwright/test";
+
+//BASE_URL: http://web.hypso.ies.ntnu.no:3000/
+
+test.describe("All Project Page Test", () => {
+    test.use({
+        viewport: { width: 390, height: 844 },
+    });
+    test("CheckHeadingAndSubtitleIsVisible", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("navigation").getByRole("button").click();
+        await page.getByRole("button", { name: "Projects" }).click();
+        await expect(page).toHaveURL("/projects");
+        await expect(page.getByTestId("pageHeader")).toBeVisible();
+        await expect(page.getByTestId("pageSubtitle")).toBeVisible();
+    });
+    test("CheckIfCardIsClickable", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("navigation").getByRole("button").click();
+        await page.getByRole("button", { name: "Projects" }).click();
+        await expect(page).toHaveURL("/projects");
+        await expect(page.getByTestId("projectCard").first()).toBeVisible();
+        await page.getByTestId("projectCard").first().click();
+        //Checks if the URL matches /projects/anySlug
+        await expect(page).toHaveURL(/\/projects\/.+$/);
+    });
+});
+
+test.describe("Individual Project Page Test", () => {
+    test.use({
+        viewport: { width: 390, height: 844 },
+    });
+    test("TestHeadingAndParagraphIsVisible", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("navigation").getByRole("button").click();
+        await page.getByRole("button", { name: "Projects" }).click();
+        await page.getByTestId("projectCard").first().click();
+        await expect(page).toHaveURL(/\/projects\/.+$/);
+        await expect(page.getByRole("heading").first()).toBeVisible();
+        await expect(page.getByTestId("blockParagraph").first()).toBeVisible();
+    });
+});