From 2999ab85b7c38492988b20f576ee9b51952de75c Mon Sep 17 00:00:00 2001 From: Mats <64415243+mnyflot@users.noreply.github.com> Date: Thu, 18 Apr 2024 12:21:23 +0200 Subject: [PATCH] 275 create e2e test for blogs (#318) 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 * test(frontend): :white_check_mark: Make test for blogs pages. Edit featured image mobile test to use correct viewport * test(frontend): :fire: remove project tests as they are part of another issue * style(frontend): :art: prettier --------- Co-authored-by: Lucas Tran Co-authored-by: Jakob Grøtan Gregusson Co-authored-by: Jakobgg1243 Co-authored-by: Lucas Tran --- frontend/playwright.config.ts | 2 +- frontend/src/app/projects/page.tsx | 5 +++- .../src/components/BlockRendererClient.tsx | 8 ++--- frontend/src/components/BlogpageButtons.tsx | 1 + frontend/src/components/PageHeader.tsx | 12 ++++++-- frontend/src/components/fullBlogCard.tsx | 6 +++- frontend/tests/blog.desktop.spec.ts | 24 +++++++++++++++ frontend/tests/blog.mobile.spec.ts | 29 +++++++++++++++++++ .../tests/e2e/featured-image.mobile.spec.ts | 21 +++++++++----- frontend/tests/e2e/navbar.desktop.spec.ts | 1 + frontend/tests/e2e/navbar.mobile.spec.ts | 7 +++-- 11 files changed, 97 insertions(+), 19 deletions(-) create mode 100644 frontend/tests/blog.desktop.spec.ts create mode 100644 frontend/tests/blog.mobile.spec.ts diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts index 68e0ca9..0e2e9f4 100644 --- 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 index 6e4081a..dc63dd3 100644 --- a/frontend/src/app/projects/page.tsx +++ b/frontend/src/app/projects/page.tsx @@ -63,7 +63,9 @@ export default async function ProjectsPage() {
- Our Projects + + Our Projects + Information about our various projects are shown here. @@ -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" > diff --git a/frontend/src/components/BlockRendererClient.tsx b/frontend/src/components/BlockRendererClient.tsx index 7817767..d67f404 100644 --- 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

{children}

; } - return

{children}

; + return

{children}

; }, link: ({ url, children }) => { diff --git a/frontend/src/components/BlogpageButtons.tsx b/frontend/src/components/BlogpageButtons.tsx index 31f0533..1f67cbd 100644 --- a/frontend/src/components/BlogpageButtons.tsx +++ b/frontend/src/components/BlogpageButtons.tsx @@ -34,6 +34,7 @@ export default function BlogpageButtons({ className }: { className?: string }) { diff --git a/frontend/src/components/PageHeader.tsx b/frontend/src/components/PageHeader.tsx index 8c5964e..cc9dde3 100644 --- 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

{children}

; + return ( +

+ {children} +

+ ); } function PageSubtitle({ children }: { children?: React.ReactNode }) { - return

{children}

; + return ( +

+ {children} +

+ ); } // 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 index bf90e6c..973f040 100644 --- a/frontend/src/components/fullBlogCard.tsx +++ b/frontend/src/components/fullBlogCard.tsx @@ -63,7 +63,10 @@ export default function FullBlogCard({
)}
-

+

{article.tag ? article.tag : "General"}

@@ -74,6 +77,7 @@ export default function FullBlogCard({ {article.title} diff --git a/frontend/tests/blog.desktop.spec.ts b/frontend/tests/blog.desktop.spec.ts new file mode 100644 index 0000000..d8649d4 --- /dev/null +++ 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 new file mode 100644 index 0000000..6cb4e3e --- /dev/null +++ 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 index 094250c..2e58a43 100644 --- 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 index a4daaf9..005670e 100644 --- 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 index 8ac0a74..bd24424 100644 --- 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("/"); }); });