fix: add retry, stable post key, enabled guard in BlogDropdown

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
yuneng-jiang 2026-02-21 17:15:14 -08:00
parent 1c0cfd7e3b
commit 929d592ef4
2 changed files with 12 additions and 5 deletions

View file

@ -2,7 +2,7 @@ import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { BlogDropdown } from "../BlogDropdown";
import { BlogDropdown } from "./BlogDropdown";
import { useDisableShowBlog } from "@/app/(dashboard)/hooks/useDisableShowBlog";
// Mock hooks
@ -33,7 +33,7 @@ const SAMPLE_POSTS = {
function createWrapper() {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
defaultOptions: { queries: { retry: false, retryDelay: 0 } },
});
return ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
@ -96,7 +96,10 @@ describe("BlogDropdown", () => {
});
it("shows error message and Retry button on fetch failure", async () => {
global.fetch = vi.fn().mockRejectedValueOnce(new Error("Network error"));
global.fetch = vi
.fn()
.mockRejectedValueOnce(new Error("Network error"))
.mockRejectedValueOnce(new Error("Network error"));
render(<BlogDropdown />, { wrapper: createWrapper() });
fireEvent.click(screen.getByText("Blog"));
@ -111,6 +114,7 @@ describe("BlogDropdown", () => {
global.fetch = vi
.fn()
.mockRejectedValueOnce(new Error("Network error"))
.mockRejectedValueOnce(new Error("Network error"))
.mockResolvedValueOnce({ ok: true, json: async () => SAMPLE_POSTS });
render(<BlogDropdown />, { wrapper: createWrapper() });

View file

@ -47,6 +47,9 @@ export const BlogDropdown: React.FC = () => {
queryKey: ["blogPosts"],
queryFn: fetchBlogPosts,
staleTime: 60 * 60 * 1000, // 1 hour — matches server-side TTL
retry: 1,
retryDelay: 0,
enabled: !disableShowBlog,
});
if (disableShowBlog) {
@ -77,9 +80,9 @@ export const BlogDropdown: React.FC = () => {
return (
<div style={{ minWidth: 280, maxWidth: 360 }}>
{data.posts.slice(0, 5).map((post, index) => (
{data.posts.slice(0, 5).map((post) => (
<a
key={index}
key={post.url}
href={post.url}
target="_blank"
rel="noopener noreferrer"