Decoupling UI components for better reusability and test with Storybook 

Frontend world 

UI Frameworks 

TEST 

• Component segmentation for reusability • Problems we encounter when implementing a new component • The solution that we test a new component by storybook Agenda 

● Action by click or typing ● Integrate API ● Integrate stores What do we do on the page 

● Handle action event ● Call API ● Manage data from API ● Re-render view
 when data changed Spaghetti man Button Button Button Contents Button 

Component segmentation for reusability 

Input Type 1 Input Type 2 Input Type 3 

No content

Panel for 5 Button and Content Button Button Contents Label Button Button Button ● Render component ● Action by clicked button Focus ● Integrate with API ● Mutate data Out of scope 

Overview Button Button Contents Panel 1 Button Button Button Panel 3 Button Button Button Panel 2 Button Button Button Button Button Contents Panel 4 Button Button Button Container Container ● Listen event from each panel to handle action ● Action to call API ● Action to stores 

Problems we encounter when implementing a new component 

Test and review 

How do we test > Unit test in each component > Automation test 

Issues we often encounter during reviews 

A lot of files changed 

No content

No content

The solution that we test a new component by storybook 

No content

Storybook 

No content

Reviewer Create PR 

Key takeaways > Making components easily reusable > Storybook helps reduce the time spent on testing and reviewing > Let’s have fun with the storybook 

No content