통합 테스트 작성

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

"use client";

import React, { useState } from 'react';
import type { Product } from '@/types/product';

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

export default function ProductList({ initialProducts, fetchProductsAction }: 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 fetchProductsAction(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>
  );
}

"use server";

import type { Product } from '@/types/product';

// 이 함수는 테스트에서 모킹될 것입니다.
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); // 네트워크 지연 시뮬레이션
  });
}

// 이 페이지는 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>
      {/* 명시적으로 선언한 Server Function만 Client Component에 전달할 수 있습니다. */}
      <ProductList initialProducts={initialProducts} fetchProductsAction={getProductsApi} />
    </div>
  );
}

import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import ProductList from '../src/components/ProductList';

const initialProducts = [
  { id: 'p1', name: '노트북', price: 1500000 },
  { id: 'p2', name: '마우스', price: 30000 },
];

describe('ProductList', () => {
  test('초기 상품 목록이 로드되고 렌더링되어야 합니다.', async () => {
    const fetchProductsAction = jest.fn();
    render(<ProductList initialProducts={initialProducts} fetchProductsAction={fetchProductsAction} />);

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

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

    expect(fetchProductsAction).not.toHaveBeenCalled();
  });

  test('검색 기능이 올바르게 작동해야 합니다.', async () => {
    const fetchProductsAction = jest.fn().mockResolvedValueOnce([
      { id: 'p3', name: '키보드', price: 80000 },
    ]);
    render(<ProductList initialProducts={initialProducts} fetchProductsAction={fetchProductsAction} />);

    // 검색 입력 필드 찾기 (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();

    expect(fetchProductsAction).toHaveBeenCalledTimes(1);
    expect(fetchProductsAction).toHaveBeenCalledWith('키보드');
  });

  test('검색 결과가 없을 때 "상품이 없습니다." 메시지를 표시해야 합니다.', async () => {
    const fetchProductsAction = jest.fn().mockResolvedValueOnce([]);
    render(<ProductList initialProducts={initialProducts} fetchProductsAction={fetchProductsAction} />);

    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();
  });
});