Error Boundary/Suspenseはどこに置く？ テスト・Storybook・UXのためのReactコンポーネント設計

export const CheapShop = () => {
  return (
    ErrorBoundary fallback={div>全画面エラーが発生しましたdiv>}>
      Suspense fallback={div>全画面読み込み中...div>}>
        div>
          h1>Super coolなECサイトh1>
          Cart />
          ProductList />
          Quote />
        div>
      Suspense>
    ErrorBoundary>
  );
};

export const Content = () => {
  const { cart } = useItem({ userId: "1" });

  if (cart.products.length === 0) {
    return div>カートには何もありません。div>;
  }

  return (
    div>
      div>カートの商品の金額:{cart.total}円div>
      ul>
        {cart.products.map((product) => (
          li key={product.id}>{product.title}li>
        ))}
      ul>
    div>
  );
};

it("カートに商品が表示されること", () => {
  server.use();
  render(Cart />);
  expect(screen.getByText("商品1")).toBeInTheDocument();
});

export const Content: FCProps> = (props) => (
  ErrorBoundary fallback={Error />}>
    Suspense fallback={Loading />}>
      Inner {...props} /> //下のコンポーネントで定義
    Suspense>
  ErrorBoundary>
);

const Inner: FCProps> = (props) => {
  
  const { data } = useContent();

  return (
    div>
      div>{data.id}div>
      div>{data.name}div>
    div>
  );
};

const Error = () => div>データの取得に失敗しました。div>;

const Loading = () => div>データを取得中です。div>;

describe("Cart", () => {
  it("正常時、カートの商品が表示される", () => {
    server.use();
    render(Cart />);
    expect(screen.getByText("商品1")).toBeInTheDocument();
  });

  it("ローディング時、ローディング表示が出る", () => {
    server.use();
    render(Cart />);
    expect(screen.getByText("データを取得中です。")).toBeInTheDocument();
  });

  it("エラー時、エラーメッセージが表示される", () => {
    server.use();
    render(Cart />);
    expect(
      screen.getByText("データの取得に失敗しました。")
    ).toBeInTheDocument();
  });
});

export const fetchProducts = async ({
  query,
}: Args): PromiseProductsSearchResponse> => {
  const response = await fetch(
    generateApiUrl(`/products/search?q=${encodeURIComponent(query)}`)
  );

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const data = await response.json();
  const result = productsSearchResponseSchema.safeParse(data);

  if (!result.success) {
    throw new Error(`Invalid products data: ${result.error.message}`);
  }

  return result.data;
};

describe("fetchProducts", () => {
  it("正常にProductsSearchResponseを返し、クエリパラメタが正しく含まれる", async () => {
    const onRequestSearchParams = vi.fn();
    const mockData = generateProductsSearchMock({
      products: [
        generateProductInSearchMock({
          id: 10,
          title: "テスト商品",
          description: "テスト用の商品説明",
          price: 1000,
        }),
      ],
      total: 1,
    });

    server.use(
      buildGetProductsSearchHandler.success({
        response: mockData,
        onRequestSearchParams,
      })
    );

    const { products, total } = await fetchProducts({ query: "test" });

    expect(products).toHaveLength(1);
    expect(products[0]).toMatchObject({
      title: "テスト商品",
      description: "テスト用の商品説明",
      price: 1000,
    });
    expect(total).toBe(1);

    
    expect(onRequestSearchParams).toBeCalledWith({ q: "test" });
  });

  it("HTTPエラーの場合はエラーを投げる", async () => {
    server.use(buildGetProductsSearchHandler.error({ status: 500 }));

    await expect(fetchProducts({ query: "test" })).rejects.toThrow(
      "HTTP error! status: 500"
    );
  });

  it("不正なデータの場合はエラーを投げる", async () => {
    const invalidData = generateProductsSearchMock({
      products: [
        generateProductInSearchMock({
          id: "invalid" as unknown as number, 
          title: "テスト商品",
        }),
      ],
    });

    server.use(
      buildGetProductsSearchHandler.success({
        response: invalidData,
      })
    );

    await expect(fetchProducts({ query: "test" })).rejects.toThrow(
      "Invalid products data:"
    );
  });
});

