Decoupling UI components for better reusability and test with Storybook

Decoupling UI components for better reusability and test with Storybook

Transcript

1. Decoupling UI components for better reusability and test with Storybook
2. Frontend world
3. UI Frameworks
4. TEST
5. • Component segmentation for reusability • Problems we encounter when implementing a new component • The solution that we test a new component by storybook Agenda
6. • Action by click or typing • Integrate API • Integrate stores What do we do on the page
7. • Handle action event • Call API • Manage data from API • Re-render view
 when data changed Spaghetti man Button Button Button Contents Button
8. Component segmentation for reusability
9. Input Type 1 Input Type 2 Input Type 3
11. 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
12. 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
13. Problems we encounter when implementing a new component
14. Test and review
15. How do we test > Unit test in each component > Automation test
16. Issues we often encounter during reviews
17. A lot of files changed
20. The solution that we test a new component by storybook
22. Storybook
24. Reviewer Create PR
25. Key takeaways > Making components easily reusable > Storybook helps reduce the time spent on testing and reviewing > Let’s have fun with the storybook