@networkpro/web 1.25.10 → 1.25.11

package/CHANGELOG.md

@@ -22,6 +22,27 @@ This project attempts to follow [Keep a Changelog](https://keepachangelog.com/en
 
 ---
 
+## [1.25.11] - 2025-11-12
+
+### Added
+
+- `gotoDesktop(page, path)` and `gotoMobile(page, path)` helper functions to streamline viewport + navigation setup.
+- `clickAndWaitForNavigation(page, locator, options)` utility for safe SPA or full-page navigation detection with optional URL pattern matching.
+- `DEBUG_LOGS` flag in `helpers.js` to allow toggling of console logs for test diagnostics.
+- Navigation debug logs to `getVisibleNav()` to indicate which navigation region was detected (when debugging is enabled).
+
+### Changed
+
+- Refactored all E2E tests to use `gotoDesktop()` and `gotoMobile()` for consistency and DRY principles.
+- Replaced brittle direct `waitForNavigation()` usages with `clickAndWaitForNavigation()` helper.
+- Updated mobile and desktop tests to improve consistency across specs and improve visibility assertions.
+
+### Removed
+
+- Legacy direct `setViewportSize()` and `page.goto()` calls from individual test blocks (now handled via `goto*()` helpers).
+
+---
+
 ## [1.25.10] - 2025-11-12
 
 ### Changed
@@ -1855,7 +1876,8 @@ This enables analytics filtering and CSP hardening for the audit environment.
 
 <!-- Link references -->
 
-[Unreleased]: https://github.com/netwk-pro/netwk-pro.github.io/compare/v1.25.10...HEAD
+[Unreleased]: https://github.com/netwk-pro/netwk-pro.github.io/compare/v1.25.11...HEAD
+[1.25.11]: https://github.com/netwk-pro/netwk-pro.github.io/releases/tag/v1.25.11
 [1.25.10]: https://github.com/netwk-pro/netwk-pro.github.io/releases/tag/v1.25.10
 [1.25.9]: https://github.com/netwk-pro/netwk-pro.github.io/releases/tag/v1.25.9
 [1.25.8]: https://github.com/netwk-pro/netwk-pro.github.io/releases/tag/v1.25.8

package/cspell.json

@@ -14,6 +14,7 @@
     "CCPA",
     "CPRA",
     "cryptomator",
+    "domcontentloaded",
     "dont",
     "elif",
     "Embedder",
@@ -28,6 +29,7 @@
     "homescreen",
     "HREFTOP",
     "HSTS",
+    "interactable",
     "Izzy",
     "Keybase",
     "keypair",
@@ -40,6 +42,7 @@
     "lightningcss",
     "linksheet",
     "linktree",
+    "LOCALAPPDATA",
     "lsheet",
     "Mailvelope",
     "Maricopa",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@networkpro/web",
   "private": false,
-  "version": "1.25.10",
+  "version": "1.25.11",
   "description": "Locking Down Networks, Unlocking Confidence™ | Security, Networking, Privacy — Network Pro Strategies",
   "keywords": [
     "advisory",
@@ -54,6 +54,7 @@
     "verify": "npm run checkout",
     "delete": "rm -rf .svelte-kit node_modules package-lock.json",
     "clean": "npm run delete && npm cache clean --force && npm install",
+    "repair": "npm run delete && npx playwright uninstall && rm -rf %LOCALAPPDATA%/ms-playwright && npm install && npx playwright install",
     "upgrade": "ncu -u --format group --color",
     "check:updates": "ncu --format group --color",
     "test": "npm run test:all",

package/tests/e2e/app.spec.js

@@ -11,15 +11,16 @@ This file is part of Network Pro.
  * @description Runs Playwright E2E tests with desktop and root route assertions.
  * @module tests/e2e
  * @author Scott Lopez
- * @updated 2025-10-21
+ * @updated 2025-11-12
  */
 
 import { expect, test } from '@playwright/test';
 import {
+  clickAndWaitForNavigation,
   getFooter,
   getVisibleNav,
-  setDesktopView,
-  setMobileView,
+  gotoDesktop,
+  gotoMobile,
 } from './shared/helpers.js';
 
 // Root route should display nav bar and about link
@@ -29,9 +30,7 @@ test.describe('Desktop Tests', () => {
   test("should display the navigation bar and 'about' link", async ({
     page,
   }) => {
-    await setDesktopView(page);
-    await page.goto('/');
-    await page.waitForLoadState('domcontentloaded', { timeout: 60000 });
+    await gotoDesktop(page);
 
     const nav = await getVisibleNav(page);
 
@@ -42,9 +41,7 @@ test.describe('Desktop Tests', () => {
 
   // Root route should display the footer properly
   test('should display the footer correctly', async ({ page }) => {
-    await setDesktopView(page);
-    await page.goto('/');
-    await page.waitForLoadState('domcontentloaded', { timeout: 60000 });
+    await gotoDesktop(page);
 
     const footer = getFooter(page);
     await expect(footer).toBeVisible();
@@ -54,9 +51,7 @@ test.describe('Desktop Tests', () => {
   test("should render the 'about' page with footer visible", async ({
     page,
   }) => {
-    await setDesktopView(page);
-    await page.goto('/about');
-    await page.waitForLoadState('domcontentloaded', { timeout: 60000 });
+    await gotoDesktop(page, '/about');
 
     const footer = getFooter(page);
     await expect(footer).toBeVisible();
@@ -64,20 +59,16 @@ test.describe('Desktop Tests', () => {
 
   // Root route should have a clickable "about" link
   test("should ensure the 'about' link is clickable", async ({ page }) => {
-    await setDesktopView(page);
-    await page.goto('/');
-    await page.waitForLoadState('domcontentloaded', { timeout: 60000 });
+    await gotoDesktop(page);
 
     const nav = await getVisibleNav(page);
     const aboutLink = nav.getByRole('link', { name: 'about' });
-    await expect(aboutLink).toBeVisible();
-    await aboutLink.click();
 
-    // safer wait pattern with load state
-    await Promise.all([
-      page.waitForLoadState('load'),
-      page.waitForURL('**/about', { timeout: 60000 }),
-    ]);
+    await clickAndWaitForNavigation(page, aboutLink, {
+      urlPattern: /\/about/,
+      timeout: 60000,
+    });
+
     await expect(page).toHaveURL(/\/about/);
   });
 }); // End Desktop Tests
@@ -85,13 +76,10 @@ test.describe('Desktop Tests', () => {
 // Root route should display headings properly on mobile
 test.describe('Mobile Tests', () => {
   test('should display main content correctly on mobile', async ({ page }) => {
-    await setMobileView(page);
-    await page.goto('/');
-    await page.waitForLoadState('domcontentloaded', { timeout: 60000 });
+    await gotoMobile(page);
 
-    const mainHeading = page.locator('h1, h2');
-    await expect(mainHeading).toBeVisible();
+    // Ensure main headline is present on mobile
+    const h2 = page.locator('h2.index-title2');
+    await expect(h2).toContainText(/security/i);
   });
 });
-
-// cspell:ignore domcontentloaded

package/tests/e2e/mobile.spec.js

@@ -11,7 +11,7 @@ This file is part of Network Pro.
  * @description Runs Playwright E2E tests with mobile assertions.
  * @module tests/e2e
  * @author Scott Lopez
- * @updated 2025-10-21
+ * @updated 2025-11-12
  */
 
 import { expect, test } from '@playwright/test';
@@ -19,7 +19,7 @@ import {
   clickAndWaitForNavigation,
   getFooter,
   getVisibleNav,
-  setMobileView,
+  gotoMobile,
 } from './shared/helpers.js';
 
 // ---------------------------------------------------------------------------
@@ -27,21 +27,20 @@ import {
 // ---------------------------------------------------------------------------
 
 test.describe('Mobile Tests', () => {
-  // Increase timeout for all mobile tests
   test.setTimeout(90_000);
 
+  test.beforeEach(({ browserName }) => {
+    if (browserName === 'webkit')
+      test.skip('Skipping WebKit: manual validation only');
+  });
+
   // -------------------------------------------------------------------------
   // 🧱 Test 1: Main description text
   // -------------------------------------------------------------------------
   test('should display the main description text on mobile', async ({
     page,
-    browserName,
   }) => {
-    if (browserName === 'webkit') test.skip();
-
-    await setMobileView(page);
-    await page.goto('/');
-    await page.waitForLoadState('domcontentloaded', { timeout: 60_000 });
+    await gotoMobile(page);
 
     const description = page.locator(
       'div.index-title1:has-text("Locking Down Networks")',
@@ -52,18 +51,11 @@ test.describe('Mobile Tests', () => {
   // -------------------------------------------------------------------------
   // 🧱 Test 2: Main content
   // -------------------------------------------------------------------------
-  test('should display main content correctly on mobile', async ({
-    page,
-    browserName,
-  }) => {
-    if (browserName === 'webkit') test.skip();
-
-    await setMobileView(page);
-    await page.goto('/');
-    await page.waitForLoadState('domcontentloaded', { timeout: 60_000 });
+  test('should display main content correctly on mobile', async ({ page }) => {
+    await gotoMobile(page);
 
-    const mainHeading = page.locator('h1, h2');
-    await expect(mainHeading).toBeVisible();
+    const mainHeading = page.locator('h2.index-title2');
+    await expect(mainHeading).toContainText(/security/i);
   });
 
   // -------------------------------------------------------------------------
@@ -71,41 +63,27 @@ test.describe('Mobile Tests', () => {
   // -------------------------------------------------------------------------
   test("should ensure the 'about' link is clickable on mobile", async ({
     page,
-    browserName,
   }) => {
-    if (browserName === 'webkit') test.skip();
-
-    await setMobileView(page);
-    await page.goto('/', { waitUntil: 'networkidle' });
+    await gotoMobile(page);
 
     const nav = await getVisibleNav(page);
-
-    // Ensure the link exists before interacting
-    await page.waitForSelector('a[href="/about"]', { timeout: 10_000 });
     const aboutLink = nav.getByRole('link', { name: 'about' });
 
-    // Use the safe navigation helper
     await clickAndWaitForNavigation(page, aboutLink, {
       urlPattern: /\/about/,
       timeout: 60_000,
     });
+
+    await expect(page).toHaveURL(/\/about/);
   });
 
   // -------------------------------------------------------------------------
   // 🧱 Test 4: Footer presence on /about
   // -------------------------------------------------------------------------
-  test('should display the footer on /about (mobile)', async ({
-    page,
-    browserName,
-  }) => {
-    if (browserName === 'webkit') test.skip();
-
-    await setMobileView(page);
-    await page.goto('/about');
+  test('should display the footer on /about (mobile)', async ({ page }) => {
+    await gotoMobile(page, '/about');
 
     const footer = getFooter(page);
     await expect(footer).toBeVisible();
   });
 });
-
-// cspell:ignore domcontentloaded networkidle

package/tests/e2e/shared/helpers.js

@@ -11,19 +11,19 @@ This file is part of Network Pro.
  * @description Stores commonly used functions for importing into E2E tests.
  * @module tests/e2e/shared
  * @author Scott Lopez
- * @updated 2025-10-29
+ * @updated 2025-11-12
  */
 
-import { expect } from '@playwright/test';
+const DEBUG_LOGS = false; // set to true to enable console logs
 
 /**
- * @param {import('@playwright/test').Page} page - The Playwright page object.
+ * @param {import('@playwright/test').Page} page
  * @returns {Promise<void>}
- * @description Sets standard desktop viewport and waits for animations.
+ * @description Sets desktop viewport and allows layout to settle.
  */
 export async function setDesktopView(page) {
   await page.setViewportSize({ width: 1280, height: 720 });
-  await page.waitForTimeout(1500);
+  await page.waitForTimeout(1500); // Known-stable stabilization delay
 }
 
 /**
@@ -36,18 +36,47 @@ export async function setMobileView(page) {
 }
 
 /**
- * @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.
+ * Navigate with desktop viewport + initial DOM load.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} path
+ */
+export async function gotoDesktop(page, path = '/') {
+  await setDesktopView(page);
+  await page.goto(path, { waitUntil: 'domcontentloaded', timeout: 60000 });
+}
+
+/**
+ * Navigate with mobile viewport + initial DOM load.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} path
+ */
+export async function gotoMobile(page, path = '/') {
+  await setMobileView(page);
+  await page.goto(path, { waitUntil: 'domcontentloaded', timeout: 60000 });
+}
+
+/**
+ * Returns the visible navigation region.
+ * @param {import('@playwright/test').Page} page
+ * @returns {Promise<import('@playwright/test').Locator>}
  */
 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;
+  const timeout = 5000;
+
+  if (await navHome.isVisible({ timeout }).catch(() => false)) {
+    if (DEBUG_LOGS) console.log('✅ Detected visible nav: Homepage navigation');
+    return navHome;
+  }
 
-  throw new Error('No visible navigation element found.');
+  if (await navMain.isVisible({ timeout }).catch(() => false)) {
+    if (DEBUG_LOGS) console.log('✅ Detected visible nav: Main navigation');
+    return navMain;
+  }
+
+  throw new Error('❌ No visible navigation element found within timeout.');
 }
 
 /**
@@ -59,37 +88,28 @@ export function getFooter(page) {
 }
 
 /**
- * @function clickAndWaitForNavigation
- * @description Clicks a link or button and waits for navigation or URL change.
- * Works for both SPA (client-side) and full-page navigations.
+ * Click + wait for SPA or full navigation event.
  *
  * @param {import('@playwright/test').Page} page
  * @param {import('@playwright/test').Locator} locator
- * @param {object} [options]
- * @param {string|RegExp} [options.urlPattern] - URL or regex to match
- * @param {number} [options.timeout=60000] - Max wait time
+ * @param {{ urlPattern?: string | RegExp, timeout?: number }} [options]
  */
 export async function clickAndWaitForNavigation(page, locator, options = {}) {
   const { urlPattern = /\/.*/, timeout = 60000 } = options;
 
-  // Ensure the element is ready for interaction
   await locator.scrollIntoViewIfNeeded();
-  await locator.waitFor({ state: 'visible', timeout: 10000 });
-  await locator.click({ trial: true });
+  await locator.waitFor({ state: 'visible', timeout: 60000 });
 
-  // Capture current URL to detect SPA navigation
-  const currentUrl = page.url();
+  const previousURL = page.url();
 
-  // Handle both SPA transitions and full page reloads
-  await Promise.all([
-    page.waitForURL(urlPattern, { timeout }).catch(() => {}),
-    page.waitForLoadState('load', { timeout }).catch(() => {}),
-    locator.click(),
+  const [, newURL] = await Promise.all([
+    page.waitForURL(
+      (url) =>
+        url.toString() !== previousURL && urlPattern.test(url.toString()),
+      { timeout },
+    ),
+    locator.click().then(() => page.url()),
   ]);
 
-  // Confirm the URL changed successfully
-  await expect(page).toHaveURL(urlPattern, { timeout });
-
-  // Optional: log navigation success (helps in CI)
-  console.log(`✅ Navigation from ${currentUrl} → ${page.url()}`);
+  console.log(`✅ Navigation from ${previousURL} → ${newURL}`);
 }