diff --git a/frontend/src/hooks/useEntryDetail.test.tsx b/frontend/src/hooks/useEntryDetail.test.tsx index accc45b..d537821 100644 --- a/frontend/src/hooks/useEntryDetail.test.tsx +++ b/frontend/src/hooks/useEntryDetail.test.tsx @@ -4,16 +4,31 @@ import type { MockInstance } from "vitest"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { useEntryDetail } from "@/hooks/useEntryDetail"; import * as UseRoute from "@/hooks/useNavigation"; +import * as UseNavigation from "@/hooks/useNavigation"; vi.mock("swr", () => ({ default: vi.fn(), })); describe("useEntryDetail", () => { + let mockSetOptions: MockInstance; + let mockUseNavigation: MockInstance; let mockUseRoute: MockInstance; let mockUseSWR: MockInstance; beforeEach(() => { + mockSetOptions = vi.fn(); + mockUseNavigation = vi + .spyOn(UseNavigation, "useNavigation") + .mockReturnValue({ + setOptions: mockSetOptions, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } as any as ReturnType); + mockUseRoute = vi.spyOn(UseRoute, "useRoute").mockReturnValue({ + key: "", + name: "EntryDetail", + params: { date: "2020-01-02" }, + }); mockUseSWR = vi.spyOn(Swr, "default").mockReturnValue({ data: null, error: undefined, @@ -21,11 +36,6 @@ describe("useEntryDetail", () => { isValidating: false, mutate: () => Promise.reject(new Error("mutate is not implemented")), }); - mockUseRoute = vi.spyOn(UseRoute, "useRoute").mockReturnValue({ - key: "", - name: "EntryDetail", - params: { date: "2020-01-02" }, - }); }); afterEach(() => { @@ -40,10 +50,19 @@ describe("useEntryDetail", () => { const { result } = renderHook(() => useEntryDetail()); expect(result.current.date).toBe("2020-01-02"); expect(result.current.entryDetail).toBe(null); + expect(mockUseNavigation).toHaveBeenCalledTimes(1); expect(mockUseRoute).toHaveBeenCalledTimes(1); expect(mockUseSWR).toHaveBeenCalledWith( "https://blog.bouzuya.net/2020/01/02.json", expect.any(Function), ); }); + + it("calls useNavigation setOptions with date", () => { + const { result } = renderHook(() => useEntryDetail()); + expect(result.current.date).toBe("2020-01-02"); + expect(result.current.entryDetail).toBe(null); + expect(mockUseNavigation).toHaveBeenCalledTimes(1); + expect(mockSetOptions).toHaveBeenCalledWith({ title: "2020-01-02 " }); + }); }); diff --git a/frontend/src/hooks/useEntryDetail.ts b/frontend/src/hooks/useEntryDetail.ts index c8be517..50cc86a 100644 --- a/frontend/src/hooks/useEntryDetail.ts +++ b/frontend/src/hooks/useEntryDetail.ts @@ -1,5 +1,6 @@ +import { useEffect } from "react"; import useSWR from "swr"; -import { useRoute } from "@/hooks/useNavigation"; +import { useNavigation, useRoute } from "@/hooks/useNavigation"; import type { EntryDetail } from "@/types/EntryDetail"; export function useEntryDetail(): { @@ -9,11 +10,16 @@ export function useEntryDetail(): { const { params: { date }, } = useRoute<"EntryDetail">(); + const navigation = useNavigation(); const { data: entryDetail } = useSWR( `https://blog.bouzuya.net/${date.replaceAll("-", "/")}.json`, (key: string) => fetch(key).then((res): Promise => res.json()), ); + useEffect(() => { + navigation.setOptions({ title: `${date} ${entryDetail?.title ?? ""}` }); + }, [date, entryDetail, navigation]); + return { date, entryDetail: entryDetail ?? null }; }