chore: add className testing util

[francinelucca]

Closes 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 components' tests. The main focus is on improving test coverage and consistency for CSS class name behavior.

Changelog

New

• Added the implementsClassName function to utils/testing.tsx, which provides a standardized way to test that components render both their default and custom className props.
• Integrated implementsClassName into existing components test suite, ensuring that the components correctly apply both the base and custom class names.
• Adds CI to enforce the testing util is used in every component test file

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]

⚠️ No Changeset found

Latest commit: fed64bd

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]

👋 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.

[siddharthkp]

my dream test function call looks like this:

implementsClassName(ActionList)

// or if we need to,

implementsClassName(props => <AnchoredOverlayFixture {...props} />)

implementsClassName should

1. render without custom className to figure out the base class and base element
2. render with custom className, make sure it has both classes on the base element

[francinelucca]

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 🤔

[siddharthkp]

(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?

[francinelucca]

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

[francinelucca]

Update: yes we can look for the className, cleaned it up to where we're just passing the render fixture and the className, I'm not sure about trying to infer the className just by looking for prc-* because of what I said ^ regarding composed components, let me know what you think!

[siddharthkp]

(thinking out loud, non blocking, ignore for now)

so even knowing the full className, I don't know how to find the element is my main problem

Is it possible to run query selectors like document.querySelector('[class^=prc]') (class starts with prc) and the first result should be the element with base class?

[francinelucca]

Is it possible to run query selectors like document.querySelector('[class^=prc]') (class starts with prc) and the first result should be the element with base class?

Here's an example where this doesn't prove true:
The ActionMenu is wrapped within an Overlay, so the first PRC class is not the one we're looking for here

[siddharthkp]

Ohhh, righto! I don't know why I understand this earlier.

so even knowing the full className, I don't know how to find the element is my main problem

Is this still valid?

[francinelucca]

Is this still valid?

No, I figured how to find classNames out, but I still think we need to supply the className we're looking for as a parameter due to #7231 (comment) 👀

[github-actions]

👋 Hi, there are new commits since the last successful integration test. 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.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. 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.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. 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.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. 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.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. 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.