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) + } + }) +}