[25.07.13 / TASK-213] Feature - 프론트엔드 테스팅 리팩토링 및 고도화

cypress.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    supportFile: 'cypress/support/e2e.ts',
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    viewportWidth: 1920,
+    viewportHeight: 1080,
+    video: false,
+    screenshotOnRunFailure: true,
+    defaultCommandTimeout: 10000,
+    requestTimeout: 10000,
+    responseTimeout: 10000,
+    env: {
+      NEXT_PUBLIC_BASE_URL: 'http://localhost:3000',
+      NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY: 'test_key',
+      NEXT_PUBLIC_GA_ID: '',
+      NEXT_PUBLIC_SENTRY_AUTH_TOKEN: 'test_sentry_token',
+      NEXT_PUBLIC_SENTRY_DSN: 'test_sentry_dsn',
+    },
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    setupNodeEvents(_on, _config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/leaderboards.cy.ts

@@ -0,0 +1,84 @@
+import { BaseSuccess } from '../support';
+
+describe('리더보드 페이지', () => {
+  beforeEach(() => {
+    cy.setAuthCookies();
+    cy.visit('/leaderboards');
+  });
+
+  it('페이지가 정상적으로 로드되어야 한다', () => {
+    cy.waitForPageLoad();
+    cy.url().should('include', '/leaderboards');
+  });
+
+  it('사용자 리더보드가 표시되어야 한다', () => {
+    cy.get('select').first().should('have.value', '사용자 기준');
+
+    cy.contains('user1').should('be.visible');
+    cy.contains('user2').should('be.visible');
+
+    cy.contains('500').should('be.visible');
+    cy.contains('300').should('be.visible');
+  });
+
+  it('게시물 리더보드가 표시되어야 한다', () => {
+    cy.get('select').first().select('게시글 기준');
+
+    cy.contains('인기 게시물 1').should('be.visible');
+    cy.contains('인기 게시물 2').should('be.visible');
+
+    cy.contains('200').should('be.visible');
+    cy.contains('150').should('be.visible');
+  });
+
+  it('필터 기능이 동작해야 한다', () => {
+    cy.get('select').should('have.length', 4);
+
+    cy.get('select').eq(1).select('좋아요 증가순');
+    cy.get('select').eq(1).select('조회수 증가순');
+
+    cy.get('select').eq(2).select('30위까지');
+    cy.get('select').eq(2).select('10위까지');
+
+    cy.get('select').eq(3).select('지난 7일');
+    cy.get('select').eq(3).select('지난 30일');
+  });
+
+  it('랭킹 순위가 표시되어야 한다', () => {
+    cy.get('[data-testid="rank"], [class*="rank"]').should('be.visible');
+    cy.contains('1').should('be.visible');
+    cy.contains('2').should('be.visible');
+  });
+
+  it('통계 변화량이 표시되어야 한다', () => {
+    cy.contains('500').should('be.visible');
+    cy.contains('300').should('be.visible');
+    cy.contains('250').should('be.visible');
+
+    cy.get('select').eq(1).select('좋아요 증가순');
+    cy.contains('50').should('be.visible');
+    cy.contains('40').should('be.visible');
+  });
+
+  it('빈 데이터 상태를 올바르게 처리해야 한다', () => {
+    cy.intercept(
+      'GET',
+      '**/api/leaderboard/user*',
+      BaseSuccess({ users: [] }, '사용자 리더보드 조회에 성공하였습니다.'),
+    ).as('emptyUserLeaderboardAPI');
+
+    cy.intercept(
+      'GET',
+      '**/api/leaderboard/post*',
+      BaseSuccess({ posts: [] }, '게시물 리더보드 조회에 성공하였습니다.'),
+    ).as('emptyPostLeaderboardAPI');
+
+    cy.reload();
+
+    cy.contains('리더보드 데이터가 없습니다').should('be.visible');
+    cy.contains('현재 설정된 조건에 맞는 사용자 데이터가 없습니다').should('be.visible');
+
+    cy.get('select').first().select('게시글 기준');
+    cy.contains('현재 설정된 조건에 맞는 게시물 데이터가 없습니다').should('be.visible');
+  });
+});

cypress/e2e/login.cy.ts

@@ -0,0 +1,52 @@
+describe('로그인 페이지', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('페이지가 정상적으로 로드되어야 한다', () => {
+    cy.waitForPageLoad();
+    cy.url().should('include', '/');
+  });
+
+  it('로그인 폼이 존재해야 한다', () => {
+    cy.get('form').should('be.visible');
+    cy.get(
+      'input[name*="accessToken"], input[name*="access"], input[placeholder*="Access"]',
+    ).should('be.visible');
+    cy.get(
+      'input[name*="refreshToken"], input[name*="refresh"], input[placeholder*="Refresh"]',
+    ).should('be.visible');
+    cy.get('button[type="submit"], button:contains("로그인")').should('be.visible');
+  });
+
+  it('유효한 토큰으로 로그인할 수 있어야 한다', () => {
+    cy.get('input[name*="accessToken"], input[name*="access"], input[placeholder*="Access"]')
+      .first()
+      .type('valid_access_token');
+    cy.get('input[name*="refreshToken"], input[name*="refresh"], input[placeholder*="Refresh"]')
+      .first()
+      .type('valid_refresh_token');
+
+    cy.get('button[type="submit"], button:contains("로그인")').first().click();
+
+    cy.url().should('include', '/main');
+    cy.waitForPageLoad();
+  });
+
+  it('유효하지 않은 토큰으로 로그인 시 에러를 표시해야 한다', () => {
+    cy.get('input[name*="accessToken"], input[name*="access"], input[placeholder*="Access"]')
+      .first()
+      .type('invalid_token');
+    cy.get('input[name*="refreshToken"], input[name*="refresh"], input[placeholder*="Refresh"]')
+      .first()
+      .type('invalid_token');
+
+    cy.get('button[type="submit"], button:contains("로그인")').first().click();
+
+    cy.url().should('eq', Cypress.config().baseUrl + '/');
+  });
+
+  it('샘플 로그인 버튼이 동작해야 한다', () => {
+    cy.contains('체험 계정 로그인').should('be.visible').click();
+    cy.url().should('include', '/main');
+    cy.waitForPageLoad();
+  });
+});

