@aiquants/daily-report 0.18.0 → 0.18.2

package/src/client/components/daily-report-resize-panels.spec.tsx

@@ -0,0 +1,305 @@
+/**
+ * Tests for resize panels integration in DailyReportList (desktop and mobile layouts).
+ * DailyReportList におけるリサイズパネル統合 (デスクトップおよびモバイルレイアウト) のテスト。
+ */
+
+import { fireEvent, render, screen } from "@testing-library/react"
+import { type ReactNode, useState } from "react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import type { DailyReportDetail, DailyReportItem } from "../../shared/types"
+import { DailyReportConfigProvider } from "../config-context"
+
+vi.mock("@aiquants/virtualscroll", async () => {
+    const { forwardRef: fwd, useImperativeHandle: useHandle } = await import("react")
+    return {
+        tapScrollCircleSampleVisual: () => null,
+        VirtualScroll: fwd((props: { testId?: string; itemCount: number; getItem: (index: number) => unknown; children: (item: unknown, index: number) => ReactNode }, ref: React.Ref<unknown>) => {
+            useHandle(ref, () => ({ scrollTo: () => 0, scrollToIndex: () => {}, getScrollPosition: () => 0, getContentSize: () => 0, getViewportSize: () => 0, updateItemSize: () => {}, focusItemAtIndex: () => {} }))
+            return (
+                <div data-testid={props.testId}>
+                    {Array.from({ length: props.itemCount }, (_, index) => (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: 代役なので index キーで十分
+                        <div key={index}>{props.children(props.getItem(index), index)}</div>
+                    ))}
+                </div>
+            )
+        }),
+    }
+})
+
+vi.mock("../contexts/daily-report-action-context", async (importOriginal) => {
+    const actual = await importOriginal<typeof import("../contexts/daily-report-action-context")>()
+    const noop = async () => {}
+    return {
+        ...actual,
+        useDailyReportActionContext: () => ({
+            pendingAddCommentIds: { current: new Map() },
+            pendingDeleteCommentIds: { current: new Map() },
+            pendingReadUpdates: { current: new Map() },
+            pendingStarUpdates: { current: new Map() },
+            resolvedIdMap: { current: new Map() },
+            version: 0,
+            items: [],
+            user: null,
+            isSseEnabled: false,
+            toggleSse: () => {},
+            addComment: noop,
+            deleteComment: noop,
+            toggleStar: noop,
+            toggleRead: noop,
+            createReport: async () => 0,
+            updateReport: noop,
+            publishReport: noop,
+            deleteReport: noop,
+            removeStaleItem: () => {},
+            refetchData: noop,
+            clearCacheAndRefetch: noop,
+        }),
+    }
+})
+
+const detailRef: { current: DailyReportDetail | null } = { current: null }
+vi.mock("../hooks/use-daily-report", async (importOriginal) => {
+    const actual = await importOriginal<typeof import("../hooks/use-daily-report")>()
+    return {
+        ...actual,
+        useDailyReportDetail: () => ({ report: detailRef.current, error: null, isLoading: false, isRefetching: false }),
+        useDailyReportPrefetch: () => () => {},
+    }
+})
+
+const { DailyReportList } = await import("./daily-report-list")
+
+const REPORT_HUB_ID = 100
+const item: DailyReportItem = { reportHubId: REPORT_HUB_ID, businessDate: "2026-09-08" }
+
+const buildDetail = (): DailyReportDetail => ({
+    reportHubId: REPORT_HUB_ID,
+    date: "2026-09-08",
+    interviewers: [],
+    externalComments: [],
+    isRead: false,
+    isStarred: false,
+    labels: [],
+    postedComments: [],
+    attachments: [],
+})
+
+const renderWithConfig = (node: ReactNode) =>
+    render(
+        <DailyReportConfigProvider
+            config={{
+                apiBasePath: "/daily_report/api",
+                fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" },
+            }}>
+            {node}
+        </DailyReportConfigProvider>,
+    )
+
+describe("DailyReportList / リサイズパネル統合", () => {
+    beforeEach(() => {
+        detailRef.current = buildDetail()
+        vi.stubGlobal(
+            "ResizeObserver",
+            class {
+                observe() {}
+                unobserve() {}
+                disconnect() {}
+            },
+        )
+    })
+
+    describe("デスクトップ表示 (isMobileLayout === false)", () => {
+        beforeEach(() => {
+            vi.stubGlobal(
+                "matchMedia",
+                vi.fn((query: string) => ({
+                    matches: false,
+                    media: query,
+                    onchange: null,
+                    addEventListener: vi.fn(),
+                    removeEventListener: vi.fn(),
+                    addListener: vi.fn(),
+                    removeListener: vi.fn(),
+                    dispatchEvent: vi.fn(),
+                })),
+            )
+        })
+
+        it("PanelGroup が水平方向で描画される", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            const panelGroup = container.querySelector('[data-panel-group-direction="horizontal"]')
+            expect(panelGroup).toBeInTheDocument()
+        })
+
+        it("左側の日報一覧パネル (Panel) が正しく配置される", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            const listPanel = container.querySelector('[data-panel-id="daily-report-list-panel"]')
+            expect(listPanel).toBeInTheDocument()
+            expect(listPanel?.querySelector('[data-testid="daily-report-list"]')).toBeInTheDocument()
+        })
+
+        it("右側の詳細ペインパネル (Panel) が正しく配置される", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            const detailPanel = container.querySelector('[data-panel-id="daily-report-detail-panel"]')
+            expect(detailPanel).toBeInTheDocument()
+            expect(detailPanel?.querySelector('[data-testid="daily-report-side-pane"]')).toBeInTheDocument()
+        })
+
+        it("リサイズハンドルがアクセシビリティ属性とインジケーターを備えて描画される", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            const handle = container.querySelector('[data-resize-handle-id="daily-report-list-handle"]')
+            expect(handle).toBeInTheDocument()
+            expect(handle).toHaveAttribute("aria-label")
+            expect(handle?.getAttribute("aria-label")).toContain("Resize")
+
+            // 視覚インジケーターおよび内部バーの存在検証
+            const indicator = handle?.querySelector("[data-resize-handle-indicator]")
+            expect(indicator).toBeInTheDocument()
+            const indicatorBar = indicator?.querySelector("[data-resize-handle-indicator-bar]")
+            expect(indicatorBar).toBeInTheDocument()
+        })
+
+        it("リサイズハンドルはキーボード操作可能なボタン要素である", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            const handle = container.querySelector('[data-resize-handle-id="daily-report-list-handle"]') as HTMLButtonElement
+            expect(handle).toBeInTheDocument()
+            expect(handle.tagName).toBe("BUTTON")
+            expect(handle.type).toBe("button")
+            expect(handle.disabled).toBe(false)
+        })
+
+        it("詳細ペインパネルに境界侵食防止用の左パディングクラス (pl-1.5) が付与されている", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            const detailPanel = container.querySelector('[data-panel-id="daily-report-detail-panel"]')
+            expect(detailPanel).toBeInTheDocument()
+            expect(detailPanel?.className).toContain("pl-1.5")
+        })
+
+        it("キーボードリサイズ操作により矢印キー操作が安全に処理される", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            const handle = container.querySelector('[data-resize-handle-id="daily-report-list-handle"]') as HTMLButtonElement
+            expect(handle).toBeInTheDocument()
+
+            // 左右の矢印キーでリサイズを実行
+            fireEvent.keyDown(handle, { key: "ArrowRight" })
+            fireEvent.keyDown(handle, { key: "ArrowLeft" })
+            expect(handle).toBeInTheDocument()
+        })
+
+        it("ポインタードラッグ操作によるリサイズ処理が安全に完了する", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            const handle = container.querySelector('[data-resize-handle-id="daily-report-list-handle"]') as HTMLButtonElement
+            expect(handle).toBeInTheDocument()
+
+            fireEvent.pointerDown(handle, { clientX: 360, pointerId: 1 })
+            fireEvent.pointerMove(handle, { clientX: 420, pointerId: 1 })
+            fireEvent.pointerUp(handle, { clientX: 420, pointerId: 1 })
+            expect(handle).toBeInTheDocument()
+        })
+
+        it("データが 0 件のとき、デスクトップ表示で空状態表示と PanelGroup が整合して描画される", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[]} selectedReportHubId={null} onSelectItem={() => {}} />)
+            const panelGroup = container.querySelector('[data-panel-group-direction="horizontal"]')
+            expect(panelGroup).toBeInTheDocument()
+            expect(screen.getByText("データがありません")).toBeInTheDocument()
+            expect(screen.getByText("左側の一覧から日報を選択してください。")).toBeInTheDocument()
+        })
+
+        it('ルート要素に data-testid="daily-report-root" が付与される', () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            expect(container.querySelector('[data-testid="daily-report-root"]')).toBeInTheDocument()
+        })
+    })
+
+    describe("コンテナ幅狭小化時のフォールバック (isContainerNarrow === true)", () => {
+        let resizeCallback: (entries: { target: Element; contentRect: { width: number } }[]) => void
+
+        beforeEach(() => {
+            vi.stubGlobal(
+                "matchMedia",
+                vi.fn((query: string) => ({
+                    matches: false, // デスクトップ扱い
+                    media: query,
+                    onchange: null,
+                    addEventListener: vi.fn(),
+                    removeEventListener: vi.fn(),
+                    addListener: vi.fn(),
+                    removeListener: vi.fn(),
+                    dispatchEvent: vi.fn(),
+                })),
+            )
+
+            vi.stubGlobal(
+                "ResizeObserver",
+                class {
+                    constructor(callback: (entries: { target: Element; contentRect: { width: number } }[]) => void) {
+                        resizeCallback = callback
+                    }
+                    observe(el: Element) {
+                        // 460px 未満の狭小コンテナ幅を即時シミュレート
+                        resizeCallback([{ target: el, contentRect: { width: 400 } }])
+                    }
+                    unobserve() {}
+                    disconnect() {}
+                },
+            )
+        })
+
+        it("利用可能幅が狭小化した場合は 2 カラムではなく 1 カラム表示へフォールバックする", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            // 狭小幅時は PanelGroup がアンマウントされ、一覧のみが描画される
+            expect(container.querySelector('[data-panel-group-direction="horizontal"]')).toBeNull()
+            expect(container.querySelector('[data-resize-handle-id="daily-report-list-handle"]')).toBeNull()
+            expect(screen.getByTestId("daily-report-list")).toBeInTheDocument()
+        })
+    })
+
+    describe("モバイル表示 (isMobileLayout === true)", () => {
+        beforeEach(() => {
+            vi.stubGlobal(
+                "matchMedia",
+                vi.fn((query: string) => ({
+                    matches: true,
+                    media: query,
+                    onchange: null,
+                    addEventListener: vi.fn(),
+                    removeEventListener: vi.fn(),
+                    addListener: vi.fn(),
+                    removeListener: vi.fn(),
+                    dispatchEvent: vi.fn(),
+                })),
+            )
+        })
+
+        it("PanelGroup および PanelResizeHandle は描画されず、一覧が直接描画される", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            expect(container.querySelector('[data-panel-group-direction="horizontal"]')).toBeNull()
+            expect(container.querySelector('[data-resize-handle-id="daily-report-list-handle"]')).toBeNull()
+            expect(screen.getByTestId("daily-report-list")).toBeInTheDocument()
+        })
+
+        it("初期表示時にモバイルオーバーレイが自動展開されないこと", () => {
+            const { container } = renderWithConfig(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+            expect(container.querySelector('aside[role="dialog"]')).toBeNull()
+        })
+
+        it("アイテムタップでモバイルオーバーレイが展開され、--aqdr-overlay-right のインラインスタイルが適用されること", () => {
+            const TestComponent = () => {
+                const [selectedId, setSelectedId] = useState<number | null>(null)
+                return <DailyReportList dailyReportItems={[item]} selectedReportHubId={selectedId} onSelectItem={setSelectedId} />
+            }
+            const { container } = renderWithConfig(<TestComponent />)
+            expect(container.querySelector('[data-daily-report-mobile-overlay="true"]')).toBeNull()
+
+            const card = container.querySelector(`[data-daily-report-button="${REPORT_HUB_ID}"]`)
+            expect(card).not.toBeNull()
+            if (!card) throw new Error("card not found")
+            fireEvent.keyDown(card, { key: "Enter" })
+
+            const overlayRoot = container.querySelector('[data-daily-report-mobile-overlay="true"]')
+            expect(overlayRoot).not.toBeNull()
+            expect(overlayRoot).toHaveStyle({ right: "var(--aqdr-overlay-right, 0px)" })
+        })
+    })
+})

