cypress에서 fixture 활용

cypress가 생성해준 폴더중에 fixtures라는 폴더가 있는데 이건 과연 무엇일까?

fixtures는 일반적으로 테스트코드에서 여러곳에서 사용되는 고정 값을 뜻한다.
예를들면 mocking시 response body가 길어질 경우 fistures를 사용하면 좋다.

아래의 경우를 보자.
mocking시 response body가 너무 길어져 가독성이 떨어진다. 따라서 이 데이터를 따로 보관하는것이 fixtures라고 생각하면된다.

// 전

cy.intercept(
 {
   method: "GET",
   url: "/restaurant/food-type/1",
 },
 [
  {
    "id": 1,
    "name": "Quae.피자",
    "ratings": 4.75,
    "minPrice": 21000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  },
  {
    "id": 2,
    "name": "Nam.피자",
    "ratings": 3.96,
    "minPrice": 34000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  },
  {
    "id": 3,
    "name": "Quia.피자",
    "ratings": 3.3,
    "minPrice": 30000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  },
  {
    "id": 4,
    "name": "Quae.피자",
    "ratings": 1.2,
    "minPrice": 30000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  },
  {
    "id": 5,
    "name": "Ea.피자",
    "ratings": 1.83,
    "minPrice": 12000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  }
]
    );

//후

    cy.intercept(
      {
        method: "GET",
        url: "/restaurant/food-type/1",
      },
      { fixture: "restaurant-list.json" } 
      // 따로 json 파일을 연결하지않아도 알아서 fixtures폴더 안에 든 json으로 분리할 수 있다.
    );

// fistures/restaurant-list.json

[
  {
    "id": 1,
    "name": "Quae.피자",
    "ratings": 4.75,
    "minPrice": 21000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  },
  {
    "id": 2,
    "name": "Nam.피자",
    "ratings": 3.96,
    "minPrice": 34000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  },
  {
    "id": 3,
    "name": "Quia.피자",
    "ratings": 3.3,
    "minPrice": 30000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  },
  {
    "id": 4,
    "name": "Quae.피자",
    "ratings": 1.2,
    "minPrice": 30000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  },
  {
    "id": 5,
    "name": "Ea.피자",
    "ratings": 1.83,
    "minPrice": 12000,
    "icon": "https://kr.object.ncloudstorage.com/icons/ic-pizza.png"
  }
]

fixtures의 활용

fixtures로 분리했다면 테스트코드에서 이것을 활용 해 테스트코드를 짤 수 있다.

  it("사용자는 원하는 레스토랑을 선택할 수 있다.", () => {
    cy.visit("/food-type/1");
    cy.intercept(
      {
        method: "GET",
        url: "/restaurant/food-type/1",
      },
      { fixture: "restaurant-list.json" } // response body를 fixtures폴더안의 json으로 둠
    );

    // fixture 활용 
    cy.fixture("restaurant-list.json").then((restaurantList) => {
      cy.get(`[data-cy=${restaurantList[0].id}]`)
        .should("be.visible")
        .as("restaurantBtn");
      cy.get("@restaurantBtn").click();

      cy.url().should("include", "/restaurant/1");
    });
  });