cypress/e2e/main.cy.ts

@@ -0,0 +1,72 @@
+import { BaseSuccess } from '../support';
+
+describe('메인 페이지', () => {
+  beforeEach(() => {
+    cy.setAuthCookies();
+    cy.visit('/main');
+  });
+
+  it('페이지가 정상적으로 로드되어야 한다', () => {
+    cy.waitForPageLoad();
+    cy.url().should('include', '/main');
+  });
+
+  it('대시보드 통계 정보가 표시되어야 한다', () => {
+    cy.contains('전체 조회수').should('be.visible');
+    cy.contains('전체 좋아요 수').should('be.visible');
+    cy.contains('총 게시글 수').should('be.visible');
+
+    cy.contains('2,500').should('be.visible');
+    cy.contains('350').should('be.visible');
+    cy.contains('15').should('be.visible');
+  });
+
+  it('게시물 목록이 표시되어야 한다', () => {
+    cy.contains('테스트 게시물 1').should('be.visible');
+    cy.contains('테스트 게시물 2').should('be.visible');
+
+    cy.get('section').should('contain.text', '150');
+    cy.get('section').should('contain.text', '25');
+    cy.get('section').should('contain.text', '200');
+    cy.get('section').should('contain.text', '35');
+  });
+
+  it('정렬 및 필터 기능이 동작해야 한다', () => {
+    cy.get('button').should('exist');
+
+    cy.get('input[type="checkbox"]').should('exist');
+    cy.contains('오름차순').should('be.visible');
+
+    cy.contains('새로고침').should('be.visible');
+    cy.contains('새로고침').should('be.disabled');
+  });
+
+  it('마지막 업데이트 시간이 표시되어야 한다', () => {
+    cy.contains('마지막 업데이트').should('exist');
+
+    cy.get('body').should('contain.text', '2025');
+  });
+
+  it('로그아웃 기능이 동작해야 한다', () => {
+    cy.get('#profile').click();
+    cy.contains('로그아웃').should('be.visible');
+    cy.contains('로그아웃').click();
+    cy.url().should('include', '/');
+  });
+
+  it('빈 데이터 상태를 올바르게 처리해야 한다', () => {
+    cy.intercept(
+      'GET',
+      '**/api/posts*',
+      BaseSuccess({ nextCursor: null, posts: [] }, '게시물 목록 조회에 성공하였습니다.'),
+    ).as('emptyPostsAPI');
+
+    cy.reload();
+
+    cy.contains('게시물이 없습니다').should('be.visible');
+    cy.contains('아직 작성된 게시물이 없습니다. 첫 번째 게시물을 작성해보세요!').should(
+      'be.visible',
+    );
+    cy.contains('📝').should('be.visible');
+  });
+});

cypress/support/base.ts

@@ -0,0 +1,22 @@
+export const BaseSuccess = <T>(data: T, message: string = '성공적으로 처리되었습니다.') => ({
+  statusCode: 200,
+  body: {
+    success: true,
+    message,
+    data,
+    error: null,
+  },
+});
+
+export const BaseError = (statusCode: number, message: string) => ({
+  statusCode,
+  body: {
+    success: false,
+    message,
+    data: null,
+    error: {
+      name: 'ServerError',
+      message,
+    },
+  },
+});

cypress/support/commands.ts