export const ProductList = () => {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);

  return (
    section>
      h2>商品一覧h2>
      label>
        検索
        input
          type="text"
          name="検索"
          onChange={(e) => setQuery(e.target.value)}
        />
      label>
      {query !== deferredQuery ? span>検索中span> : null}
      Result query={deferredQuery} />
    section>
  );
};

type Props = {
  query: string;
};

export const Result: FCProps> = ({ query }: Props) => {
  return (
    ErrorBoundary fallback={div>商品一覧でエラーが発生しましたdiv>}>
      Suspense fallback={div>商品一覧を読み込み中...div>}>
        Inner query={query} />
      Suspense>
    ErrorBoundary>
  );
};

const Inner: FCProps> = ({ query }) => {
  const { data } = useProducts({ query });

  if (data.products.length === 0) {
    return (
      div>
        h3>商品がありませんでした。h3>
      div>
    );
  }

  return (
    div>
      h3>商品件数:{data.total}件h3>
      div>
        {data.products.map((product) => (
          div key={product.id}>
            img src={product.thumbnail} alt={product.title} width={100} />
            h3>{product.title}h3>
            p>{product.description}p>
            div>{product.price}円div>
            hr />
          div>
        ))}
      div>
    div>
  );
};

type Args = {
  query: string;
};

export const useProducts = ({ query }: Args) => {
  const { data } = useSuspenseQuery({
    queryKey: ["products", query],
    queryFn: async () => {
      const response = await fetchProducts({ query });
      return response;
    },
  });

  return { data };
};

describe("Result", () => {
  it("商品が1つある場合、商品一覧と件数が表示されること", async () => {
    const onRequestSearchParams = vi.fn();

    server.use(
      buildGetProductsSearchHandler.success({
        response: generateProductsSearchMock({
          products: [
            generateProductInSearchMock({
              id: 1,
              title: "iPhone 15 Pro",
              description: "最新のApple製スマートフォン",
              category: "スマートフォン",
              price: 159800,
            }),
          ],
          total: 1,
        }),
        onRequestSearchParams,
      })
    );

    customRender(Result query="iPhone" />);

    expect(await screen.findByText("商品件数:1件")).toBeInTheDocument();
    expect(await screen.findByText("iPhone 15 Pro")).toBeInTheDocument();

    
    expect(onRequestSearchParams).toBeCalledWith({ q: "iPhone" });
  });
});

