SlidePanel tests

Author: platypii

README.md

@@ -3,7 +3,7 @@
 [![npm](https://img.shields.io/npm/v/hyperparam)](https://www.npmjs.com/package/hyperparam)
 [![workflow status](https://github.com/hyparam/hyperparam-cli/actions/workflows/ci.yml/badge.svg)](https://github.com/hyparam/hyperparam-cli/actions)
 [![mit license](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-![coverage](https://img.shields.io/badge/Coverage-56-darkred)
+![coverage](https://img.shields.io/badge/Coverage-59-darkred)
 
 This is the hyperparam cli tool.
 

src/components/viewers/SlidePanel.tsx

@@ -39,7 +39,8 @@ export default function SlidePanel({
   // Load initial panel width from localStorage if available
   const [panelWidth, setPanelWidth] = useState<number>(() => {
     const savedWidth = typeof window !== 'undefined' ? localStorage.getItem('panelWidth') : null
-    return savedWidth ? parseInt(savedWidth, 10) : defaultWidth
+    const parsedWidth = savedWidth ? parseInt(savedWidth, 10) : NaN
+    return !isNaN(parsedWidth) ? parsedWidth : defaultWidth
   })
 
   useEffect(() => {

test/components/viewers/SlidePanel.test.tsx

@@ -0,0 +1,176 @@
+/* eslint-disable @typescript-eslint/non-nullable-type-assertion-style */
+import React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, fireEvent, render } from '@testing-library/react'
+import SlidePanel from '../../../src/components/viewers/SlidePanel.js'
+
+describe('SlidePanel', () => {
+  // Minimal localStorage mock
+  const localStorageMock = (() => {
+    let store: Record<string, string> = {}
+    return {
+      getItem: (key: string) => store[key] ?? null,
+      setItem: (key: string, value: string) => { store[key] = value },
+      clear: () => { store = {} },
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      removeItem: (key: string) => { delete store[key] },
+    }
+  })()
+
+  beforeEach(() => {
+    vi.stubGlobal('localStorage', localStorageMock)
+    localStorage.clear()
+  })
+
+  it('renders main and panel content', () => {
+    const { getByText } = render(
+      <SlidePanel
+        mainContent={<div data-testid="main-content">Main</div>}
+        panelContent={<div data-testid="panel-content">Panel</div>}
+        isPanelOpen
+      />
+    )
+    expect(getByText('Main')).toBeDefined()
+    expect(getByText('Panel')).toBeDefined()
+  })
+
+  it('does not render the resizer if panel is closed', () => {
+    const { container } = render(
+      <SlidePanel
+        mainContent={<div>Main</div>}
+        panelContent={<div>Panel</div>}
+        isPanelOpen={false}
+      />
+    )
+    const resizer = container.querySelector('.resizer')
+    expect(resizer).toBeNull()
+  })
+
+  it('uses default width of 400 when localStorage is empty', () => {
+    const { container } = render(
+      <SlidePanel
+        mainContent={<div>Main</div>}
+        panelContent={<div>Panel</div>}
+        isPanelOpen
+      />
+    )
+    const panel = container.querySelector('.slidePanel') as HTMLElement
+    expect(panel.style.width).toBe('400px')
+  })
+
+  it('loads width from localStorage if present', () => {
+    localStorage.setItem('panelWidth', '250')
+    const { container } = render(
+      <SlidePanel
+        mainContent={<div>Main</div>}
+        panelContent={<div>Panel</div>}
+        isPanelOpen
+      />
+    )
+    const panel = container.querySelector('.slidePanel') as HTMLElement
+    expect(panel.style.width).toBe('250px')
+  })
+
+  it('falls back to default width if localStorage width is invalid', () => {
+    localStorage.setItem('panelWidth', 'not-a-number')
+    const { container } = render(
+      <SlidePanel
+        mainContent={<div>Main</div>}
+        panelContent={<div>Panel</div>}
+        isPanelOpen
+      />
+    )
+    const panel = container.querySelector('.slidePanel') as HTMLElement
+    // parseInt of 'not-a-number' yields NaN so default width of 400 is expected
+    expect(panel.style.width).toBe('400px')
+  })
+
+  it('respects minWidth from config', () => {
+    const { container } = render(
+      <SlidePanel
+        mainContent={<div>Main</div>}
+        panelContent={<div>Panel</div>}
+        isPanelOpen
+        config={{ slidePanel: { minWidth: 300 } }}
+      />
+    )
+    const resizer = container.querySelector('.resizer') as HTMLElement
+    const panel = container.querySelector('.slidePanel') as HTMLElement
+    expect(panel.style.width).toBe('400px')
+
+    // Simulate mousedown on resizer with clientX 800
+    act(() => {
+      fireEvent.mouseDown(resizer, { clientX: 800 })
+    })
+
+    // Simulate mousemove on document with clientX such that new width is less than minWidth
+    act(() => {
+      fireEvent.mouseMove(document, { clientX: 950 })
+      fireEvent.mouseUp(document)
+    })
+
+    // resizingClientX was set to 800 + 400 = 1200 so new width = max(300, 1200 - 950) = 300
+    expect(panel.style.width).toBe('300px')
+  })
+
+  it('handles dragging to resize', () => {
+    const { container } = render(
+      <SlidePanel
+        mainContent={<div>Main</div>}
+        panelContent={<div>Panel</div>}
+        isPanelOpen
+      />
+    )
+    const resizer = container.querySelector('.resizer') as HTMLElement
+    const panel = container.querySelector('.slidePanel') as HTMLElement
+    expect(panel.style.width).toBe('400px')
+
+    // Mock panel's offsetWidth to be 400px
+    Object.defineProperty(panel, 'offsetWidth', { value: 400, configurable: true })
+
+    // Simulate mousedown
+    act(() => {
+      fireEvent.mouseDown(resizer, { clientX: 800 })
+    })
+
+    // Simulate dragging
+    act(() => {
+      fireEvent.mouseMove(document, { clientX: 750 })
+    })
+
+    // End dragging
+    act(() => {
+      fireEvent.mouseUp(document)
+    })
+
+    // Expected new width = 1200 - 750 = 450
+    expect(panel.style.width).toBe('450px')
+    expect(localStorage.getItem('panelWidth')).toBe('450')
+  })
+
+  it('uses config defaultWidth if valid', () => {
+    const { container } = render(
+      <SlidePanel
+        mainContent={<div>Main</div>}
+        panelContent={<div>Panel</div>}
+        isPanelOpen
+        config={{ slidePanel: { defaultWidth: 500 } }}
+      />
+    )
+    const panel = container.querySelector('.slidePanel') as HTMLElement
+    expect(panel.style.width).toBe('500px')
+  })
+
+  it('ignores negative config.defaultWidth and uses 400 instead', () => {
+    const { container } = render(
+      <SlidePanel
+        mainContent={<div>Main</div>}
+        panelContent={<div>Panel</div>}
+        isPanelOpen
+        config={{ slidePanel: { defaultWidth: -10 } }}
+      />
+    )
+    const panel = container.querySelector('.slidePanel') as HTMLElement
+    expect(panel.style.width).toBe('400px')
+  })
+})