Storybook Addons

지금까지 컴포넌트를 구성하고 스냅샷 테스트 환경을 구성해봤습니다.

이번 포스팅에서는 Storybook의 Addons에 대해 알아보도록 하겠습니다.

 

Addons

스토리북은 방대한 addons 생태계를 가지고 있습니다. 현재까지 저희는 storybook 앱의 밑에 탭에 있는 Controls와 Interactions에서 약간의 addons를 사용했었습니다.

storybook의 addons들은 이보다 훨씬 많으며 용도에 따라 설치하여 사용할 수 있습니다. (storybook addons)

storybook addons

 

Controls addon

이전에 사용했던 Controls addon은 컴포넌트가 받은 인자값들을 마음대로 수정할 수 있었습니다.

이 인자값들을 수정해보면서 생각해보지 못한 edge case는 없는지 찾아보면서 UI가 깨지지는 않는지 확인해볼 수 있습니다.

 

이전에 작성한 Task에 엄청 긴 string이 title 인자로 들어올 경우를 테스트해보겠습니다.

원래 인자

밑의 Controls탭의 title 인자를 긴 문자열로 바꿔주겠습니다.

바뀐 인자값

title을 긴 문자열로 바꿔줬을 경우 문자열이 끊기는 것을 확인했습니다. 문자열이 더 있지만 보이지 않아 사용자는 당황할 수 있습니다.

이러한 문제점을 파악했으므로 넘치는 문자열에 대한 style을 조정해주고 관련 스토리를 작성하여 edge case에 대해 대응해준 것을 팀원들에게 확인시켜 줍니다.

// Task.stories.tsx

const longTitleString = `very very long string very very long string very very long string very very long string very very long string very very long string very very long string very very long string`;

export const LongTitle = Template.bind({});
LongTitle.args = {
  task: {
    ...Default.args.task!,
    title: longTitleString,
  },
};

이제 긴 문자열에 대한 story를 storybook 앱에서 확인할 수 있습니다.

새로운 스토리 추가