@networkpro/web 1.6.5 → 1.7.2

package/tests/e2e/mobile.spec.js

@@ -6,33 +6,29 @@ SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
 This file is part of Network Pro.
 ========================================================================== */
 
+/**
+ * @file mobile.spec.js
+ * @description Runs Playwright E2E tests with mobile assertions.
+ * @module tests/e2e
+ * @author SunDevil311
+ * @updated 2025-05-29
+ */
+
 import { expect, test } from "@playwright/test";
+import { getFooter, getVisibleNav, setMobileView } from "./shared/helpers.js";
 
+// Mobile viewport smoke tests for the root route
 test.describe("Mobile Tests", () => {
-  // Skip WebKit for mobile tests if it's problematic
   test("should display the main description text on mobile", async ({
     page,
     browserName,
   }) => {
-    if (browserName === "webkit") {
-      test.skip(); // Skip WebKit if it's problematic
-    }
-
-    await page.setViewportSize({ width: 375, height: 667 }); // Mobile size (e.g., iPhone 6)
-
-    // Add a small timeout before navigating to the page
-    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+    if (browserName === "webkit") test.skip();
 
+    await setMobileView(page);
     await page.goto("/");
-
-    // Wait for the page to load and for the title element to be available
     await page.waitForLoadState("domcontentloaded", { timeout: 60000 });
-    await page.waitForSelector(
-      'div.index-title1:has-text("Locking Down Networks")',
-      { timeout: 60000 },
-    );
 
-    // Assert that the correct text is found inside the <div>
     const description = page.locator(
       'div.index-title1:has-text("Locking Down Networks")',
     );
@@ -43,21 +39,12 @@ test.describe("Mobile Tests", () => {
     page,
     browserName,
   }) => {
-    if (browserName === "webkit") {
-      test.skip(); // Skip WebKit if it's problematic
-    }
-
-    await page.setViewportSize({ width: 375, height: 667 }); // Mobile size
-
-    // Add a small timeout before navigating to the page
-    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+    if (browserName === "webkit") test.skip();
 
+    await setMobileView(page);
     await page.goto("/");
-
-    // Wait for the page to load
     await page.waitForLoadState("domcontentloaded", { timeout: 60000 });
 
-    // Check that the main heading is visible on mobile
     const mainHeading = page.locator("h1, h2");
     await expect(mainHeading).toBeVisible();
   });
@@ -66,28 +53,31 @@ test.describe("Mobile Tests", () => {
     page,
     browserName,
   }) => {
-    if (browserName === "webkit") {
-      test.skip(); // Skip WebKit if it's problematic
-    }
-
-    await page.setViewportSize({ width: 375, height: 667 }); // Mobile size
-
-    // Add a small timeout before navigating to the page
-    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+    if (browserName === "webkit") test.skip();
 
+    await setMobileView(page);
     await page.goto("/");
 
-    // Wait for the page to load
-    await page.waitForLoadState("domcontentloaded", { timeout: 60000 });
+    const nav = await getVisibleNav(page);
+    const aboutLink = nav.getByRole("link", { name: "about" });
+    await expect(aboutLink).toBeVisible({ timeout: 60000 });
 
-    // Ensure the "about" link is visible and clickable
-    const aboutLink = page.locator("a", { hasText: "about" });
-    await expect(aboutLink).toBeVisible();
     await aboutLink.click();
-
-    // Assert that it navigates to the correct route
     await expect(page).toHaveURL(/\/about/);
   });
+
+  test("should display the footer on /about (mobile)", async ({
+    page,
+    browserName,
+  }) => {
+    if (browserName === "webkit") test.skip();
+
+    await setMobileView(page);
+    await page.goto("/about");
+
+    const footer = getFooter(page);
+    await expect(footer).toBeVisible();
+  });
 });
 
 // cspell:ignore domcontentloaded

package/tests/e2e/shared/helpers.js

@@ -0,0 +1,57 @@
+/* ==========================================================================
+tests/e2e/shared/helpers.js
+
+Copyright © 2025 Network Pro Strategies (Network Pro™)
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+/**
+ * @file helpers.js
+ * @description Stores commonly used functions for importing into E2E tests.
+ * @module tests/e2e/shared
+ * @author SunDevil311
+ * @updated 2025-05-29
+ */
+
+/**
+ * @param {import('@playwright/test').Page} page - The Playwright page object.
+ * @returns {Promise<void>}
+ * @description Sets standard desktop viewport and waits for animations.
+ */
+export async function setDesktopView(page) {
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await page.waitForTimeout(1500);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ * @returns {Promise<void>}
+ */
+export async function setMobileView(page) {
+  await page.setViewportSize({ width: 375, height: 667 });
+  await page.waitForTimeout(1500);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page - The Playwright page object.
+ * @returns {Promise<import('@playwright/test').Locator>} - A visible navigation locator.
+ * @throws {Error} If no visible navigation is found.
+ */
+export async function getVisibleNav(page) {
+  const navHome = page.getByRole("navigation", { name: "Homepage navigation" });
+  const navMain = page.getByRole("navigation", { name: "Main navigation" });
+
+  if (await navHome.isVisible()) return navHome;
+  if (await navMain.isVisible()) return navMain;
+
+  throw new Error("No visible navigation element found.");
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ * @returns {import('@playwright/test').Locator}
+ */
+export function getFooter(page) {
+  return page.locator("footer");
+}