storybook 썸네일형 리스트형 Storybook에서 user interactions 테스트하기 프로젝트: loplat UI키워드: storybook addon interactions, Storybook test runner, mdx story, csf story, jest상황loplat UI에 있던 기존 jest test file들은 cli를 통해서 동작하며 테스트의 진행 과정을 눈으로 확인하기 힘들다는 단점이 있다.loplat UI는 비지니스 로직보다는 ui 중심이므로, 스토리북과 연동된 테스트를 실행하면서 테스트 진행 상황을 스토리북에서도 확인할 수 있으면 좋을 것이다.새로 알게된 'Storybook Addon Interactions'와 'Storybook Test Runner'를 도입하는 과정을 소개하고자한다.해결 과정 1 (storybook addon interactions)interact.. 더보기 storybook에서 웹접근성 검사하기(feat. storybook-addon-a11y) 프로젝트: loplat UI키워드: storybook-addon-a11y, accessibility상황loplat ui의 컴포넌트들이 웹접근성을 잘 고려하고 있는지 확인하고 싶었다.팀원의 도움으로 storybook a11y 관련 addon을 알게되었다.(https://storybook.js.org/addons/@storybook/addon-a11y)각 컴포넌트의 웹접근성을 파악하고 개선하고자 한다.해결방법먼저 addon을 설치하고 addon 관련 global config를 설정한다. yarn add -D @storybook/addon-a11y이 때, color-contrast(명암비)는 디자이너의 판단 하에 rule을 무시하기로 한다.또한 a11y 속성과 관련된 'aria-*'과 'role' attri.. 더보기 이전 1 다음
