@jskit-ai/shell-web 0.1.151 → 0.1.153

package/src/test/adaptiveShellSmoke.js

@@ -177,22 +177,56 @@ async function expectContentAwareDrawerFit(drawer, expect) {
   }
 }
 
-async function expectCentredRailNavigation(page, drawer, expect) {
+async function readNavigationIconCenters(drawer) {
+  const icons = drawer.locator("a.shell-menu-link-item[href] .v-icon");
+  await icons.first().waitFor({ state: "visible" });
+  const centers = [];
+  const iconCount = await icons.count();
+  for (let index = 0; index < iconCount; index += 1) {
+    const box = await icons.nth(index).boundingBox();
+    if (!box) {
+      throw new Error("Shell navigation exposed an unmeasurable icon.");
+    }
+    centers.push(box.x + box.width / 2);
+  }
+  return centers;
+}
+
+function isRequestedOrDescendantLocation(actualUrl, targetUrl) {
+  const normalizePathname = (value) => {
+    const pathname = String(value || "/");
+    return pathname === "/" ? pathname : pathname.replace(/\/+$/u, "");
+  };
+  const actualPathname = normalizePathname(actualUrl.pathname);
+  const targetPathname = normalizePathname(targetUrl.pathname);
+  const pathMatches = actualPathname === targetPathname || (
+    targetPathname !== "/" && actualPathname.startsWith(`${targetPathname}/`)
+  );
+
+  return pathMatches && actualUrl.search === targetUrl.search;
+}
+
+async function expectCentredRailNavigation(page, drawer, expect, expandedIconCenters) {
   const links = drawer.locator("a.shell-menu-link-item[href]");
   await expect(links.first()).toBeVisible();
   const firstLink = links.first();
-  const firstIcon = firstLink.locator(".v-icon").first();
-  const geometry = await Promise.all([drawer.boundingBox(), firstLink.boundingBox(), firstIcon.boundingBox()]);
-  const [drawerBox, linkBox, iconBox] = geometry;
+  const geometry = await Promise.all([drawer.boundingBox(), firstLink.boundingBox()]);
+  const [drawerBox, linkBox] = geometry;
 
   expect(drawerBox).not.toBeNull();
   expect(linkBox).not.toBeNull();
-  expect(iconBox).not.toBeNull();
   expect(linkBox.width).toBeGreaterThanOrEqual(48);
   expect(linkBox.height).toBeGreaterThanOrEqual(48);
-  expect(Math.abs(
-    iconBox.x + iconBox.width / 2 - (drawerBox.x + drawerBox.width / 2)
-  )).toBeLessThanOrEqual(1);
+  const railIconCenters = await readNavigationIconCenters(drawer);
+  expect(railIconCenters.length).toBe(expandedIconCenters.length);
+  for (let index = 0; index < railIconCenters.length; index += 1) {
+    expect(Math.abs(
+      railIconCenters[index] - (drawerBox.x + drawerBox.width / 2)
+    )).toBeLessThanOrEqual(1);
+    expect(Math.abs(
+      railIconCenters[index] - expandedIconCenters[index]
+    )).toBeLessThanOrEqual(1);
+  }
 
   const currentUrl = new URL(page.url());
   const linkCount = await links.count();
@@ -216,8 +250,14 @@ async function expectCentredRailNavigation(page, drawer, expect) {
   await navigationLink.locator(".v-icon").first().click();
   await expect.poll(() => {
     const actual = new URL(page.url());
-    return `${actual.pathname}${actual.search}`;
-  }).toBe(`${targetUrl.pathname}${targetUrl.search}`);
+    const leftOriginalLocation = (
+      actual.pathname !== currentUrl.pathname ||
+      actual.search !== currentUrl.search
+    );
+    return leftOriginalLocation && isRequestedOrDescendantLocation(actual, targetUrl);
+  }, {
+    message: "Shell navigation did not reach the requested route or its canonical descendant."
+  }).toBe(true);
 }
 
 async function openCompactDrawer(page, expect) {
@@ -288,13 +328,14 @@ async function runAdaptiveShellSmokeCase({
     await expect(drawer).toHaveAttribute("data-presentation", "drawer");
     await expectDrawerWidth(drawer, expect, await readConfiguredWidth(drawer, "data-drawer-width"));
     await expectContentAwareDrawerFit(drawer, expect);
+    const expandedIconCenters = await readNavigationIconCenters(drawer);
     await page.keyboard.press("Escape");
     await expect(drawer).toHaveAttribute("data-presentation", "drawer");
 
     await toggle.click();
     await expect(drawer).toHaveAttribute("data-presentation", "rail");
     await expectDrawerWidth(drawer, expect, await readConfiguredWidth(drawer, "data-rail-width"));
-    await expectCentredRailNavigation(page, drawer, expect);
+    await expectCentredRailNavigation(page, drawer, expect, expandedIconCenters);
     await expectNoHorizontalOverflow(page, expect);
   }
 }
@@ -318,4 +359,9 @@ function runAdaptiveShellSmoke({
   });
 }
 
