From 3e6a7fea43ec18b325620b01172228e12e0b0f18 Mon Sep 17 00:00:00 2001
From: imccyu <276526105+imccyu@users.noreply.github.com>
Date: Tue, 28 Jul 2026 23:04:55 +0800
Subject: [PATCH] test(ui-sidebar): pin the shell chrome with local DOM
 snapshots

First consumer of the runtime's single-slot mounting: the real apply mounts
on its own fiber, renderSlot('sidebar', ...) captures exactly the sidebar
slot's output, and update() re-renders the collapsed rail in place. The
.snap files carry semantic class names and svg fingerprints only.
---
 packages/client/ui-sidebar/package.json       |   1 +
 .../sidebar-snapshot.spec.tsx.snap            | 131 ++++++++++++++++++
 .../tests/sidebar-snapshot.spec.tsx           |  51 +++++++
 3 files changed, 183 insertions(+)
 create mode 100644 packages/client/ui-sidebar/tests/__snapshots__/sidebar-snapshot.spec.tsx.snap
 create mode 100644 packages/client/ui-sidebar/tests/sidebar-snapshot.spec.tsx

diff --git a/packages/client/ui-sidebar/package.json b/packages/client/ui-sidebar/package.json
index 5f7b4d0f23..7d85b111cf 100644
--- a/packages/client/ui-sidebar/package.json
+++ b/packages/client/ui-sidebar/package.json
@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@deepseek-ai/dsh-client-runtime": "workspace:^",
+    "@deepseek-ai/dsh-client-test-runtime": "workspace:^",
     "@deepseek-ai/dsh-client-ui-layout": "workspace:^",
     "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
     "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
diff --git a/packages/client/ui-sidebar/tests/__snapshots__/sidebar-snapshot.spec.tsx.snap b/packages/client/ui-sidebar/tests/__snapshots__/sidebar-snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..6678d3088e
--- /dev/null
+++ b/packages/client/ui-sidebar/tests/__snapshots__/sidebar-snapshot.spec.tsx.snap
@@ -0,0 +1,131 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`sidebar shell snapshots > renders the collapsed rail after the crossfade settles, in place 1`] = `
+<div
+  data-slot="sidebar"
+>
+  <div
+    class="root collapsed railIn"
+    style=""
+  >
+    <div
+      class="logoRow"
+    >
+      <button
+        aria-label="Open sidebar"
+        class="iconButton toggle"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="railFish"
+          data-content="965fe321"
+          fill="none"
+          height="17.6580310880829"
+          viewBox="0 0 23.16 17.04"
+          width="24"
+        />
+        <svg
+          class="panelIcon"
+          data-content="35f95b0c"
+          fill="none"
+          height="18"
+          viewBox="0 0 16 16"
+          width="18"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </button>
+    </div>
+    <button
+      aria-label="New session"
+      class="newSession"
+      type="button"
+    >
+      <svg
+        data-content="c0ce4dcc"
+        fill="none"
+        height="18"
+        viewBox="0 0 16 16"
+        width="18"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    </button>
+    <div
+      class="regionArea"
+    />
+    <div
+      class="footArea"
+    />
+  </div>
+</div>
+`;
+
+exports[`sidebar shell snapshots > renders the expanded column (wordmark, capsule, empty holes) 1`] = `
+<div
+  data-slot="sidebar"
+>
+  <div
+    class="root"
+    style="width: 300px;"
+  >
+    <div
+      class="logoRow"
+    >
+      <button
+        aria-label="New session"
+        class="brand wide"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          data-content="951274b9"
+          fill="none"
+          height="24"
+          viewBox="0 0 182 24"
+          width="182"
+        />
+      </button>
+      <button
+        aria-label="Collapse sidebar"
+        class="iconButton toggle"
+        type="button"
+      >
+        <svg
+          class="panelIcon"
+          data-content="35f95b0c"
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </button>
+    </div>
+    <button
+      aria-label="New session"
+      class="newSession"
+      type="button"
+    >
+      <svg
+        data-content="c0ce4dcc"
+        fill="none"
+        height="14"
+        viewBox="0 0 16 16"
+        width="14"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+      <span
+        class="newSessionLabel wide"
+      >
+        New Session
+      </span>
+    </button>
+    <div
+      class="regionArea"
+    />
+    <div
+      class="footArea"
+    />
+  </div>
+</div>
+`;
diff --git a/packages/client/ui-sidebar/tests/sidebar-snapshot.spec.tsx b/packages/client/ui-sidebar/tests/sidebar-snapshot.spec.tsx
new file mode 100644
index 0000000000..d9b1bcd473
--- /dev/null
+++ b/packages/client/ui-sidebar/tests/sidebar-snapshot.spec.tsx
@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+/**
+ * Local DOM snapshots of the sidebar shell through the real assembly path:
+ * SlotTestRuntime mounts the package apply on its own fiber, the auto frame
+ * supplies the layout's owner share at the render site, and the snapshot
+ * captures exactly the 'sidebar' slot's output (CSS-module class names
+ * folded to their semantic locals by the runtime's serializer). The child
+ * holes (sidebar.workspaces / sidebar.settings) have no registrant here, so
+ * the snapshots pin the shell chrome itself.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, waitFor } from '@testing-library/react'
+import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
+import { apply, inject } from '@deepseek-ai/dsh-client-ui-sidebar/client'
+
+afterEach(cleanup)
+
+async function bench() {
+  const runtime = await SlotTestRuntime.create()
+  runtime.provide('layout', { toggleSidebar: vi.fn() })
+  await runtime.declare({ 'sidebar': { kind: 'single', scope: 'root' } })
+  await runtime.mount({ inject: [...inject], apply })
+  return runtime
+}
+
+describe('sidebar shell snapshots', () => {
+  it('renders the expanded column (wordmark, capsule, empty holes)', async () => {
+    const runtime = await bench()
+    const slot = runtime.renderSlot('sidebar', { collapsed: false, width: 300 })
+    // Wordmark + capsule both start a session in the expanded state.
+    expect(slot.view.getAllByRole('button', { name: 'New session' })).toHaveLength(2)
+    expect(slot.container).toMatchSnapshot()
+    await runtime.dispose()
+  })
+
+  it('renders the collapsed rail after the crossfade settles, in place', async () => {
+    const runtime = await bench()
+    const slot = runtime.renderSlot('sidebar', { collapsed: false, width: 300 })
+    const shell = slot.container.firstElementChild
+    slot.update({ collapsed: true, width: 56 })
+    // The wide content (wordmark shortcut) unmounts at the 150ms settle;
+    // only the rail's capsule remains a New-session button.
+    await waitFor(() => {
+      expect(slot.view.getAllByRole('button', { name: 'New session' })).toHaveLength(1)
+    })
+    expect(slot.container).toMatchSnapshot()
+    // Same tree position: the owner flip re-rendered the shell in place.
+    expect(slot.container.firstElementChild).toBe(shell)
+    await runtime.dispose()
+  })
+})