Skip to content

Commit

Permalink
Add role test for Overlay
Browse files Browse the repository at this point in the history
  • Loading branch information
TylerJDev committed Sep 19, 2024
1 parent 5d95ac9 commit 3fa1904
Showing 1 changed file with 23 additions and 2 deletions.
25 changes: 23 additions & 2 deletions packages/react/src/Overlay/Overlay.test.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useRef, useState} from 'react'
import React, {useRef, useState, type AriaRole} from 'react'
import {Overlay, Box, Text} from '..'
import {ButtonDanger, Button} from '../deprecated'
import {render, waitFor, fireEvent} from '@testing-library/react'
Expand All @@ -12,8 +12,9 @@ import {NestedOverlays, MemexNestedOverlays, MemexIssueOverlay, PositionedOverla
type TestComponentSettings = {
initialFocus?: 'button'
callback?: () => void
role?: AriaRole
}
const TestComponent = ({initialFocus, callback}: TestComponentSettings) => {
const TestComponent = ({initialFocus, callback, role}: TestComponentSettings) => {
const [isOpen, setIsOpen] = useState(false)
const buttonRef = useRef<HTMLButtonElement>(null)
const confirmButtonRef = useRef<HTMLButtonElement>(null)
Expand All @@ -39,6 +40,7 @@ const TestComponent = ({initialFocus, callback}: TestComponentSettings) => {
ignoreClickRefs={[buttonRef]}
onEscape={closeOverlay}
onClickOutside={closeOverlay}
role={role}
width="small"
>
<Box display="flex" flexDirection="column" p={2}>
Expand Down Expand Up @@ -281,4 +283,23 @@ describe('Overlay', () => {
// if stopPropagation worked, mockHandler would not have been called
expect(mockHandler).toHaveBeenCalledTimes(0)
})

it('should provide `role="dialog"` and `aria-modal="true"`, if role is not provided', async () => {
const user = userEvent.setup()
const {getByText, getByRole} = render(<TestComponent />)

await user.click(getByText('open overlay'))

expect(getByRole('dialog')).toBeInTheDocument()
})

it('should not provide `dialog` roles if role is already provided', async () => {
const user = userEvent.setup()
const {getByText, queryByRole} = render(<TestComponent role="none" />)

await user.click(getByText('open overlay'))

expect(queryByRole('dialog')).not.toBeInTheDocument()
expect(queryByRole('none')).toBeInTheDocument()
})
})

0 comments on commit 3fa1904

Please sign in to comment.