cypress 설치와 간단한 테스트 예제 - 숫자 증가감소 예제

// - [v] counter의 초기값은 0이다.
// - [v] + 버튼을 클릭 시 count가 1증가한다.
// - [v] - 버튼을 클릭 시 count가 1감소한다.
// - [v] + 버튼을 클릭 시 count가 10이 넘는 경우 더이상 증가하지 못한다. (Max 값이 10)
// - [v] - 버튼을 클릭 시 count가 0보다 작아지는 경우 감소하지 못한다. (Min 값이 0)
// - [v] reset 버튼을 클릭 시 counter가 0으로 초기화된다.

describe("example counter app", () => {
  beforeEach(() => {
    cy.visit("http://127.0.0.1:5500/index.html");
  });

  it("counter의 초기값은 0이다.", () => {
    //invoke : 가져온 객체의 text를 읽고, 그 값이 0과 같은지 확인
    cy.get("#value").invoke("text").should("eq", "0");
  });

  it("+ 버튼을 클릭 시 count가 1증가한다.", () => {
    //1. 기존값 가져오기
    //2. +버튼 클릭
    //3. 변화된 값이 +1인지 체크
    cy.get("#value")
      .invoke("text")
      .then((value) => {
        const preValue = Number(value);
        cy.get(".increase-btn").click();
        cy.get("#value")
          .invoke("text")
          .should("eq", String(preValue + 1));
      });
  });

  it("- 버튼을 클릭 시 count가 1감소한다.", () => {
    //1. 1증가 시키기 (디폴트=0, 최소=0)
    //2. 값 가져오기
    //3. -버튼 클릭
    //4. 변화된 값이 -1인지 체크
    cy.get(".increase-btn").click();
    cy.get("#value")
      .invoke("text")
      .then((value) => {
        const preValue = Number(value);
        cy.get(".decrease-btn").click();
        cy.get("#value")
          .invoke("text")
          .should("eq", String(preValue - 1));
      });
  });

  it("+ 버튼을 클릭 시 count가 10이 넘는 경우 더이상 증가하지 못한다. (Max 값이 10)", () => {
    //11번 눌렀을때
    for (let i = 0; i < 11; i++) {
      cy.get(".increase-btn").click();
    }
    //값이 10인지 확인 (11이면 안됨)
    cy.get("#value").invoke("text").should("eq", "10");
  });

  it("- 버튼을 클릭 시 count가 0보다 작아지는 경우 감소하지 못한다. (Min 값이 0)", () => {
    //0인 상태에서 -버튼을 누르면
    cy.get(".decrease-btn").click();

    //값이 그대로 0이여야함
    cy.get("#value").invoke("text").should("eq", "0");
  });

  it("reset 버튼을 클릭 시 counter가 0으로 초기화된다.", () => {
    cy.get(".increase-btn").click();
    cy.get(".reset-btn").click();
    cy.get("#value").invoke("text").should("eq", "0");
  });
});