describe("Result", () => {
   it("商品が0の場合、商品がないメッセージが表示されること", async () => {
    server.use(
      buildGetProductsSearchHandler.success({
        response: generateProductsSearchMock({
          products: [],
          total: 0,
        }),
      })
    );

    customRender(Result query="" />);

    expect(
      await screen.findByText("商品がありませんでした。")
    ).toBeInTheDocument();
});

describe("Result", () => {
  it("ローディング中は読み込み中のメッセージが表示されること", async () => {
    server.use(buildGetProductsSearchHandler.loading());

    customRender(Result query="test" />);

    expect(screen.getByText("商品一覧を読み込み中...")).toBeInTheDocument();
  });
});

describe("Result", () => {
  it("エラー発生時はエラーメッセージが表示される", async () => {
    server.use(buildGetProductsSearchHandler.error({ status: 500 }));

    customRender(Result query="test" />);

    expect(
      await screen.findByText("商品一覧でエラーが発生しました")
    ).toBeInTheDocument();
  });
});

const meta: Metatypeof component> = {
  tags: ["autodocs"],
  component,
  parameters: {
    docs: {
      story: {
        
        
        inline: false,
        iframeHeight: 200,
      },
    },
  },
};

export default meta;

type Story = StoryObjtypeof meta>;

export const Default: Story = {
  parameters: {
    msw: {
      handlers: [
        buildGetProductsSearchHandler.success({
          response: generateProductsSearchMock({
            products: [
              generateProductInSearchMock({
                id: 1,
                title: "iPhone 9",
                description: "An apple mobile which is nothing like apple",
                category: "smartphones",
                price: 549,
                brand: "Apple",
              }),
              
            ],
            total: 3,
          }),
        }),
      ],
    },
  },
};

export const NoProduct: Story = {
  parameters: {
    msw: {
      handlers: [
        buildGetProductsSearchHandler.success({
          response: generateProductsSearchMock({
            products: [],
            total: 0,
          }),
        }),
      ],
    },
  },
};

export const Loading: Story = {
  parameters: {
    msw: {
      handlers: [buildGetProductsSearchHandler.loading()],
    },
  },
};

export const Error: Story = {
  parameters: {
    msw: {
      handlers: [buildGetProductsSearchHandler.error({ status: 500 })],
    },
  },
};

export const Cart = () => {
  return (
    div>
      h2>カートの中身h2>
      Content />
    div>
  );
};

export const Content = () => {
  return (
    ErrorBoundary fallback={div>カートの取得に失敗しました。div>}>
      Suspense fallback={div>カートの読み込み中...div>}>
        Inner />
      Suspense>
    ErrorBoundary>
  );
};

const Inner = () => {
  const { cart } = useItem({ userId: "1" });

  if (cart.products.length === 0) {
    return div>カートには何もありません。div>;
  }

  return (
    div>
      div>カートの商品の金額:{cart.total}円div>
      ul>
        {cart.products.map((product) => (
          li key={product.id}>{product.title}li>
        ))}
      ul>
    div>
  );
};

export const Quote = () => {
  return (
    div>
      h2>今日の名言h2>
      Content />
    div>
  );
};

export const Content = () => {
  return (
    ErrorBoundary fallback={Fallback />}>
      Suspense fallback={Loading />}>
        Inner />
      Suspense>
    ErrorBoundary>
  );
};

const Inner = () => {
  const { data } = useQuote();

  return (
    blockquote>
      p>"{data.quote}"p>
      cite>— {data.author}cite>
    blockquote>
  );
};

const Fallback = () => {
  return (
    blockquote>
      p>今日の名言の取得に失敗しました。p>
    blockquote>
  );
};

const Loading = () => {
  return (
    blockquote>
      p>今日の名言を読み込み中...p>
    blockquote>
  );
};

export const CheapShop = () => (
  ErrorBoundary fallback={div>全画面エラーが発生しましたdiv>}>
    Suspense fallback={div>全画面読み込み中...div>}>
      div>
        h1>Super coolなECサイトh1>
        Cart />
        ProductList />
        Quote />
      div>
    Suspense>
  ErrorBoundary>
);

export const Shop = () => (
  div>
    h1>Super coolなECサイトh1>
    Cart />
    ProductList />
    Quote />
  div>
);

export const ErrorOnQuote: Story = {
  parameters: {
    msw: {
      handlers: [buildGetQuoteHandler.error({ status: 500 }), ...handlers],
    },
  },
};

export const generateProductsSearchMock = (
  override?: PartialProductsSearchResponse>
): ProductsSearchResponse => ({
  products: [],
  total: 0,
  skip: 0,
  limit: 30,
  ...override,
});

const buildGetProductsSearchHandler = buildHttpHandlerBuilder({
  path: "/products/search",
  method: "get",
  defaultResponse: generateProductsSearchMock(),
});


const successHandler = buildGetProductsSearchHandler.success({
  response: generateProductsSearchMock({ products: [...], total: 3 }),
});


const loadingHandler = buildGetProductsSearchHandler.loading();


const errorHandler = buildGetProductsSearchHandler.error({ status: 500 });


const onRequestSearchParams = vi.fn();
const captureHandler = buildGetProductsSearchHandler.success({
  response: generateProductsSearchMock(),
  onRequestSearchParams,
});

export const TestProvider = ({ children }: Props) => {
  
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
        staleTime: 0,
      },
    },
  });

  return (
    QueryClientProvider client={queryClient}>
      ErrorBoundary fallback={div>全画面エラーdiv>}>
        Suspense fallback={div>全画面読み込み中...div>}>
          {children}
        Suspense>
      ErrorBoundary>
    QueryClientProvider>
  );
};

export const customRender = (
  ui: ReactElement,
  options?: OmitRenderOptions, "wrapper">
) => render(ui, { wrapper: TestProvider, ...options });

it("商品が表示される", async () => {
  render(
    QueryClientProvider client={queryClient}>
      ErrorBoundary fallback={div>エラーdiv>}>
        Suspense fallback={div>読み込み中div>}>
          Result query="iPhone" />
        Suspense>
      ErrorBoundary>
    QueryClientProvider>
  );
  expect(await screen.findByText("iPhone 15 Pro")).toBeInTheDocument();
});

it("商品が表示される", async () => {
  customRender(Result query="iPhone" />);
  expect(await screen.findByText("iPhone 15 Pro")).toBeInTheDocument();
});