Add jest test for all components accepting className on outermost component (#5137)

* Test elements accept className

* Create a test check for expectRendersWithClassname

* Create three-jokes-bow.md

* Check test on Avatar

* Add test for AvatarPair

* Add more tests

* Remove duplicate test

* Remove helper

* Add more className tests

* Add classname support to Spinner

* Remove unused import

* Add support to Textarea for className

* Add more className tests

* Fix Textarea test

Author: jonrohan

.changeset/three-jokes-bow.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Make sure all components accept `className` as a prop on outermost component element.

packages/react/src/Banner/Banner.test.tsx

@@ -2,6 +2,7 @@ import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import {Banner} from '../Banner'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Banner', () => {
   let spy: jest.SpyInstance
@@ -30,8 +31,22 @@ describe('Banner', () => {
   })
 
   it('should support a custom `className` on the outermost element', () => {
-    const {container} = render(<Banner title="test" className="test" />)
-    expect(container.firstChild).toHaveClass('test')
+    const Element = () => <Banner title="test" className="test-class-name" />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should label the landmark element with the corresponding variant label text', () => {

packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -3,6 +3,7 @@ import Breadcrumbs, {Breadcrumb} from '..'
 import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../../FeatureFlags'
 
 describe('Breadcrumbs', () => {
   behavesAsComponent({Component: Breadcrumbs, options: {skipAs: true}})
@@ -12,6 +13,25 @@ describe('Breadcrumbs', () => {
     Breadcrumb,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Breadcrumbs className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Breadcrumbs />)
     const results = await axe.run(container)

packages/react/src/Button/__tests__/Button.test.tsx

@@ -31,6 +31,25 @@ describe('Button', () => {
     options: {skipSx: true, skipAs: true},
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Button className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('renders a <button>', () => {
     const container = render(<Button id="test-button">Default</Button>)
     const button = container.getByRole('button')

packages/react/src/Checkbox/Checkbox.test.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'
 import React from 'react'
 import Checkbox from '../Checkbox'
 import {behavesAsComponent, checkExports} from '../utils/testing'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Checkbox', () => {
   beforeEach(() => {
@@ -14,6 +15,25 @@ describe('Checkbox', () => {
     default: Checkbox,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Checkbox className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('renders a valid checkbox input', () => {
     const {getByRole} = render(<Checkbox />)
 

packages/react/src/CounterLabel/CounterLabel.test.tsx

@@ -3,6 +3,7 @@ import {CounterLabel} from '..'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('CounterLabel', () => {
   behavesAsComponent({Component: CounterLabel, options: {skipAs: true, skipSx: true}})
@@ -11,6 +12,25 @@ describe('CounterLabel', () => {
     default: CounterLabel,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <CounterLabel className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('renders a <span>', () => {
     const {container} = HTMLRender(<CounterLabel>1234</CounterLabel>)
     expect(container.firstChild?.nodeName).toEqual('SPAN')

packages/react/src/Heading/__tests__/Heading.test.tsx

@@ -4,6 +4,7 @@ import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender, screen} from '@testing-library/react'
 import axe from 'axe-core'
 import ThemeProvider from '../../ThemeProvider'
+import {FeatureFlags} from '../../FeatureFlags'
 
 const theme = {
   breakpoints: ['400px', '640px', '960px', '1280px'],
@@ -35,6 +36,25 @@ describe('Heading', () => {
     default: Heading,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Heading className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('renders <h2> by default', () => {
     expect(render(<Heading />).type).toEqual('h2')
   })
@@ -149,11 +169,6 @@ describe('Heading', () => {
     expect(screen.getByText('test')).not.toHaveClass(/^Heading__StyledHeading/)
   })
 
-  it('should support `className` on the outermost element', () => {
-    const {container} = HTMLRender(<Heading className="test">test</Heading>)
-    expect(container.firstChild).toHaveClass('test')
-  })
-
   it('should support overrides with sx if provided', () => {
     HTMLRender(
       <Heading

packages/react/src/Link/__tests__/Link.test.tsx

@@ -3,6 +3,7 @@ import Link from '..'
 import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../../FeatureFlags'
 
 describe('Link', () => {
   behavesAsComponent({Component: Link})
@@ -11,6 +12,25 @@ describe('Link', () => {
     default: Link,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Link href="#" className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Link href="www.github.com">GitHub</Link>)
     const results = await axe.run(container)

packages/react/src/Spinner/Spinner.tsx

@@ -19,10 +19,17 @@ export type SpinnerProps = {
   srText?: string | null
   /** @deprecated Use `srText` instead. */
   'aria-label'?: string
+  className?: string
 } & HTMLDataAttributes &
   SxProp
 
-function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ariaLabel, ...props}: SpinnerProps) {
+function Spinner({
+  size: sizeKey = 'medium',
+  srText = 'Loading',
+  'aria-label': ariaLabel,
+  className,
+  ...props
+}: SpinnerProps) {
   const size = sizeMap[sizeKey]
   const hasHiddenLabel = srText !== null && ariaLabel === undefined
   const labelId = useId()
@@ -38,6 +45,7 @@ function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ar
         aria-hidden
         aria-label={ariaLabel ?? undefined}
         aria-labelledby={hasHiddenLabel ? labelId : undefined}
+        className={className}
         {...props}
       >
         <circle

packages/react/src/__tests__/Avatar.test.tsx

@@ -4,6 +4,7 @@ import theme from '../theme'
 import {px, render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Avatar', () => {
   behavesAsComponent({Component: Avatar})
@@ -12,6 +13,25 @@ describe('Avatar', () => {
     default: Avatar,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Avatar src="primer.png" className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Avatar src="primer.png" />)
     const results = await axe.run(container)