@@ -0,0 +1,24 @@
+import { MOCK_ACCESS_TOKEN, MOCK_REFRESH_TOKEN } from './mock';
+
+const DEFAULT_OPTION = {
+  httpOnly: true,
+  secure: true,
+  sameSite: 'strict',
+  path: '/',
+} as const;
+
+Cypress.Commands.add('setAuthCookies', () => {
+  cy.setCookie('access_token', MOCK_ACCESS_TOKEN, DEFAULT_OPTION);
+  cy.setCookie('refresh_token', MOCK_REFRESH_TOKEN, DEFAULT_OPTION);
+  cy.wait(100);
+});
+
+Cypress.Commands.add('clearAuthCookies', () => {
+  cy.clearCookie('access_token');
+  cy.clearCookie('refresh_token');
+});
+
+Cypress.Commands.add('waitForPageLoad', () => {
+  cy.get('body').should('be.visible');
+  cy.window().should('have.property', 'document');
+});

cypress/support/e2e.ts

@@ -0,0 +1,102 @@
+import { BaseError, BaseSuccess } from './base';
+import {
+  notificationsResponseData,
+  postLeaderboardResponseData,
+  postsFirstData,
+  postsGraphData,
+  postsSecondData,
+  postsStatsResponseData,
+  totalStatsResponseData,
+  userLeaderboardResponseData,
+  userResponseData,
+} from './mock';
+import './commands';
+
+beforeEach(() => {
+  cy.intercept('POST', '**/api/login', (req) => {
+    const body = req.body;
+    if (body.accessToken === 'invalid_token' || body.refreshToken === 'invalid_token') {
+      req.reply(BaseError(401, '유효하지 않은 토큰입니다.'));
+    } else {
+      req.reply(BaseSuccess(userResponseData, '로그인에 성공하였습니다.'));
+    }
+  }).as('loginAPI');
+
+  cy.intercept(
+    'POST',
+    '**/api/login-sample',
+    BaseSuccess(userResponseData, '샘플 로그인에 성공하였습니다.'),
+  ).as('sampleLoginAPI');
+
+  cy.intercept(
+    'GET',
+    '**/api/me',
+    BaseSuccess(userResponseData, '사용자 정보 조회에 성공하였습니다.'),
+  ).as('meAPI');
+
+  cy.intercept('GET', '**/api/posts*', (req) => {
+    const url = new URL(req.url);
+    const cursor = url.searchParams.get('cursor');
+
+    req.reply(
+      BaseSuccess(!cursor ? postsFirstData : postsSecondData, '게시물 목록 조회에 성공하였습니다.'),
+    );
+  }).as('postsAPI');
+
+  cy.intercept(
+    'GET',
+    '**/api/posts-stats',
+    BaseSuccess(postsStatsResponseData, '게시물 통계 조회에 성공하였습니다.'),
+  ).as('postsStatsAPI');
+
+  cy.intercept(
+    'GET',
+    '**/api/leaderboard/user*',
+    BaseSuccess(userLeaderboardResponseData, '사용자 리더보드 조회에 성공하였습니다.'),
+  ).as('userLeaderboardAPI');
+
+  cy.intercept(
+    'GET',
+    '**/api/leaderboard/post*',
+    BaseSuccess(postLeaderboardResponseData, '게시물 리더보드 조회에 성공하였습니다.'),
+  ).as('postLeaderboardAPI');
+
+  cy.intercept(
+    'GET',
+    '**/api/total-stats*',
+    BaseSuccess(totalStatsResponseData, '전체 통계 조회에 성공하였습니다.'),
+  ).as('totalStatsAPI');
+
+  cy.intercept(
+    'GET',
+    '**/api/notis',
+    BaseSuccess(notificationsResponseData, '공지사항 조회에 성공하였습니다.'),
+  ).as('notisAPI');
+
+  cy.intercept('POST', '**/api/logout', BaseSuccess({}, '성공적으로 로그아웃되었습니다.')).as(
+    'logoutAPI',
+  );
+
+  cy.intercept(
+    'GET',
+    '**/api/post/**',
+    BaseSuccess(postsGraphData, '게시물 상세 정보 조회에 성공하였습니다.'),
+  ).as('postDetailAPI');
+});
+
+/* eslint-disable @typescript-eslint/no-namespace */
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      // 인증 토큰을 쿠키에 설정하여 로그인 상태를 모킹합니다.
+      setAuthCookies(): Chainable<void>;
+
+      // 인증 토큰을 쿠키에서 제거합니다.
+      clearAuthCookies(): Chainable<void>;
+
+      // 페이지 로드를 기다립니다.
+      waitForPageLoad(): Chainable<void>;
+    }
+  }
+}
+/* eslint-enable @typescript-eslint/no-namespace */

cypress/support/index.ts

@@ -0,0 +1,4 @@
+export * from './base';
+export * from './mock';
+export * from './commands';
+export * from './e2e';