diff --git a/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-desktop-actions-false-dismissible-true-content-length-1-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-desktop-actions-false-dismissible-true-content-length-1-1-snap.png new file mode 100644 index 000000000..70ee3777e Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-desktop-actions-false-dismissible-true-content-length-1-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-desktop-actions-true-dismissible-true-content-length-1-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-desktop-actions-true-dismissible-true-content-length-1-1-snap.png new file mode 100644 index 000000000..21ded0d34 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-desktop-actions-true-dismissible-true-content-length-1-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-false-dismissible-true-content-length-1-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-false-dismissible-true-content-length-1-1-snap.png new file mode 100644 index 000000000..2999304c5 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-false-dismissible-true-content-length-1-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-true-dismissible-false-content-length-1-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-true-dismissible-false-content-length-1-1-snap.png new file mode 100644 index 000000000..4a8d1e597 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-true-dismissible-false-content-length-1-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-true-dismissible-true-content-length-1-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-true-dismissible-true-content-length-1-1-snap.png new file mode 100644 index 000000000..b287f1faa Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-true-dismissible-true-content-length-1-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-true-dismissible-true-content-length-5-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-true-dismissible-true-content-length-5-1-snap.png new file mode 100644 index 000000000..b287f1faa Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-mobile-ios-actions-true-dismissible-true-content-length-5-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-tablet-actions-false-dismissible-true-content-length-1-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-tablet-actions-false-dismissible-true-content-length-1-1-snap.png new file mode 100644 index 000000000..cff760b56 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-tablet-actions-false-dismissible-true-content-length-1-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-tablet-actions-true-dismissible-true-content-length-1-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-tablet-actions-true-dismissible-true-content-length-1-1-snap.png new file mode 100644 index 000000000..e0cd1f06c Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/drawer-screenshot-test-tsx-drawer-tablet-actions-true-dismissible-true-content-length-1-1-snap.png differ diff --git a/src/__screenshot_tests__/drawer-screenshot-test.tsx b/src/__screenshot_tests__/drawer-screenshot-test.tsx new file mode 100644 index 000000000..228c07518 --- /dev/null +++ b/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(); + } +); diff --git a/src/__stories__/drawer-story.tsx b/src/__stories__/drawer-story.tsx index b915235ed..00bc3e224 100644 --- a/src/__stories__/drawer-story.tsx +++ b/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}