#3414 webpage: split basic tests in more files

Signed-off-by: Patrizio Bekerle <[email protected]>

Author: pbek

webpage/tests/basic.spec.js

@@ -17,28 +17,4 @@ test("concept", async ({ page, config }) => {
   await expect(
     page.getByRole("heading", { level: 1, name: "Concept" }),
   ).toBeVisible();
-  await expect(
-    page.locator(".mermaid-diagram").getByText("Command-line snippet manager"),
-  ).toBeVisible();
-});
-
-test("overview page has image carousel", async ({ page, config }) => {
-  await page.goto(config.baseURL + "/getting-started/overview.html");
-  await expect(page).toHaveTitle(/Overview.*QOwnNotes/);
-
-  // Check carousel navigation buttons exist
-  await expect(
-    page.getByRole("button", { name: "Previous visual" }),
-  ).toBeVisible();
-  await expect(page.getByRole("button", { name: "Next visual" })).toBeVisible();
-
-  // Check carousel slide indicators exist
-  await expect(
-    page.getByRole("button", { name: /Carousel slide \d+ of 22/ }),
-  ).toHaveCount(22);
-
-  // Check the main image is visible
-  await expect(
-    page.getByRole("img", { name: "QOwnNotes screenshot" }),
-  ).toBeVisible();
 });

webpage/tests/carousel.spec.js

@@ -0,0 +1,23 @@
+// @ts-check
+import { test, expect } from "./fixtures.js";
+
+test("overview page has image carousel", async ({ page, config }) => {
+  await page.goto(config.baseURL + "/getting-started/overview.html");
+  await expect(page).toHaveTitle(/Overview.*QOwnNotes/);
+
+  // Check carousel navigation buttons exist
+  await expect(
+    page.getByRole("button", { name: "Previous visual" }),
+  ).toBeVisible();
+  await expect(page.getByRole("button", { name: "Next visual" })).toBeVisible();
+
+  // Check carousel slide indicators exist
+  await expect(
+    page.getByRole("button", { name: /Carousel slide \d+ of 22/ }),
+  ).toHaveCount(22);
+
+  // Check the main image is visible
+  await expect(
+    page.getByRole("img", { name: "QOwnNotes screenshot" }),
+  ).toBeVisible();
+});

webpage/tests/mermaid.spec.js

@@ -0,0 +1,33 @@
+// @ts-check
+import { test, expect } from "./fixtures.js";
+
+test("concept-mermaid", async ({ page, config }) => {
+  await page.goto(config.baseURL + "/getting-started/concept.html");
+
+  // Check that at least one of the mermaid diagram selectors works
+  // 1st test: vuepress 2 mermaid diagram
+  // 2nd test: vuepress 1 mermaid diagram
+  // const selector1 = page.locator("span.nodeLabel p").getByText("Command-line snippet manager");
+  const selector1 = page
+    .locator("g.node")
+    .getByTitle("Command-line snippet manager");
+  console.log(selector1);
+  const selector2 = page
+    .locator(".mermaid-diagram")
+    .getByText("Command-line snippet manager");
+
+  // await expect(page.locator("div.mermaid-content")).toBeVisible();
+
+  const results = await Promise.allSettled([
+    selector1.isVisible(),
+    selector2.isVisible(),
+  ]);
+
+  const atLeastOneVisible = results.some(
+    (result) => result.status === "fulfilled" && result.value === true,
+  );
+  await expect(
+    atLeastOneVisible,
+    'At least one mermaid selector should find "Command-line snippet manager"',
+  ).toBeTruthy();
+});