Skip to content

Migrate PointerBox tests from Jest to Vitest with computed style assertions #6407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 4, 2025
Merged

Migrate PointerBox tests from Jest to Vitest with computed style assertions #6407

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
92e3349
Initial plan
Copilot Jul 28, 2025
0169b57
Migrate PointerBox tests to Vitest - basic tests working
Copilot Jul 28, 2025
98dbcb3
Complete PointerBox Jest to Vitest migration - all tests passing
Copilot Jul 28, 2025
1927b89
Resolve merge conflicts with main
Copilot Jul 31, 2025
b3ddae9
Update PointerBox tests: remove snapshot test, convert remaining to c…
Copilot Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/react/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ module.exports = {
'<rootDir>/src/PageLayout/',
'<rootDir>/src/Pagehead/',
'<rootDir>/src/Pagination/',
'<rootDir>/src/PointerBox/',
'<rootDir>/src/Portal/',
'<rootDir>/src/ProgressBar/',
'<rootDir>/src/Radio/',
Expand Down
71 changes: 38 additions & 33 deletions packages/react/src/PointerBox/PointerBox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,61 @@
import {PointerBox} from '..'
import {render, behavesAsComponent, checkExports, renderStyles} from '../utils/testing'
import {render as HTMLRender} from '@testing-library/react'
import axe from 'axe-core'
import {describe, expect, it} from 'vitest'
import {render} from '@testing-library/react'
import {PointerBox, ThemeProvider} from '..'
import theme from '../theme'

describe('PointerBox', () => {
behavesAsComponent({Component: PointerBox})

checkExports('PointerBox', {
default: PointerBox,
})

it('renders a <Caret> in <Box> with relative positioning', () => {
expect(render(<PointerBox />)).toMatchSnapshot()
})

it('should have no axe violations', async () => {
const {container} = HTMLRender(<PointerBox />)
const results = await axe.run(container)
expect(results).toHaveNoViolations()
expect(render(<PointerBox theme={theme} />)).toMatchSnapshot()
Copy link
Member

@joshblack joshblack Jul 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this test

Copy link
Contributor Author

Copilot AI Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the basic rendering snapshot test as requested. Commit b3ddae9

})

it('applies the border color via "borderColor" prop for backwards compatibility', () => {
expect(render(<PointerBox borderColor="danger.emphasis" />)).toMatchSnapshot()
expect(render(<PointerBox borderColor="danger.emphasis" theme={theme} />)).toMatchSnapshot()
Copy link
Member

@joshblack joshblack Jul 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update this test from a snapshot test to one that is checking that the border color is set correctly

Copy link
Contributor Author

Copilot AI Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated this test to check that the border color is set correctly using computed styles instead of snapshots. Now verifies borderColor CSS property is rgb(207, 34, 46) for danger.emphasis. Commit b3ddae9

})

it('applies the border color via sx prop', () => {
expect(render(<PointerBox sx={{borderColor: 'danger.emphasis'}} />)).toMatchSnapshot()
expect(render(<PointerBox sx={{borderColor: 'danger.emphasis'}} theme={theme} />)).toMatchSnapshot()
Copy link
Member

@joshblack joshblack Jul 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update this test from a snapshot test to one that is checking that the border color is set correctly

Copy link
Contributor Author

Copilot AI Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated this test to check that the border color is set correctly using computed styles instead of snapshots. Now verifies borderColor CSS property is rgb(207, 34, 46) for danger.emphasis. Commit b3ddae9

})

Check failure on line 18 in packages/react/src/PointerBox/PointerBox.test.tsx

View workflow job for this annotation

GitHub Actions / copilot

src/PointerBox/PointerBox.test.tsx > PointerBox > applies the border color via "borderColor" prop for backwards compatibility 

AssertionError: expected 'rgb(207, 34, 46)' to be 'rgb(218, 54, 51)' // Object.is equality

Expected: "rgb(218, 54, 51)"
Received: "rgb(207, 34, 46)"

 ❯ src/PointerBox/PointerBox.test.tsx:18:31
it('applies the background color via "bg" prop for backwards compatibility', () => {
expect(render(<PointerBox bg="danger.emphasis" />)).toMatchSnapshot()
expect(
render(
<ThemeProvider theme={theme}>
<PointerBox bg="danger.emphasis" />
</ThemeProvider>,
),
).toMatchSnapshot()
Copy link
Member

@joshblack joshblack Jul 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update this test from a snapshot test to one that is checking the background color

Copy link
Contributor Author

Copilot AI Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated this test to check the background color using computed styles instead of snapshots. Now verifies backgroundImage CSS property contains the expected color rgb(207, 34, 46) for danger.emphasis. Commit b3ddae9

})

it('applies the background color via sx prop', () => {
expect(render(<PointerBox sx={{bg: 'danger.emphasis'}} />)).toMatchSnapshot()
expect(
Copy link
Member

@joshblack joshblack Jul 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update this test from a snapshot test to one that is checking the background color

Copy link
Contributor Author

Copilot AI Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated this test to check the background color using computed styles instead of snapshots. Now verifies backgroundImage CSS property contains the expected color rgb(207, 34, 46) for danger.emphasis. Commit b3ddae9

render(
<ThemeProvider theme={theme}>

Check failure on line 32 in packages/react/src/PointerBox/PointerBox.test.tsx

View workflow job for this annotation

GitHub Actions / copilot

src/PointerBox/PointerBox.test.tsx > PointerBox > applies the border color via sx prop 

AssertionError: expected 'rgb(207, 34, 46)' to be 'rgb(218, 54, 51)' // Object.is equality

Expected: "rgb(218, 54, 51)"
Received: "rgb(207, 34, 46)"

 ❯ src/PointerBox/PointerBox.test.tsx:32:31
<PointerBox sx={{bg: 'danger.emphasis'}} />
</ThemeProvider>,
),
).toMatchSnapshot()
})

it('ensures that background-color set via bg prop and sx output the same for backwards compatibility', () => {
const mockBg = 'red'
const viaStyledSystem = renderStyles(<PointerBox bg={mockBg} />)
const viaSxProp = renderStyles(<PointerBox sx={{bg: mockBg}} />)
expect(viaStyledSystem).toEqual(
expect.objectContaining({
'background-image':
'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(var(--bgColor-default,var(--color-canvas-default,#ffffff)),var(--bgColor-default,var(--color-canvas-default,#ffffff)))',
}),
const {container: containerBg} = render(
<ThemeProvider theme={theme}>
<PointerBox bg={mockBg} />
</ThemeProvider>,
)
expect(viaSxProp).toEqual(
expect.objectContaining({
'background-image':
'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(var(--bgColor-default,var(--color-canvas-default,#ffffff)),var(--bgColor-default,var(--color-canvas-default,#ffffff)))',
}),
const {container: containerSx} = render(

Check failure on line 46 in packages/react/src/PointerBox/PointerBox.test.tsx

View workflow job for this annotation

GitHub Actions / copilot

src/PointerBox/PointerBox.test.tsx > PointerBox > applies the background color via "bg" prop for backwards compatibility 

AssertionError: expected 'linear-gradient(rgb(207, 34, 46), rgb…' to contain 'rgb(218, 54, 51)'

Expected: "rgb(218, 54, 51)"
Received: "linear-gradient(rgb(207, 34, 46), rgb(207, 34, 46)), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))"

 ❯ src/PointerBox/PointerBox.test.tsx:46:35
<ThemeProvider theme={theme}>
<PointerBox sx={{bg: mockBg}} />
</ThemeProvider>,
)

const elementBg = containerBg.firstChild as HTMLElement
const elementSx = containerSx.firstChild as HTMLElement

// Both should have the same computed background styles
const stylesBg = window.getComputedStyle(elementBg)
const stylesSx = window.getComputedStyle(elementSx)

expect(stylesBg.backgroundImage).toBe(stylesSx.backgroundImage)
})

Check failure on line 60 in packages/react/src/PointerBox/PointerBox.test.tsx

View workflow job for this annotation

GitHub Actions / copilot

src/PointerBox/PointerBox.test.tsx > PointerBox > applies the background color via sx prop 

AssertionError: expected 'linear-gradient(rgb(207, 34, 46), rgb…' to contain 'rgb(218, 54, 51)'

Expected: "rgb(218, 54, 51)"
Received: "linear-gradient(rgb(207, 34, 46), rgb(207, 34, 46)), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))"

 ❯ src/PointerBox/PointerBox.test.tsx:60:35
})
Loading
Loading