316 component test for blocksrendererclient (#322)

* chore(frontend): 📦 Donwload packages for playwright component testing * refactor(frontend): 🚚 move all e2e tests to a seperate folder * test(frontend): ✅ Added simple component test and configured alias handling * test(frontend): 🧪 create test file for blockrendererclient * test(frontend): 🧪 Write component test for blockrendererclient * refactor(frontend): ♻️ Run prettier --------- Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no>
NTNU-SmallSatLab · Apr 18, 2024 · c54d498 · c54d498
1 parent f6be12b
commit c54d498
Show file tree

Hide file tree

Showing 13 changed files with 986 additions and 9 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -38,3 +38,7 @@ next-env.d.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,7 +13,8 @@
         "watchTypes": " graphql-codegen -w",
         "test": "npx playwright test",
         "testui": "npx playwright test --ui",
-        "codegen": "npx playwright codegen"
+        "codegen": "npx playwright codegen",
+        "test-ct": "playwright test -c playwright-ct.config.ts"
     },
     "dependencies": {
         "@apollo/client": "^3.9.0-alpha.5",
@@ -77,6 +78,7 @@
         "@graphql-typed-document-node/core": "^3.2.0",
         "@iconify-icon/react": "^2.0.1",
         "@iconify/react": "^4.1.1",
+        "@playwright/experimental-ct-react": "^1.43.1",
         "@playwright/test": "^1.43.1",
         "@tailwindcss/typography": "^0.5.10",
         "@types/chart.js": "^2.9.41",

diff --git a/frontend/playwright-ct.config.ts b/frontend/playwright-ct.config.ts
@@ -0,0 +1,58 @@
+import { defineConfig, devices } from "@playwright/experimental-ct-react";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+
+// playwright.config.js
+
+import { resolve } from "path";
+export default defineConfig({
+    testDir: "./tests/componentTests",
+    /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+    snapshotDir: "./tests/componentTests/__snapshots__",
+    /* Maximum time one test can run for. */
+    timeout: 10 * 1000,
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* 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,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: "html",
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+
+        /* Port to use for Playwright component endpoint. */
+        ctPort: 3100,
+        ctViteConfig: {
+            resolve: {
+                alias: {
+                    "@/components": resolve("./src/components"),
+                    "@/lib": resolve("./src/lib"),
+                },
+            },
+        },
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+        {
+            name: "firefox",
+            use: { ...devices["Desktop Firefox"] },
+        },
+        {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+        },
+    ],
+});
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
@@ -12,7 +12,7 @@ import { defineConfig, devices } from "@playwright/test";
 const baseURL = `http://web.hypso.ies.ntnu.no:3000/`;
 
 export default defineConfig({
-    testDir: "./tests",
+    testDir: "./tests/e2e",
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */

diff --git a/frontend/playwright/index.html b/frontend/playwright/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Testing Page</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./index.tsx"></script>
+    </body>
+</html>
diff --git a/frontend/playwright/index.tsx b/frontend/playwright/index.tsx
@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';
diff --git a/frontend/tests/componentTests/RelatedProjectAndSatellites.spec.tsx b/frontend/tests/componentTests/RelatedProjectAndSatellites.spec.tsx
@@ -0,0 +1,20 @@
+import RelatedProjectsAndSatellites from "@/components/RelatedProjectsAndSatellites";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+test("should work", async ({ mount }) => {
+    // Mock project data
+    const mockProject = {
+        id: "test",
+        title: "Learn React",
+        previewImage: "test",
+        slug: "test",
+        isProject: true,
+        // Add other required properties
+    };
+
+    const component = await mount(
+        <RelatedProjectsAndSatellites project={mockProject} />,
+    );
+
+    await expect(component).toContainText("Learn React");
+});
diff --git a/frontend/tests/componentTests/blocksrendererclient.desktop.spec.tsx b/frontend/tests/componentTests/blocksrendererclient.desktop.spec.tsx
@@ -0,0 +1,42 @@
+import { test, expect } from "@playwright/experimental-ct-react";
+import BlockRendererClient from "@/components/BlockRendererClient";
+import { BlocksContent } from "@strapi/blocks-react-renderer";
+
+test("Check content rendering in BlockRendererClient", async ({ mount }) => {
+    // Mock content data
+    const mockContent: BlocksContent = [
+        {
+            type: "heading",
+            children: [
+                {
+                    type: "text",
+                    text: "Lorem ipsum",
+                },
+            ],
+            level: 1,
+        },
+        {
+            type: "paragraph",
+            children: [
+                {
+                    type: "text",
+                    text: "Dolor sit amet",
+                },
+            ],
+        },
+        // Add other content blocks as needed
+    ];
+
+    // Mount the BlockRendererClient with mock content
+    const component = await mount(
+        <BlockRendererClient content={mockContent} />,
+    );
+
+    // Assertions
+    await expect(component.getByRole("heading")).toContainText("Lorem ipsum");
+    await expect(component.getByRole("paragraph")).toContainText(
+        "Dolor sit amet",
+    );
+
+    // Add more assertions based on your content blocks
+});
diff --git a/...tend/tests/featured-image.desktop.spec.ts → .../tests/e2e/featured-image.desktop.spec.ts b/...tend/tests/featured-image.desktop.spec.ts → .../tests/e2e/featured-image.desktop.spec.ts
diff --git a/frontend/tests/featured-image.mobile.spec.ts → ...d/tests/e2e/featured-image.mobile.spec.ts b/frontend/tests/featured-image.mobile.spec.ts → ...d/tests/e2e/featured-image.mobile.spec.ts
diff --git a/frontend/tests/navbar.desktop.spec.ts → frontend/tests/e2e/navbar.desktop.spec.ts b/frontend/tests/navbar.desktop.spec.ts → frontend/tests/e2e/navbar.desktop.spec.ts
diff --git a/frontend/tests/navbar.mobile.spec.ts → frontend/tests/e2e/navbar.mobile.spec.ts b/frontend/tests/navbar.mobile.spec.ts → frontend/tests/e2e/navbar.mobile.spec.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Import styles, initialize component theme here.
		// import '../src/common.css';