chore: add className testing util: #7231

francinelucca · 2025-11-22T05:01:56Z

Relatos to https://github.com/github/primer/issues/5255

This pull request adds a reusable test utility to verify that components correctly handle className props and applies it to the AnchoredOverlay component tests. The main focus is on improving test coverage and consistency for CSS class name behavior.

Changelog

New

Added the implementsClassNameBehavior function to utils/testing.tsx, which provides a standardized way to test that components render both their default and custom className props.
Integrated implementsClassNameBehavior into the AnchoredOverlay test suite, ensuring that the component correctly applies both its base and custom class names.

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why
Test-only update

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-11-22T05:01:59Z

⚠️ No Changeset found

Latest commit: a61c41c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2025-11-22T05:02:33Z

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

…ass-testing-util

francinelucca · 2025-11-25T03:17:42Z

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

+  implementsClassNameBehavior(
+    AnchoredOverlay,
+    'prc-Overlay-Overlay-ViJgm',
+    component => component.container.firstChild!.childNodes[1].firstChild?.firstChild as HTMLElement,


what's going on here? 😅 I don't understand

Is this the way to get the baseHtmlElement? + Is this so weird because every component puts the className in a different spot and not just the first child?

Is this the way to get the baseHtmlElement?

Yeah, I'm trying to tell the helper how to find the element with the className

Is this so weird because every component puts the className in a different spot and not just the first child?

Correct! a lot of them will be the first child, which I've made the default, but for some of them I expect some "I need to tell you what the styled element is" which is what this is

siddharthkp · 2025-11-26T13:24:45Z

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

 describe('AnchoredOverlay', () => {
+  implementsClassNameBehavior(
+    AnchoredOverlay,
+    'prc-Overlay-Overlay-ViJgm',


Hmm, feels off putting the hashed className here, can we import this from .module.css file instead, does that work?

siddharthkp · 2025-11-26T13:27:22Z

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

+    'prc-Overlay-Overlay-ViJgm',
+    component => component.container.firstChild!.childNodes[1].firstChild?.firstChild as HTMLElement,
+    props => <AnchoredOverlayTestComponent initiallyOpen={true} {...props} />,
+  )


my dream test function call looks like this:

implementsClassName(ActionList) // or if we need to, implementsClassName(props => <AnchoredOverlayFixture {...props} />)

implementsClassName should

render without custom className to figure out the base class and base element

render with custom className, make sure it has both classes on the base element

render without custom className to figure out the base class and base element

can you elaborate on this one? I'm confused on how it would do that 🤔

(i'm literally making this up so it might not work, i should invest some time doing a proof of concept) Is there a pattern we follow for base classes? Does it always have the component name like in prc-Overlay-Overlay-ViJgm, is it safe to find the first prc-* class we find, that's probably the base class?

yeah we could, the main problem I see is we don't have (as far as I can tell) "getByClassName" or something of the sorts util, so even knowing the full className, I don't know how to find the element is my main problem.

Another potential roadblock I see is some components are composed of others so will definitely have multiple "prc-*" classes

siddharthkp · 2025-11-26T13:29:34Z

packages/react/src/utils/testing.tsx

+    component.container.firstChild as HTMLElement,
+  renderComponent: (props: {className?: string}) => React.JSX.Element = props => <Component {...(props as TProps)} />,
+) {
+  it('renders with the base className', () => {


idk why but this feels like a strange test to test for. The custom className test is 10/10

siddharthkp · 2025-11-26T13:30:01Z

packages/react/src/utils/testing.tsx

+import {type RenderResult, render as HTMLRender} from '@testing-library/react'
+import {it, expect} from 'vitest'
+
+export function implementsClassNameBehavior<TProps extends {className?: string}>(


nit:

Suggested change

export function implementsClassNameBehavior<TProps extends {className?: string}>(

export function implementsClassName<TProps extends {className?: string}>(

siddharthkp

Left a few direction comments

primer-integration · 2025-12-02T03:46:01Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/7852

primer-integration · 2025-12-02T18:53:48Z

🔴 ci completed with status failure.

chore: add className testing util:

269434b

github-actions bot added the staff Author is a staff member label Nov 22, 2025

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 22, 2025

francinelucca deployed to github-pages November 22, 2025 05:12 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7231 November 22, 2025 05:12 Inactive

francinelucca added 2 commits November 24, 2025 22:10

Merge branch 'main' of github.com:primer/react into chore/add-base-cl…

7972d0e

…ass-testing-util

lint fixes

4034aca

francinelucca commented Nov 25, 2025

View reviewed changes

francinelucca requested a review from siddharthkp November 25, 2025 03:19

francinelucca added the skip changeset This change does not need a changelog label Nov 25, 2025

francinelucca deployed to github-pages November 25, 2025 03:27 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7231 November 25, 2025 03:27 Inactive

siddharthkp reviewed Nov 26, 2025

View reviewed changes

Merge branch 'main' into chore/add-base-class-testing-util

cae2022

francinelucca deployed to github-pages November 26, 2025 16:58 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7231 November 26, 2025 16:58 Inactive

Merge branch 'main' into chore/add-base-class-testing-util

a61c41c

francinelucca deployed to github-pages December 2, 2025 03:49 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7231 December 2, 2025 03:49 Inactive

github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Dec 2, 2025

francinelucca deployed to github-pages December 2, 2025 04:02 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7231 December 2, 2025 04:02 View deployment

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh labels Dec 2, 2025

	export function implementsClassNameBehavior<TProps extends {className?: string}>(
	export function implementsClassName<TProps extends {className?: string}>(

chore: add className testing util: #7231

Are you sure you want to change the base?

chore: add className testing util: #7231

Conversation

francinelucca commented Nov 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Nov 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Nov 22, 2025

Uh oh!

francinelucca Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

francinelucca Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siddharthkp Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

francinelucca Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp left a comment

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Dec 2, 2025

Uh oh!

primer-integration bot commented Dec 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

francinelucca commented Nov 22, 2025 •

edited

Loading

changeset-bot bot commented Nov 22, 2025 •

edited

Loading

siddharthkp Nov 26, 2025 •

edited

Loading

siddharthkp Nov 26, 2025 •

edited

Loading

siddharthkp Nov 26, 2025 •

edited

Loading