통합 테스트 작성

// components/ProductList.tsx
"use client";

import React, { useState, useEffect } from 'react';

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

interface ProductListProps {
  initialProducts: Product[];
  fetchProducts: (query?: string) => Promise<Product[]>;
}

export default function ProductList({ initialProducts, fetchProducts }: ProductListProps) {
  const [products, setProducts] = useState<Product[]>(initialProducts);
  const [loading, setLoading] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearch = async () => {
    setLoading(true);
    try {
      const fetchedProducts = await fetchProducts(searchQuery);
      setProducts(fetchedProducts);
    } catch (error) {
      console.error("Failed to fetch products:", error);
      setProducts([]); // 에러 시 빈 배열 또는 에러 메시지
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
      <h2 style={{ marginBottom: '20px' }}>상품 목록</h2>
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px' }}>
        <input
          type="text"
          placeholder="상품 검색..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          style={{ flexGrow: 1, padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
        />
        <button
          onClick={handleSearch}
          disabled={loading}
          style={{ padding: '8px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
        >
          {loading ? '검색 중...' : '검색'}
        </button>
      </div>

      {products.length === 0 && !loading && (
        <p style={{ textAlign: 'center', color: '#888' }}>상품이 없습니다.</p>
      )}

      <ul>
        {products.map(product => (
          <li key={product.id} style={{ marginBottom: '10px', padding: '10px', border: '1px solid #eee', borderRadius: '4px' }}>
            {product.name} - {product.price.toLocaleString()}원
          </li>
        ))}
      </ul>
    </div>
  );
}

// lib/api.ts (실제 API 호출을 모방할 함수)
// 이 함수는 테스트에서 모킹될 것입니다.
export async function getProductsApi(query?: string): Promise<Product[]> {
  // 실제 API 호출 로직
  console.log(`API 호출: 상품 조회, 쿼리: ${query || '없음'}`);
  return new Promise(resolve => {
    setTimeout(() => {
      const allProducts = [
        { id: 'p1', name: '노트북', price: 1500000 },
        { id: 'p2', name: '마우스', price: 30000 },
        { id: 'p3', name: '키보드', price: 80000 },
        { id: 'p4', name: '모니터', price: 300000 },
      ];
      if (query) {
        resolve(allProducts.filter(p => p.name.includes(query) || p.id.includes(query)));
      } else {
        resolve(allProducts);
      }
    }, 500); // 네트워크 지연 시뮬레이션
  });
}

// app/products/page.tsx (상품 목록 페이지 - Server Component)
// 이 페이지는 ProductList 컴포넌트를 렌더링하고 초기 데이터를 전달합니다.
// Server Component에서 API를 호출하고 Client Component로 props를 전달하는 일반적인 패턴입니다.

import { getProductsApi } from '@/lib/api'; // 서버에서 사용할 API

import ProductList from '@/components/ProductList'; // 클라이언트 컴포넌트

export default async function ProductsPage() {
  const initialProducts = await getProductsApi(); // 서버에서 초기 데이터 페칭

  return (
    <div style={{ maxWidth: '900px', margin: '40px auto', padding: '20px', border: '1px solid #28a745', borderRadius: '10px', boxShadow: '0 4px 12px rgba(0,0,0,0.08)' }}>
      <h1 style={{ color: '#28a745', textAlign: 'center', marginBottom: '30px' }}>모든 상품</h1>
      {/* ProductList 컴포넌트에 초기 데이터와 API 함수를 props로 전달 */}
      <ProductList initialProducts={initialProducts} fetchProducts={getProductsApi} />
    </div>
  );
}

// __tests__/products-integration.test.tsx
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import ProductsPage from '../app/products/page'; // 테스트할 페이지 컴포넌트 임포트
import * as api from '../lib/api'; // API 모듈 임포트 (모킹을 위해)

// API 함수를 Mocking
// Jest.spyOn을 사용하여 실제 모듈의 함수를 감시하고 Mocking합니다.
// 이렇게 하면 해당 함수가 호출될 때 Mock 구현이 사용됩니다.
const mockGetProductsApi = jest.spyOn(api, 'getProductsApi');

describe('ProductsPage 통합 테스트', () => {
  // 각 테스트 전에 Mocking을 초기화하고, Mock 구현을 정의합니다.
  beforeEach(() => {
    // 초기 로드 시 반환할 상품 목록
    mockGetProductsApi.mockResolvedValue([
      { id: 'p1', name: '노트북', price: 1500000 },
      { id: 'p2', name: '마우스', price: 30000 },
    ]);
  });

  // 각 테스트 후에 Mocking을 복원합니다.
  afterEach(() => {
    jest.restoreAllMocks(); // 모든 Mocking을 원래 구현으로 복원
  });

  test('초기 상품 목록이 로드되고 렌더링되어야 합니다.', async () => {
    render(await ProductsPage()); // Server Component 렌더링

    // "상품 목록" 제목이 있는지 확인
    expect(screen.getByRole('heading', { name: '상품 목록' })).toBeInTheDocument();

    // 초기 상품들이 로드될 때까지 기다립니다.
    await waitFor(() => {
      expect(screen.getByText('노트북 - 1,500,000원')).toBeInTheDocument();
      expect(screen.getByText('마우스 - 30,000원')).toBeInTheDocument();
    });

    // API가 초기 로드를 위해 호출되었는지 확인
    expect(mockGetProductsApi).toHaveBeenCalledTimes(1);
    expect(mockGetProductsApi).toHaveBeenCalledWith(undefined); // 초기 호출은 쿼리 없음
  });

  test('검색 기능이 올바르게 작동해야 합니다.', async () => {
    render(await ProductsPage()); // 페이지 렌더링

    // 초기 상품이 로드될 때까지 기다림 (첫 번째 waitFor와 동일)
    await waitFor(() => {
      expect(screen.getByText('노트북 - 1,500,000원')).toBeInTheDocument();
    });

    // 검색 API의 Mock 구현을 업데이트하여 검색 시 다른 결과 반환
    mockGetProductsApi.mockResolvedValueOnce([
      { id: 'p3', name: '키보드', price: 80000 },
    ]);

    // 검색 입력 필드 찾기 (placeholder 텍스트로)
    const searchInput = screen.getByPlaceholderText('상품 검색...');
    fireEvent.change(searchInput, { target: { value: '키보드' } }); // 검색어 입력

    // 검색 버튼 찾기 (텍스트로)
    const searchButton = screen.getByRole('button', { name: '검색' });
    fireEvent.click(searchButton); // 검색 버튼 클릭

    // "검색 중..." 텍스트가 나타나는지 확인
    expect(screen.getByRole('button', { name: '검색 중...' })).toBeDisabled();

    // 검색 결과가 로드될 때까지 기다립니다.
    await waitFor(() => {
      expect(screen.getByText('키보드 - 80,000원')).toBeInTheDocument();
    });

    // 이전에 있던 상품들이 사라졌는지 확인 (필터링 검증)
    expect(screen.queryByText('노트북 - 1,500,000원')).not.toBeInTheDocument();
    expect(screen.queryByText('마우스 - 30,000원')).not.toBeInTheDocument();

    // API가 검색 쿼리와 함께 다시 호출되었는지 확인
    expect(mockGetProductsApi).toHaveBeenCalledTimes(2); // 초기 호출 + 검색 호출
    expect(mockGetProductsApi).toHaveBeenCalledWith('키보드');
  });

  test('검색 결과가 없을 때 "상품이 없습니다." 메시지를 표시해야 합니다.', async () => {
    render(await ProductsPage());

    await waitFor(() => {
        expect(screen.getByText('노트북 - 1,500,000원')).toBeInTheDocument();
    });

    // 검색 API의 Mock 구현을 업데이트하여 빈 배열 반환
    mockGetProductsApi.mockResolvedValueOnce([]);

    const searchInput = screen.getByPlaceholderText('상품 검색...');
    fireEvent.change(searchInput, { target: { value: '존재하지않는상품' } });

    const searchButton = screen.getByRole('button', { name: '검색' });
    fireEvent.click(searchButton);

    await waitFor(() => {
      expect(screen.getByText('상품이 없습니다.')).toBeInTheDocument();
    });

    expect(screen.queryByText('노트북 - 1,500,000원')).not.toBeInTheDocument();
  });
});