@networkpro/web 1.7.0 → 1.7.2

package/README.md

@@ -31,10 +31,14 @@ All infrastructure and data flows are designed with **maximum transparency, self
 ```bash
 .
 ├── .github/workflows/     # CI workflows and automation
-├── .vscode/               # Recommended VS Code settings, extensions
+├── .vscode/
+│   ├── customData.json    # Custom CSS data for FontAwesome icons
+│   ├── extensions.json    # Recommended VSCodium / VS Code extensions
+│   ├── extensions.jsonc   # Commented version of extensions.json for reference
+│   └── settings.json      # User settings for VSCodium / VS Code
 ├── netlify-functions/
 │   └── cspReport.js       # Serverless function to receive and log CSP violation reports
-├── scripts/               # Utility scripts
+├── scripts/               # General utility scripts
 ├── src/
 │   ├── lib/               # Reusable components, styles, utilities
 │   ├── routes/            # SvelteKit routes (+page.svelte, +page.server.js)
@@ -43,13 +47,33 @@ All infrastructure and data flows are designed with **maximum transparency, self
 │   ├── app.html           # SvelteKit entry HTML with CSP/meta/bootentry
 │   └── service-worker.js  # Custom Service Worker
 ├── static/                # Static assets served at root
+│   ├── manifest.json      # Manifest file for PWA configuration
+│   ├── robots.txt         # Instructions for web robots
+│   └── sitemap.xml        # Sitemap for search engines
 ├── tests/
 │   ├── e2e/               # End-to-end Playwright tests
 │   └── unit/              # Vite unit tests
+├── _redirects             # Netlify redirects
 ├── netlify.toml           # Netlify configuration
 └── ...
 ```
 
+ 
+
+### E2E Test Structure
+
+End-to-end tests are located in `tests/e2e/` and organized by feature or route:
+
+```bash
+tests/
+├── e2e/
+│   ├── app.spec.js       # Desktop and mobile route tests
+│   ├── mobile.spec.js    # Mobile-specific assertions
+│   └── shared/
+│       └── helpers.js    # Shared test utilities (e.g., getFooter, setDesktopView, setMobileView)
+└── ...
+```
+
 ---
 
 ## 🛠 Getting Started
@@ -180,7 +204,7 @@ Located at `src/hooks.server.js`, this file is responsible for injecting dynamic
 To re-enable nonce generation for inline scripts in the future:
 
 1. Uncomment the nonce generation and injection logic in `hooks.server.js`.
-2. Add `nonce="**cspNonce**"` to inline `<script>` blocks in `app.html` or route templates.
+2. Add `nonce="__cspNonce__"` to inline `<script>` blocks in `app.html` or route templates.
 
 > 💡 The `[headers]` block in `netlify.toml` has been deprecated — all headers are now set dynamically from within SvelteKit.
 
@@ -244,6 +268,24 @@ This project uses a mix of automated performance, accessibility, and end-to-end
 
 &nbsp;
 
+### E2E Setup
+
+Playwright is included in `devDependencies` and installed automatically with:
+
+```bash
+npm install
+```
+
+To install browser dependencies (required once):
+
+```bash
+npx playwright install
+```
+
+> This downloads the browser binaries (Chromium, Firefox, WebKit) used for testing. You only need to run this once per machine or after a fresh clone.
+
+&nbsp;
+
 ### Running Tests
 
 Local testing via Vitest and Playwright:
@@ -254,9 +296,11 @@ npm run test:server     # Run server-side unit tests with Vitest
 npm run test:all        # Run full test suite
 npm run test:watch      # Watch mode for client tests
 npm run test:coverage   # Collect code coverage reports
-npm run test:e2e        # Runs Playwright E2E tests
+npm run test:e2e        # Runs Playwright E2E tests (with one retry on failure)
 ```
 
+> Playwright will retry failed tests once `(--retries=1)` to reduce false negatives from transient flakiness (network, render delay, etc.).
+
 Audit your app using Lighthouse:
 
 ```bash
