Vue BDD - Cypress 적용하기

📌 목차

• Introduction
• Gherkin 사용
• Gherkin + Cypress
• Vuex store mocking 하기
• Conclusion
• Reference

📌 Introduction

안녕하세요! 오늘은 지난 포스팅에서 다뤘던 Gherkin을 실제로 Cypress에 적용하는 포스팅입니다. 해당 코드는 여기에서 확인 하실 수 있습니다.

🚧 해당 포스팅의 예제는 간단한 counter 구현입니다.

📌 Gherkin 사용

Counter는 세가지 시나리오에 대해서 작동이 해야합니다.

1. count의 시작 값은 0입니다.
2. 플러스 버튼을 누르면 count가 1 증가 해야합니다.
3. 마이너스 버튼을 누르면 count가 1 감소 해야합니다.

이제 해당 시나리오를 Gherkin으로 옮겨보겠습니다.

# Counter.feature
Feature: Counter
    Background:
        Given I am on the main page # 항상 main page('/')에서 동작을 해야합니다.

    # count의 시작 값은 0입니다.
    Scenario: Counter display
        Then: I can see count display with 0

    # 플러스 버튼을 누르면 count가 1 증가 해야합니다.
    Scenario: Click plus button
        When I click plus button
        Then count display should 1

    # 마이너스 버튼을 누르면 count가 1 감소 해야합니다.
    Scenario: Click minus button
        When I click minus button
        Then count display should -1

이렇게 Gherkin문법으로 옮겨봤습니다.
(🚨 해당 Gherkin 문법은 이전에 알려드렸던 좋은 예제는 아닙니다. 삼인칭을 써주세요!)

📌 Gherkin + Cypress

이제 이러한 문법을 이제 Cypress로 이동을 해보겠습니다.

// specs/Counter/index.js

const { visit, the } = cy;

// Background:
Given("I am on the main page", () => {
  visit("/");
});

// Scenario: Counter display
Then("I can see count display with {int}", (countDisplay) => {
  the("counter").contains(countDisplay);
});

// Click plus button
When("I click plus button", () => {
  the("plus-button").click();
});
Then("count display should {int}", (countDisplay) => {
  the("counter").contains(countDisplay);
});

// Click minus button
When("I click minus button", () => {
  the("minus-button").click();
});
Then("count display should {int}", (countDisplay) => {
  the("counter").contains(countDisplay);
});

또다른 신기한 점은 {int}입니다. Gherkin에서 정의된 숫자를 인자값으로 가져올 수 있습니다.

cy.the는 해당 객체를 가져오는 방법입니다.(따로 commands를 지정해야 합니다. 이전 포스팅을 참고해주세요)
아래 data-test-counter같이 cypress를 위한 tag를 지정한 뒤에 the commands로 가져올 수 있습니다.

<!-- App.vue -->
<div id="app">
    <div data-test-counter>{{ count }}</div>
    <div>
      <button @click="increase" data-test-plus-button>+</button>
      <button @click="decrease" data-test-minus-button>-</button>
    </div>
    <div data-test-todo>
      {{ todos.title }}
    </div>
  </div>

📌 Vuex store mocking 하기

Vuex store를 mock하기에 앞서 새로운 시나리오를 추가 해보겠습니다.
⭐️만약 count가 100이라면 플러스 버튼을 눌렀을때 101이 되어야 합니다.

그래서 먼저 Gherkin을 작성 해보겠습니다.

Scenario: Click plus button when count is 100
    Given Count is 100
    When I click plus button
    Then count display should 101

이제 cypress로 store를 mock 해보겠습니다.

const { visit, the, getStore } = cy; // 먼저 getStore를 가져와 주세요!

// Scenario: Click plus button when count is 100
Given("Count is {int}", (newCount) => {
  getStore().setState("counter", "count", newCount); // counter module의 count 값을 newCount로 재정의 합니다.
});
When("I click plus button", () => {
  // set state
  the("plus-button").click();
});
Then("count display should {int}", (countDisplay) => {
  the("counter").contains(countDisplay);
});

📌 Conclusion

이렇게 BDD를 하는 법에 대해서 알아 봤습니다. 자연어를 쓴다는 것이 얼마나 많은 이점을 가져다 주는지 알 수 있습니다. Test code를 적는 다는 것이 단순 testing의 목적이 있는 것이 아니라 문서의 역할을 하기도 합니다. BDD를 하는것이 얼마나 큰 이점을 주는지는 협업을 할때 가장 많은 힘이 됩니다. 해당 코드를 다른 사람이 봐야할때 기획서를 다시 볼 수 없습니다. 그러나 이렇게 짜여진 Gherkin 코드는 다른 개발자에게도 기획서에 대한 이해를 줍니다. 그래서 BDD를 하는가 봅니다...😎 그럼 다음 포스팅에서는 api를 mock 하는 방법에 대해 포스팅 하겠습니다~~

📌 Reference

• kyles wiki
• cypress docs