[Cypress] Cypress 시작하기

카테고리 : Development
태그: development · cypress · testing · CI/CD · BDD · TDD

1. 테스팅을 해야되는 이유

  • 리팩토링
  • 개발 과정 문제 발견
  • 코드의 동작 상태 확인
  • 컴포넌트 분할 및 클린코드
  • 품질, 안전, 성능을 확인
  • 지속적인 운영을 보장
  • 위험 완화

큰 이유는 우리 프로젝트가 Agile 방법론을 따르고 있기 때문

애자일의 실천방법 중 대표적인 방법이 바로 TDD (Test Driven Development)

고 유지 관리하기 쉽게 만드는 데 매우 유용함.

2. cypress 설치

yarn add --save-dev cypress
./node_modules/.bin/cypress open

3. cypress 테스트 파일 작성

describe('테스트 전체 이름', () => {
  beforeEach(() => {
    cy.visit('접속할 서버 포트');
  })

  it('각 테스트 내용을 적는다.', () => {
    cy.get('선택자1').click();
    cy.get('선택자2').should('조건', '값');
  });

// 길이
cy.get("li.selected").should("have.length", 3);

// 클래스
cy.get("form").find("input").should("not.have.class", "disabled");

// 값
cy.get("textarea").should("have.value", "foo bar baz");

// 텍스트
cy.get("a").parent("span.help").should("not.contain", "click me");

// 가시성
cy.get("button").should("be.visible");

// 존재
cy.get("#loading").should("not.exist");

// 상태
cy.get(":radio").should("be.checked");

// CSS
cy.get(".completed").should("have.css", "text-decoration", "line-through");
cy.get("#accordion").should("not.have.css", "display", "none");

4. BDD(Behaviour-Driven Development) Assertions

BDD: TDD에서 파생된 개념으로 BDD에서는 사용자의 행위를 작성한 기획서의 ‘시나리오’를 기반으로 테스트 케이스를 작성하며 함수 단위 테스트를 권장하지 않는다. 하나의 ‘시나리오’는 Given(초기설정값), When(실행조건), Then(기대결과) 구조를 기본 패턴

ex):사용자가 “=”를 눌렀을 때, 1+1의 값 2가 화면에 표시되는지 확인하는 것은 BDD

describe("ui-counter", () => {
  beforeEach(() => {
    cy.visit("http://localhost:5500/");
  });

  it("생성시 버튼과 초기값(10)을 렌더링 한다", () => {
    cy.get(".count-display").should("have.value", "10");
  });

  it("+ 버튼 클릭시 1 증가한다.", () => {
    cy.get(".count-display").then(($input) => {
      const prevInputValue = Number($input.val());

      cy.get(".plus-button").click();
      cy.get(".count-display").should("have.value", prevInputValue + 1);
    });
  });

  it("count max값이 12이다.", () => {
    for (let i = 0; i < 10; i++) {
      cy.get(".plus-button").click();
    }

    cy.get(".count-display").should("have.value", "12");
  });
});

5. TDD(Test-Driven Development)

TDD: 요구사항에 걸맞는 테스트 케이스를 우선 작성한 다음 ,각 테스트를 통과하기 위한 최소한의 코드를 작성하고 리팩토링 하는 프로그래밍 방식이다. 테스트의 단위는 함수 단위로 매우 작고 거의 모든 함수가 테스트 대상에 포함된다. 모듈크기를 작게하고 모듈간 의존성을 작게한다.

ex):add(1, 1)이 2인지 확인하는 것은 TDD

describe('테스트 전체 이름', () => {
  beforeEach(() => {
    cy.visit('접속할 서버 포트');
  })

  it('각 테스트 내용을 적는다.', () => {
    cy.get('선택자1').click();
    cy.get('선택자2').should('조건', '값');
  });