@@ -399,15 +443,15 @@ The following CLI commands are available via `npm run <script>` or `pnpm run <sc
 
 <!-- markdownlint-enable MD024 -->
 
-| Script          | Description                                  |
-| --------------- | -------------------------------------------- |
-| `test`          | Alias for `test:all`                         |
-| `test:all`      | Run both client and server test suites       |
-| `test:client`   | Run client tests with Vitest                 |
-| `test:server`   | Run server-side tests with Vitest            |
-| `test:watch`    | Watch mode for client tests                  |
-| `test:coverage` | Collect coverage from both client and server |
-| `test:e2e`      | Run Playwright E2E tests                     |
+| Script          | Description                                            |
+| --------------- | ------------------------------------------------------ |
+| `test`          | Alias for `test:all`                                   |
+| `test:all`      | Run both client and server test suites                 |
+| `test:client`   | Run client tests with Vitest                           |
+| `test:server`   | Run server-side tests with Vitest                      |
+| `test:watch`    | Watch mode for client tests                            |
+| `test:coverage` | Collect coverage from both client and server           |
+| `test:e2e`      | Runs E2E tests with up to 1 automatic retry on failure |
 
 ---
 

package/package.json

@@ -4,7 +4,7 @@
   "sideEffects": [
     "./.netlify/shims.js"
   ],
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Locking Down Networks, Unlocking Confidence | Security, Networking, Privacy — Network Pro Strategies",
   "keywords": [
     "advisory",
@@ -60,7 +60,7 @@
     "test:server": "vitest --config vitest.config.server.js",
     "test:watch": "vitest --config vitest.config.client.js --watch",
     "test:coverage": "npm run test:client -- --run --coverage && npm run test:server -- --run --coverage",
-    "test:e2e": "npx playwright test",
+    "test:e2e": "npx playwright test --retries=1",
     "lint": "eslint . --ext .mjs,.js,.svelte",
     "lint:fix": "eslint . --ext .mjs,.js,.svelte --fix",
     "lint:jsdoc": "eslint . --ext .js,.mjs,.svelte --max-warnings=0",
@@ -80,7 +80,7 @@
     "nodemailer": "^7.0.3",
     "posthog-js": "^1.248.1",
     "semver": "^7.7.2",
-    "svelte": "5.33.6"
+    "svelte": "5.33.10"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
@@ -106,10 +106,10 @@
     "markdownlint-cli2": "^0.18.1",
     "mdsvex": "^0.12.6",
     "playwright": "^1.52.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.4",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.20.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended": "^16.0.0",
     "stylelint-order": "^7.0.0",

package/static/robots.txt

@@ -1,9 +1,10 @@
 # robots.txt
 #
+# 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
 #
-# www.robotstxt.org/
+# www.robotstxt.org
 
 User-agent: *
 

package/tests/e2e/app.spec.js

@@ -6,8 +6,23 @@ SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
 This file is part of Network Pro.
 ========================================================================== */
 
-import { expect, test } from "@playwright/test";
+/**
+ * @file app.spec.js
+ * @description Runs Playwright E2E tests with desktop and root route assertions.
+ * @module tests/e2e
+ * @author SunDevil311
+ * @updated 2025-05-29
+ */
 
+import { expect, test } from "@playwright/test";
+import {
+  getFooter,
+  getVisibleNav,
+  setDesktopView,
+  setMobileView,
+} from "./shared/helpers.js";
+
+// Root route should load successfully with the correct title
 test.describe("Desktop Tests", () => {
   test("should load successfully with the correct title", async ({
     page,
@@ -15,43 +30,52 @@ test.describe("Desktop Tests", () => {
   }) => {
     if (browserName === "webkit") test.skip();
 
-    await page.setViewportSize({ width: 1280, height: 720 });
-    await page.waitForTimeout(1500);
+    await setDesktopView(page);
     await page.goto("/");
     await page.waitForLoadState("load", { timeout: 60000 });
     await expect(page).toHaveTitle(/Locking Down Networks/);
   });
 
+  // Root route should display nav bar and about link
   test("should display the navigation bar and 'about' link", async ({
     page,
   }) => {
-    await page.setViewportSize({ width: 1280, height: 720 });
-    await page.waitForTimeout(1500);
+    await setDesktopView(page);
     await page.goto("/");
 
-    const nav = page.getByRole("navigation", { name: "Homepage navigation" });
-    await expect(nav).toBeVisible();
+    const nav = await getVisibleNav(page);
 
     const aboutLink = nav.getByRole("link", { name: "about" });
     await expect(aboutLink).toBeVisible();
     await expect(aboutLink).toHaveAttribute("href", "/about");
   });
 
+  // Root route should display the footer properly
   test("should display the footer correctly", async ({ page }) => {
-    await page.setViewportSize({ width: 1280, height: 720 });
-    await page.waitForTimeout(1500);
+    await setDesktopView(page);
     await page.goto("/");
 
     const footer = page.locator("footer");
     await expect(footer).toBeVisible();
   });
 
+  // About route should display the footer properly
+  test("should render the 'about' page with footer visible", async ({
+    page,
+  }) => {
+    await setDesktopView(page);
+    await page.goto("/about");
+
+    const footer = getFooter(page);
+    await expect(footer).toBeVisible();
+  });
+
+  // Root route should have a clickable "about" link
   test("should ensure the 'about' link is clickable", async ({ page }) => {
-    await page.setViewportSize({ width: 1280, height: 720 });
+    await setDesktopView(page);
     await page.goto("/");
 
-    const nav = page.getByRole("navigation", { name: "Homepage navigation" });
-    await expect(nav).toBeVisible({ timeout: 60000 });
+    const nav = await getVisibleNav(page);
 
     const aboutLink = nav.getByRole("link", { name: "about" });
     await expect(aboutLink).toBeVisible({ timeout: 60000 });
@@ -62,6 +86,7 @@ test.describe("Desktop Tests", () => {
   });
 }); // End Desktop Tests
 
+// Root route should load successfully with the correct title (mobile)
 test.describe("Mobile Tests", () => {
   test("should load successfully with the correct title on mobile", async ({
     page,
@@ -69,16 +94,15 @@ test.describe("Mobile Tests", () => {
   }) => {
     if (browserName === "webkit") test.skip();
 
-    await page.setViewportSize({ width: 375, height: 667 });
-    await page.waitForTimeout(1500);
+    await setMobileView(page);
     await page.goto("/");
     await page.waitForLoadState("load", { timeout: 60000 });
     await expect(page).toHaveTitle(/Locking Down Networks/);
   });
 
+  // Root route should display headings properly on mobile
   test("should display main content correctly on mobile", async ({ page }) => {
-    await page.setViewportSize({ width: 375, height: 667 });
-    await page.waitForTimeout(1500);
+    await setMobileView(page);
     await page.goto("/");
 
     const mainHeading = page.locator("h1, h2");

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");
+}