275 create e2e test for blogs (#318)

* 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 * test(frontend): ✅ Make test for blogs pages. Edit featured image mobile test to use correct viewport * test(frontend): 🔥 remove project tests as they are part of another issue * style(frontend): 🎨 prettier --------- Co-authored-by: Lucas Tran <lucastran1107@gmail.com> Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no> Co-authored-by: Jakobgg1243 <Jakob.gregusson@gmail.com> Co-authored-by: Lucas Tran <lucastra@stud.ntnu.no>
NTNU-SmallSatLab · Apr 18, 2024 · 2999ab8 · 2999ab8
1 parent 9ad653e
commit 2999ab8
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 19 deletions.
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
@@ -18,7 +18,7 @@ export default defineConfig({
     /* Fail the build on CI if you accidentally left test.only in the source code. */
     forbidOnly: !!process.env.CI,
     /* Retry on CI only */
-    retries: process.env.CI ? 2 : 0,
+    retries: 2,
     /* Opt out of parallel tests on CI. */
     workers: process.env.CI ? 1 : undefined,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */

diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
@@ -63,7 +63,9 @@ export default async function ProjectsPage() {
         <div className="mx-auto w-full max-w-6xl grow bg-opacity-50 px-4 py-8 sm:px-8 md:px-10">
             <div className="flex flex-col items-center justify-center">
                 <PageHeaderAndSubtitle>
-                    <PageHeader>Our Projects</PageHeader>
+                    <PageHeader data-testid="projectHeading">
+                        Our Projects
+                    </PageHeader>
                     <PageSubtitle>
                         Information about our various projects are shown here.
                     </PageSubtitle>
@@ -84,6 +86,7 @@ export default async function ProjectsPage() {
                             className="h-full sm:m-4"
                             href={"/projects/" + project?.attributes?.slug}
                             key={project.id}
+                            data-testid="projectCard"
                         >
                             <Card className="h-full w-full hover:border-blue-500">
                                 <CardHeader></CardHeader>

diff --git a/frontend/src/components/BlockRendererClient.tsx b/frontend/src/components/BlockRendererClient.tsx
@@ -53,12 +53,12 @@ export default function BlockRendererClient({
                                 italic: boolean;
                             };
                         }[];
-
-                        const italic = child[0]?.props.italic;
-                        if (italic) {
+                        const text = child[0]?.props.text;
+                        //Children with text have testid, excluding videoes and linebreaks.
+                        if (text == "") {
                             return <p>{children}</p>;
                         }
-                        return <p>{children}</p>;
+                        return <p data-testid="blockParagraph">{children}</p>;
                     },
 
                     link: ({ url, children }) => {

diff --git a/frontend/src/components/BlogpageButtons.tsx b/frontend/src/components/BlogpageButtons.tsx
@@ -34,6 +34,7 @@ export default function BlogpageButtons({ className }: { className?: string }) {
             <Button
                 className={`border border-white hover:bg-primary ${activeButton === "Satellites" ? "bg-primary" : "bg-transparent"}`}
                 onClick={() => handleParameterChange("Satellites")}
+                data-testid="blogsSatellitesButton"
             >
                 Satellites
             </Button>

diff --git a/frontend/src/components/PageHeader.tsx b/frontend/src/components/PageHeader.tsx
@@ -1,11 +1,19 @@
 import React from "react";
 
 function PageHeader({ children }: { children?: React.ReactNode }) {
-    return <h1 className="text-center text-5xl font-bold">{children}</h1>;
+    return (
+        <h1 className="text-center text-5xl font-bold" data-testid="pageHeader">
+            {children}
+        </h1>
+    );
 }
 
 function PageSubtitle({ children }: { children?: React.ReactNode }) {
-    return <h2 className="text-gray-400">{children}</h2>;
+    return (
+        <h2 className="text-gray-400" data-testid="pageSubtitle">
+            {children}
+        </h2>
+    );
 }
 
 // Component that wraps both the header and the subtitle to be used together

diff --git a/frontend/src/components/fullBlogCard.tsx b/frontend/src/components/fullBlogCard.tsx
@@ -63,7 +63,10 @@ export default function FullBlogCard({
                     </div>
                 )}
                 <div className="flex gap-2">
-                    <p className="flex items-center rounded-md bg-primary p-2 text-center text-xs text-white">
+                    <p
+                        className="flex items-center rounded-md bg-primary p-2 text-center text-xs text-white"
+                        data-testid="articleTag"
+                    >
                         {article.tag ? article.tag : "General"}
                     </p>
                     <p className="flex w-fit items-center text-center text-xs text-white">
@@ -74,6 +77,7 @@ export default function FullBlogCard({
                     <Link
                         className="hover:underline"
                         href={"/blog/" + article.slug}
+                        data-testid="blogCardLink"
                     >
                         {article.title}
                     </Link>

diff --git a/frontend/tests/blog.desktop.spec.ts b/frontend/tests/blog.desktop.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Blogs pages test", () => {
+    test("blogsOverviewPageTest", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("button", { name: "Blog" }).click();
+        await expect(page).toHaveURL("/blog");
+        await expect(page.getByTestId("pageHeader")).toBeVisible();
+        await expect(page.getByTestId("pageSubtitle")).toBeVisible();
+        await page.getByTestId("blogsSatellitesButton").click();
+        await expect(page).toHaveURL("/blog?page=1&tag=Satellites");
+        await expect(page.getByTestId("articleTag")).toHaveText("Satellites");
+        await page.getByTestId("blogCardLink").click();
+        await expect(page).toHaveURL(/\/blog\/.+$/);
+    });
+    test("individualBlogPagetest", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("button", { name: "Blog" }).click();
+        await expect(page).toHaveURL("/blog");
+        await page.getByTestId("blogCardLink").first().click();
+        await expect(page).toHaveURL(/\/blog\/.+$/);
+        await expect(page.getByTestId("blockParagraph").first()).toBeVisible();
+    });
+});
diff --git a/frontend/tests/blog.mobile.spec.ts b/frontend/tests/blog.mobile.spec.ts
@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Blogs pages test", () => {
+    test.use({
+        viewport: { width: 390, height: 844 },
+    });
+    test("blogsOverviewPageTest", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("navigation").getByRole("button").click();
+        await page.getByRole("button", { name: "Blog" }).click();
+        await expect(page).toHaveURL("/blog");
+        await expect(page.getByTestId("pageHeader")).toBeVisible();
+        await expect(page.getByTestId("pageSubtitle")).toBeVisible();
+        await page.getByTestId("blogsSatellitesButton").click();
+        await expect(page).toHaveURL("/blog?page=1&tag=Satellites");
+        await expect(page.getByTestId("articleTag")).toHaveText("Satellites");
+        await page.getByTestId("blogCardLink").click();
+        await expect(page).toHaveURL(/\/blog\/.+$/);
+    });
+    test("individualBlogPagetest", async ({ page }) => {
+        await page.goto("/");
+        await page.getByRole("navigation").getByRole("button").click();
+        await page.getByRole("button", { name: "Blog" }).click();
+        await expect(page).toHaveURL("/blog");
+        await page.getByTestId("blogCardLink").first().click();
+        await expect(page).toHaveURL(/\/blog\/.+$/);
+        await expect(page.getByTestId("blockParagraph").first()).toBeVisible();
+    });
+});
diff --git a/frontend/tests/e2e/featured-image.mobile.spec.ts b/frontend/tests/e2e/featured-image.mobile.spec.ts
@@ -1,11 +1,16 @@
 import { test, expect } from "@playwright/test";
 
-test("test", async ({ page }) => {
-    await page.goto("/");
-    await expect(
-        page.getByRole("img", { name: "Featured satellite image" }),
-    ).toBeVisible();
-    await expect(
-        page.getByRole("heading", { name: "Featured Satellite Image" }),
-    ).toBeVisible();
+test.describe("Featured Image Test", () => {
+    test.use({
+        viewport: { width: 390, height: 844 },
+    });
+    test("Featured Image Test", async ({ page }) => {
+        await page.goto("/");
+        await expect(
+            page.getByRole("img", { name: "Featured satellite image" }),
+        ).toBeVisible();
+        await expect(
+            page.getByRole("heading", { name: "Featured Satellite Image" }),
+        ).toBeVisible();
+    });
 });
diff --git a/frontend/tests/e2e/navbar.desktop.spec.ts b/frontend/tests/e2e/navbar.desktop.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test";
 
+//BASE_URL: http://web.hypso.ies.ntnu.no:3000/
 test.describe("Navbar Test", () => {
     test("HomepageNavbarTest", async ({ page }) => {
         await page.goto("/");

diff --git a/frontend/tests/e2e/navbar.mobile.spec.ts b/frontend/tests/e2e/navbar.mobile.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test";
 
+//BASE_URL: http://web.hypso.ies.ntnu.no:3000/
 test.describe("Navbar Test", () => {
     test.use({
         viewport: { width: 390, height: 844 },
@@ -22,14 +23,16 @@ test.describe("Navbar Test", () => {
 
     test("NavbarClickLinksTest", async ({ page }) => {
         await page.goto("/");
-        await page.getByRole("link", { name: "logo" }).click();
-        await expect(page).toHaveURL("/");
         await page.getByRole("navigation").getByRole("button").click();
         await page.getByRole("button", { name: "Blog" }).click();
         await expect(page).toHaveURL("/blog");
+        await page.getByRole("navigation").getByRole("button").click();
         await page.getByRole("button", { name: "Projects" }).click();
         await expect(page).toHaveURL("/projects");
+        await page.getByRole("navigation").getByRole("button").click();
         await page.getByRole("button", { name: "Satellites" }).click();
         await expect(page).toHaveURL("/satellites");
+        await page.getByRole("link", { name: "logo" }).click();
+        await expect(page).toHaveURL("/");
     });
 });