The document discusses building and testing design systems using Storybook. It covers how component-driven development (CDD) and design systems help teams collaborate better and build reusable UI components. The presentation emphasizes setting up Storybook with addons to develop and test components, using CSF (Component Story Format) to write testable stories, and automatically generating documentation. Visual, unit and accessibility testing strategies are also covered.

1. Redux-Saga
Workshop
Bullet Proof Testing
For Your Design System
By Chen Feldman
Staff Front End Software Engineer
@Gong.io

3. Lecture’s Timeline
Apps
Development
Today & Failure
Points
CDD &
Design Systems
Storybook as a
use-case
Testing Our
Design System

4. Dev Teams building components
○ Building a page from the design which not always contains or fully
aware to the existing developed components
○ Trying to keep the components isolated but not making too much effort
for that (from the planning process)
○ Taking the components to a common folder or waiting for the need for
2-3 more like that component to move it. (and then, it can become too
late)

5. Dev Teams building components
○ Building a page from the design which not always contains or fully
aware to the existing developed components
○ Trying to keep the components isolated but not making too much effort
for that (from the planning process)
○ Taking the components to a common folder or waiting for the need for
2-3 more like that component to move it. (and then, it can become too
late)

6. Dev Teams building components
○ Building a page from the design which not always contains or fully
aware to the existing developed components
○ Trying to keep the components isolated but not making too much effort
for that (from the planning process)
○ Taking the components to a common folder or waiting for the need for
2-3 more like that component to move it. (and then, it can become too
late)

7. The Happy Process

8. Product - Specs and Wireframes

9. Design - Figma/Sketch

10. Developer - Instructions & Feedback

11. Product & Design - Some Changes

12. Developer - Coding & Code Review

13. Product & Design - What about design
review??

14. Everyone - Feature Release

15. But..you forgot to test it..

16. oopsie...

17. And...there is another team worked with
this component

18. oopsie...

19. Yep...there are some failure points

20. ● Do we have common and isolated components? If the answer is no,
more work to do for us to develop the new feature.
● How do we communicate faster with design and product through
one path?
● Bugs - what is the source? the components or the page?

21. ● Do we have common and isolated components? If the answer is no,
more work to do for us to develop the new feature.
● How do we communicate faster with design and product through
one path?
● Bugs - what is the source? the components or the page?

22. ● Do we have common and isolated components? If the answer is no,
more work to do for us to develop the new feature.
● How do we communicate faster with design and product through
one path?
● Bugs - what is the source? the components or the page?

23. Live Demo - Using Async Abilities

24. CDD - Background
● Being a front end developer became more complex
● Several apps with the same design language
● More business logic => code can become a spaghetti
● Components Driven Development is not a new idea generally but it is new
in the front end development ecosystem

25. CDD - Background
“...Components enable interchangeability by isolating
state from application business logic. That way, you can
decompose complex screens into simple components.
Each component has a well-defined API and fixed series
of states that are mocked. This allows components to be
taken apart and recomposed to build different UIs....”

26. Live Demo - Using Async Abilities

27. Live Demo - Using Async Abilities

29. Small Components

30. Combined Components

31. Different Pages => Same Components

32. Different Products

33. How It Helps
● Efficient - collaboration and feedback loop
● Faster - reusing components which are isolated and easy to use
● Easy to find bugs/failure points - tested so I can find the issue without
wasting too much time
● Scalability - app grows or adding more products without any issue since we
have one source of truth

34. Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities

35. Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities

36. Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities

37. Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities

38. Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities
Live Demo - Using Async Abilities

39. Live Demo - Using Async Abilities

40. Design System
● Working with CDD is one step forward
● When things get more complex there is a need for clear and smooth
workflow
● The design system serves as a bridge between disciplines. It is also the
“source of truth” for an organization’s common components.

41. Live Demo - Using Async Abilities

42. Design System - Background
“...A design system consolidates common UI components
in a central well-maintained repository that gets
distributed via a package manager. Developers import
standardized UI components instead of pasting the same
UI code in multiple projects.....”

43. Design System - Background
“...Most design systems aren’t built from scratch. Instead,
they’re assembled from tried-and-true UI components
used across a company which are repackaged as a
design system......”

44. Live Demo - Using Async Abilities

45. Who Uses It?

46. Who Uses It - Examples
https://baseweb.design/- Uber
https://primer.style/css/components/avatars - Github

47. How can YOUR COMPANY get to this level?

48. Build
● Storybook environment
● Addons for faster development of automatic abilities : Controls, Actions,
Docs

49. Fun Fact
● The real story of how storybook was created and engined from a company
called Kadira that was shut down

50. Let's See Some Code

51. Let's See Some Code

