chore: add className testing util:

packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx

@@ -1,23 +1,26 @@
 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 = ({
   initiallyOpen = false,
   onOpenCallback,
   onCloseCallback,
   onPositionChange,
+  className,
 }: TestComponentSettings = {}) => {
   const [open, setOpen] = useState(initiallyOpen)
   const onOpen = useCallback(
@@ -42,6 +45,7 @@
         onClose={onClose}
         renderAnchor={props => <Button {...props}>Anchor Button</Button>}
         onPositionChange={onPositionChange}
+        className={className}
       >
         <button type="button">Focusable Child</button>
       </AnchoredOverlay>
@@ -50,6 +54,12 @@
 }
 
 describe('AnchoredOverlay', () => {
+  implementsClassNameBehavior(
+    AnchoredOverlay,
+    'prc-Overlay-Overlay-ViJgm',
+    component => component.container.firstChild!.childNodes[1].firstChild?.firstChild as HTMLElement,
+    props => <AnchoredOverlayTestComponent initiallyOpen={true} {...props} />,
+  )
   it('should call onOpen when the anchor is clicked', async () => {
     const mockOpenCallback = vi.fn()
     const mockCloseCallback = vi.fn()

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<any>,
+  baseClassName?: string,
+  getClassNameElement: (component: RenderResult) => HTMLElement = component =>
+    component.container.firstChild as HTMLElement,
+  renderComponent: (props: any) => React.JSX.Element = props => <Component {...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)
+    }
+  })
+}