Next.js 블로그에 Cypress를 통한 E2E 테스트 적용해보기 Ver.2

describe('sign 테스트', () => {
  it('로그인 페이지 방문 및 로그인 테스트', () => {
    // Cypress 테스트 시작 - 로그인 페이지 방문
    cy.visit('https://example.cypress.io/login');
 
    // 'Login' 버튼이 있는지 확인하고 클릭
    cy.contains('Login').click();
 
    // 현재 URL에 '/login'이 포함되어 있는지 확인
    cy.url().should('include', '/login');
 
    // 이메일 입력 필드에 이메일 주소 입력
    cy.get('#email').type('user@example.com').should('have.value', 'user@example.com');
 
    // 비밀번호 입력 필드에 비밀번호 입력
    cy.get('#password').type('password123').should('have.value', 'password123');
 
    // 'Submit' 버튼 클릭
    cy.get('button[type="submit"]').click();
 
    // 로그인 성공 후 URL이 '/dashboard'로 변경되었는지 확인
    cy.url().should('include', '/dashboard');
  });
});

cy.get('.list > li');
cy.get('dropdown-menu').click();

cy.get('item').as('listItem');
cy.get('@listItem').click();

cy.get('.err').should('be.empty').and('be.hidden');
cy.contains('Login').should('be.visible');

Cypress.on('uncaught:exception', (err) => {
  // Cypress and React Hydrating the document don't get along
  // for some unknown reason. Hopefully, we figure out why eventually
  // so we can remove this.
  if (
    /hydrat/i.test(err.message) ||
    /Minified React error #418/.test(err.message) ||
    /Minified React error #423/.test(err.message)
  ) {
    return false;
  }
});

describe('페이지 정상 접속 테스트', () => {
  Cypress.on('uncaught:exception', () => {
    return false;
  });
  it('메인 페이지 방문', () => {
    cy.visit(API_URL);
  });
  it('About 페이지 방문', () => {
    cy.visit(`${API_URL}/about`);
  });
  it('글 상세 페이지 방문', () => {
    cy.visit(`${API_URL}/experience/implement-dijkstra`);
  });
});

describe('메인 페이지', () => {
  Cypress.on('uncaught:exception', () => {
    return false;
  });
 
  beforeEach(() => {
    cy.visit(API_URL);
    cy.wait(1000);
  });
 
  /**
   * 기본 컴포넌트 노출 Test
   */
  it('각 항목들이 정상적으로 노출 되어야 한다.', () => {
    cy.contains('호진방 블로그');
    cy.contains('About');
    cy.contains('HJ Bang');
    cy.contains('안녕하세요 배움을 나누며 함께 전진하는 신입 개발자 방호진입니다.');
    cy.contains('tag');
    cy.contains('title');
    cy.contains('posts');
    cy.contains('tags');
    cy.contains('Source');
  });
 
  /**
   * Header Test
   */
  it('About 페이지로 이동한다', () => {
    cy.contains('About').click();
    cy.wait(1000);
    cy.contains('안녕하세요 배움을 나누며 함께 전진하는 신입 개발자 방호진입니다.');
  });
 
  it('검색 아이콘을 누르면 검색 모달이 열린다. 검색 결과를 클릭하면 해당 글로 이동한다.', () => {
    cy.get('[data-cy=search-icon]').click();
    cy.get('input[placeholder="Type Post Title...').type('not found');
    cy.wait(1000);
    cy.contains('No Posts found.');
    cy.get('input[placeholder="Type Post Title...').clear();
    cy.get('input[placeholder="Type Post Title...').type('Next.js 블로그 모달 관리 개선하기');
    cy.wait(1000);
    cy.get('[data-cy="Next.js 블로그 모달 관리 개선하기"]')
      .parent()
      .parent()
      .parent()
      .should('have.attr', 'href')
      .and('include', 'experience/next-blog-manage-modal');
    cy.get('.fixed.inset-0').click();
    cy.get('input[placeholder="Type Post Title..."]').should('not.exist');
  });
 
  /**
   * 메인 글 목록 Test
   */
  it('글 목록 테스트', () => {
    cy.contains('tag').click();
    cy.contains('학습').click();
    cy.contains('기술').click();
    cy.contains('생각').click();
    cy.contains('경험').click();
    cy.contains('경험');
    cy.contains('Next.js 블로그 만들기 Ver.1').click();
    cy.url().should('eq', `${API_URL}/experience/next-blog-ver1`);
  });
 
  /**
   * Footer Test
   */
  it('footer 테스트', () => {
    cy.contains('banhogu').should('have.attr', 'href');
    cy.contains('Source')
      .should('have.attr', 'href')
      .then((href) => {
        expect(href).to.contain('https://github.com/banghogu/Blog');
      });
  });
});

import { API_URL } from './basic.cy';
 
describe('글 상세 페이지', () => {
  Cypress.on('uncaught:exception', () => {
    return false;
  });
 
  beforeEach(() => {
    cy.visit(`${API_URL}/experience/next-blog-ver1`);
    cy.wait(1000);
  });
 
  /**
   * 기본 컴포넌트 노출 Test
   */
  it('각 항목들이 정상적으로 노출 되어야 한다.', () => {
    cy.contains('경험');
    cy.contains('Next.js 블로그 만들기 Ver.1');
    cy.contains('# Next.js + MDX 블로그 개발기 1');
    cy.contains('On This Page');
    cy.contains('다음 글');
    cy.get('[data-cy=AiBot-Btn]');
    cy.get('[data-cy=ToTop-Btn]');
    cy.scrollTo('bottom');
  });
 
  it('사이드바 기능들이 정상적으로 작동해야 한다', () => {
    cy.get('a[href="#블로그를-직접-만드는-이유"]').parent().should('have.class', 'text-pink-600');
    cy.get('a[href="#기능-정리"]').click();
    cy.wait(500);
    cy.get('a[href="#기능-정리"]').parent().should('have.class', 'text-pink-600');
    cy.get('[data-cy=ToTop-Btn]').trigger('mouseover');
    cy.contains('To Top').should('be.visible');
    cy.get('[data-cy=ToTop-Btn]').click();
    cy.wait(1000);
    cy.get('a[href="#블로그를-직접-만드는-이유"]').parent().should('have.class', 'text-pink-600');
    cy.get('[data-cy=AiBot-Btn]').trigger('mouseover');
    cy.contains('AI 요약').should('be.visible');
    cy.get('[data-cy=AiBot-Btn]').click();
    cy.contains(
      '안녕하세요. 방호진 블로그에 오신것을 환영합니다. 글이 많이 길었죠? 금방 요약해서 보여드릴게요 잠시만 기다려주세요~'
    );
    cy.contains('요약중');
    cy.get('.bg-red-500').click();
    cy.get('[data-cy=AiModal]').should('not.exist');
  });
});