Интернет-магазин — тестовое задание

Что не так. addItem добавляет товар в тот же массив и передаёт его в setItems. Ссылка не изменилась — React пропускает перерисовку. Товар появляется в корзине только после следующего несвязанного обновления.

function addItem(product: Product) {
  items.push({ ...product, qty: 1 });
  setItems(items);
}

Как исправить. Всегда создавайте новый массив. Удобнее всего собрать действия в редьюсер:

export function cartReducer(items: CartItem[], action: CartAction): CartItem[] {
  switch (action.type) {
    case "add": {
      const existing = items.find((item) => item.id === action.product.id);
      return existing
        ? items.map((item) => (item.id === existing.id ? { ...item, qty: item.qty + 1 } : item))
        : [...items, { ...action.product, qty: 1 }];
    }
    case "remove":
      return items.filter((item) => item.id !== action.id);
  }
}

Что не так. Каждый ввод символа запускает fetch, предыдущие запросы не отменяются. Ответ на «кро» может прийти позже ответа на «кроссовки» и показать не те товары.

useEffect(() => {
  fetch(`/api/products?q=${query}`)
    .then((response) => response.json())
    .then(setItems);
}, [query]);

Как исправить. Отменяйте прошлый запрос в функции очистки эффекта и кодируйте параметр:

useEffect(() => {
  const controller = new AbortController();
  searchProducts(query, controller.signal)
    .then(setItems)
    .catch(ignoreAbort);
  return () => controller.abort();
}, [query]);

export async function searchProducts(query: string, signal: AbortSignal): Promise<Product[]> {
  const response = await fetch(`/api/products?q=${encodeURIComponent(query)}`, { signal });
  if (!response.ok) throw new ApiError(response.status);
  return response.json();
}

export function ignoreAbort(error: unknown) {
  if (!(error instanceof DOMException && error.name === "AbortError")) throw error;
}

Задержку перед запросом (300 мс) добавьте отдельно — это экономит запросы, но гонку не лечит.

Пока товары грузятся и после ошибки компонент показывает пустую сетку. Пользователь не понимает, что происходит, и не может повторить. Храните три состояния явно:

const [products, setProducts] = useState<Product[]>([]);

useEffect(() => {
  fetchProducts().then(setProducts);
}, []);

return <ProductGrid products={products} />;

type State =
  | { status: "loading" }
  | { status: "error"; retry: () => void }
  | { status: "ready"; products: Product[] };

if (state.status === "loading") return <ProductGridSkeleton />;
if (state.status === "error") return <ErrorMessage onRetry={state.retry} />;
return <ProductGrid products={state.products} />;

Если готовы взять библиотеку, TanStack Query даёт эти состояния, повтор и кэш из коробки — для тестового это уместно.

Что не так. Описание из API выводится через dangerouslySetInnerHTML. Если в описание попадёт <img src=x onerror=…>, скрипт выполнится у каждого, кто откроет карточку.

<p className="card__text" dangerouslySetInnerHTML={{ __html: product.description }} />

Как исправить. Описание — обычный текст, выводите его как текст. Если разметка действительно нужна, очищайте её через DOMPurify:

<p className="card__text">{product.description}</p>

У CartRow есть своё состояние — поле количества. С key={index} после удаления товара React сопоставляет строки по позиции, и введённое количество «переезжает» к соседнему товару.

{items.map((item, index) => (
  <CartRow key={index} item={item} />
))}

{items.map((item) => (
  <CartRow key={item.id} item={item} />
))}

JSON.parse без проверки: если в localStorage окажутся старые или чужие данные, приложение упадёт на старте. Читайте с защитой и проверяйте форму данных:

export function loadCart(): CartItem[] {
  return JSON.parse(localStorage.getItem("cart") ?? "[]");
}

export function loadCart(): CartItem[] {
  try {
    const parsed: unknown = JSON.parse(localStorage.getItem("cart") ?? "[]");
    return Array.isArray(parsed) ? parsed.filter(isCartItem) : [];
  } catch {
    return [];
  }
}

Тесты сверяют снапшоты и вызывают методы контекста напрямую. Они ломаются от любого рефакторинга и при этом не поймали P1-1: массив в снапшоте уже содержит товар, хотя экран не обновился. Проверяйте то, что видит пользователь, через Testing Library:

test("addItem", () => {
  const { result } = renderHook(() => useCart(), { wrapper: CartProvider });
  act(() => result.current.addItem(sneakers));
  expect(result.current.items).toMatchSnapshot();
});

test("товар появляется в корзине после добавления", async () => {
  render(<App />, { wrapper: TestProviders });
  await userEvent.click(await screen.findByRole("button", { name: "В корзину: Кроссовки" }));
  expect(screen.getByRole("status", { name: "Корзина" })).toHaveTextContent("1");
});

Отдельно протестируйте cartReducer — это чистая функция, тесты на неё пишутся за минуты.

Подключите eslint-plugin-react-hooks: правило exhaustive-deps подсказало бы часть проблем с эффектами. Простой GitHub Actions с npm ci && npm run lint && npm test показывает, что проект собирается не только у вас.

Страница оформления заказа тянет форму и валидацию, которые не нужны в каталоге. React.lazy и Suspense уменьшат первый бандл — хороший пункт для раздела «Что можно улучшить» в README.