-export { DEFAULT_VIEWPORTS, runAdaptiveShellSmoke, runAdaptiveShellSmokeCase };
+export {
+  DEFAULT_VIEWPORTS,
+  isRequestedOrDescendantLocation,
+  runAdaptiveShellSmoke,
+  runAdaptiveShellSmokeCase
+};

package/test/adaptiveShell.browser.test.js

@@ -1,110 +1,23 @@
 import assert from "node:assert/strict";
-import { spawn } from "node:child_process";
-import net from "node:net";
 import path from "node:path";
 import process from "node:process";
 import test from "node:test";
 import { fileURLToPath } from "node:url";
 import { chromium, expect } from "@playwright/test";
+import {
+  createChromiumLaunchOptions,
+  startViteFixture,
+  stopProcess
+} from "../../../tooling/testUtils/browserFixture.mjs";
 import {
   DEFAULT_VIEWPORTS,
   runAdaptiveShellSmokeCase
 } from "../src/test/adaptiveShellSmoke.js";
 
 const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
-const REPOSITORY_ROOT = path.resolve(TEST_DIRECTORY, "../../..");
 const FIXTURE_ROOT = path.resolve(TEST_DIRECTORY, "../fixtures/adaptive-shell");
-const VITE_CLI = path.join(REPOSITORY_ROOT, "node_modules", "vite", "bin", "vite.js");
 const RUN_BROWSER_TEST = process.env.JSKIT_SHELL_WEB_BROWSER_INTEGRATION === "1";
 
