feat: publish HoloLake model-native living system source

product-source/hololake-platform/src/hooks/useLayoutPanels.test.ts

@@ -0,0 +1,165 @@
+import { beforeEach, describe, it, expect } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useLayoutPanels, COLUMN_MIN_WIDTHS } from './useLayoutPanels'
+import { APP_STORAGE_KEYS, LEGACY_APP_STORAGE_KEYS } from '../constants/appStorage'
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {}
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => { store[key] = value },
+    removeItem: (key: string) => { delete store[key] },
+    clear: () => { store = {} },
+  }
+})()
+
+Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true })
+
+type ExpectedPanelWidths = {
+  sidebar: number
+  noteList: number
+  inspector: number
+}
+
+function storePanelWidths(key: string, widths: ExpectedPanelWidths): void {
+  localStorage.setItem(key, JSON.stringify(widths))
+}
+
+function expectPanelWidths(
+  result: { current: ReturnType<typeof useLayoutPanels> },
+  widths: ExpectedPanelWidths,
+): void {
+  expect(result.current.sidebarWidth).toBe(widths.sidebar)
+  expect(result.current.noteListWidth).toBe(widths.noteList)
+  expect(result.current.inspectorWidth).toBe(widths.inspector)
+}
+
+describe('useLayoutPanels', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('exports column minimum widths', () => {
+    expect(COLUMN_MIN_WIDTHS.sidebar).toBe(220)
+    expect(COLUMN_MIN_WIDTHS.noteList).toBe(220)
+    expect(COLUMN_MIN_WIDTHS.editor).toBe(800)
+    expect(COLUMN_MIN_WIDTHS.inspector).toBe(240)
+  })
+
+  it('returns default widths', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    expectPanelWidths(result, { sidebar: 250, noteList: 300, inspector: 280 })
+  })
+
+  it('clamps sidebar resize to minimum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleSidebarResize(-500))
+    expect(result.current.sidebarWidth).toBe(COLUMN_MIN_WIDTHS.sidebar)
+  })
+
+  it('clamps note list resize to minimum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleNoteListResize(-500))
+    expect(result.current.noteListWidth).toBe(COLUMN_MIN_WIDTHS.noteList)
+  })
+
+  it('clamps inspector resize to minimum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleInspectorResize(500))
+    expect(result.current.inspectorWidth).toBe(COLUMN_MIN_WIDTHS.inspector)
+  })
+
+  it('clamps sidebar resize to maximum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleSidebarResize(500))
+    expect(result.current.sidebarWidth).toBe(400)
+  })
+
+  it('clamps note list resize to maximum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleNoteListResize(500))
+    expect(result.current.noteListWidth).toBe(500)
+  })
+
+  it('clamps inspector resize to maximum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleInspectorResize(-500))
+    expect(result.current.inspectorWidth).toBe(500)
+  })
+
+  it('defaults inspector to collapsed', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    expect(result.current.inspectorCollapsed).toBe(true)
+  })
+
+  it('accepts initial inspector collapsed override', () => {
+    const { result } = renderHook(() => useLayoutPanels({ initialInspectorCollapsed: false }))
+    expect(result.current.inspectorCollapsed).toBe(false)
+  })
+
+  it('restores persisted panel widths', () => {
+    storePanelWidths(APP_STORAGE_KEYS.layoutPanels, {
+      sidebar: 280,
+      noteList: 360,
+      inspector: 320,
+    })
+
+    const { result } = renderHook(() => useLayoutPanels())
+
+    expectPanelWidths(result, { sidebar: 280, noteList: 360, inspector: 320 })
+  })
+
+  it('clamps persisted panel widths to supported ranges', () => {
+    storePanelWidths(APP_STORAGE_KEYS.layoutPanels, {
+      sidebar: 120,
+      noteList: 700,
+      inspector: 90,
+    })
+
+    const { result } = renderHook(() => useLayoutPanels())
+
+    expectPanelWidths(result, {
+      sidebar: COLUMN_MIN_WIDTHS.sidebar,
+      noteList: 500,
+      inspector: COLUMN_MIN_WIDTHS.inspector,
+    })
+  })
+
+  it('falls back to defaults when persisted panel widths are malformed', () => {
+    localStorage.setItem(APP_STORAGE_KEYS.layoutPanels, '{not json')
+
+    const { result } = renderHook(() => useLayoutPanels())
+
+    expectPanelWidths(result, { sidebar: 250, noteList: 300, inspector: 280 })
+  })
+
+  it('persists resized panel widths with the Tolaria storage key', () => {
+    storePanelWidths(LEGACY_APP_STORAGE_KEYS.layoutPanels, {
+      sidebar: 260,
+      noteList: 340,
+      inspector: 300,
+    })
+
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleSidebarResize(24))
+
+    expect(JSON.parse(localStorage.getItem(APP_STORAGE_KEYS.layoutPanels) ?? '{}')).toEqual({
+      sidebar: 284,
+      noteList: 340,
+      inspector: 300,
+    })
+    expect(localStorage.getItem(LEGACY_APP_STORAGE_KEYS.layoutPanels)).toBeNull()
+  })
+
+  it('keeps the resized inspector width across close and reopen toggles', () => {
+    const { result } = renderHook(() => useLayoutPanels({ initialInspectorCollapsed: false }))
+
+    act(() => result.current.handleInspectorResize(-70))
+    expect(result.current.inspectorWidth).toBe(350)
+
+    act(() => result.current.setInspectorCollapsed(true))
+    act(() => result.current.setInspectorCollapsed(false))
+
+    expect(result.current.inspectorWidth).toBe(350)
+  })
+})