diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx index 49d2291acd..4207a267af 100644 --- a/packages/core-api/src/app/App.tsx +++ b/packages/core-api/src/app/App.tsx @@ -43,7 +43,7 @@ type FullAppOptions = { plugins: BackstagePlugin[]; components: AppComponents; themes: AppTheme[]; - configLoader: AppConfigLoader; + configLoader?: AppConfigLoader; }; export class PrivateAppImpl implements BackstageApp { @@ -52,7 +52,7 @@ export class PrivateAppImpl implements BackstageApp { private readonly plugins: BackstagePlugin[]; private readonly components: AppComponents; private readonly themes: AppTheme[]; - private readonly configLoader: AppConfigLoader; + private readonly configLoader?: AppConfigLoader; constructor(options: FullAppOptions) { this.apis = options.apis; @@ -148,11 +148,13 @@ export class PrivateAppImpl implements BackstageApp { getProvider(): ComponentType<{}> { const Provider: FC<{}> = ({ children }) => { - const config = useAsync(this.configLoader); + // Keeping this synchronous when a config loader isn't set simplifies tests a lot + const hasConfig = Boolean(this.configLoader); + const config = useAsync(this.configLoader || (() => Promise.resolve({}))); let childNode = children; - if (config.loading) { + if (hasConfig && config.loading) { const { Progress } = this.components; childNode = ; } else if (config.error) { diff --git a/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx b/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx index 0d0c34a3e6..c019b316fd 100644 --- a/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx +++ b/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import CodeSnippet from './CodeSnippet'; @@ -33,16 +33,14 @@ const minProps = { describe('', () => { it('renders text without exploding', () => { - const { getByText } = render( - wrapInThemedTestApp(), - ); + const { getByText } = render(wrapInTestApp()); expect(getByText(/"Hello"/)).toBeInTheDocument(); expect(getByText(/"World"/)).toBeInTheDocument(); }); it('renders without line numbers', () => { const { queryByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(queryByText('1')).not.toBeInTheDocument(); expect(queryByText('2')).not.toBeInTheDocument(); @@ -51,7 +49,7 @@ describe('', () => { it('renders with line numbers', () => { const { queryByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(queryByText(/1/)).toBeInTheDocument(); expect(queryByText(/2/)).toBeInTheDocument(); diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx index e0f7271014..dd83cd318d 100644 --- a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx +++ b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import CopyTextButton from './CopyTextButton'; import { ApiRegistry, @@ -57,7 +57,7 @@ const apiRegistry = ApiRegistry.from([ describe('', () => { it('renders without exploding', () => { const { getByDisplayValue } = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -69,7 +69,7 @@ describe('', () => { it('displays tooltip on click', async () => { document.execCommand = jest.fn(); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.test.js b/packages/core/src/components/DismissableBanner/DismissableBanner.test.js index 485b6226d2..8981acf8af 100644 --- a/packages/core/src/components/DismissableBanner/DismissableBanner.test.js +++ b/packages/core/src/components/DismissableBanner/DismissableBanner.test.js @@ -16,7 +16,7 @@ import React from 'react'; // import { fireEvent, waitForElementToBeRemoved } from '@testing-library/react'; -import { renderWithEffects, wrapInThemedTestApp } from '@backstage/test-utils'; +import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; // import { createSetting } from 'shared/apis/settings'; import DismissableBanner from './DismissableBanner'; @@ -30,7 +30,7 @@ describe('', () => { */ const rendered = await renderWithEffects( - wrapInThemedTestApp( + wrapInTestApp( ', () => { it('renders without exploding', () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( item1 item2 @@ -69,7 +69,7 @@ describe('', () => { }; const rendered = await renderWithEffects( - wrapInThemedTestApp( + wrapInTestApp( item1 diff --git a/packages/core/src/components/Lifecycle/Lifecycle.test.jsx b/packages/core/src/components/Lifecycle/Lifecycle.test.jsx index db0d2736ed..ac3823d85c 100644 --- a/packages/core/src/components/Lifecycle/Lifecycle.test.jsx +++ b/packages/core/src/components/Lifecycle/Lifecycle.test.jsx @@ -16,29 +16,27 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import { Lifecycle } from './Lifecycle'; describe('', () => { it('renders Alpha with shorthand', async () => { - const { getByText } = render( - wrapInThemedTestApp(), - ); + const { getByText } = render(wrapInTestApp()); expect(getByText('α')).toBeInTheDocument(); }); it('renders Alpha without shorthand', async () => { - const { getByText } = render(wrapInThemedTestApp()); + const { getByText } = render(wrapInTestApp()); expect(getByText('Alpha')).toBeInTheDocument(); }); it('renders Beta with shorthand', async () => { - const { getByText } = render(wrapInThemedTestApp()); + const { getByText } = render(wrapInTestApp()); expect(getByText('β')).toBeInTheDocument(); }); it('renders Beta without shorthand', async () => { - const { getByText } = render(wrapInThemedTestApp()); + const { getByText } = render(wrapInTestApp()); expect(getByText('Beta')).toBeInTheDocument(); }); }); diff --git a/packages/core/src/components/ProgressBars/CircleProgress.test.jsx b/packages/core/src/components/ProgressBars/CircleProgress.test.jsx index 4975e00cb8..b42559b7b7 100644 --- a/packages/core/src/components/ProgressBars/CircleProgress.test.jsx +++ b/packages/core/src/components/ProgressBars/CircleProgress.test.jsx @@ -16,37 +16,33 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import CircleProgress, { getProgressColor } from './CircleProgress'; describe('', () => { it('renders without exploding', () => { const { getByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); getByText('10%'); }); it('handles fractional prop', () => { const { getByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); getByText('10%'); }); it('handles max prop', () => { const { getByText } = render( - wrapInThemedTestApp( - , - ), + wrapInTestApp(), ); getByText('1%'); }); it('handles unit prop', () => { const { getByText } = render( - wrapInThemedTestApp( - , - ), + wrapInTestApp(), ); getByText('10m'); }); diff --git a/packages/core/src/components/ProgressBars/ProgressCard.test.jsx b/packages/core/src/components/ProgressBars/ProgressCard.test.jsx index 7357cab812..3e93e3f302 100644 --- a/packages/core/src/components/ProgressBars/ProgressCard.test.jsx +++ b/packages/core/src/components/ProgressBars/ProgressCard.test.jsx @@ -16,7 +16,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import ProgressCard from './ProgressCard'; @@ -24,32 +24,26 @@ const minProps = { title: 'Tingle upgrade', progress: 0.12 }; describe('', () => { it('renders without exploding', () => { - const { getByText } = render( - wrapInThemedTestApp(), - ); + const { getByText } = render(wrapInTestApp()); expect(getByText(/Tingle.*/)).toBeInTheDocument(); }); it('renders progress and title', () => { - const { getByText } = render( - wrapInThemedTestApp(), - ); + const { getByText } = render(wrapInTestApp()); expect(getByText(/Tingle.*/)).toBeInTheDocument(); expect(getByText(/12%.*/)).toBeInTheDocument(); }); it('does not render deepLink', () => { const { queryByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(queryByText('View more')).not.toBeInTheDocument(); }); it('handles invalid numbers', () => { const badProps = { title: 'Tingle upgrade', progress: 'hejjo' }; - const { getByText } = render( - wrapInThemedTestApp(), - ); + const { getByText } = render(wrapInTestApp()); expect(getByText(/N\/A.*/)).toBeInTheDocument(); }); }); diff --git a/packages/core/src/components/TrendLine/TrendLine.test.tsx b/packages/core/src/components/TrendLine/TrendLine.test.tsx index 985e5d2b31..84e8413f01 100644 --- a/packages/core/src/components/TrendLine/TrendLine.test.tsx +++ b/packages/core/src/components/TrendLine/TrendLine.test.tsx @@ -17,7 +17,7 @@ /* eslint-disable jest/no-disabled-tests */ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import TrendLine from '.'; @@ -25,7 +25,7 @@ describe('TrendLine', () => { describe('when no data is present', () => { it('renders null without throwing', () => { const rendered = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(rendered.queryByTitle('sparkline')).not.toBeInTheDocument(); }); @@ -34,7 +34,7 @@ describe('TrendLine', () => { describe('when one datapoint is present', () => { it('renders as a straight line', () => { const rendered = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); }); @@ -43,7 +43,7 @@ describe('TrendLine', () => { describe.skip('when the data finishes above the success threshold', () => { it('renders with the correct color', () => { const rendered = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); }); @@ -52,7 +52,7 @@ describe('TrendLine', () => { describe.skip('when the data finishes within the the warning threshold', () => { it('renders with the correct color', () => { const rendered = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); }); @@ -61,7 +61,7 @@ describe('TrendLine', () => { describe.skip('when the data finishes within the the error threshold', () => { it('renders with the correct color', () => { const rendered = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); }); diff --git a/packages/core/src/components/WarningPanel/WarningPanel.test.tsx b/packages/core/src/components/WarningPanel/WarningPanel.test.tsx index 4094c65a1f..c4d836cfe1 100644 --- a/packages/core/src/components/WarningPanel/WarningPanel.test.tsx +++ b/packages/core/src/components/WarningPanel/WarningPanel.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import WarningPanel from './WarningPanel'; @@ -24,15 +24,13 @@ const minProps = { title: 'Mock title', message: 'Some more info' }; describe('', () => { it('renders without exploding', () => { - const { getByText } = render( - wrapInThemedTestApp(), - ); + const { getByText } = render(wrapInTestApp()); expect(getByText('Mock title')).toBeInTheDocument(); }); it('renders message and children', () => { const { getByText } = render( - wrapInThemedTestApp(children), + wrapInTestApp(children), ); expect(getByText('Some more info')).toBeInTheDocument(); expect(getByText('children')).toBeInTheDocument(); diff --git a/packages/core/src/layout/ContentHeader/ContentHeader.test.tsx b/packages/core/src/layout/ContentHeader/ContentHeader.test.tsx index 2f40511f35..5db676dcc5 100644 --- a/packages/core/src/layout/ContentHeader/ContentHeader.test.tsx +++ b/packages/core/src/layout/ContentHeader/ContentHeader.test.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { ContentHeader } from './ContentHeader'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; jest.mock('react-helmet', () => { return { @@ -27,9 +27,7 @@ jest.mock('react-helmet', () => { describe('', () => { it('should render with title', () => { - const rendered = render( - wrapInThemedTestApp(), - ); + const rendered = render(wrapInTestApp()); rendered.getByText('Title'); }); @@ -37,14 +35,14 @@ describe('', () => { const title = 'Custom title'; const titleComponent = () =>

{title}

; const rendered = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); rendered.getByText(title); }); it('should render with description', () => { const rendered = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); rendered.getByText('description'); }); diff --git a/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx index d383c3fbf0..c47ff8d49e 100644 --- a/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx +++ b/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx @@ -17,14 +17,12 @@ import React from 'react'; import { render } from '@testing-library/react'; import { ErrorPage } from './ErrorPage'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; describe('', () => { it('should render with status code, status message and go back link', () => { const rendered = render( - wrapInThemedTestApp( - , - ), + wrapInTestApp(), ); rendered.getByText(/page not found/i); rendered.getByText(/404/i); diff --git a/packages/core/src/layout/Header/Header.test.tsx b/packages/core/src/layout/Header/Header.test.tsx index c1f9be6cf6..5d28c6633f 100644 --- a/packages/core/src/layout/Header/Header.test.tsx +++ b/packages/core/src/layout/Header/Header.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import { Header } from './Header'; jest.mock('react-helmet', () => { @@ -27,19 +27,19 @@ jest.mock('react-helmet', () => { describe('
', () => { it('should render with title', () => { - const rendered = render(wrapInThemedTestApp(
)); + const rendered = render(wrapInTestApp(
)); rendered.getByText('Title'); }); it('should set document title', () => { - const rendered = render(wrapInThemedTestApp(
)); + const rendered = render(wrapInTestApp(
)); rendered.getByText('Title1'); rendered.getByText('defaultTitle: Title1 | Backstage'); }); it('should override document title', () => { const rendered = render( - wrapInThemedTestApp(
), + wrapInTestApp(
), ); rendered.getByText('Title1'); rendered.getByText('defaultTitle: Title2 | Backstage'); @@ -47,14 +47,14 @@ describe('
', () => { it('should have subtitle', () => { const rendered = render( - wrapInThemedTestApp(
), + wrapInTestApp(
), ); rendered.getByText('Subtitle'); }); it('should have type rendered', () => { const rendered = render( - wrapInThemedTestApp(
), + wrapInTestApp(
), ); rendered.getByText('tool'); }); diff --git a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx b/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx index a1b5740f88..00fa4d27ac 100644 --- a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx +++ b/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx @@ -16,18 +16,18 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; -import { wrapInThemedTestApp, Keyboard } from '@backstage/test-utils'; +import { wrapInTestApp, Keyboard } from '@backstage/test-utils'; import { HeaderActionMenu } from './HeaderActionMenu'; describe('', () => { it('renders without any items and without exploding', () => { - render(wrapInThemedTestApp()); + render(wrapInTestApp()); }); it('can open the menu and click menu items', () => { const onClickFunction = jest.fn(); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -49,7 +49,7 @@ describe('', () => { it('Disabled', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -66,7 +66,7 @@ describe('', () => { it('Test wrapper, and secondary label', () => { const onClickFunction = jest.fn(); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( ', () => { it('should close when hitting escape', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , ), ); diff --git a/packages/core/src/layout/HeaderLabel/HeaderLabel.test.tsx b/packages/core/src/layout/HeaderLabel/HeaderLabel.test.tsx index 11a22f9b5d..fdc6ef8c6e 100644 --- a/packages/core/src/layout/HeaderLabel/HeaderLabel.test.tsx +++ b/packages/core/src/layout/HeaderLabel/HeaderLabel.test.tsx @@ -16,39 +16,37 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import { HeaderLabel } from './HeaderLabel'; describe('', () => { it('should have a label', () => { - const rendered = render(wrapInThemedTestApp()); + const rendered = render(wrapInTestApp()); expect(rendered.getByText('Label')).toBeInTheDocument(); }); it('should say unknown', () => { - const rendered = render(wrapInThemedTestApp()); + const rendered = render(wrapInTestApp()); expect(rendered.getByText('')).toBeInTheDocument(); }); it('should say unknown when passing null as value prop', () => { const rendered = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(rendered.getByText('')).toBeInTheDocument(); }); it('should have value', () => { const rendered = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(rendered.getByText('Value')).toBeInTheDocument(); }); it('should have a link', () => { const rendered = render( - wrapInThemedTestApp( - , - ), + wrapInTestApp(), ); const anchor = rendered.container.querySelector('a') as HTMLAnchorElement; expect(rendered.getByText('Value')).toBeInTheDocument(); diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index fd893f8c8c..c35e3a622e 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -29,6 +29,7 @@ }, "dependencies": { "@backstage/cli": "^0.1.1-alpha.6", + "@backstage/core-api": "^0.1.1-alpha.6", "@backstage/test-utils-core": "^0.1.1-alpha.6", "@backstage/theme": "^0.1.1-alpha.6", "@material-ui/core": "^4.9.1", diff --git a/packages/test-utils/src/testUtils/appWrappers.test.tsx b/packages/test-utils/src/testUtils/appWrappers.test.tsx index e2f1b6b7cb..e46b6a95ce 100644 --- a/packages/test-utils/src/testUtils/appWrappers.test.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.test.tsx @@ -27,7 +27,7 @@ describe('wrapInTestApp', () => { Route 1 Route 2 , - ['/route2'], + { routeEntries: ['/route2'] }, ), ); expect(rendered.getByText('Route 2')).toBeInTheDocument(); diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index 06d8781669..2450604976 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -14,16 +14,60 @@ * limitations under the License. */ -import React, { ComponentType, ReactNode, FunctionComponent } from 'react'; -import { ThemeProvider } from '@material-ui/core'; +import React, { ComponentType, ReactNode, FunctionComponent, FC } from 'react'; import { MemoryRouter } from 'react-router'; import { Route } from 'react-router-dom'; import { lightTheme } from '@backstage/theme'; +import privateExports, { + defaultSystemIcons, + ApiTestRegistry, + BootErrorPageProps, +} from '@backstage/core-api'; +const { PrivateAppImpl } = privateExports; + +const NotFoundErrorPage = () => { + throw new Error('Reached NotFound Page'); +}; +const BootErrorPage: FC = ({ step, error }) => { + throw new Error(`Reached BootError Page at step ${step} with error ${error}`); +}; +const Progress = () =>
; + +/** + * Options to customize the behavior of the test app wrapper. + */ +type TestAppOptions = { + /** + * Initial route entries to pass along as `initialEntries` to the router. + */ + routeEntries?: string[]; +}; export function wrapInTestApp( Component: ComponentType | ReactNode, - initialRouterEntries: string[] = ['/'], + options: TestAppOptions = {}, ) { + const { routeEntries = ['/'] } = options; + + const app = new PrivateAppImpl({ + apis: new ApiTestRegistry(), + components: { + NotFoundErrorPage, + BootErrorPage, + Progress, + }, + icons: defaultSystemIcons, + plugins: [], + themes: [ + { + id: 'light', + theme: lightTheme, + title: 'Test App Theme', + variant: 'light', + }, + ], + }); + let Wrapper: ComponentType; if (Component instanceof Function) { Wrapper = Component; @@ -31,21 +75,13 @@ export function wrapInTestApp( Wrapper = (() => Component) as FunctionComponent; } + const AppProvider = app.getProvider(); + return ( - - - + + + + + ); } - -export function wrapInThemedTestApp( - component: ReactNode, - initialRouterEntries: string[] = ['/'], -) { - const themed = {component}; - return wrapInTestApp(themed, initialRouterEntries); -} - -export const wrapInTheme = (component: ReactNode, theme = lightTheme) => ( - {component} -); diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx index 762a881302..ec44f53777 100644 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx +++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import { CatalogFilter, CatalogFilterGroup } from './CatalogFilter'; describe('Catalog Filter', () => { @@ -26,7 +26,7 @@ describe('Catalog Filter', () => { { name: 'Test Group 2', items: [] }, ]; const { findByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); for (const group of mockGroups) { @@ -52,7 +52,7 @@ describe('Catalog Filter', () => { ]; const { findByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); const [group] = mockGroups; @@ -81,7 +81,7 @@ describe('Catalog Filter', () => { ]; const { findByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); const [group] = mockGroups; @@ -112,7 +112,7 @@ describe('Catalog Filter', () => { const onSelectedChangeHandler = jest.fn(); const { findByText } = render( - wrapInThemedTestApp( + wrapInTestApp( {} }; @@ -30,7 +30,7 @@ describe('CatalogPage', () => { // https://github.com/mbrn/material-table/issues/1293 it('should render', async () => { const rendered = render( - wrapInTheme( + wrapInTestApp( { it('should render loading when loading prop it set to true', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , ), ); @@ -38,7 +38,7 @@ describe('CatalogTable component', () => { it('should render error message when error is passed in props', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( { it('should display component names when loading has finished and no error occurred', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( { @@ -38,7 +38,7 @@ describe('ComponentPage', () => { it('should redirect to component table page when name is not provided', async () => { const props = getTestProps(''); await render( - wrapInTheme( + wrapInTestApp( , diff --git a/plugins/explore/src/components/ExploreCard.test.js b/plugins/explore/src/components/ExploreCard.test.js index fde36b529d..45652015a5 100644 --- a/plugins/explore/src/components/ExploreCard.test.js +++ b/plugins/explore/src/components/ExploreCard.test.js @@ -16,7 +16,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import ExploreCard from './ExploreCard'; @@ -32,22 +32,18 @@ const minProps = { describe('', () => { it('renders without exploding', () => { - const { getByText } = render( - wrapInThemedTestApp(), - ); + const { getByText } = render(wrapInTestApp()); expect(getByText('Explore')).toBeInTheDocument(); }); it('renders props correctly', () => { - const { getByText } = render( - wrapInThemedTestApp(), - ); + const { getByText } = render(wrapInTestApp()); expect(getByText(minProps.card.title)).toBeInTheDocument(); expect(getByText(minProps.card.description)).toBeInTheDocument(); }); it('should link out', () => { - const rendered = render(wrapInThemedTestApp()); + const rendered = render(wrapInTestApp()); const anchor = rendered.container.querySelector('a'); expect(anchor.href).toBe(minProps.card.url); }); @@ -63,7 +59,7 @@ describe('', () => { }, }; const { getByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(getByText('Description missing')).toBeInTheDocument(); }); @@ -78,15 +74,13 @@ describe('', () => { }, }; const { queryByText } = render( - wrapInThemedTestApp(), + wrapInTestApp(), ); expect(queryByText('GA')).not.toBeInTheDocument(); }); it('renders tags correctly', () => { - const { getByText } = render( - wrapInThemedTestApp(), - ); + const { getByText } = render(wrapInTestApp()); expect(getByText(minProps.card.tags[0])).toBeInTheDocument(); expect(getByText(minProps.card.tags[1])).toBeInTheDocument(); }); diff --git a/plugins/lighthouse/src/components/AuditList/AuditListTable.test.tsx b/plugins/lighthouse/src/components/AuditList/AuditListTable.test.tsx index cebab93f17..039b397083 100644 --- a/plugins/lighthouse/src/components/AuditList/AuditListTable.test.tsx +++ b/plugins/lighthouse/src/components/AuditList/AuditListTable.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import { ApiRegistry, ApiProvider } from '@backstage/core'; import AuditListTable from './AuditListTable'; @@ -50,12 +50,10 @@ describe('AuditListTable', () => { ); }; it('renders the link to each website', () => { - const rendered = render( - wrapInThemedTestApp(auditList(websiteListResponse)), - ); + const rendered = render(wrapInTestApp(auditList(websiteListResponse))); const link = rendered.queryByText('https://anchor.fm'); const website = websiteListResponse.items.find( - (w) => w.url === 'https://anchor.fm', + w => w.url === 'https://anchor.fm', ); if (!website) throw new Error('https://anchor.fm must be present in fixture'); @@ -67,11 +65,9 @@ describe('AuditListTable', () => { }); it('renders the dates that are available for a given row', () => { - const rendered = render( - wrapInThemedTestApp(auditList(websiteListResponse)), - ); + const rendered = render(wrapInTestApp(auditList(websiteListResponse))); const website = websiteListResponse.items.find( - (w) => w.url === 'https://anchor.fm', + w => w.url === 'https://anchor.fm', ); if (!website) throw new Error('https://anchor.fm must be present in fixture'); @@ -81,35 +77,30 @@ describe('AuditListTable', () => { }); it('renders the status for a given row', async () => { - const rendered = render( - wrapInThemedTestApp(auditList(websiteListResponse)), - ); + const rendered = render(wrapInTestApp(auditList(websiteListResponse))); const completed = await rendered.findAllByText('COMPLETED'); expect(completed).toHaveLength( - websiteListResponse.items.filter( - (w) => w.lastAudit.status === 'COMPLETED', - ).length, + websiteListResponse.items.filter(w => w.lastAudit.status === 'COMPLETED') + .length, ); const failed = await rendered.findAllByText('FAILED'); expect(failed).toHaveLength( - websiteListResponse.items.filter((w) => w.lastAudit.status === 'FAILED') + websiteListResponse.items.filter(w => w.lastAudit.status === 'FAILED') .length, ); const running = await rendered.findAllByText('FAILED'); expect(running).toHaveLength( - websiteListResponse.items.filter((w) => w.lastAudit.status === 'RUNNING') + websiteListResponse.items.filter(w => w.lastAudit.status === 'RUNNING') .length, ); }); describe('sparklines', () => { it('correctly maps the data from the website payload', () => { - const rendered = render( - wrapInThemedTestApp(auditList(websiteListResponse)), - ); + const rendered = render(wrapInTestApp(auditList(websiteListResponse))); const backstageSEO = rendered.getByTitle( 'trendline for SEO category of https://backstage.io', ); @@ -117,9 +108,7 @@ describe('AuditListTable', () => { }); it('does not break when no data is available', () => { - const rendered = render( - wrapInThemedTestApp(auditList(websiteListResponse)), - ); + const rendered = render(wrapInTestApp(auditList(websiteListResponse))); const anchorSEO = rendered.queryByTitle( 'trendline for SEO category of https://anchor.fm', ); diff --git a/plugins/lighthouse/src/components/AuditList/index.test.tsx b/plugins/lighthouse/src/components/AuditList/index.test.tsx index 9bd6e98aaa..bcd486e876 100644 --- a/plugins/lighthouse/src/components/AuditList/index.test.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.test.tsx @@ -27,11 +27,10 @@ jest.mock('react-router-dom', () => { }); import React from 'react'; -import { MemoryRouter } from 'react-router-dom'; import mockFetch from 'jest-fetch-mock'; import { render, fireEvent } from '@testing-library/react'; import { ApiRegistry, ApiProvider } from '@backstage/core'; -import { wrapInThemedTestApp, wrapInTheme } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import { lighthouseApiRef, @@ -57,7 +56,7 @@ describe('AuditList', () => { it('should render the table', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -69,7 +68,7 @@ describe('AuditList', () => { it('renders a link to create a new audit', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -87,12 +86,11 @@ describe('AuditList', () => { it('requests the correct limit and offset from the api based on the query', () => { mockFetch.mockClear(); render( - wrapInTheme( - - - - - , + wrapInTestApp( + + + , + { routeEntries: ['/lighthouse?page=2'] }, ), ); expect(mockFetch).toHaveBeenLastCalledWith( @@ -104,7 +102,7 @@ describe('AuditList', () => { describe('when only one page is needed', () => { it('hides pagination elements', () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -125,7 +123,7 @@ describe('AuditList', () => { it('shows pagination elements', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -138,12 +136,11 @@ describe('AuditList', () => { it('changes the page on click', async () => { const rendered = render( - wrapInTheme( - - - - - , + wrapInTestApp( + + + , + { routeEntries: ['/lighthouse?page=2'] }, ), ); const element = await rendered.findByLabelText(/Go to page 1/); @@ -157,7 +154,7 @@ describe('AuditList', () => { it('should render the loader', async () => { mockFetch.mockResponseOnce(() => new Promise(() => {})); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -172,7 +169,7 @@ describe('AuditList', () => { it('should render an error', async () => { mockFetch.mockRejectOnce(new Error('failed to fetch')); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , diff --git a/plugins/lighthouse/src/components/AuditView/index.test.tsx b/plugins/lighthouse/src/components/AuditView/index.test.tsx index 4e261fcf39..b2c15cd8b7 100644 --- a/plugins/lighthouse/src/components/AuditView/index.test.tsx +++ b/plugins/lighthouse/src/components/AuditView/index.test.tsx @@ -27,7 +27,7 @@ jest.mock('react-router-dom', () => { import React from 'react'; import mockFetch from 'jest-fetch-mock'; import { render } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import { ApiRegistry, ApiProvider } from '@backstage/core'; import AuditView from '.'; @@ -56,7 +56,7 @@ describe('AuditView', () => { it('renders the iframe for the selected audit', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -72,7 +72,7 @@ describe('AuditView', () => { it('renders a link to create a new audit for this website', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -92,7 +92,7 @@ describe('AuditView', () => { describe('sidebar', () => { it('renders a list of all audits for the website', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -110,7 +110,7 @@ describe('AuditView', () => { it('sets the current audit as active', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -138,7 +138,7 @@ describe('AuditView', () => { it('navigates to the next report when an audit is clicked', async () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -160,7 +160,7 @@ describe('AuditView', () => { it('it shows the loading', async () => { mockFetch.mockImplementationOnce(() => new Promise(() => {})); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -174,7 +174,7 @@ describe('AuditView', () => { it('it shows an error', async () => { mockFetch.mockRejectOnce(new Error('failed to fetch')); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -191,7 +191,7 @@ describe('AuditView', () => { useParams.mockReturnValueOnce({ id }); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -211,7 +211,7 @@ describe('AuditView', () => { useParams.mockReturnValueOnce({ id }); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , diff --git a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx index 79897539c4..08e8005530 100644 --- a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx +++ b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx @@ -29,14 +29,13 @@ jest.mock('react-router-dom', () => { import React from 'react'; import mockFetch from 'jest-fetch-mock'; import { wait, render, fireEvent } from '@testing-library/react'; -import { MemoryRouter } from 'react-router-dom'; import { ApiRegistry, ApiProvider, ErrorApi, errorApiRef, } from '@backstage/core'; -import { wrapInThemedTestApp, wrapInTheme } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import { lighthouseApiRef, LighthouseRestApi, Audit } from '../../api'; import CreateAudit from '.'; @@ -62,7 +61,7 @@ describe('CreateAudit', () => { it('renders the form', () => { const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -77,16 +76,15 @@ describe('CreateAudit', () => { it('prefills the url into the form', () => { const url = 'https://spotify.com'; const rendered = render( - wrapInTheme( - + + , + { + routeEntries: [ `/lighthouse/create-audit?url=${encodeURIComponent(url)}`, - ]} - > - - - - , + ], + }, ), ); expect(rendered.getByLabelText(/URL/)).toHaveAttribute('value', url); @@ -98,7 +96,7 @@ describe('CreateAudit', () => { mockFetch.mockResponseOnce(() => new Promise(() => {})); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -121,7 +119,7 @@ describe('CreateAudit', () => { mockFetch.mockResponseOnce(JSON.stringify(createAuditResponse)); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , @@ -152,7 +150,7 @@ describe('CreateAudit', () => { mockFetch.mockRejectOnce(new Error('failed to post')); const rendered = render( - wrapInThemedTestApp( + wrapInTestApp( , diff --git a/plugins/lighthouse/src/components/Intro/index.test.tsx b/plugins/lighthouse/src/components/Intro/index.test.tsx index e64e8114d3..183008dc3c 100644 --- a/plugins/lighthouse/src/components/Intro/index.test.tsx +++ b/plugins/lighthouse/src/components/Intro/index.test.tsx @@ -18,13 +18,13 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; -import { wrapInThemedTestApp } from '@backstage/test-utils'; +import { wrapInTestApp } from '@backstage/test-utils'; import LighthouseIntro from '.'; describe('LighthouseIntro', () => { it('renders successfully', () => { - const rendered = render(wrapInThemedTestApp()); + const rendered = render(wrapInTestApp()); expect( rendered.queryByText('Welcome to Lighthouse in Backstage!'), ).toBeInTheDocument(); @@ -35,13 +35,13 @@ describe('LighthouseIntro', () => { const secondTabRe = /you will need a running instance of/; it('selects the first text element', () => { - const rendered = render(wrapInThemedTestApp()); + const rendered = render(wrapInTestApp()); expect(rendered.queryByText(firstTabRe)).toBeInTheDocument(); expect(rendered.queryByText(secondTabRe)).not.toBeInTheDocument(); }); it('shows the other text when the tab is clicked', () => { - const rendered = render(wrapInThemedTestApp()); + const rendered = render(wrapInTestApp()); fireEvent.click(rendered.getByText('Setup')); expect(rendered.queryByText(firstTabRe)).not.toBeInTheDocument(); expect(rendered.queryByText(secondTabRe)).toBeInTheDocument(); @@ -50,7 +50,7 @@ describe('LighthouseIntro', () => { describe('closing', () => { it('hides the content on click', () => { - const rendered = render(wrapInThemedTestApp()); + const rendered = render(wrapInTestApp()); const welcomeMessage = rendered.queryByText( 'Welcome to Lighthouse in Backstage!', );