@aiquants/daily-report 0.10.0 → 0.11.0

package/src/client/components/daily-report-scroll-restoration.spec.tsx

@@ -0,0 +1,383 @@
+/**
+ * Scroll position restoration guards for the tab-unmounted list views.
+ * タブアンマウントをまたぐスクロール位置復元のガード。
+ *
+ * 実際に起きた欠陥 (両方とも本番ビルド + 実機ブラウザで再現・計測済み):
+ * 1. 初期表示が 6px (ITEM_VERTICAL_PADDING) スクロールされて見える —
+ *    親が ref の「値」をレンダー時に読んで props へ焼き込み、`initialScrollOffset: 0` (数値) が
+ *    旧 virtualscroll の `toPanePositionWithInset(0, top) = top` に落ちてペイン 6px で開始した。
+ * 2. タブ往復でスクロール位置がリセットされる (実測 3206 → 6) — タブは非制御で親は
+ *    タブ切替時に再レンダーされないため、復帰マウントには memo 計算時点の古い焼き込み値が渡った。
+ *
+ * 対策の契約 (ここで固定する):
+ * - 親は ref **オブジェクト**を渡し、子が**マウント時に一度だけ**値を読む (レンダー時読取の排除)。
+ * - 保存座標は onScroll が配信する**論理座標** (getScrollPosition のペイン座標ではない)。
+ * - DetailList はアンカー (記録時の選択日報) が一致するときだけ復元し、
+ *   復元マウントでは初回の「選択日報へのスクロール」を 1 回だけスキップする。
+ */
+
+import { act, fireEvent, render, screen } from "@testing-library/react"
+import type { ReactNode } from "react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import type { DailyReportDetail, DailyReportItem } from "../../shared/types"
+
+/** `VirtualScroll` 代役が記録する props (マウント/再レンダーごとに 1 件)。 */
+type CapturedProps = {
+    testId?: string
+    initialScrollOffset?: number
+    onScroll?: (position: number, totalHeight: number) => void
+    getItemHeight?: (index: number) => number
+}
+
+const captured: CapturedProps[] = []
+/** 代役の命令ハンドル経由で観測した scrollToIndex 呼び出し。 */
+const scrollToIndexCalls: Array<{ testId?: string; index: number }> = []
+
+/**
+ * Stand-in for VirtualScroll that renders every item and records scroll wiring.
+ * スクロール結線を記録しつつ全アイテムを描画する `VirtualScroll` の代役。
+ */
+vi.mock("@aiquants/virtualscroll", async () => {
+    const { forwardRef: fwd, useImperativeHandle: useHandle } = await import("react")
+    return {
+        tapScrollCircleSampleVisual: () => null,
+        VirtualScroll: fwd(
+            (
+                props: {
+                    itemCount: number
+                    getItem: (index: number) => unknown
+                    children: (item: unknown, index: number) => ReactNode
+                    contentProps?: Record<string, unknown>
+                } & CapturedProps,
+                ref: React.Ref<unknown>,
+            ) => {
+                captured.push({ testId: props.testId, initialScrollOffset: props.initialScrollOffset, onScroll: props.onScroll, getItemHeight: (props as { getItemHeight?: (index: number) => number }).getItemHeight })
+                useHandle(ref, () => ({
+                    scrollTo: () => 0,
+                    scrollToIndex: (index: number) => {
+                        scrollToIndexCalls.push({ testId: props.testId, index })
+                    },
+                    getScrollPosition: () => 0,
+                    getContentSize: () => 0,
+                    getViewportSize: () => 0,
+                    updateItemSize: () => {},
+                    focusItemAtIndex: () => {},
+                }))
+                return (
+                    <div data-testid={props.testId} {...props.contentProps}>
+                        {Array.from({ length: props.itemCount }, (_, index) => (
+                            // biome-ignore lint/suspicious/noArrayIndexKey: 代役なので index キーで十分
+                            <div key={index}>{props.children(props.getItem(index), index)}</div>
+                        ))}
+                    </div>
+                )
+            },
+        ),
+    }
+})
+
+/** 統合テストでアクションコンテキストが返すアイテム (テストごとに差し替える)。 */
+const contextItemsRef: { current: DailyReportItem[] } = { current: [] }
+
+/** 日報アクションはネットワーク/ルーターに依存するため、呼び出しを受け止めるだけの代役にする。 */
+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: contextItemsRef.current,
+            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,
+        }),
+    }
+})
+
+/** 詳細取得はキャッシュ層ごと差し替え、常に用意した 1 件を返す。 */
+vi.mock("../hooks/use-daily-report", async (importOriginal) => {
+    const actual = await importOriginal<typeof import("../hooks/use-daily-report")>()
+    return {
+        ...actual,
+        useDailyReportDetail: () => ({ report: buildDetail(), error: null, isLoading: false, isRefetching: false }),
+        useDailyReportPrefetch: () => () => {},
+    }
+})
+
+/** resolved-content が使う useSearchParams をルーター無しで満たす。 */
+vi.mock("react-router", async (importOriginal) => {
+    const actual = await importOriginal<typeof import("react-router")>()
+    return { ...actual, useSearchParams: () => [new URLSearchParams(), () => {}] as const }
+})
+
+const { DailyReportList } = await import("./daily-report-list")
+const { DailyReportDetailList } = await import("./daily-report-detail-list")
+const { DailyReportResolvedContent } = await import("./daily-report-resolved-content")
+const { DailyReportConfigProvider } = await import("../config-context")
+
+const buildItem = (reportHubId: number): DailyReportItem => ({ reportHubId, businessDate: "2026-07-31" })
+
+const buildDetail = (): DailyReportDetail => ({
+    reportHubId: 1,
+    date: "2026-07-31",
+    interviewers: [],
+    comments: [],
+    isRead: false,
+    isStarred: false,
+    labels: [],
+    commentItems: [],
+    attachments: [],
+})
+
+/** 設定コンテキストを与えて描画する。 */
+const renderView = (node: ReactNode) =>
+    render(
+        <DailyReportConfigProvider
+            config={{
+                apiBasePath: "/daily_report/api",
+                fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" },
+            }}>
+            {node}
+        </DailyReportConfigProvider>,
+    )
+
+/** 指定 testId の最新キャプチャ (再レンダーで積み直されるため末尾を返す)。 */
+const latestOf = (testId: string) => {
+    const props = [...captured].reverse().find((entry) => entry.testId === testId)
+    if (!props) throw new Error(`VirtualScroll props for ${testId} were not captured`)
+    return props
+}
+
+/** 指定 testId の「マウント初回」キャプチャ列 (initialScrollOffset の変遷検査用)。 */
+const allOf = (testId: string) => captured.filter((entry) => entry.testId === testId)
+
+beforeEach(() => {
+    captured.length = 0
+    scrollToIndexCalls.length = 0
+    contextItemsRef.current = []
+    vi.stubGlobal(
+        "ResizeObserver",
+        class {
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+        },
+    )
+    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() })),
+    )
+})
+
+describe("DailyReportList のスクロール共有スロット", () => {
+    it("マウント時に一度だけ ref を読み、その後の再レンダーで値を読み直さない (焼き込み排除)", () => {
+        const items = [buildItem(1), buildItem(2)]
+        const scrollOffsetRef = { current: 1234 }
+        const view = renderView(<DailyReportList dailyReportItems={items} selectedReportHubId={1} onSelectItem={() => {}} scrollOffsetRef={scrollOffsetRef} />)
+        expect(latestOf("daily-report-list").initialScrollOffset).toBe(1234)
+
+        // 外部で ref が動いても、同一マウント中の initialScrollOffset は変化しない
+        scrollOffsetRef.current = 9999
+        view.rerender(
+            <DailyReportConfigProvider config={{ apiBasePath: "/daily_report/api", fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" } }}>
+                <DailyReportList dailyReportItems={items} selectedReportHubId={2} onSelectItem={() => {}} scrollOffsetRef={scrollOffsetRef} />
+            </DailyReportConfigProvider>,
+        )
+        expect(latestOf("daily-report-list").initialScrollOffset).toBe(1234)
+    })
+
+    it("onScroll が配信する論理座標をそのまま ref へ書き戻す", () => {
+        const scrollOffsetRef = { current: 0 }
+        renderView(<DailyReportList dailyReportItems={[buildItem(1)]} selectedReportHubId={null} onSelectItem={() => {}} scrollOffsetRef={scrollOffsetRef} />)
+        act(() => latestOf("daily-report-list").onScroll?.(3206, 100000))
+        expect(scrollOffsetRef.current).toBe(3206)
+    })
+
+    it("ref 未指定でも 0 で開始し例外にならない (スロットは opt-in)", () => {
+        renderView(<DailyReportList dailyReportItems={[buildItem(1)]} selectedReportHubId={null} onSelectItem={() => {}} />)
+        expect(latestOf("daily-report-list").initialScrollOffset).toBe(0)
+        act(() => latestOf("daily-report-list").onScroll?.(10, 100000))
+    })
+})
+
+describe("DailyReportDetailList のアンカー付き復元", () => {
+    it("アンカーが現在の選択と一致すれば復元し、初回の選択スクロールはスキップする", () => {
+        const restoreRef = { current: { offset: 900, anchorReportHubId: 42, measuredHeights: new Map<number, number>() } }
+        renderView(<DailyReportDetailList dailyReportItems={[buildItem(41), buildItem(42)]} selectedItemId={42} scrollRestoreRef={restoreRef} />)
+        expect(latestOf("daily-report-detail-list").initialScrollOffset).toBe(900)
+        // 復元マウントでは scrollToIndex(選択) が走らない (復元位置の上書き防止)
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([])
+    })
+
+    it("復元マウント後の選択変更では従来どおり選択日報へスクロールする (スキップは 1 回だけ)", () => {
+        const restoreRef = { current: { offset: 900, anchorReportHubId: 42, measuredHeights: new Map<number, number>() } }
+        const items = [buildItem(41), buildItem(42)]
+        const view = renderView(<DailyReportDetailList dailyReportItems={items} selectedItemId={42} scrollRestoreRef={restoreRef} />)
+        view.rerender(
+            <DailyReportConfigProvider config={{ apiBasePath: "/daily_report/api", fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" } }}>
+                <DailyReportDetailList dailyReportItems={items} selectedItemId={41} scrollRestoreRef={restoreRef} />
+            </DailyReportConfigProvider>,
+        )
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([{ testId: "daily-report-detail-list", index: 0 }])
+        // アンカー同期の副作用が選択変更を追従する
+        expect(restoreRef.current.anchorReportHubId).toBe(41)
+    })
+
+    it("アンカーが選択と不一致なら復元せず、従来どおり選択日報へスクロールする", () => {
+        const restoreRef = { current: { offset: 900, anchorReportHubId: 41, measuredHeights: new Map<number, number>() } }
+        renderView(<DailyReportDetailList dailyReportItems={[buildItem(41), buildItem(42)]} selectedItemId={42} scrollRestoreRef={restoreRef} />)
+        expect(latestOf("daily-report-detail-list").initialScrollOffset).toBe(0)
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([{ testId: "daily-report-detail-list", index: 1 }])
+    })
+
+    it("アンカー一致かつ offset 0 の復元マウントでも初回の選択スクロールをスキップする (先頭復元の上書き防止)", () => {
+        // 復元判定は「アンカー一致」であって「offset > 0」ではない: 先頭まで戻してから
+        // タブを離れた場合も復元マウントであり、選択日報へ跳んではならない
+        const restoreRef = { current: { offset: 0, anchorReportHubId: 42, measuredHeights: new Map<number, number>() } }
+        renderView(<DailyReportDetailList dailyReportItems={[buildItem(41), buildItem(42)]} selectedItemId={42} scrollRestoreRef={restoreRef} />)
+        expect(latestOf("daily-report-detail-list").initialScrollOffset).toBe(0)
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([])
+    })
+
+    it("アンカー日報がアンマウント中に消えていても、次の正当な選択変更のスクロールを飲み込まない", () => {
+        // 武装したままの skip フラグが「解決できないアンカー」で残留し、その後の選択変更
+        // (新規作成ボタン等) を 1 回無言で飲み込む退行の検知。武装解除して通常スクロールする
+        const restoreRef = { current: { offset: 900, anchorReportHubId: 42, measuredHeights: new Map<number, number>() } }
+        const items = [buildItem(41), buildItem(43)] // 42 は削除済み
+        const view = renderView(<DailyReportDetailList dailyReportItems={items} selectedItemId={42} scrollRestoreRef={restoreRef} />)
+        expect(latestOf("daily-report-detail-list").initialScrollOffset).toBe(900)
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([])
+
+        view.rerender(
+            <DailyReportConfigProvider config={{ apiBasePath: "/daily_report/api", fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" } }}>
+                <DailyReportDetailList dailyReportItems={items} selectedItemId={43} scrollRestoreRef={restoreRef} />
+            </DailyReportConfigProvider>,
+        )
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([{ testId: "daily-report-detail-list", index: 1 }])
+    })
+
+    it("null アンカーの復元マウントでも、最初の選択確定のスクロールを飲み込まない", () => {
+        const restoreRef = { current: { offset: 900, anchorReportHubId: null, measuredHeights: new Map<number, number>() } }
+        const items = [buildItem(41), buildItem(42)]
+        const view = renderView(<DailyReportDetailList dailyReportItems={items} selectedItemId={null} scrollRestoreRef={restoreRef} />)
+        view.rerender(
+            <DailyReportConfigProvider config={{ apiBasePath: "/daily_report/api", fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" } }}>
+                <DailyReportDetailList dailyReportItems={items} selectedItemId={41} scrollRestoreRef={restoreRef} />
+            </DailyReportConfigProvider>,
+        )
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([{ testId: "daily-report-detail-list", index: 0 }])
+    })
+
+    it("復元スキップの消費は「スクロール済み」として記録され、直後の items 参照更新で復元が壊れない", () => {
+        // skip 消費時に lastScrolledRef を記録しないと、次の items 配列更新 (SSE チャンク等) で
+        // 効果が再実行され、消費済みフラグの保護が無いまま選択スクロールが復元位置を上書きする
+        const restoreRef = { current: { offset: 900, anchorReportHubId: 42, measuredHeights: new Map<number, number>() } }
+        const view = renderView(<DailyReportDetailList dailyReportItems={[buildItem(41), buildItem(42)]} selectedItemId={42} scrollRestoreRef={restoreRef} />)
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([])
+
+        // 同一内容・新しい配列 identity で再レンダー (ストリーム更新の最小モデル)
+        view.rerender(
+            <DailyReportConfigProvider config={{ apiBasePath: "/daily_report/api", fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" } }}>
+                <DailyReportDetailList dailyReportItems={[buildItem(41), buildItem(42)]} selectedItemId={42} scrollRestoreRef={restoreRef} />
+            </DailyReportConfigProvider>,
+        )
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([])
+    })
+
+    it("不一致経路の武装解除は恒久: 後からマウント時と同じ選択へ戻っても飲み込まない", () => {
+        // 武装解除を「一致分岐の中」へ動かす退行 (不一致では解除されない) の検知。
+        // 不一致で解除されないと、後でマウント時選択と同じ値へ選択が戻ったときに
+        // 残留フラグが消費され、正当なスクロールを 1 回飲み込む
+        const restoreRef = { current: { offset: 900, anchorReportHubId: 42, measuredHeights: new Map<number, number>() } }
+        const config = { apiBasePath: "/daily_report/api", fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" } }
+        const view = renderView(<DailyReportDetailList dailyReportItems={[buildItem(41), buildItem(43)]} selectedItemId={42} scrollRestoreRef={restoreRef} />)
+
+        // 不一致の選択変更 → 武装解除してスクロール (既存テストと同じ前段)
+        view.rerender(
+            <DailyReportConfigProvider config={config}>
+                <DailyReportDetailList dailyReportItems={[buildItem(41), buildItem(43)]} selectedItemId={43} scrollRestoreRef={restoreRef} />
+            </DailyReportConfigProvider>,
+        )
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([{ testId: "daily-report-detail-list", index: 1 }])
+
+        // アンカー日報が復活し、マウント時と同じ 42 を選択 → 解除済みなので通常どおりスクロールする
+        const revived = [buildItem(41), buildItem(43), buildItem(42)]
+        view.rerender(
+            <DailyReportConfigProvider config={config}>
+                <DailyReportDetailList dailyReportItems={revived} selectedItemId={42} scrollRestoreRef={restoreRef} />
+            </DailyReportConfigProvider>,
+        )
+        expect(scrollToIndexCalls.filter((c) => c.testId === "daily-report-detail-list")).toEqual([
+            { testId: "daily-report-detail-list", index: 1 },
+            { testId: "daily-report-detail-list", index: 2 },
+        ])
+    })
+
+    it("実測カード高さは共有スロットの Map をそのまま使い、アンマウント越しに座標空間を保存する", () => {
+        // ピクセル復元は「保存時と同じ高さ空間」でだけ正しい。スロットの Map が
+        // getItemHeight へ直結していること (= 再マウントで既定高さ推定に戻らないこと) を固定する
+        const measuredHeights = new Map<number, number>([[42, 777]])
+        const restoreRef = { current: { offset: 900, anchorReportHubId: 42, measuredHeights } }
+        renderView(<DailyReportDetailList dailyReportItems={[buildItem(41), buildItem(42)]} selectedItemId={42} scrollRestoreRef={restoreRef} />)
+        const getItemHeight = latestOf("daily-report-detail-list").getItemHeight
+        expect(getItemHeight?.(1)).toBe(777) // index 1 = reportHubId 42 の実測値
+        expect(getItemHeight?.(0)).not.toBe(777) // 未実測カードは既定推定
+    })
+
+    it("onScroll は offset のみ書き、アンカーは選択同期の副作用が管理する", () => {
+        const restoreRef = { current: { offset: 0, anchorReportHubId: null as number | null, measuredHeights: new Map<number, number>() } }
+        renderView(<DailyReportDetailList dailyReportItems={[buildItem(42)]} selectedItemId={42} scrollRestoreRef={restoreRef} />)
+        act(() => latestOf("daily-report-detail-list").onScroll?.(555, 100000))
+        expect(restoreRef.current).toEqual({ offset: 555, anchorReportHubId: 42, measuredHeights: expect.any(Map) })
+    })
+})
+
+describe("タブ往復の統合 (実 Radix Tabs + 実リスト)", () => {
+    /** Radix Tabs のトリガーを実ブラウザ相当のイベント列で押す。 */
+    const clickTab = (name: RegExp) => {
+        const trigger = screen.getByRole("tab", { name })
+        fireEvent.mouseDown(trigger)
+        fireEvent.focus(trigger)
+        fireEvent.click(trigger)
+    }
+
+    it("スクロール → 他タブ → 復帰で、復帰マウントの initialScrollOffset が最新のスクロール位置になる", () => {
+        contextItemsRef.current = [buildItem(1), buildItem(2), buildItem(3)]
+        renderView(<DailyReportResolvedContent userId="ENC1" />)
+
+        // 初回マウントは 0 (数値 0 は virtualscroll 側でペイン 0 = 本当の先頭に写像される)
+        const firstMount = allOf("daily-report-list")[0]
+        expect(firstMount?.initialScrollOffset).toBe(0)
+
+        // ユーザーのスクロールを模す (論理座標 3206)
+        act(() => latestOf("daily-report-list").onScroll?.(3206, 100000))
+
+        // DetailList タブへ → List がアンマウントされる
+        clickTab(/DetailList/)
+        expect(screen.queryByTestId("daily-report-list")).toBeNull()
+
+        // List タブへ復帰 → 復帰マウントは最新位置で開始する (旧実装は焼き込み値へリセットされた)
+        const capturedBefore = allOf("daily-report-list").length
+        clickTab(/^📄 List$/)
+        const returnedMounts = allOf("daily-report-list").slice(capturedBefore)
+        expect(returnedMounts.length).toBeGreaterThan(0)
+        expect(returnedMounts[0]?.initialScrollOffset).toBe(3206)
+    })
+})