E2E 테스트 구현

npm install --save-dev cypress
# 또는
yarn add --dev cypress

// package.json
{
  "name": "your-nextjs-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest",
    "test:watch": "jest --watch",
    "cypress:open": "cypress open", // Cypress UI를 열어 테스트를 실행하고 디버깅
    "cypress:run": "cypress run"    // 헤드리스 모드로 모든 테스트 실행 (CI/CD용)
  },
  // ... (dependencies, devDependencies)
}

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    // 테스트 대상이 되는 애플리케이션의 기본 URL (Next.js 개발 서버 URL)
    baseUrl: 'http://localhost:3000',
    // 테스트 스펙 파일의 경로 패턴
    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
    // 테스트 시작 전 실행될 setup 파일
    setupNodeEvents(on, config) {
      // Node.js 이벤트 리스너를 설정하여 Cypress가 Node 환경과 상호작용하도록 합니다.
      // 예: 파일 시스템 접근, 환경 변수 로드 등
    },
    // 비디오 녹화 활성화
    video: true,
    // 스크린샷 활성화 (테스트 실패 시 자동으로 촬영)
    screenshotOnRunFailure: true,
  },
  // 컴포넌트 테스트 설정 (선택 사항)
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
    specPattern: 'components/**/*.cy.{js,jsx,ts,tsx}',
  },
});

npm run dev
# 또는
yarn dev

// app/login/page.tsx
"use client";
import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function LoginPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // 가상 로그인 API 호출 (실제로는 백엔드 API를 호출)
    if (username === 'testuser' && password === 'password123') {
      alert('로그인 성공!');
      router.push('/dashboard');
    } else {
      alert('로그인 실패: 사용자 이름 또는 비밀번호가 올바르지 않습니다.');
    }
  };

  return (
    <div style={{ maxWidth: '400px', margin: '50px auto', padding: '30px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
      <h1 style={{ textAlign: 'center', marginBottom: '30px', color: '#333' }}>로그인</h1>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '20px' }}>
          <label htmlFor="username" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>사용자 이름:</label>
          <input
            id="username"
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            style={{ width: '100%', padding: '10px', borderRadius: '4px', border: '1px solid #ccc' }}
          />
        </div>
        <div style={{ marginBottom: '30px' }}>
          <label htmlFor="password" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>비밀번호:</label>
          <input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            style={{ width: '100%', padding: '10px', borderRadius: '4px', border: '1px solid #ccc' }}
          />
        </div>
        <button
          type="submit"
          style={{ width: '100%', padding: '12px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', fontSize: '1.1em' }}
        >
          로그인
        </button>
      </form>
    </div>
  );
}

// app/dashboard/page.tsx
"use client";
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

export default function DashboardPage() {
  const router = useRouter();
  const [user, setUser] = useState('테스트 사용자'); // 실제로는 로그인 상태 관리 시스템에서 가져옴

  // 간단한 로그인 여부 확인 로직 (실제 앱에서는 더 복잡)
  useEffect(() => {
    // 실제로는 토큰 확인 등의 로직
    // if (!isLoggedIn) {
    //   router.push('/login');
    // }
  }, [router]);

  const handleLogout = () => {
    alert('로그아웃 되었습니다.');
    router.push('/login');
  };

  return (
    <div style={{ maxWidth: '800px', margin: '50px auto', padding: '30px', border: '1px solid #28a745', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
      <h1 style={{ textAlign: 'center', marginBottom: '30px', color: '#28a745' }}>대시보드</h1>
      <p style={{ fontSize: '1.2em', textAlign: 'center', marginBottom: '40px' }}>
        환영합니다, <span style={{ fontWeight: 'bold', color: '#007bff' }}>{user}</span>님!
      </p>
      <div style={{ display: 'flex', justifyContent: 'center', gap: '20px' }}>
        <button
          onClick={() => alert('프로필 보기 클릭')}
          style={{ padding: '12px 25px', backgroundColor: '#6c757d', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', fontSize: '1.1em' }}
        >
          프로필 보기
        </button>
        <button
          onClick={handleLogout}
          style={{ padding: '12px 25px', backgroundColor: '#dc3545', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', fontSize: '1.1em' }}
        >
          로그아웃
        </button>
      </div>
    </div>
  );
}

// cypress/e2e/login.cy.ts

describe('로그인 기능 E2E 테스트', () => {
  beforeEach(() => {
    // 각 테스트가 시작되기 전에 로그인 페이지로 이동합니다.
    cy.visit('/login');
  });

  it('올바른 자격 증명으로 로그인에 성공해야 합니다.', () => {
    // 1. 사용자 이름 입력 필드를 찾고 값을 입력합니다.
    cy.get('#username').type('testuser');

    // 2. 비밀번호 입력 필드를 찾고 값을 입력합니다.
    cy.get('#password').type('password123');

    // 3. 로그인 버튼을 찾고 클릭합니다.
    cy.get('button[type="submit"]').click();

    // 4. 로그인 성공 알림이 뜨고, 대시보드 페이지로 리다이렉트 되는 것을 확인합니다.
    // window.alert를 모킹하여 Cypress가 알림창을 처리하도록 합니다.
    cy.on('window:alert', (str) => {
      expect(str).to.equal('로그인 성공!');
    });

    // URL이 '/dashboard'로 변경되었는지 확인합니다.
    cy.url().should('include', '/dashboard');

    // 5. 대시보드 페이지에 "환영합니다, 테스트 사용자님!" 텍스트가 표시되는 것을 확인합니다.
    cy.contains('환영합니다, 테스트 사용자님!').should('be.visible');
  });

  it('잘못된 자격 증명으로 로그인에 실패해야 합니다.', () => {
    // 잘못된 사용자 이름과 비밀번호 입력
    cy.get('#username').type('wronguser');
    cy.get('#password').type('wrongpassword');

    // 로그인 버튼 클릭
    cy.get('button[type="submit"]').click();

    // 로그인 실패 알림이 뜨는 것을 확인합니다.
    cy.on('window:alert', (str) => {
      expect(str).to.equal('로그인 실패: 사용자 이름 또는 비밀번호가 올바르지 않습니다.');
    });

    // 여전히 로그인 페이지에 머물러 있는지 확인합니다.
    cy.url().should('include', '/login');
    cy.contains('로그인').should('be.visible');
  });

  it('로그인 후 로그아웃 기능이 작동해야 합니다.', () => {
    // 먼저 로그인에 성공합니다.
    cy.get('#username').type('testuser');
    cy.get('#password').type('password123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
    cy.contains('환영합니다, 테스트 사용자님!').should('be.visible');

    // 로그아웃 버튼을 클릭합니다.
    cy.get('button').contains('로그아웃').click();

    // 로그아웃 알림이 뜨고, 로그인 페이지로 리다이렉트 되는 것을 확인합니다.
    cy.on('window:alert', (str) => {
      expect(str).to.equal('로그아웃 되었습니다.');
    });
    cy.url().should('include', '/login');
    cy.contains('로그인').should('be.visible');
  });
});