diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx index 91533a83b3a..111fac29da1 100644 --- a/packages/react/src/__tests__/ActionMenu.test.tsx +++ b/packages/react/src/__tests__/ActionMenu.test.tsx @@ -5,7 +5,7 @@ import React from 'react' import theme from '../theme' import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider, Tooltip, Button, IconButton} from '..' import {Tooltip as TooltipV2} from '../TooltipV2/Tooltip' -import {behavesAsComponent, checkExports} from '../utils/testing' +import {behavesAsComponent, checkExports, checkRenderDuration} from '../utils/testing' import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories' import {MixedSelection} from '../ActionMenu/ActionMenu.examples.stories' import {SearchIcon, KebabHorizontalIcon} from '@primer/octicons-react' @@ -144,6 +144,10 @@ describe('ActionMenu', () => { ActionMenu, }) + checkRenderDuration(Example, 80) + checkRenderDuration(ExampleWithSubmenus, 38) + checkRenderDuration(ExampleWithTooltip, 66) + it('should open Menu on MenuButton click', async () => { const component = HTMLRender() const button = component.getByRole('button') diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx index 5f013cd9624..27d3565e76e 100644 --- a/packages/react/src/utils/testing.tsx +++ b/packages/react/src/utils/testing.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {Profiler} from 'react' import {promisify} from 'util' import renderer from 'react-test-renderer' import {render as HTMLRender} from '@testing-library/react' @@ -185,6 +185,24 @@ export function unloadCSS(path: string) { } } +export function checkRenderDuration(Component: React.ComponentType, expectedDuration: number) { + it(`${Component.displayName} renders with expected performance ${expectedDuration}`, () => { + // Add and subtract a small value to account for the variability of the test environment + const minMaxValue = 1 + let duration = 0 + HTMLRender( + (duration = Math.ceil(baseDuration))} + > + + , + ) + expect(duration).toBeLessThanOrEqual(expectedDuration + minMaxValue) + expect(duration).toBeGreaterThanOrEqual(expectedDuration - minMaxValue) + }) +} + // If a component requires certain props or other conditions in order // to render without errors, you can pass a `toRender` function that // returns an element ready to be rendered.