52. Let's See Some Code

53. Storybook Addons

54. Storybook Addons - How do we add them?

55. Storybook Addons - Bonus

56. Chromatic - Review and Feedback
● Chromatic is a tool developed by Storybook maintainers
● It integrates with Github and your deployment process
● Code Review - But for the UI

57. Step 1 - Review UI Tests

58. Step 2 - Choose Changes To Review

59. Step 3 - Feedback

60. Test to prevent UI bugs
● Design systems are a single source of truth and a single point of failure.
Minor UI bugs in basic components can snowball into company-wide
incidents.
● Automate tests helps you mitigate the inevitable bugs to ship durable,
accessible UI components with confidence

61. Difficulties today

62. What to test?
● Visual
● Unit (functional)
● Accessibility

63. Testing strategy
● Coverage of enough cases
● Accuracy which means make sure we test the most important
functionalities
● Maintainability - we need to make sure it is easy to understand and
maintain our tests. In addition, to avoid creating and maintaining tests that
are not worth it

64. CSF - Component Story Format

65. CSF - Component Story Format

66. CSF - Component Story Format
● Stories and component metadata are defined as ES Modules
● Every component story file consists of a required default export and one or
more named exports
● Basically, by using CSF, we already think about all the states of the
components and preparing the data and relevant args

67. CSF - Component Story Format

68. CSF => Test

69. CSF - Component Story Format
● Portable
● Declarative
● Future Proof
● Can migrate from older way to the new format

70. CSF - Component Story Format
● Portable
● Declarative
● Future Proof
● Can migrate from older way to the new format

71. CSF - Component Story Format
● Portable
● Declarative
● Future Proof
● Can migrate from older way to the new format

72. CSF - Component Story Format
● Portable
● Declarative
● Future Proof
● Can migrate from older way to the new format

73. Visual
The appearance of the component
● Manual
● Automatic
Before change After change

74. Unit
● Unit tests helps us test a functionality of an isolated component we created
● If it is hard for us to test it , it might be a clue that it is not isolated enough

75. Accessibility
Is it responsive and fit accessibility needs?

76. What not to test?
● Snapshot tests (on complex components) - can cause many false-
positives when UI acts as expected but some data changes. It can be hard
to maintain
● E2E - Choose it carefully and avoid creating them as part of storybook
unless it really gives you some clear benefits

77. Document
Auto-generating minimum viable docs which can be further customized

78. Distribute easily to other teams

79. Who Uses Storybook?
● Harel (Part of the architecture team with Avihay Menahem) https://hrl-
internal.s3.eu-central-
1.amazonaws.com/storybook/index.html?path=/story/basic-components-
data-display--tooltip
● Wix https://www.wix.com/pages/wix-style-react/?path=/story/introduction-
getting-started--getting-started
● Lonely Planet http://lonelyplanet.github.io/backpack-ui/?path=/story/lists--
news-list-default
● AirBNB http://airbnb.io/react-dates/?path=/story/daterangepicker-drp--
default

80. Takeaways
Coverage,
Accurate and
Maintainable!

81. Takeaways
Adopted by
huge companies
Learn from their
resources!

82. Takeaways
Build it with
layers.
Start with small
success

83. Takeaways
Collaboration
process.
Not only for
developers!

84. Takeaways
Build it with
layers.
Start with small
success
Collaboration
process.
Not only for
developers!
Coverage,
Accurate and
Maintainable!
Adopted by
huge companies
Learn from their
resources!

85. Thank You!
We are hiring!
(PM me or https://www.gong.io/careers/)
@chenfeldmn
@chenosfeldman
www.ranlevi.com/software
https://github.com/ChenFeldman
https://www.linkedin.com/in/chen-feldman-2404682a/

86. Creditshttps://www.componentdriven.org/
https://blog.hichroma.com/component-driven-development-ce1109d56c8e
https://material-ui.com/
https://www.learnstorybook.com/
https://github.com/seek-oss/playroom
https://medium.com/storybookjs/the-storybook-story-dd3c1ab0d2ce
https://storybook.js.org/addons
https://www.chromatic.com/
https://blog.logrocket.com/top-storybook-addons-to-take-your-code-to-the-next-level/
https://blog.harrison.dev/storybook-addon-figma
https://storybook.js.org/docs/react/api/csf
https://storybook.js.org/docs/react/workflows/testing-with-storybook
https://blog.logrocket.com/comparing-react-testing-libraries/
https://reactjs.org/docs/testing-recipes.html
https://reactjs.org/docs/test-utils.html
https://github.com/alexpate/awesome-design-systems
https://reactjs.org/docs/testing.html
https://github.com/storybookjs/storybook/blob/master/lib/core/docs/storiesOf.md