WEB-2113 add screenshot tests

src/__screenshot_tests__/drawer-screenshot-test.tsx

@@ -0,0 +1,35 @@
+import {openStoryPage, screen} from '../test-utils';
+
+import type {Device} from '../test-utils';
+
+test.each`
+    device          | withActions | dismissible | contentLength
+    ${'MOBILE_IOS'} | ${true}     | ${true}     | ${1}
+    ${'MOBILE_IOS'} | ${true}     | ${true}     | ${5}
+    ${'MOBILE_IOS'} | ${true}     | ${false}    | ${1}
+    ${'DESKTOP'}    | ${true}     | ${true}     | ${1}
+    ${'TABLET'}     | ${true}     | ${true}     | ${1}
+    ${'MOBILE_IOS'} | ${false}    | ${true}     | ${1}
+    ${'DESKTOP'}    | ${false}    | ${true}     | ${1}
+    ${'TABLET'}     | ${false}    | ${true}     | ${1}
+`(
+    'Drawer $device actions:$withActions dismissible:$dismissible contentLength:$contentLength',
+    async ({device, withActions, dismissible}) => {
+        const page = await openStoryPage({
+            id: 'components-modals-drawer--default',
+            device: device as Device,
+            args: {
+                showButton: withActions,
+                showSecondaryButton: withActions,
+                showButtonLink: withActions,
+                onDismissHandler: dismissible,
+            },
+        });
+
+        const button = await screen.findByRole('button', {name: 'Open Drawer'});
+        await button.click();
+
+        const image = await page.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);

src/__stories__/drawer-story.tsx

@@ -26,6 +26,9 @@ export const Default = ({
     description,
     contentLength,
     onDismissHandler,
+    showButton,
+    showSecondaryButton,
+    showButtonLink,
 }: Args): JSX.Element => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [result, setResult] = React.useState('');
@@ -52,9 +55,13 @@ export const Default = ({
                     description={description}
                     onClose={() => setIsOpen(false)}
                     onDismiss={onDismissHandler ? () => setResult('dismiss') : undefined}
-                    button={{text: 'Primary', onPress: () => setResult('primary')}}
-                    secondaryButton={{text: 'Secondary', onPress: () => setResult('secondary')}}
-                    buttonLink={{text: 'Link', onPress: () => setResult('link')}}
+                    button={showButton ? {text: 'Primary', onPress: () => setResult('primary')} : undefined}
+                    secondaryButton={
+                        showSecondaryButton
+                            ? {text: 'Secondary', onPress: () => setResult('secondary')}
+                            : undefined
+                    }
+                    buttonLink={showButtonLink ? {text: 'Link', onPress: () => setResult('link')} : undefined}
                 >
                     {content}
                 </Drawer>