[4팀 오하늘] Chapter 3-2. 프론트엔드 테스트 코드

cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:5173',
+    supportFile: 'cypress/support/e2e.ts',
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    video: false,
+    screenshotOnRunFailure: false,
+  },
+});

cypress/e2e/calendar.cy.ts

@@ -0,0 +1,54 @@
+describe('단일 일정 생성 E2E 테스트', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  describe('사용자가 반복 일정 체크박스를 해제하고 단일 일정을 생성한다', () => {
+    it('반복 일정 체크박스가 체크되어 있을 때 해제하고 하루만 일정을 생성한다', () => {
+      // 기본 일정 정보 입력
+      cy.get('#title').type('회의');
+      cy.get('#date').type('2025-08-25');
+      cy.get('#start-time').type('14:00');
+      cy.get('#end-time').type('15:00');
+      cy.get('#description').type('팀 회의');
+      cy.get('#location').type('회의실 A');
+      cy.get('#category').click();
+      cy.get('[aria-label="업무-option"]').click();
+
+      // 반복 일정 체크박스가 체크되어 있는지 확인하고 해제
+      cy.get('input[type="checkbox"]').should('be.checked');
+      cy.contains('반복 일정').click();
+      cy.get('input[type="checkbox"]').should('not.be.checked');
+
+      // 일정 추가 버튼 클릭
+      cy.get('[data-testid="event-submit-button"]').click();
+
+      // 일정 겹침 경고 모달이 나타나면 계속 진행 버튼 클릭
+      cy.get('body').then(($body) => {
+        if ($body.find('[data-testid="overlap-continue-button"]').length > 0) {
+          cy.get('[data-testid="overlap-continue-button"]').click();
+        }
+      });
+
+      // 성공 메시지 확인
+      cy.contains('일정이 추가되었습니다.').should('be.visible');
+
+      // 일정 목록에 단일 일정만 표시되는지 확인
+      cy.get('[data-testid="event-list"]').should('contain', '회의');
+      cy.get('[data-testid="event-list"]').should('contain', '2025-08-25');
+      cy.get('[data-testid="event-list"]').should('contain', '14:00 - 15:00');
+
+      // 월간 뷰에서 해당 날짜에만 일정이 표시되는지 확인
+      cy.get('[data-testid="month-view"]').contains('25').parent().should('contain', '회의');
+
+      // 다른 날짜에는 일정이 표시되지 않는지 확인
+      cy.get('[data-testid="month-view"]').contains('26').parent().should('not.contain', '회의');
+
+      // 반복 아이콘이 표시되지 않는지 확인
+      cy.get('[data-testid="month-view"]').find('[data-testid="repeat-icon"]').should('not.exist');
+
+      // 일정 목록에서 반복 정보가 표시되지 않는지 확인
+      cy.get('[data-testid="event-list"]').should('not.contain', '반복:');
+    });
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,28 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to select DOM element by data-testid attribute
+       * @example cy.getByTestId('submit-button')
+       */
+      getByTestId(testId: string): Chainable<JQuery<HTMLElement>>;
+    }
+  }
+}
+
+Cypress.Commands.add('getByTestId', (testId: string) => {
+  return cy.get(`[data-testid="${testId}"]`);
+});
+
+export {};

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["**/*.ts"]
+}

package.json

@@ -11,6 +11,9 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
+    "test:e2e": "cypress run",
+    "test:e2e:ui": "cypress open",
+    "test:e2e:headed": "cypress run --headed",
     "build": "tsc -b && vite build",
     "lint:eslint": "eslint . --ext ts,tsx --report-unused-disable-directives",
     "lint:tsc": "tsc --pretty",
@@ -41,6 +44,7 @@
     "@vitest/coverage-v8": "^2.0.3",
     "@vitest/ui": "^3.2.4",
     "concurrently": "^8.2.2",
+    "cypress": "^15.0.0",
     "eslint": "^9.30.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-cypress": "^5.1.0",