Vue Storybook 사용법

김다운·2021년 12월 12일
0
post-thumbnail

Vue Project 세팅 방법

error...

  • import 된 컴포넌트가 있을경우 에러... (최소 단위 컴포넌트에만 사용..?)
  • style lang='scss' 에러..
  • scss 는 import 할 경우 에러 안남..!

Storybook 으로 UI 테스트 하는 방법

storybook 은 격리된 구성 요수를 테스트 하기 위한 클린환경을 제공한다.
스토리는 UI테스트 전략의 실용적인 출발점이다. 이미 스토리를 UI 개발의 자연스러운 일부로 작성하고 있으며,
이러한 스토리를 테스트 하는 것은 시간이 지남에 따라 UI버그를 방지하기 위한 방법이다.

Story 작성

스토리는 UI 구성 요소의 렌더링된 상태를 캡처한다. 인수 집합이 주어지면 구성 요소를 반환한다.

Default export (기본 형태)

export default {
  title: "Button", // 카테고리 명
  components: MyButton //출력 컴포넌트
};

스토리 정의

.....
export const Primary = () => ({

    components: { MyButton },
    template: '<MyButton primary label="Button" />',
});
//template 여러개 일경우 카테고리 밑에 추가로 생성됨


Primary.storyName = '이름 정의'; // 사이드 바에 출력

스토리 작성법

스토리는 구성 요소를 렌더링하는 방법을 설명함 구성 요소당 여러 스토리를 가질 수 있음 스토리를 만드는 가장 간단한 방법은 다른 인수로 구성 요소를 여러번 렌더링 함

// Button.stories.js

import Button from './Button.vue';

export default {
  /* 👇 The title prop is optional.
  * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
  * to learn how to generate automatic titles
  */
  title: 'Button',
  component: Button,
};

export const Primary = () => ({
  components: { Button },
  template: '<Button background="#ff0" label="Button" />',
});

export const Secondary = () => ({
  components: { Button },
  template: '<Button background="#ff0" label="😄👍😍💯" />',
});

export const Tertiary = () => ({
  components: { Button },
  template: '<Button background="#ff0" label="📚📕📈🤓" />',
});

스토리가 적은 구성 요소의 경우 간단하지만 스토리가 많은 경우 반복될 수 있다.

인수 사용

위스토리의 반복성을 줄이기 위해 인수를 적용할 수 있다.

// Button.stories.js
import MyButton from "../components/MyButton.vue";

export default {
    /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
    title: 'test',
    component: MyButton,
};

//👇 We create a “template” of how args map to rendering
const Template = (args) => ({
    components: { MyButton },
    setup() {
        return { args };
    },
    template: '<MyButton>{{args.label}}</MyButton>',
});
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };

export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };

export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };

인수를 도입하면 작성해야 하는 코드의 양을 줄일 수 있고 primary 스토리 인수를 다른 스토리에 분산하야 보여 지는 것처럼 데이터 중복을 줄일 수 있다.
또한 args 다른 구성 요소에 대한 스토리를 작성할 때 가져와서 사용할 수 있고 복합 구성 요소를 구축할 때 유용하다.

profile
열려 있는 FE 개발자

0개의 댓글