use renderInTestApp

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
Fredrik Adelöw
2023-09-14 21:22:11 +02:00
parent 8a6a66f621
commit ab6474579f
72 changed files with 2587 additions and 2982 deletions
@@ -16,12 +16,7 @@
import React from 'react';
import { waitFor } from '@testing-library/react';
import {
wrapInTestApp,
renderInTestApp,
renderWithEffects,
TestApiProvider,
} from '@backstage/test-utils';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import { createPlugin } from '@backstage/core-plugin-api';
import { searchApiRef } from '../../api';
@@ -165,17 +160,15 @@ describe('SearchResult', () => {
},
];
const query = jest.fn().mockResolvedValue({ results });
await renderWithEffects(
wrapInTestApp(
<TestApiProvider apis={[[searchApiRef, { query }]]}>
<SearchResult query={{ types: ['techdocs'] }}>
{value => {
expect(value.results).toStrictEqual(results);
return <></>;
}}
</SearchResult>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider apis={[[searchApiRef, { query }]]}>
<SearchResult query={{ types: ['techdocs'] }}>
{value => {
expect(value.results).toStrictEqual(results);
return <></>;
}}
</SearchResult>
</TestApiProvider>,
);
expect(query).toHaveBeenCalledWith({
@@ -22,8 +22,7 @@ import { MenuItem } from '@material-ui/core';
import DocsIcon from '@material-ui/icons/InsertDriveFile';
import {
wrapInTestApp,
renderWithEffects,
renderInTestApp,
TestApiProvider,
MockAnalyticsApi,
} from '@backstage/test-utils';
@@ -72,21 +71,19 @@ describe('SearchResultGroup', () => {
results,
});
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
);
expect(screen.getByTitle('Docs icon')).toBeInTheDocument();
@@ -104,22 +101,20 @@ describe('SearchResultGroup', () => {
results,
});
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchContextProvider>
<SearchResultGroup
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</SearchContextProvider>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchContextProvider>
<SearchResultGroup
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</SearchContextProvider>
</TestApiProvider>,
);
expect(screen.getByText('Search Result 1')).toBeInTheDocument();
@@ -147,23 +142,21 @@ describe('SearchResultGroup', () => {
}),
);
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
>
<SearchResultGroupItemExtension />
</SearchResultGroup>
</TestApiProvider>,
),
<SearchResultGroupItemExtension />
</SearchResultGroup>
</TestApiProvider>,
);
await waitFor(() => {
@@ -178,21 +171,19 @@ describe('SearchResultGroup', () => {
results,
});
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
);
const link = screen.getByText('See all', { exact: false });
@@ -204,21 +195,19 @@ describe('SearchResultGroup', () => {
results,
});
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
);
expect(screen.getByText('Search Result 1')).toBeInTheDocument();
@@ -233,21 +222,19 @@ describe('SearchResultGroup', () => {
});
it('Could be customized with no results text', async () => {
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
);
expect(
@@ -260,22 +247,20 @@ describe('SearchResultGroup', () => {
results,
});
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
filterOptions={['lifecycle', 'owner']}
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
filterOptions={['lifecycle', 'owner']}
/>
</TestApiProvider>,
);
await userEvent.click(screen.getByText('Add filter', { exact: false }));
@@ -295,35 +280,33 @@ describe('SearchResultGroup', () => {
const handleFilterChange = jest.fn();
const handleFilterDelete = jest.fn();
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{
types: ['techdocs'],
filters: { owner: null },
}}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
filterOptions={['owner']}
renderFilterField={(key: string) =>
key === 'owner' ? (
<SearchResultGroupTextFilterField
key={key}
label="Owner"
onChange={handleFilterChange}
onDelete={handleFilterDelete}
/>
) : null
}
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{
types: ['techdocs'],
filters: { owner: null },
}}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
filterOptions={['owner']}
renderFilterField={(key: string) =>
key === 'owner' ? (
<SearchResultGroupTextFilterField
key={key}
label="Owner"
onChange={handleFilterChange}
onDelete={handleFilterDelete}
/>
) : null
}
/>
</TestApiProvider>,
);
await userEvent.click(screen.getByText('Add filter', { exact: false }));
@@ -348,38 +331,36 @@ describe('SearchResultGroup', () => {
const handleFilterChange = jest.fn();
const handleFilterDelete = jest.fn();
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{
types: ['techdocs'],
filters: { lifecycle: null },
}}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
filterOptions={['lifecycle']}
renderFilterField={(key: string) =>
key === 'lifecycle' ? (
<SearchResultGroupSelectFilterField
key={key}
label="Lifecycle"
onChange={handleFilterChange}
onDelete={handleFilterDelete}
>
<MenuItem value="production">Production</MenuItem>
<MenuItem value="experimental">Experimental</MenuItem>
</SearchResultGroupSelectFilterField>
) : null
}
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{
types: ['techdocs'],
filters: { lifecycle: null },
}}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
filterOptions={['lifecycle']}
renderFilterField={(key: string) =>
key === 'lifecycle' ? (
<SearchResultGroupSelectFilterField
key={key}
label="Lifecycle"
onChange={handleFilterChange}
onDelete={handleFilterDelete}
>
<MenuItem value="production">Production</MenuItem>
<MenuItem value="experimental">Experimental</MenuItem>
</SearchResultGroupSelectFilterField>
) : null
}
/>
</TestApiProvider>,
);
await userEvent.click(screen.getByText('Add filter', { exact: false }));
@@ -397,21 +378,19 @@ describe('SearchResultGroup', () => {
it('Shows a progress bar when loading results', async () => {
query.mockReturnValueOnce(new Promise(() => {}));
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
);
await waitFor(() => {
@@ -421,22 +400,20 @@ describe('SearchResultGroup', () => {
it('Does not render result group if no results returned and disableRenderingWithNoResults prop is provided', async () => {
query.mockResolvedValueOnce({ results: [] });
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
disableRenderingWithNoResults
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
disableRenderingWithNoResults
/>
</TestApiProvider>,
);
await waitFor(() => {
@@ -446,22 +423,20 @@ describe('SearchResultGroup', () => {
it('Should render custom component when no results returned', async () => {
query.mockResolvedValueOnce({ results: [] });
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
noResultsComponent="No results were found"
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
noResultsComponent="No results were found"
/>
</TestApiProvider>,
);
await waitFor(() => {
@@ -471,21 +446,19 @@ describe('SearchResultGroup', () => {
it('Shows an error panel when results rendering fails', async () => {
query.mockRejectedValueOnce(new Error());
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultGroup
query={{ types: ['techdocs'] }}
icon={<DocsIcon titleAccess="Docs icon" />}
title="Documentation"
/>
</TestApiProvider>,
);
await waitFor(() => {
@@ -19,8 +19,7 @@ import { screen, waitFor } from '@testing-library/react';
import {
TestApiProvider,
renderWithEffects,
wrapInTestApp,
renderInTestApp,
MockAnalyticsApi,
} from '@backstage/test-utils';
import { analyticsApiRef, createPlugin } from '@backstage/core-plugin-api';
@@ -59,21 +58,19 @@ describe('SearchResultList', () => {
});
it('Renders without exploding', async () => {
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
/>
</TestApiProvider>,
);
expect(query).toHaveBeenCalledWith({
@@ -89,21 +86,19 @@ describe('SearchResultList', () => {
results,
});
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
/>
</TestApiProvider>,
);
expect(screen.getByText('Search Result 1')).toBeInTheDocument();
@@ -119,21 +114,19 @@ describe('SearchResultList', () => {
it('Shows a progress bar when loading results', async () => {
query.mockReturnValueOnce(new Promise(() => {}));
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
/>
</TestApiProvider>,
);
await waitFor(() => {
@@ -143,20 +136,18 @@ describe('SearchResultList', () => {
it('Does not render result group if no results returned and disableRenderingWithNoResults prop is provided', async () => {
query.mockResolvedValueOnce({ results: [] });
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{ types: ['techdocs'] }}
disableRenderingWithNoResults
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{ types: ['techdocs'] }}
disableRenderingWithNoResults
/>
</TestApiProvider>,
);
await waitFor(() => {
@@ -166,20 +157,18 @@ describe('SearchResultList', () => {
it('Should render custom component when no results returned', async () => {
query.mockResolvedValueOnce({ results: [] });
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{ types: ['techdocs'] }}
noResultsComponent="No results were found"
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{ types: ['techdocs'] }}
noResultsComponent="No results were found"
/>
</TestApiProvider>,
);
await waitFor(() => {
@@ -189,21 +178,19 @@ describe('SearchResultList', () => {
it('Shows an error panel when results rendering fails', async () => {
query.mockRejectedValueOnce(new Error());
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
/>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
/>
</TestApiProvider>,
);
await waitFor(() => {
@@ -229,23 +216,21 @@ describe('SearchResultList', () => {
}),
);
await renderWithEffects(
wrapInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
await renderInTestApp(
<TestApiProvider
apis={[
[searchApiRef, searchApiMock],
[analyticsApiRef, analyticsApiMock],
]}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
>
<SearchResultList
query={{
types: ['techdocs'],
}}
>
<SearchResultListItemExtension />
</SearchResultList>
</TestApiProvider>,
),
<SearchResultListItemExtension />
</SearchResultList>
</TestApiProvider>,
);
await waitFor(() => {
+26 -37
View File
@@ -21,8 +21,7 @@ import userEvent from '@testing-library/user-event';
import { ListItemText } from '@material-ui/core';
import {
wrapInTestApp,
renderWithEffects,
renderInTestApp,
TestApiProvider,
MockAnalyticsApi,
} from '@backstage/test-utils';
@@ -91,12 +90,10 @@ const createExtension = (
describe('extensions', () => {
it('renders without exploding', async () => {
await renderWithEffects(
wrapInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<SearchResultListItemExtensions results={results} />
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<SearchResultListItemExtensions results={results} />
</TestApiProvider>,
);
expect(screen.getByText('Search Result 1')).toBeInTheDocument();
@@ -111,12 +108,10 @@ describe('extensions', () => {
});
it('capture results discovery events', async () => {
await renderWithEffects(
wrapInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<SearchResultListItemExtensions results={results} />
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<SearchResultListItemExtensions results={results} />
</TestApiProvider>,
);
await userEvent.click(
@@ -135,12 +130,10 @@ describe('extensions', () => {
const plugin = createPlugin({ id: 'plugin' });
const DefaultSearchResultListItemExtension = createExtension(plugin);
await renderWithEffects(
wrapInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<DefaultSearchResultListItemExtension result={results[0].document} />
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<DefaultSearchResultListItemExtension result={results[0].document} />
</TestApiProvider>,
);
expect(screen.getByText('Default')).toBeInTheDocument();
@@ -160,14 +153,12 @@ describe('extensions', () => {
const plugin = createPlugin({ id: 'plugin' });
const DefaultSearchResultListItemExtension = createExtension(plugin);
await renderWithEffects(
wrapInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<SearchResultListItemExtensions results={results}>
<DefaultSearchResultListItemExtension />
</SearchResultListItemExtensions>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<SearchResultListItemExtensions results={results}>
<DefaultSearchResultListItemExtension />
</SearchResultListItemExtensions>
</TestApiProvider>,
);
expect(screen.getAllByText('Default')).toHaveLength(2);
@@ -188,15 +179,13 @@ describe('extensions', () => {
),
});
await renderWithEffects(
wrapInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<SearchResultListItemExtensions results={results}>
<ExploreSearchResultListItemExtension />
<DefaultSearchResultListItemExtension />
</SearchResultListItemExtensions>
</TestApiProvider>,
),
await renderInTestApp(
<TestApiProvider apis={[[analyticsApiRef, analyticsApiMock]]}>
<SearchResultListItemExtensions results={results}>
<ExploreSearchResultListItemExtension />
<DefaultSearchResultListItemExtension />
</SearchResultListItemExtensions>
</TestApiProvider>,
);
expect(screen.getAllByText('Default')).toHaveLength(1);