Vue TDD - Storybook 편

Table of Contents

• Introduction
• Use of Storybook in vue
• How to bind vuex with storybook
• Conclusion
• Apply to Test
• Reference

📌 Introduction

Vuex, vue component에 이은 storybook편 입니다. 여때까지는 logic에 관한 부분을 testing 했다면 이번에는 view에 관한 부분을 테스팅하는 방법에 대해 말하고자 합니다.

View를 테스팅하는 방법은 여러가지가 있는데 왜 Storybook이 왜 tdd에 들어갔는지 의아하실 텐데요. 그이유는 storybook의 mock값을 그대로 사용가능하고 component를 독립된 환경에서 값만 바꾸어볼 수 있기 때문입니다.

이번 포스팅에서는 간단하게 checker를 만들어보는 실습을 할 예정입니다. 🎉
해당 포스팅은 tdd-todo중 tdd를 하면서 고민되었던 내용들을 기반으로 만들어졌습니다.

🚨 해당 포스팅은 storybook을 설치하는 방법에 대해서는 다루지 않습니다. 🚨

📌 Use of Storybook in vue

일단 먼저 checker를 만들어보겠습니다. checker는 props로 isTodoDone에 따라서 체크 모양인지 아니면 공란인지 표시를 해주는 컴포넌트 입니다.

// Checker.vue
<template>
  <div>
      // isTodoDone이 true일때
    <el-button v-if="isTodoDone" type="success" icon="el-icon-check" circle @click="emitClick"></el-button>
    // isTodoDone이 false일때
    <el-button v-else circle icon="el-icon-minus" @click="emitClick"></el-button>
  </div>
</template>

<script>
export default {
  name: 'CheckButton',
  props: {
    isTodoDone: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    emitClick() {
      this.$emit('click');
    },
  },
};
</script>

storybook의 코드는 이렇게 짤수 있습니다.

// Checker.stories.js
import { storiesOf } from '@storybook/vue';
import CheckButton from '../components/CheckButton.vue';

storiesOf('CheckButton', module)
  .add('Not Done', () => ({
    data: () => ({
      isTodoDone: false,
    }),
    components: {
      CheckButton,
    },
    methods: {
      onClickCheckbtn() {
        this.isTodoDone = !this.isTodoDone;
      },
    },
    template: `
    <CheckButton :is-todo-done="isTodoDone" @click="onClickCheckbtn"/>
  `,
  }))
  .add('Done', () => ({
    components: {
      CheckButton,
    },
    template: `
    <CheckButton :is-todo-done="true" />
  `,
  }));

여기서 눈치를 채신분도 있겠지만 왜 emit을 사용하면서 까지 top-down의 원칙을 깨는지 궁금하신 분들이 있을거 같습니다. 이렇게 설계한 이유는 vuex binding을 설명하는 부분에서 자세하게 설명 하겠습니다.

📌 How to bind vuex with storybook

방금 만들었던 checker component에 vuex를 넣는다면 여러분들은 에러를 마주하게 될 것입니다. 그래서 checker의 모양이 top down의 방식이 아니었던 겁니다. 따라서 항상 컴포넌트는 퓨어 컴포넌트로 작성이 되어있어야 합니다.

퓨어 컴포넌트란? 의존성이 없는 컴포넌트

그래서 checker에서는 props로 isTodoDone을 받게 되어있고 emit으로 click 이벤트를 호출하게 됩니다. 그래서 항상 퓨어 컴포넌트를 사용할땐 container를 두어 vuex처리등과 같은 의존성을 관리 해주는 것을 만들게 됩니다.

// CheckerContainer.vue
<template>
  <el-row class="list-todo" data-cy="listTodo">
    <el-col :span="2">
      <CheckButton :is-todo-done="todo.isTodoDone" @click="changeTodoStatus" data-cy="checkBtn"/>
    </el-col>
  </el-row>
</template>

<script>
import { mapState, mapAction } from 'vuex';

export default {
  name: 'ContainerTodos',
  computed: {
    ...mapState('todos', ['todo']),
  },
  methods:{
     ...mapActions('todos', { changeTodoStatus: CHANGE_TODO_STATUS }),
  }
};
</script>

위에 코드처럼 vuex의 값들은 container가 한번 감싸 의존성 문제들을 해결할 수 있습니다.

혹은 이런 방식으로도 해결이 가능합니다.

// MyCounter2.stories.js

import { storiesOf } from '@storybook/vue';
import { withKnobs } from '@storybook/addon-knobs';
import MyCounter2 from '../components/MyCounter2';
import Vuex from 'vuex';

// const counter = {
//   namespaced: true,
//   state: {
//     count: 0,
//   },
// };

storiesOf('MyCounter2', module)
  .addDecorator(withKnobs)
  .add('Default MyCounter2', () => ({
    components: {
      MyCounter2,
    },
    template: `
      <div>
        <MyCounter2 />
      </div>
    `,
    store: new Vuex.Store({
      modules: {
        counter: {
          namespaced: true,
          state: { count: 0 },
        },
      },
    }),
  }));

이렇게 하면 Vuex처리를 해줄수 있습니다. 저는 참고로 mutations나 actions는 구현하지 않습니다. 해당 mutations나 actions는 이미 unit test를 했을것 이고, data(state)에 대한 view testing이기 때문에 state나 getters정도만 구현해줍니다. 항상 vue는 MVVM이고 data를 통해 view를 그려주는 것을 염두 해주세요.

📌 Apply to test

이제 스토리북으로 어떻게 테스트를 하는지 예시를 하나 들어보겠습니다. 예시는 Counter로 들어보겠습니다.

만약

Count:0의 값을 100일때랑 10000일때의 값을 한번 view로 그려보고 싶다고 가정하겠습니다. 또한 제한 조건이 100이하 일때는 font-size가 10px이어야 하고 이상일때는 8px이어야 한다고 가정해보겠습니다. 실제로 제대로 동작을 하는지 여부를 테스팅을 하려면 실제 값을 올려주거나 재랜더링을 해줘야합니다. 하지만 story로 data(state)이 100일 경우 10000일 경우를 만들어 준다면 빠르게 테스팅이 가능합니다.

📌 Conclusion

Storybook을 사용 하려면 기본적으로 CDD가 이루어져 있어야 가능합니다. CDD를 하면서 가장 크게 어려운 부분은 도대체 어디까지 컴포넌트를 볼 것인가에 대한 문제입니다. 마이크로 디자인 같은 정말 세세하게 많은 부분을 component로 가져갈 수도 있고 적어도 컴포넌트는 depth가 2단계까지만 들어갈 수 있도록 하는 방법이 있습니다. 이부분은 팀과 명확한 상의가 이루어져야 하는 부분입니다.

StoryBook을 사용하면 독립된 환경에서 component를 다른 값들로 테스트를 해볼 수 있는 이점이 있고 특수한 상황에서 발생하는 view를 손쉽게 다양한 방법으로 test를 해볼 수 있습니다.

다음편은 e2e테스팅 하는 편으로 찾아오겠습니다.

📌 Reference

• storybook 공식문서
• 스토리북으로 ui컴포넌트 만들기