package/src/client/hooks/use-responsive-layout.ts

@@ -10,7 +10,7 @@
  * `ScrollPane` の `pointerDragInputs` で**イベントのポインタ種別ごとに**制御する
  * (`CONTENT_DRAG_POINTER_INPUTS` 参照)。
  */
-import { useEffect, useState } from "react"
+import { useSyncExternalStore } from "react"
 
 /**
  * Viewport width at which the daily-report views switch to the mobile layout.
@@ -21,36 +21,43 @@ import { useEffect, useState } from "react"
  */
 export const MOBILE_LAYOUT_MEDIA_QUERY = "(max-width: 639px)"
 
+/**
+ * Subscribes to media query changes.
+ * メディアクエリの変更通知を購読する処理。
+ *
+ * @param callback - Function invoked on media query change. 変更時に呼び出されるコールバック。
+ * @returns Cleanup function to remove event listener. イベントリスナーを解除するクリーンアップ関数。
+ */
+const subscribe = (callback: () => void): (() => void) => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {}
+    const query = window.matchMedia(MOBILE_LAYOUT_MEDIA_QUERY)
+    query.addEventListener("change", callback)
+    return () => query.removeEventListener("change", callback)
+}
+
+/**
+ * Reads the current matching state of the media query on the client.
+ * クライアント環境における現在のメディアクエリ適合状態を取得する処理。
+ *
+ * @returns True if current viewport matches mobile layout. モバイル幅に適合している場合は true。
+ */
+const getSnapshot = (): boolean => (typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(MOBILE_LAYOUT_MEDIA_QUERY).matches : false)
+
+/**
+ * Returns the fallback state for server-side rendering.
+ * サーバーサイドレンダリング時のフォールバック状態を取得する処理。
+ *
+ * @returns False on server environment. サーバー環境では false。
+ */
+const getServerSnapshot = (): boolean => false
+
 /**
  * Reports whether the viewport is narrow enough for the mobile layout.
  * ビューポートがモバイルレイアウトの幅かどうかを返す処理。
  *
- * SSR と初回描画では `false` を返し、マウント後に実環境で更新する
- * (サーバーとクライアントで初期値を揃えてハイドレーション不一致を避ける)。
+ * Synchronizes with window.matchMedia via useSyncExternalStore without hydration delay.
+ * useSyncExternalStore を介してハイドレーション遅延なく window.matchMedia と同期する。
  *
  * @returns True on the mobile layout. モバイルレイアウトなら true。
  */
-export const useIsMobileLayout = (): boolean => {
-    const [isMobileLayout, setIsMobileLayout] = useState(false)
-
-    /**
-     * Tracks the viewport width.
-     * ビューポート幅を追跡する副作用。
-     *
-     * 目的: 画面回転・ウィンドウリサイズに追随する。
-     * 依存関係: [] - 監視対象は固定の定数なので購読は 1 度だけ張る。
-     * クリーンアップ: リスナーを解除する。
-     */
-    useEffect(() => {
-        if (typeof window === "undefined" || typeof window.matchMedia !== "function") return
-
-        const query = window.matchMedia(MOBILE_LAYOUT_MEDIA_QUERY)
-        const sync = () => setIsMobileLayout(query.matches)
-
-        sync()
-        query.addEventListener("change", sync)
-        return () => query.removeEventListener("change", sync)
-    }, [])
-
-    return isMobileLayout
-}
+export const useIsMobileLayout = (): boolean => useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)