Test(Overlay): Add e2e testing (#5315)

* test(Overlay): add e2e testing

* fix(Overlay): add aria-label to dialog stories

* chore(overlay): add dev story

* test(Overlay): skip story setup in e2e testing

* fix: wait only until storybook root is attached in storybook settings

* test(Overlay): uncomment e2e story setup

* test(vrt): update snapshots

* test

* test

* chore(overlay): role correction

* test

* test

* test(vrt): update snapshots

* test

* test(vrt): update snapshots

* test

* remove unusued import

* test(vrt): update snapshots

* test

* test

* test

* test(vrt): update snapshots

* test

* test(vrt): update snapshots

* test(Overlay): add open prop to dev story

* test(vrt): update snapshots

---------

Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com>
Co-authored-by: francinelucca <francinelucca@users.noreply.github.com>

e2e/components/Overlay.test.ts

@@ -0,0 +1,84 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'private-components-overlay--default',
+  },
+  {
+    title: 'Playground',
+    id: 'private-components-overlay--playground',
+  },
+  {
+    title: 'Dialog Overlay',
+    id: 'private-components-overlay-features--dialog-overlay',
+  },
+  {
+    title: 'Dropdown Overlay',
+    id: 'private-components-overlay-features--dropdown-overlay',
+  },
+  {
+    title: 'Memex Issue Overlay',
+    id: 'private-components-overlay-features--memex-issue-overlay',
+  },
+  {
+    title: 'Memex Nested Overlays',
+    id: 'private-components-overlay-features--memex-nested-overlays',
+  },
+  {
+    title: 'Nested Overlays',
+    id: 'private-components-overlay-features--nested-overlays',
+  },
+  {
+    title: 'Overlay On Top Of Overlay',
+    id: 'private-components-overlay-features--overlay-on-top-of-overlay',
+  },
+  {
+    title: 'Positioned Overlays',
+    id: 'private-components-overlay-features--positioned-overlays',
+  },
+  {
+    title: 'SX Props',
+    id: 'private-components-overlay-dev--sx-props',
+  },
+] as const
+
+test.describe('Overlay ', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('@vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+              args: {
+                open: true,
+              },
+            })
+
+            await expect(page).toHaveScreenshot(`Overlay.${story.title}.${theme}.png`, {animations: 'disabled'})
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+              args: {
+                open: true,
+              },
+            })
+
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})

e2e/test-helpers/storybook.ts

@@ -54,7 +54,7 @@ export async function visit(page: Page, options: Options) {
 
   await page.goto(url.toString())
   await page.waitForSelector('body.sb-show-main:not(.sb-show-preparing-story)')
-  await page.waitForSelector('#storybook-root > *')
+  await page.waitForSelector('#storybook-root > *', {state: 'attached'})
 
   await waitForImages(page)
 }

packages/react/src/Overlay/Overlay.dev.stories.tsx

@@ -0,0 +1,91 @@
+import React, {useRef, useState} from 'react'
+import type {Args, Meta} from '@storybook/react'
+import Text from '../Text'
+import {Button, IconButton} from '../Button'
+import Overlay from './Overlay'
+import {useFocusTrap} from '../hooks/useFocusTrap'
+import Box from '../Box'
+import {XIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Private/Components/Overlay/Dev',
+  component: Overlay,
+  args: {
+    open: false,
+  },
+  argTypes: {
+    open: {
+      control: false,
+      visible: false,
+    },
+  },
+} as Meta<typeof Overlay>
+
+export const SxProps = (args: Args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const confirmButtonRef = useRef<HTMLButtonElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const closeOverlay = () => setIsOpen(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  useFocusTrap({
+    containerRef,
+    disabled: !isOpen,
+  })
+  return (
+    <Box ref={anchorRef}>
+      <Button
+        ref={buttonRef}
+        onClick={() => {
+          setIsOpen(!isOpen)
+        }}
+      >
+        Open overlay
+      </Button>
+      {isOpen || args.open ? (
+        <Overlay
+          initialFocusRef={confirmButtonRef}
+          returnFocusRef={buttonRef}
+          ignoreClickRefs={[buttonRef]}
+          onEscape={closeOverlay}
+          onClickOutside={closeOverlay}
+          width="large"
+          anchorSide="inside-right"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Sample overlay"
+          ref={containerRef}
+          sx={{
+            left: '50%',
+            mt: 2,
+            color: 'var(--bgColor-danger-muted)',
+          }}
+          style={{padding: '16px'}}
+        >
+          <Box
+            sx={{
+              height: '100vh',
+              maxWidth: 'calc(-1rem + 100vw)',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <IconButton
+              aria-label="Close"
+              onClick={closeOverlay}
+              icon={XIcon}
+              variant="invisible"
+              sx={{
+                position: 'absolute',
+                left: '5px',
+                top: '5px',
+              }}
+            />
+            <Text>Look! an overlay</Text>
+          </Box>
+        </Overlay>
+      ) : null}
+    </Box>
+  )
+}