paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 41 Packages Projects Releases Wiki Activity

add tests excercising the page using context menu items

Browse Source 
Signed-off-by: Mark Dunphy <markd@spotify.com>
This commit is contained in:
Mark Dunphy
2025-03-24 11:42:56 -04:00
parent 946c33b4ac
commit 233afd2ef3
1 changed files with 118 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/catalog/src/alpha/pages.test.tsx
+118
View File
@@ -24,6 +24,7 @@ import {
import { catalogEntityPage } from './pages';
import {
EntityContentBlueprint,
EntityContextMenuItemBlueprint,
EntityHeaderBlueprint,
} from '@backstage/plugin-catalog-react/alpha';
import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
@@ -596,4 +597,121 @@ describe('Entity page', () => {
);
});
});
describe('Entity Page Context Menu', () => {
const onClickMock = jest.fn();
beforeEach(() => {
onClickMock.mockReset();
});
it.each([
{ useIsDisabled: () => true, href: '/somewhere' },
{ useIsDisabled: () => false, href: '/somewhere' },
{ useIsDisabled: () => true, useHref: () => '/somewhere' },
{ useIsDisabled: () => false, useHref: () => '/somewhere' },
])('should render an href based context menu item', async params => {
const menuItem = EntityContextMenuItemBlueprint.make({
name: 'test-href',
params: {
useTitle: () => 'Test Title',
icon: <span>Test Icon</span>,
...params,
},
});
const tester = createExtensionTester(
Object.assign({ namespace: 'catalog' }, catalogEntityPage),
).add(menuItem);
renderInTestApp(
<TestApiProvider
apis={[
[catalogApiRef, mockCatalogApi],
[starredEntitiesApiRef, mockStarredEntitiesApi],
]}
>
{tester.reactElement()}
</TestApiProvider>,
{
config: {
app: {
title: 'Custom app',
},
backend: { baseUrl: 'http://localhost:7000' },
},
mountedRoutes: {
'/catalog': convertLegacyRouteRef(rootRouteRef),
'/catalog/:namespace/:kind/:name':
convertLegacyRouteRef(entityRouteRef),
},
},
);
await waitFor(async () => {
await userEvent.click(screen.getByTestId('menu-button'));
expect(screen.getByText('Test Title')).toBeInTheDocument();
expect(screen.getByText('Test Icon')).toBeInTheDocument();
const anchor = screen.getByText('Test Title').closest('a');
expect(anchor).toHaveAttribute('href', '/somewhere');
expect(anchor).toHaveAttribute(
'aria-disabled',
params.useIsDisabled().toString(),
);
});
});
it.each([
{ useIsDisabled: () => true, useOnClick: () => onClickMock },
{ useIsDisabled: () => false, useOnClick: () => onClickMock },
])('should render a useOnClick based context menu item', async params => {
const menuItem = EntityContextMenuItemBlueprint.make({
name: 'test-href',
params: {
useTitle: () => 'Test Title',
icon: <span>Test Icon</span>,
...params,
},
});
const tester = createExtensionTester(
Object.assign({ namespace: 'catalog' }, catalogEntityPage),
).add(menuItem);
const disabled = params.useIsDisabled();
renderInTestApp(
<TestApiProvider
apis={[
[catalogApiRef, mockCatalogApi],
[starredEntitiesApiRef, mockStarredEntitiesApi],
]}
>
{tester.reactElement()}
</TestApiProvider>,
{
config: {
app: {
title: 'Custom app',
},
backend: { baseUrl: 'http://localhost:7000' },
},
mountedRoutes: {
'/catalog': convertLegacyRouteRef(rootRouteRef),
'/catalog/:namespace/:kind/:name':
convertLegacyRouteRef(entityRouteRef),
},
},
);
await waitFor(async () => {
await userEvent.click(screen.getByTestId('menu-button'));
expect(screen.getByText('Test Title')).toBeInTheDocument();
expect(screen.getByText('Test Icon')).toBeInTheDocument();
const listItem = screen.getByText('Test Title').closest('li');
expect(listItem).toHaveAttribute('aria-disabled', disabled.toString());
if (!disabled) {
await userEvent.click(screen.getByText('Test Title'));
}
expect(onClickMock).toHaveBeenCalledTimes(disabled ? 0 : 1);
});
});
});
});