E2E 테스트

import React, { useState } from 'react';

interface LoginProps {
  onLogin: (username: string) => void;
}

const Login: React.FC<LoginProps> = ({ onLogin }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError(''); // 이전 에러 메시지 초기화

    if (username === 'testuser' && password === 'password123') {
      onLogin(username);
    } else {
      setError('Invalid username or password.');
    }
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', maxWidth: '300px', margin: '50px auto' }}>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="username">Username:</label>
          <input
            id="username"
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div style={{ marginTop: '10px' }}>
          <label htmlFor="password">Password:</label>
          <input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        {error && <p style={{ color: 'red', marginTop: '10px' }}>{error}</p>}
        <button type="submit" style={{ marginTop: '20px' }}>Login</button>
      </form>
    </div>
  );
};

export default Login;

import React, { useState } from 'react';
import Login from './components/Login';

const App: React.FC = () => {
  const [loggedInUser, setLoggedInUser] = useState<string | null>(null);

  const handleLogin = (username: string) => {
    setLoggedInUser(username);
  };

  const handleLogout = () => {
    setLoggedInUser(null);
  };

  return (
    <div className="App">
      {loggedInUser ? (
        <div style={{ textAlign: 'center', marginTop: '100px' }}>
          <h1>Welcome, {loggedInUser}!</h1>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <Login onLogin={handleLogin} />
      )}
    </div>
  );
};

export default App;

// describe 블록: 관련 테스트들을 그룹화합니다.
describe('Login Functionality', () => {
  // beforeEach: 각 테스트 케이스 실행 전에 호출됩니다.
  beforeEach(() => {
    // cy.visit(): 지정된 URL로 이동합니다. baseUrl은 cypress.config.ts에 설정되어 있습니다.
    cy.visit('/');
  });

  // it (또는 test): 개별 테스트 케이스를 정의합니다.
  it('should successfully log in with valid credentials', () => {
    // cy.get(): CSS 셀렉터로 DOM 요소를 선택합니다.
    // .type(): 선택된 요소에 텍스트를 입력합니다.
    cy.get('#username').type('testuser');
    cy.get('#password').type('password123');

    // .click(): 선택된 요소를 클릭합니다.
    cy.get('button[type="submit"]').click();

    // cy.contains(): 지정된 텍스트를 포함하는 요소를 찾습니다.
    // .should('be.visible'): 요소가 화면에 보이는지 단언합니다.
    cy.contains('Welcome, testuser!').should('be.visible');

    // 추가 검증: 로그인 폼이 사라졌는지 확인
    cy.get('form').should('not.exist');
  });

  it('should display an error message with invalid credentials', () => {
    cy.get('#username').type('wronguser');
    cy.get('#password').type('wrongpass');
    cy.get('button[type="submit"]').click();

    // 에러 메시지가 표시되는지 확인
    cy.contains('Invalid username or password.').should('be.visible');

    // 로그인 폼이 여전히 보이는지 확인
    cy.get('form').should('exist');
  });

  it('should allow logout after successful login', () => {
    // 로그인 절차 반복
    cy.get('#username').type('testuser');
    cy.get('#password').type('password123');
    cy.get('button[type="submit"]').click();

    cy.contains('Welcome, testuser!').should('be.visible');

    // 로그아웃 버튼 클릭
    cy.get('button').contains('Logout').click();

    // 로그인 폼이 다시 나타났는지 확인
    cy.get('h2').contains('Login').should('be.visible');
    cy.get('form').should('exist');
    cy.contains('Welcome, testuser!').should('not.exist');
  });
});

describe('User List with API Mocking', () => {
  beforeEach(() => {
    // GET /api/users 요청을 Mocking
    cy.intercept('GET', '/api/users', {
      statusCode: 200,
      body: [
        { id: 1, name: 'Mock User 1', email: 'mock1@example.com' },
        { id: 2, name: 'Mock User 2', email: 'mock2@example.com' },
      ],
      delay: 500, // 0.5초 지연 추가 (로딩 상태 테스트용)
    }).as('getUsers'); // 이 인터셉트를 'getUsers'라는 별칭으로 저장

    cy.visit('/users'); // 사용자 목록 페이지로 이동 (가정)
  });

  it('should display a loading state then user data from mocked API', () => {
    // 로딩 메시지가 보이는지 확인
    cy.contains('Loading users...').should('be.visible');

    // @getUsers 인터셉트가 완료될 때까지 기다립니다.
    cy.wait('@getUsers');

    // Mocking된 데이터가 화면에 표시되는지 확인
    cy.contains('Mock User 1').should('be.visible');
    cy.contains('mock1@example.com').should('be.visible');
    cy.contains('Mock User 2').should('be.visible');
    cy.contains('mock2@example.com').should('be.visible');

    // 로딩 메시지가 사라졌는지 확인
    cy.contains('Loading users...').should('not.exist');
  });
});