diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx
index 18533837f3e..0f54bf7cea0 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx
@@ -1,16 +1,18 @@
import {act, createRef, useCallback, useRef, useState} from 'react'
import {describe, expect, it, vi} from 'vitest'
-import {render} from '@testing-library/react'
+import {render, type RenderResult} from '@testing-library/react'
import {userEvent} from 'vitest/browser'
import {AnchoredOverlay} from '../AnchoredOverlay'
import {Button} from '../Button'
import BaseStyles from '../BaseStyles'
import type {AnchorPosition} from '@primer/behaviors'
+import {implementsClassNameBehavior} from '../utils/testing'
type TestComponentSettings = {
initiallyOpen?: boolean
onOpenCallback?: (gesture: string) => void
onCloseCallback?: (gesture: string) => void
onPositionChange?: ({position}: {position: AnchorPosition}) => void
+ className?: string
}
const AnchoredOverlayTestComponent = ({
@@ -18,6 +20,7 @@ const AnchoredOverlayTestComponent = ({
onOpenCallback,
onCloseCallback,
onPositionChange,
+ className,
}: TestComponentSettings = {}) => {
const [open, setOpen] = useState(initiallyOpen)
const onOpen = useCallback(
@@ -42,6 +45,7 @@ const AnchoredOverlayTestComponent = ({
onClose={onClose}
renderAnchor={props => }
onPositionChange={onPositionChange}
+ className={className}
>
@@ -50,6 +54,12 @@ const AnchoredOverlayTestComponent = ({
}
describe('AnchoredOverlay', () => {
+ implementsClassNameBehavior(
+ AnchoredOverlay,
+ 'prc-Overlay-Overlay-ViJgm',
+ component => component.container.firstChild!.childNodes[1].firstChild?.firstChild as HTMLElement,
+ props => ,
+ )
it('should call onOpen when the anchor is clicked', async () => {
const mockOpenCallback = vi.fn()
const mockCloseCallback = vi.fn()
diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
new file mode 100644
index 00000000000..61d8b3c1b86
--- /dev/null
+++ b/packages/react/src/utils/testing.tsx
@@ -0,0 +1,24 @@
+import {type RenderResult, render as HTMLRender} from '@testing-library/react'
+import {it, expect} from 'vitest'
+
+export function implementsClassNameBehavior(
+ Component: React.ComponentType,
+ baseClassName?: string,
+ getClassNameElement: (component: RenderResult) => HTMLElement = component =>
+ component.container.firstChild as HTMLElement,
+ renderComponent: (props: any) => React.JSX.Element = props => ,
+) {
+ it('renders with the base className', () => {
+ const component = HTMLRender(renderComponent({}))
+ if (baseClassName) {
+ expect(getClassNameElement(component)).toHaveClass(baseClassName)
+ }
+ })
+ it('renders with the custom className', () => {
+ const component = HTMLRender(renderComponent({className: 'test-class'}))
+ expect(getClassNameElement(component)).toHaveClass('test-class')
+ if (baseClassName) {
+ expect(getClassNameElement(component)).toHaveClass(baseClassName)
+ }
+ })
+}