body { -ms-overflow-style: scrollbar; overflow-y: scroll; overscroll-behavior-y: none; } .errorContainer { background-color: #FFF; color: #0F1419; max-width: 600px; margin: 0 auto; padding: 10%; font-family: Helvetica, sans-serif; font-size: 16px; } .errorButton { margin: 3em 0; } .errorButton a { background: #1DA1F2; border-radius: 2.5em; color: white; padding: 1em 2em; text-decoration: none; } .errorButton a:hover, .errorButton a:focus { background: rgb(26, 145, 218); } .errorFooter { color: #657786; font-size: 80%; line-height: 1.5; padding: 1em 0; } .errorFooter a, .errorFooter a:visited { color: #657786; text-decoration: none; padding-right: 1em; } .errorFooter a:hover, .errorFooter a:active { text-decoration: underline; } #placeholder, #react-root { display: none !important; } body { background-color: #FFF !important; }

JavaScript is not available.

We’ve detected that JavaScript is disabled in this browser. Please enable JavaScript or switch to a supported browser to continue using twitter.com. You can see a list of supported browsers in our Help Center.

Terms of Service Privacy Policy Cookie Policy Imprint Ads info © 2023 Twitter, Inc.

Conversation

Testing UI can be hard! It becomes much easier when we can visualize the UI in under test. Play functions let us do just that! Check out our interview with

on building sturdy UI components in Storybook youtu.be/jR0Gefa4lpg

Embedded video

5:58 PM · Feb 1, 2022

Replying to

Brad wrote a wonderful post on implementing Atomic Design in Storybook It's full of masterful tips and suggestions on interactive UI testing! bradfrost.com/blog/post/atom

A snippet from Brad Frost's Post Atomic Design and Storybook: 'Unlocks new levels of unit testing — We’re able to use Storybook’s many testing integrations to validate that things behave accordingly. We’re also able to use Storybook’s new play functions to test page-level interactions to test things like “the user should be able to click on the ‘delete account’ button, which should trigger the confirmation modal, and then when they click ‘i’m sure’ it should redirect them to the ‘account successfully deleted’ page.”'

read image description

ALT

4

15

Replying to

and

Shoutout to

@HipsterSmoothie

for sharing how to make these sweet videos with descript!

2

2