From 00ce42c728c8204a1b1a46a49b3a8bde9ff339cd Mon Sep 17 00:00:00 2001
From: luctra02 <64017398+luctra02@users.noreply.github.com>
Date: Sun, 21 Apr 2024 19:24:49 +0200
Subject: [PATCH] 279 test for viewing projects (#323)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* test(frontend): :test_tube: 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): :test_tube: Added failing mobile project test

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

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

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

* refactor(frontend): :recycle: run prettier

* refactor(frontend): :recycle: 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          |  1 +
 frontend/tests/project.desktop.spec.ts | 33 ++++++++++++++++++++
 frontend/tests/project.mobile.spec.ts  | 42 ++++++++++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 frontend/tests/project.desktop.spec.ts
 create mode 100644 frontend/tests/project.mobile.spec.ts

diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index 0e2e9f4..9b76a64 100644
--- a/frontend/playwright.config.ts
+++ b/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({
diff --git a/frontend/tests/project.desktop.spec.ts b/frontend/tests/project.desktop.spec.ts
new file mode 100644
index 0000000..92af9f7
--- /dev/null
+++ b/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();
+    });
+});
diff --git a/frontend/tests/project.mobile.spec.ts b/frontend/tests/project.mobile.spec.ts
new file mode 100644
index 0000000..6a766bf
--- /dev/null
+++ b/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();
+    });
+});