-function startVite(port) {
-  const child = spawn(process.execPath, [
-    VITE_CLI,
-    "--config",
-    path.join(FIXTURE_ROOT, "vite.config.mjs"),
-    "--port",
-    String(port),
-    "--clearScreen",
-    "false"
-  ], {
-    cwd: FIXTURE_ROOT,
-    stdio: ["ignore", "pipe", "pipe"],
-    env: {
-      ...process.env,
-      NO_COLOR: "1",
-      FORCE_COLOR: "0"
-    }
-  });
-  let output = "";
-  child.stdout.on("data", collectOutput);
-  child.stderr.on("data", collectOutput);
-
-  function collectOutput(chunk) {
-    output += chunk.toString("utf8");
-  }
-
-  async function waitUntilReady() {
-    await new Promise((resolve, reject) => {
-      const startedAt = Date.now();
-      const timer = setInterval(checkReadiness, 50);
-
-      function checkReadiness() {
-        if (new RegExp(`http://127\\.0\\.0\\.1:${port}/`, "u").test(output)) {
-          clearInterval(timer);
-          resolve();
-          return;
-        }
-        if (child.exitCode !== null) {
-          clearInterval(timer);
-          reject(new Error(`Vite exited before becoming ready.\n${output}`));
-          return;
-        }
-        if (Date.now() - startedAt >= 30_000) {
-          clearInterval(timer);
-          reject(new Error(`Timed out waiting for Vite.\n${output}`));
-        }
-      }
-    });
-  }
-
-  return Object.freeze({ child, waitUntilReady });
-}
-
-async function stopVite(runtime) {
-  const child = runtime?.child;
-  if (!child || child.exitCode !== null || child.signalCode !== null) {
-    return;
-  }
-  await new Promise((resolve) => {
-    const forceTimer = setTimeout(forceStop, 5_000);
-    child.once("exit", finishStop);
-    child.kill("SIGTERM");
-
-    function forceStop() {
-      child.kill("SIGKILL");
-    }
-
-    function finishStop() {
-      clearTimeout(forceTimer);
-      resolve();
-    }
-  });
-}
-
-async function reservePort() {
-  const server = net.createServer();
-  await new Promise((resolve, reject) => {
-    server.once("error", reject);
-    server.listen(0, "127.0.0.1", resolve);
-  });
-  const address = server.address();
-  assert.ok(address && typeof address === "object");
-  await new Promise((resolve, reject) => {
-    server.close((error) => error ? reject(error) : resolve());
-  });
-  return address.port;
-}
-
 function parseRgb(color) {
   const channels = String(color || "").match(/[\d.]+/gu)?.map(Number) || [];
   return {
@@ -166,6 +79,11 @@ async function assertTooltipContrast(page, linkName, interaction) {
 async function assertDrawerFit(page) {
   const drawer = page.getByTestId("jskit-shell-drawer");
   await expect(drawer).toHaveAttribute("data-presentation", "drawer");
+  assert.equal(
+    await drawer.locator(".v-list-subheader").count(),
+    0,
+    "The drawer must not repeat the surface label from the top app bar."
+  );
   const configuredSpacing = Number(await drawer.getAttribute("data-navigation-item-spacing"));
   assert.ok(Number.isFinite(configuredSpacing));
   await expect.poll(async () => {
@@ -255,25 +173,22 @@ test("shell-web adaptive navigation passes package-owned browser contracts", {
     : "set JSKIT_SHELL_WEB_BROWSER_INTEGRATION=1 to run shell-web browser integration",
   timeout: 180_000
 }, async () => {
-  const port = await reservePort();
-  const vite = startVite(port);
+  const vite = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
   let browser = null;
 
   try {
-    await vite.waitUntilReady();
-    const executablePath = String(process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH || "").trim();
-    browser = await chromium.launch({
-      headless: true,
-      ...(executablePath ? { executablePath } : {})
-    });
+    browser = await chromium.launch(createChromiumLaunchOptions());
     const context = await browser.newContext({
-      baseURL: `http://127.0.0.1:${port}`,
+      baseURL: vite.baseURL,
       locale: "en-US"
     });
 
     for (const viewport of DEFAULT_VIEWPORTS) {
       const page = await context.newPage();
       await runAdaptiveShellSmokeCase({ page, expect, viewport });
+      if (viewport.name !== "compact") {
+        await expect(page).toHaveURL(/\/home\/settings\/general$/u);
+      }
       await page.close();
     }
 
@@ -319,6 +234,6 @@ test("shell-web adaptive navigation passes package-owned browser contracts", {
     await context.close();
   } finally {
     await browser?.close();
-    await stopVite(vite);
+    await stopProcess(vite);
   }
 });

package/test/bootstrapClaimContract.test.js

@@ -3,14 +3,16 @@ import path from "node:path";
 import test from "node:test";
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
-import descriptor from "../package.descriptor.mjs";
+import packageJson from "../package.json" with { type: "json" };
+
+const packageMetadata = packageJson.jskit;
 
 const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
 const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
 const CREATE_APP_TEMPLATE_DIR = path.resolve(PACKAGE_DIR, "..", "..", "tooling", "create-app", "templates", "minimal-shell");
 
 function findFileMutation(id) {
-  const files = descriptor?.mutations?.files;
+  const files = packageMetadata?.mutations?.files;
   return Array.isArray(files)
     ? files.find((entry) => String(entry?.id || "").trim() === id) || null
     : null;

package/test/linkItemScaffoldContract.test.js

@@ -3,7 +3,9 @@ import path from "node:path";
 import test from "node:test";
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
-import descriptor from "../package.descriptor.mjs";
+import packageJson from "../package.json" with { type: "json" };
+
+const packageMetadata = packageJson.jskit;
 import {
   LOCAL_LINK_ITEM_COMPONENT_DEFINITIONS,
   findLocalLinkItemDefinition,
@@ -14,14 +16,14 @@ const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
 const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
 
 function findFileMutation(id) {
-  const files = descriptor?.mutations?.files;
+  const files = packageMetadata?.mutations?.files;
   return Array.isArray(files)
     ? files.find((entry) => String(entry?.id || "").trim() === id) || null
     : null;
 }
 
 function findSourceMutation(id) {
-  const sourceMutations = descriptor?.mutations?.source;
+  const sourceMutations = packageMetadata?.mutations?.source;
   return Array.isArray(sourceMutations)
     ? sourceMutations.find((entry) => String(entry?.id || "").trim() === id) || null
     : null;

package/test/playwrightContract.test.js

@@ -3,16 +3,19 @@ import { readFile } from "node:fs/promises";
 import path from "node:path";
 import test from "node:test";
 import { fileURLToPath } from "node:url";
+import {
+  isRequestedOrDescendantLocation
+} from "../src/test/adaptiveShellSmoke.js";
 
 const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 
 test("shell-web owns the exact Playwright dependency used by its generated smoke", async () => {
-  const descriptor = (await import(`${path.join(PACKAGE_ROOT, "package.descriptor.mjs")}?test=${Date.now()}`)).default;
+  const packageJson = JSON.parse(await readFile(path.join(PACKAGE_ROOT, "package.json"), "utf8"));
   const rootPackage = JSON.parse(await readFile(path.resolve(PACKAGE_ROOT, "../../package.json"), "utf8"));
 
-  assert.equal(descriptor.mutations.dependencies.dev["@playwright/test"], "1.61.1");
+  assert.equal(packageJson.jskit.mutations.dependencies.dev["@playwright/test"], "1.61.1");
   assert.equal(
-    descriptor.mutations.dependencies.dev["@playwright/test"],
+    packageJson.jskit.mutations.dependencies.dev["@playwright/test"],
     rootPackage.devDependencies["@playwright/test"]
   );
 });
@@ -25,6 +28,39 @@ test("adaptive shell smoke navigates through Playwright baseURL", async () => {
   assert.doesNotMatch(source, /http:\/\/127\.0\.0\.1/u);
 });
 
+test("adaptive shell navigation accepts canonical descendants without accepting prefix siblings", () => {
+  const requested = new URL("https://example.test/home/settings?tab=profile");
+
+  assert.equal(
+    isRequestedOrDescendantLocation(
+      new URL("https://example.test/home/settings?tab=profile"),
+      requested
+    ),
+    true
+  );
+  assert.equal(
+    isRequestedOrDescendantLocation(
+      new URL("https://example.test/home/settings/general?tab=profile"),
+      requested
+    ),
+    true
+  );
+  assert.equal(
+    isRequestedOrDescendantLocation(
+      new URL("https://example.test/home/settings-other?tab=profile"),
+      requested
+    ),
+    false
+  );
+  assert.equal(
+    isRequestedOrDescendantLocation(
+      new URL("https://example.test/home/settings/general?tab=security"),
+      requested
+    ),
+    false
+  );
+});
+
 test("adaptive shell smoke follows rendered layout state and waits for drawer transitions", async () => {
   const source = await readFile(path.join(PACKAGE_ROOT, "src/test/adaptiveShellSmoke.js"), "utf8");
 
@@ -35,7 +71,7 @@ test("adaptive shell smoke follows rendered layout state and waits for drawer tr
   assert.match(source, /toBeFocused/u);
   assert.match(source, /v-navigation-drawer__scrim/u);
   assert.match(source, /page\.keyboard\.press\("Escape"\)[\s\S]*data-presentation", "drawer"/u);
-  assert.match(source, /iconBox\.x \+ iconBox\.width \/ 2/u);
+  assert.match(source, /centers\.push\(box\.x \+ box\.width \/ 2\)/u);
   assert.match(source, /fit\.endGap - configuredSpacing/u);
   assert.match(source, /fit\.iconLabelGaps/u);
   assert.doesNotMatch(source, /viewport\.name === "compact"/u);

package/test/settingsPlacementContract.test.js

@@ -4,14 +4,16 @@ import test from "node:test";
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { assertGeneratedUiSourceContract } from "@jskit-ai/kernel/shared/support/generatedUiContract";
-import descriptor from "../package.descriptor.mjs";
+import packageJson from "../package.json" with { type: "json" };
+
+const packageMetadata = packageJson.jskit;
 import { resolveShellRouteTransitionKey } from "../src/client/support/routeTransitionKey.js";
 
 const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
 const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
 
 function readOutlets(target = "") {
-  const outlets = descriptor?.metadata?.ui?.placements?.outlets;
+  const outlets = packageMetadata?.metadata?.ui?.placements?.outlets;
   const normalizedTarget = String(target || "").trim();
   return Array.isArray(outlets)
     ? outlets.filter((entry) => String(entry?.target || "").trim() === normalizedTarget)
@@ -19,7 +21,7 @@ function readOutlets(target = "") {
 }
 
 function readContributions(target = "") {
-  const contributions = descriptor?.metadata?.ui?.placements?.contributions;
+  const contributions = packageMetadata?.metadata?.ui?.placements?.contributions;
   const normalizedTarget = String(target || "").trim();
   return Array.isArray(contributions)
     ? contributions.filter((entry) => String(entry?.target || "").trim() === normalizedTarget)
@@ -27,7 +29,7 @@ function readContributions(target = "") {
 }
 
 function readTopology(id = "", owner = "") {
-  const placements = descriptor?.metadata?.ui?.placements?.topology?.placements;
+  const placements = packageMetadata?.metadata?.ui?.placements?.topology?.placements;
   const normalizedId = String(id || "").trim();
   const normalizedOwner = String(owner || "").trim();
   return Array.isArray(placements)
@@ -46,12 +48,12 @@ function readPackageImportSpecifiers(source = "") {
 }
 
 function readClientContainerTokens() {
-  const tokens = descriptor?.metadata?.apiSummary?.containerTokens?.client;
+  const tokens = packageMetadata?.metadata?.apiSummary?.containerTokens?.client;
   return Array.isArray(tokens) ? tokens : [];
 }
 
 function findFileMutation(id) {
-  const files = descriptor?.mutations?.files;
+  const files = packageMetadata?.mutations?.files;
   return Array.isArray(files)
     ? files.find((entry) => String(entry?.id || "").trim() === id) || null
     : null;
@@ -110,6 +112,10 @@ test("shell-web shell layout registers navigation at the app layout level", asyn
   assert.match(source, /measureDrawerContentWidth/);
   assert.match(source, /DEFAULT_SHELL_NAVIGATION_ITEM_SPACING/);
   assert.match(source, /:prepend-gap="resolvedNavigationItemSpacing"/);
+  assert.match(source, /--shell-navigation-drawer-inset:\s*12px/);
+  assert.match(source, /--shell-navigation-rail-width/);
+  assert.match(source, /padding-inline-start:\s*var\(--shell-navigation-drawer-inset\)/);
+  assert.doesNotMatch(source, /<v-list-subheader/);
   assert.doesNotMatch(source, /:width="248"/);
   assert.doesNotMatch(source, /:rail-width="80"/);
   assert.match(source, /:model-value="drawerPresentation\.visible"/);
@@ -347,7 +353,7 @@ test("shell-web placement topology seeds global actions as a semantic shell plac
   assert.match(source, /outlet: "shell-layout:supporting-side-panel"/);
 });
 
-test("shell-web descriptor pre-optimizes package subpaths reached only through dynamic base-shell modules", async () => {
+test("shell-web packageMetadata pre-optimizes package subpaths reached only through dynamic base-shell modules", async () => {
   const [providerSource, placementSource, placementTopologySource, errorSource] = await Promise.all([
     readFile(path.join(PACKAGE_DIR, "src", "client", "providers", "ShellWebClientProvider.js"), "utf8"),
     readFile(path.join(PACKAGE_DIR, "templates", "src", "placement.js"), "utf8"),
@@ -374,16 +380,16 @@ test("shell-web descriptor pre-optimizes package subpaths reached only through d
     "@jskit-ai/shell-web/client/error"
   ]);
 
-  assert.deepEqual(descriptor?.metadata?.client?.optimizeDeps?.include, [
+  assert.deepEqual(packageMetadata?.metadata?.client?.optimizeDeps?.include, [
     "@jskit-ai/shell-web/client/placement",
     "@jskit-ai/shell-web/client/error"
   ]);
-  assert.deepEqual(descriptor?.metadata?.client?.optimizeDeps?.exclude, [
+  assert.deepEqual(packageMetadata?.metadata?.client?.optimizeDeps?.exclude, [
     "@jskit-ai/shell-web/client"
   ]);
 });
 
-test("shell-web descriptor metadata advertises adaptive shell outlets, default links, and installs the scaffold page", () => {
+test("shell-web packageMetadata metadata advertises adaptive shell outlets, default links, and installs the scaffold page", () => {
   const homePageMutationIds = [
     "shell-web-page-home-wrapper",
     "shell-web-page-home",