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

updates based on result list items extension changes

Browse Source 
Signed-off-by: Emma Indal <emma.indahl@gmail.com>
This commit is contained in:
Emma Indal
2023-01-31 15:43:57 +01:00
parent 66e2aab4c4
commit f7e698636a
12 changed files with 77 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx
+4 -3
View File
@@ -35,9 +35,10 @@ describe('DefaultResultListItem', () => {
it('Includes primary/secondary text (title / text)', async () => {
await renderInTestApp(<DefaultResultListItem result={result} />);
expect(screen.getByRole('listitem')).toHaveTextContent(
result.title + result.text,
);
expect(
screen.getByRole('link', { name: result.title }),
).toBeInTheDocument();
expect(screen.getByText(result.text)).toBeInTheDocument();
});
it('should render icon if prop is specified', async () => {
plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx
+4 -4
View File
@@ -21,12 +21,12 @@ import {
SearchDocument,
} from '@backstage/plugin-search-common';
import { HighlightedSearchResultText } from '../HighlightedSearchResultText';
import { ListItem, ListItemIcon, ListItemText, Box } from '@material-ui/core';
import { ListItemIcon, ListItemText, Box } from '@material-ui/core';
import Typography from '@material-ui/core/Typography';
import { Link } from '@backstage/core-components';
/**
* Props for {@link DefaultResultListItem}
* Props for {@link DefaultResultListItemComponent}
*
* @public
*/
@@ -55,7 +55,7 @@ export const DefaultResultListItemComponent = ({
if (!result) return null;
return (
<ListItem alignItems="center" divider>
<>
{icon && <ListItemIcon>{icon}</ListItemIcon>}
<ListItemText
primaryTypographyProps={{ variant: 'h6' }}
@@ -95,7 +95,7 @@ export const DefaultResultListItemComponent = ({
}
/>
{secondaryAction && <Box alignItems="flex-end">{secondaryAction}</Box>}
</ListItem>
</>
);
};
plugins/search-react/src/components/SearchResult/SearchResult.test.tsx
+1 -4
View File
@@ -16,8 +16,6 @@
import React from 'react';
import { waitFor } from '@testing-library/react';
import { ListItem } from '@material-ui/core';
import {
wrapInTestApp,
renderInTestApp,
@@ -217,8 +215,7 @@ describe('SearchResult', () => {
}).provide(
createSearchResultListItemExtension({
name: 'SearchResultExtension',
component: async () => props =>
<ListItem>Result: {props.result?.title}</ListItem>,
component: async () => props => <>Result: {props.result?.title}</>,
}),
);
plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx
+2 -3
View File
@@ -18,7 +18,7 @@ import React from 'react';
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ListItem, MenuItem } from '@material-ui/core';
import { MenuItem } from '@material-ui/core';
import DocsIcon from '@material-ui/icons/InsertDriveFile';
import {
@@ -143,8 +143,7 @@ describe('SearchResultGroup', () => {
}).provide(
createSearchResultListItemExtension({
name: 'SearchResultGroupItemExtension',
component: async () => props =>
<ListItem>Result: {props.result?.title}</ListItem>,
component: async () => props => <>Result: {props.result?.title}</>,
}),
);
plugins/search-react/src/components/SearchResultList/SearchResultList.test.tsx
+1 -2
View File
@@ -226,8 +226,7 @@ describe('SearchResultList', () => {
}).provide(
createSearchResultListItemExtension({
name: 'SearchResultListItemExtension',
component: async () => props =>
<ListItem>Result: {props.result?.title}</ListItem>,
component: async () => props => <>Result: {props.result?.title}</>,
}),
);
plugins/search-react/src/extensions.test.tsx
+7 -9
View File
@@ -18,7 +18,7 @@ import React from 'react';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ListItem, ListItemText } from '@material-ui/core';
import { ListItemText } from '@material-ui/core';
import {
wrapInTestApp,
@@ -75,9 +75,9 @@ const createExtension = (
predicate,
component = async () => (props: { result?: SearchDocument }) =>
(
<ListItem>
<>
<ListItemText primary="Default" secondary={props.result?.title} />
</ListItem>
</>
),
} = options;
return plugin.provide(
@@ -120,7 +120,7 @@ describe('extensions', () => {
);
await userEvent.click(
screen.getByRole('button', { name: /Search Result 1/ }),
screen.getByRole('link', { name: /Search Result 1/ }),
);
expect(analyticsApiMock.getEvents()[0]).toMatchObject({
@@ -146,9 +146,7 @@ describe('extensions', () => {
expect(screen.getByText('Default')).toBeInTheDocument();
expect(screen.getByText('Search Result 1')).toBeInTheDocument();
await userEvent.click(
screen.getByRole('button', { name: /Search Result 1/ }),
);
await userEvent.click(screen.getByRole('listitem'));
expect(analyticsApiMock.getEvents()[0]).toMatchObject({
action: 'discover',
@@ -184,9 +182,9 @@ describe('extensions', () => {
predicate: (result: SearchResult) => result.type === 'explore',
component: async () => (props: { result?: SearchDocument }) =>
(
<ListItem>
<>
<ListItemText primary="Explore" secondary={props.result?.title} />
</ListItem>
</>
),
});
plugins/search-react/src/extensions.tsx
+7 -3
View File
@@ -33,7 +33,7 @@ import {
} from '@backstage/core-plugin-api';
import { SearchDocument, SearchResult } from '@backstage/plugin-search-common';
import { Box, List, ListProps } from '@material-ui/core';
import { ListItem, List, ListProps } from '@material-ui/core';
import { DefaultResultListItem } from './components';
@@ -105,9 +105,13 @@ const SearchResultListItemExtension = ({
}, [rank, result, noTrack, analytics]);
return (
<Box role="button" tabIndex={0} onClickCapture={handleClickCapture}>
<ListItem
divider
alignItems="flex-start"
onClickCapture={handleClickCapture}
>
{children}
</Box>
</ListItem>
);
};