From d99e7e6b19c67fa412d4fb074da8e524847158ef Mon Sep 17 00:00:00 2001
From: luctra02 <64017398+luctra02@users.noreply.github.com>
Date: Sun, 21 Apr 2024 21:40:43 +0200
Subject: [PATCH] 345 write component test for pageheader (#346)

* test(frontend): :test_tube: write component test for sharebuttons

* test(frontend): :test_tube: write test for slicepreviewtest to check if the component slices the 100 first chars in the first paragraph

* test(frontend): :test_tube: write component test for fullBlogCard and check if the content is rendered correctly

* test(frontend): :test_tube: Write component test for pageheader and check if the title and subtitle is rendered correctly

---------

Co-authored-by: Mats <64415243+mnyflot@users.noreply.github.com>
---
 .../componentTests/fullblogcard.spec.tsx      | 61 +++++++++++++++++++
 .../tests/componentTests/pageheader.spec.tsx  | 51 ++++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 frontend/tests/componentTests/fullblogcard.spec.tsx
 create mode 100644 frontend/tests/componentTests/pageheader.spec.tsx

diff --git a/frontend/tests/componentTests/fullblogcard.spec.tsx b/frontend/tests/componentTests/fullblogcard.spec.tsx
new file mode 100644
index 0000000..001e7b7
--- /dev/null
+++ b/frontend/tests/componentTests/fullblogcard.spec.tsx
@@ -0,0 +1,61 @@
+import { test, expect } from "@playwright/experimental-ct-react";
+import FullBlogCard from "@/components/fullBlogCard";
+import { BlogPost } from "@/app/blog/page";
+import { Enum_Article_Tag } from "@/__generated__/graphql";
+
+test("FullBlogCard renders correctly", async ({ mount }) => {
+    const mockArticle: BlogPost = {
+        key: "mock-key",
+        title: "Mock Article Title",
+        content: [
+            {
+                type: "paragraph",
+                children: [
+                    {
+                        type: "text",
+                        text: "Mock article content preview text...",
+                    },
+                ],
+            },
+        ],
+        coverImage: "mock-cover-image.jpg",
+        datePublished: "2024-04-13",
+        tag: Enum_Article_Tag.Projects,
+        slug: "mock-article-slug",
+    };
+    // Mount the FullBlogCard component with mock data
+    const component = await mount(<FullBlogCard article={mockArticle} />);
+
+    //Check if the component is visible
+    await expect(component).toBeVisible();
+
+    //Check if title is correct
+    await expect(component.getByTestId("blogCardLink")).toContainText(
+        "Mock Article Title",
+    );
+
+    //Check if preview text for blog is visible
+    await expect(
+        component.getByText("Mock article content preview text..."),
+    ).toBeVisible();
+
+    //Check if the image is visible
+    await expect(component.getByRole("img")).toBeVisible();
+
+    //Check if datePublished is visible
+    await expect(component.getByText("April 13, 2024")).toBeVisible();
+
+    //Check if the tag is correct
+    await expect(component.getByTestId("articleTag")).toHaveText("Projects");
+
+    //Check if the urls on the links are correct
+    await expect(component.getByTestId("blogCardLink")).toHaveAttribute(
+        "href",
+        "/blog/mock-article-slug",
+    );
+
+    await expect(component.getByText("Read more")).toHaveAttribute(
+        "href",
+        "/blog/mock-article-slug",
+    );
+});
diff --git a/frontend/tests/componentTests/pageheader.spec.tsx b/frontend/tests/componentTests/pageheader.spec.tsx
new file mode 100644
index 0000000..3c7445d
--- /dev/null
+++ b/frontend/tests/componentTests/pageheader.spec.tsx
@@ -0,0 +1,51 @@
+import { test, expect } from "@playwright/experimental-ct-react";
+import {
+    PageHeader,
+    PageHeaderAndSubtitle,
+    PageSubtitle,
+} from "@/components/PageHeader";
+
+// Mock data
+const headerText = "Welcome to our Page";
+const subtitleText = "Explore our content";
+
+test("PageHeader renders correctly", async ({ mount }) => {
+    // Mount the PageHeader component with mock data
+    const component = await mount(<PageHeader>{headerText}</PageHeader>);
+
+    // Check if the component is visible
+    await expect(component).toBeVisible();
+
+    // Check if the header text is correct
+    await expect(component).toContainText(headerText);
+});
+
+test("PageSubtitle renders correctly", async ({ mount }) => {
+    // Mount the PageSubtitle component with mock data
+    const component = await mount(<PageSubtitle>{subtitleText}</PageSubtitle>);
+
+    // Check if the component is visible
+    await expect(component).toBeVisible();
+
+    // Check if the subtitle text is correct
+    await expect(component).toContainText(subtitleText);
+});
+
+test("PageHeaderAndSubtitle renders correctly", async ({ mount }) => {
+    // Mount the PageHeaderAndSubtitle component with mock data
+    const component = await mount(
+        <PageHeaderAndSubtitle>
+            <PageHeader>{headerText}</PageHeader>
+            <PageSubtitle>{subtitleText}</PageSubtitle>
+        </PageHeaderAndSubtitle>,
+    );
+
+    // Check if the component is visible
+    await expect(component).toBeVisible();
+
+    // Check if the header text is correct
+    await expect(component).toContainText(headerText);
+
+    // Check if the subtitle text is correct
+    await expect(component).toContainText(subtitleText);
+});