Product Catalogue Page Tests

Problem/Feature Description

A retail platform has a ProductCataloguePage component that fetches a list of products from an internal API and displays them. While the fetch is in progress the page shows a loading message; once the data arrives the products are listed; if the fetch fails an error banner is shown. The QA team has flagged that this component has no automated tests, and two defects have slipped through in the past month — a race condition that caused the loading spinner to stay visible after data arrived, and an error that silently swallowed API failures without showing any user feedback.

Your job is to write the missing tests for this component so that both classes of defect would be caught in CI going forward.

Output Specification

Write a test file ProductCataloguePage.test.tsx that tests the ProductCataloguePage component defined below. The tests should cover:

1. The happy path: the loading state appears initially, then disappears once products are rendered.
2. The error path: when the API call fails, an error message is displayed to the user.

You may mock the fetchProducts dependency however you see fit. Do not modify the component source. Only write the test file.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: src/ProductCataloguePage.tsx =============== import React, { useEffect, useState } from 'react'; import { fetchProducts } from './api';

interface Product { id: number; name: string; price: number; }

export function ProductCataloguePage() { const [products, setProducts] = useState<Product[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState<string | null>(null);

useEffect(() => { fetchProducts() .then(data => { setProducts(data); setLoading(false); }) .catch(() => { setError('Failed to load products. Please try again later.'); setLoading(false); }); }, []);

if (loading) { return <p>Loading products...</p>; }

if (error) { return ( <div role="alert"> <p>{error}</p> </div> ); }

return ( <main> <h1>Our Products</h1> <ul> {products.map(p => ( <li key={p.id}> <span>{p.name}</span> — <span>${p.price.toFixed(2)}</span> </li> ))} </ul> </main> ); }

=============== FILE: src/api.ts =============== export async function fetchProducts() { const res = await fetch('/api/products'); if (!res.ok) throw new Error('API error'); return res.json(); }