サイド・バーの幅を可変に (#385) (#396)

Reviewed-on: #396
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/components/layout/SidebarComponent.test.tsx

@@ -0,0 +1,124 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { HelmetProvider } from 'react-helmet-async'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import SidebarComponent from '@/components/layout/SidebarComponent'
+
+
+const sidebarWidth = (element: Element | null): string =>
+    (element as HTMLElement).style.getPropertyValue ('--sidebar-width')
+
+
+const sidebarRoot = (container: HTMLElement): Element =>
+    container.querySelector ('[style*="--sidebar-width"]')!
+
+
+const sidebarTree = (props: Partial<Parameters<typeof SidebarComponent>[0]>) => (
+    <HelmetProvider>
+      <div data-sidebar-container>
+	<SidebarComponent sidebarKey="test-sidebar" {...props}>
+	  Sidebar body
+	</SidebarComponent>
+      </div>
+    </HelmetProvider>)
+
+
+const renderSidebar = (
+    props: Partial<Parameters<typeof SidebarComponent>[0]> = {},
+    containerWidth = 800,
+) => {
+  Object.defineProperty (HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      get () {
+	return this.hasAttribute ('data-sidebar-container') ? containerWidth : 0
+      },
+  })
+
+  const rendered = render (sidebarTree (props))
+
+  return rendered
+}
+
+
+describe ('SidebarComponent', () => {
+  beforeEach (() => {
+    Object.defineProperty (window, 'innerWidth', {
+	configurable: true,
+	value:        1_000,
+    })
+
+    Object.defineProperty (HTMLElement.prototype, 'setPointerCapture', {
+	configurable: true,
+	value:        vi.fn (),
+    })
+    Object.defineProperty (HTMLElement.prototype, 'releasePointerCapture', {
+	configurable: true,
+	value:        vi.fn (),
+    })
+    Object.defineProperty (HTMLElement.prototype, 'hasPointerCapture', {
+	configurable: true,
+	value:        vi.fn (() => true),
+    })
+
+    vi.spyOn (HTMLElement.prototype, 'setPointerCapture').mockImplementation (() => {
+      ;
+    })
+    vi.spyOn (HTMLElement.prototype, 'releasePointerCapture').mockImplementation (() => {
+      ;
+    })
+    vi.spyOn (HTMLElement.prototype, 'hasPointerCapture').mockReturnValue (true)
+  })
+
+  it ('uses maxWidth without applying the container main-width reserve twice', async () => {
+    localStorage.setItem ('sidebar:test-sidebar:left:width', '700')
+    const onWidthChange = vi.fn ()
+
+    const { container } = renderSidebar ({ maxWidth: 700, onWidthChange }, 800)
+
+    await waitFor (() => {
+      expect (sidebarWidth (sidebarRoot (container))).toBe ('700px')
+    })
+    expect (onWidthChange).toHaveBeenLastCalledWith (700)
+  })
+
+  it ('resets width and removes only its storage key on double click', async () => {
+    localStorage.setItem ('sidebar:test-sidebar:right:width', '420')
+    localStorage.setItem ('sidebar:other-sidebar:right:width', '480')
+
+    const { container } = renderSidebar ({ side: 'right' }, 900)
+
+    await waitFor (() => {
+      expect (sidebarWidth (sidebarRoot (container))).toBe ('420px')
+    })
+
+    fireEvent.doubleClick (screen.getByRole ('separator', { name: 'サイドバー幅' }))
+
+    await waitFor (() => {
+      expect (sidebarWidth (sidebarRoot (container))).toBe ('256px')
+    })
+    expect (localStorage.getItem ('sidebar:test-sidebar:right:width')).toBeNull ()
+    expect (localStorage.getItem ('sidebar:other-sidebar:right:width')).toBe ('480')
+  })
+
+  it ('clamps current width on maxWidth changes without re-reading storage', async () => {
+    localStorage.setItem ('sidebar:test-sidebar:left:width', '420')
+
+    const { container, rerender } = renderSidebar ({ maxWidth: 420 }, 900)
+
+    await waitFor (() => {
+      expect (sidebarWidth (sidebarRoot (container))).toBe ('420px')
+    })
+
+    rerender (sidebarTree ({ maxWidth: 300 }))
+
+    await waitFor (() => {
+      expect (sidebarWidth (sidebarRoot (container))).toBe ('300px')
+    })
+
+    rerender (sidebarTree ({ maxWidth: 500 }))
+
+    await waitFor (() => {
+      expect (sidebarWidth (sidebarRoot (container))).toBe ('300px')
+    })
+  })
+})