diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.test.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.test.tsx index 3348c278ee..8d93186ccc 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.test.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.test.tsx @@ -16,14 +16,11 @@ import React from 'react'; import { fireEvent } from '@testing-library/react'; -import { - renderWithEffects, - TestApiRegistry, - wrapInTestApp, -} from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { DismissableBanner } from './DismissableBanner'; import { ApiProvider, WebStorage } from '@backstage/core-app-api'; import { storageApiRef, StorageApi } from '@backstage/core-plugin-api'; +import { screen } from '@testing-library/react'; describe('', () => { let apis: TestApiRegistry; @@ -39,40 +36,34 @@ describe('', () => { }); it('renders the message and the popover', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - const element = await rendered.findByText('test message'); + const element = await screen.findByText('test message'); expect(element).toBeInTheDocument(); }); it('gets placed in local storage on dismiss', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); const webstore = apis.get(storageApiRef); const notifications = webstore?.forBucket('notifications'); - const button = await rendered.findByTitle( - 'Permanently dismiss this message', - ); + const button = await screen.findByTitle('Permanently dismiss this message'); fireEvent.click(button); const dismissedBanners = notifications?.snapshot('dismissedBanners').value ?? []; diff --git a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx index b24dbd812b..35dc3a80f2 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx @@ -16,38 +16,35 @@ import React from 'react'; import { EmptyState } from './EmptyState'; -import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import Button from '@material-ui/core/Button'; +import { screen } from '@testing-library/react'; describe('', () => { it('render EmptyState component with type annotation is missing', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - DOCS} - />, - ), + await renderInTestApp( + DOCS} + />, ); expect( - rendered.getByText('Your plugin is missing an annotation'), + screen.getByText('Your plugin is missing an annotation'), ).toBeInTheDocument(); - expect(rendered.getByLabelText('button')).toBeInTheDocument(); - expect(rendered.getByAltText('annotation is missing')).toBeInTheDocument(); + expect(screen.getByLabelText('button')).toBeInTheDocument(); + expect(screen.getByAltText('annotation is missing')).toBeInTheDocument(); }); it('renders custom image if one is provided', async () => { - const { getByText } = await renderWithEffects( - wrapInTestApp( - Custom Image }} - />, - ), + await renderInTestApp( + Custom Image }} + />, ); - expect(getByText('Some empty state text')).toBeInTheDocument(); - expect(getByText('Custom Image')).toBeInTheDocument(); + expect(screen.getByText('Some empty state text')).toBeInTheDocument(); + expect(screen.getByText('Custom Image')).toBeInTheDocument(); }); }); diff --git a/packages/core-components/src/components/EmptyState/EmptyStateImage.test.tsx b/packages/core-components/src/components/EmptyState/EmptyStateImage.test.tsx index 904f5afc63..6b7d01ea3f 100644 --- a/packages/core-components/src/components/EmptyState/EmptyStateImage.test.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyStateImage.test.tsx @@ -15,35 +15,28 @@ */ import React from 'react'; -import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { EmptyStateImage } from './EmptyStateImage'; +import { screen } from '@testing-library/react'; describe('', () => { it('render EmptyStateImage component with missing field', async () => { - const { getByAltText } = await renderWithEffects( - wrapInTestApp(), - ); - expect(getByAltText('annotation is missing')).toBeInTheDocument(); + await renderInTestApp(); + expect(screen.getByAltText('annotation is missing')).toBeInTheDocument(); }); it('render EmptyStateImage component with missing info', async () => { - const { getByAltText } = await renderWithEffects( - wrapInTestApp(), - ); - expect(getByAltText('no Information')).toBeInTheDocument(); + await renderInTestApp(); + expect(screen.getByAltText('no Information')).toBeInTheDocument(); }); it('render EmptyStateImage component with missing content', async () => { - const { getByAltText } = await renderWithEffects( - wrapInTestApp(), - ); - expect(getByAltText('create Component')).toBeInTheDocument(); + await renderInTestApp(); + expect(screen.getByAltText('create Component')).toBeInTheDocument(); }); it('render EmptyStateImage component with missing data', async () => { - const { getByAltText } = await renderWithEffects( - wrapInTestApp(), - ); - expect(getByAltText('no Build')).toBeInTheDocument(); + await renderInTestApp(); + expect(screen.getByAltText('no Build')).toBeInTheDocument(); }); }); diff --git a/packages/core-components/src/components/Link/Link.test.tsx b/packages/core-components/src/components/Link/Link.test.tsx index 1e39d14009..f88d830479 100644 --- a/packages/core-components/src/components/Link/Link.test.tsx +++ b/packages/core-components/src/components/Link/Link.test.tsx @@ -15,11 +15,11 @@ */ import React from 'react'; -import { render, fireEvent, waitFor } from '@testing-library/react'; +import { fireEvent, waitFor, screen } from '@testing-library/react'; import { MockAnalyticsApi, TestApiProvider, - wrapInTestApp, + renderInTestApp, } from '@backstage/test-utils'; import { analyticsApiRef, configApiRef } from '@backstage/core-plugin-api'; import { isExternalUri, Link, useResolvedPath } from './Link'; @@ -31,20 +31,18 @@ describe('', () => { it('navigates using react-router', async () => { const testString = 'This is test string'; const linkText = 'Navigate!'; - const { getByText } = render( - wrapInTestApp( - <> - {linkText} - - {testString}

} /> - - , - ), + await renderInTestApp( + <> + {linkText} + + {testString}

} /> + + , ); - expect(() => getByText(testString)).toThrow(); - fireEvent.click(getByText(linkText)); + expect(() => screen.getByText(testString)).toThrow(); + fireEvent.click(screen.getByText(linkText)); await waitFor(() => { - expect(getByText(testString)).toBeInTheDocument(); + expect(screen.getByText(testString)).toBeInTheDocument(); }); }); @@ -53,17 +51,15 @@ describe('', () => { const analyticsApi = new MockAnalyticsApi(); const customOnClick = jest.fn(); - const { getByText } = render( - wrapInTestApp( - - - {linkText} - - , - ), + await renderInTestApp( + + + {linkText} + + , ); - fireEvent.click(getByText(linkText)); + fireEvent.click(screen.getByText(linkText)); // Analytics event should have been fired. await waitFor(() => { @@ -85,17 +81,15 @@ describe('', () => { const analyticsApi = new MockAnalyticsApi(); const customOnClick = jest.fn(); - const { getByText } = render( - wrapInTestApp( - - - {linkText} - - , - ), + await renderInTestApp( + + + {linkText} + + , ); - fireEvent.click(getByText(linkText)); + fireEvent.click(screen.getByText(linkText)); // Analytics event should have been fired. await waitFor(() => { @@ -176,11 +170,11 @@ describe('', () => { }); }); - it('throws an error when attempting to link to script code', () => { - expect(() => + it('throws an error when attempting to link to script code', async () => { + await expect( // eslint-disable-next-line no-script-url - render(wrapInTestApp(Script)), - ).toThrowErrorMatchingInlineSnapshot( + renderInTestApp(Script), + ).rejects.toThrowErrorMatchingInlineSnapshot( `"Link component rejected javascript: URL as a security precaution"`, ); }); diff --git a/packages/core-components/src/components/LinkButton/LinkButton.test.tsx b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx index 7dbc42f9cb..39ba7bc498 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.test.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx @@ -15,8 +15,8 @@ */ import React from 'react'; -import { render, fireEvent, act } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { screen, fireEvent, act } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { LinkButton } from './LinkButton'; import { Route, Routes } from 'react-router-dom'; @@ -24,21 +24,19 @@ describe('', () => { it('navigates using react-router', async () => { const testString = 'This is test string'; const linkButtonLabel = 'Navigate!'; - const { getByText } = render( - wrapInTestApp( - <> - {linkButtonLabel} - - {testString}

} /> - - , - ), + await renderInTestApp( + <> + {linkButtonLabel} + + {testString}

} /> + + , ); - expect(() => getByText(testString)).toThrow(); + expect(() => screen.getByText(testString)).toThrow(); await act(async () => { - fireEvent.click(getByText(linkButtonLabel)); + fireEvent.click(screen.getByText(linkButtonLabel)); }); - expect(getByText(testString)).toBeInTheDocument(); + expect(screen.getByText(testString)).toBeInTheDocument(); }); }); diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx index fa8cb35ca8..4f28da0118 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx @@ -15,66 +15,57 @@ */ import React from 'react'; -import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { MarkdownContent } from './MarkdownContent'; +import { screen } from '@testing-library/react'; describe('', () => { it('render MarkdownContent component', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(rendered.getByText('H1', { selector: 'h1' })).toBeInTheDocument(); - expect(rendered.getByText('H2', { selector: 'h2' })).toBeInTheDocument(); - expect(rendered.getByText('H3', { selector: 'h3' })).toBeInTheDocument(); + expect(screen.getByText('H1', { selector: 'h1' })).toBeInTheDocument(); + expect(screen.getByText('H2', { selector: 'h2' })).toBeInTheDocument(); + expect(screen.getByText('H3', { selector: 'h3' })).toBeInTheDocument(); }); it('render MarkdownContent component with GitHub flavored Markdown dialect', async () => { - const rendered = await renderWithEffects( - wrapInTestApp(), - ); + await renderInTestApp(); expect( - rendered.getByText('https://example.com', { selector: 'a' }), + screen.getByText('https://example.com', { selector: 'a' }), ).toBeInTheDocument(); }); it('Render MarkdownContent component with common mark dialect', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); expect( - rendered.getByText('https://example.com', { selector: 'p' }), + screen.getByText('https://example.com', { selector: 'p' }), ).toBeInTheDocument(); }); it('render MarkdownContent component with CodeSnippet for code blocks', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - const fp1 = await rendered.findByText('jest(test:', { selector: 'span' }); + const fp1 = await screen.findByText('jest(test:', { selector: 'span' }); expect(fp1).toBeInTheDocument(); - const fp2 = rendered.getByText('string', { selector: 'span' }); + const fp2 = screen.getByText('string', { selector: 'span' }); expect(fp2).toBeInTheDocument(); - expect(rendered.getByText(');', { selector: 'span' })).toBeInTheDocument(); + expect(screen.getByText(');', { selector: 'span' })).toBeInTheDocument(); }); it('render MarkdownContent component with transformed link', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - { - return `${href}-modified`; - }} - />, - ), + await renderInTestApp( + { + return `${href}-modified`; + }} + />, ); - const fp1 = rendered.getByText('Title', { + const fp1 = screen.getByText('Title', { selector: 'a', }); expect(fp1).toBeInTheDocument(); @@ -84,17 +75,15 @@ describe('', () => { }); it('render MarkdownContent component with transformed image', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - { - return `https://example.com/blog/assets/6/header.png`; - }} - />, - ), + await renderInTestApp( + { + return `https://example.com/blog/assets/6/header.png`; + }} + />, ); - const fp1 = rendered.getByAltText('Image'); + const fp1 = screen.getByAltText('Image'); expect(fp1).toBeInTheDocument(); expect(fp1.getAttribute('src')).toEqual( 'https://example.com/blog/assets/6/header.png', @@ -102,26 +91,24 @@ describe('', () => { }); it('render MarkdownContent component with headings given proper ids', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(rendered.getByText('Lorem ipsum').getAttribute('id')).toEqual( + expect(screen.getByText('Lorem ipsum').getAttribute('id')).toEqual( 'lorem-ipsum', ); - expect(rendered.getByText('bing bong').getAttribute('id')).toEqual( + expect(screen.getByText('bing bong').getAttribute('id')).toEqual( 'bing-bong', ); expect( - rendered + screen .getByText( 'The FitnessGram Pacer Test is a multistage aerobic capacity test', ) diff --git a/packages/core-components/src/components/TrendLine/TrendLine.test.tsx b/packages/core-components/src/components/TrendLine/TrendLine.test.tsx index eb22c80769..0d98c2dfdc 100644 --- a/packages/core-components/src/components/TrendLine/TrendLine.test.tsx +++ b/packages/core-components/src/components/TrendLine/TrendLine.test.tsx @@ -16,54 +16,44 @@ /* eslint-disable jest/no-disabled-tests */ import React from 'react'; -import { render } from '@testing-library/react'; -import { renderInTestApp, wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { TrendLine } from './TrendLine'; describe('TrendLine', () => { describe('when no data is present', () => { it('renders null without throwing', async () => { - const rendered = await renderInTestApp( - , - ); - expect(rendered.queryByTitle('sparkline')).not.toBeInTheDocument(); + await renderInTestApp(); + expect(screen.queryByTitle('sparkline')).not.toBeInTheDocument(); }); }); describe('when one datapoint is present', () => { it('renders as a straight line', async () => { - const rendered = await renderInTestApp( - , - ); - expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); + await renderInTestApp(); + expect(screen.getByTitle('sparkline')).toBeInTheDocument(); }); }); describe.skip('when the data finishes above the success threshold', () => { - it('renders with the correct color', () => { - const rendered = render( - wrapInTestApp(), - ); - expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); + it('renders with the correct color', async () => { + await renderInTestApp(); + expect(screen.getByTitle('sparkline')).toBeInTheDocument(); }); }); describe.skip('when the data finishes within the the warning threshold', () => { - it('renders with the correct color', () => { - const rendered = render( - wrapInTestApp(), - ); - expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); + it('renders with the correct color', async () => { + await renderInTestApp(); + expect(screen.getByTitle('sparkline')).toBeInTheDocument(); }); }); describe.skip('when the data finishes within the the error threshold', () => { - it('renders with the correct color', () => { - const rendered = render( - wrapInTestApp(), - ); - expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); + it('renders with the correct color', async () => { + await renderInTestApp(); + expect(screen.getByTitle('sparkline')).toBeInTheDocument(); }); }); }); diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx index 5e0014c400..1b7c3329a2 100644 --- a/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx +++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx @@ -15,7 +15,7 @@ */ import { renderInTestApp, wrapInTestApp } from '@backstage/test-utils'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import React from 'react'; import { CardTab, TabbedCard } from './TabbedCard'; @@ -29,36 +29,36 @@ const minProps = { describe('', () => { it('renders without exploding', async () => { - const rendered = await renderInTestApp( + await renderInTestApp( Test Content Test Content , ); - expect(rendered.getByText('Some title')).toBeInTheDocument(); + expect(screen.getByText('Some title')).toBeInTheDocument(); }); it('renders a deepLink when prop is set', async () => { - const rendered = await renderInTestApp( + await renderInTestApp( Test Content Test Content , ); - expect(rendered.getByText('A deepLink title')).toBeInTheDocument(); + expect(screen.getByText('A deepLink title')).toBeInTheDocument(); }); it('switches tabs when clicking', async () => { - const rendered = await renderInTestApp( + await renderInTestApp( Test Content 1 Test Content 2 , ); - expect(rendered.getByText('Test Content 1')).toBeInTheDocument(); + expect(screen.getByText('Test Content 1')).toBeInTheDocument(); - fireEvent.click(rendered.getByText('Test 2')); - expect(rendered.getByText('Test Content 2')).toBeInTheDocument(); + fireEvent.click(screen.getByText('Test 2')); + expect(screen.getByText('Test Content 2')).toBeInTheDocument(); }); it('switches tabs when clicking in controlled mode', () => { @@ -80,9 +80,9 @@ describe('', () => { , ), ); - expect(rendered.getByText('Test Content 1')).toBeInTheDocument(); + expect(screen.getByText('Test Content 1')).toBeInTheDocument(); - fireEvent.click(rendered.getByText('Test 2')); + fireEvent.click(screen.getByText('Test 2')); expect(handleTabChange.mock.calls.length).toBe(1); rendered.rerender( @@ -94,6 +94,6 @@ describe('', () => { , ); - expect(rendered.getByText('Test Content 2')).toBeInTheDocument(); + expect(screen.getByText('Test Content 2')).toBeInTheDocument(); }); }); diff --git a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx index ee3b522a3c..fa698ded58 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx @@ -34,10 +34,10 @@ import { import { MockStorageApi, TestApiProvider, - wrapInTestApp, + renderInTestApp, } from '@backstage/test-utils'; import DashboardIcon from '@material-ui/icons/Dashboard'; -import { render, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import React from 'react'; import { apiDocsConfigRef } from '../../config'; import { DefaultApiExplorerPage } from './DefaultApiExplorerPage'; @@ -78,44 +78,44 @@ describe('DefaultApiExplorerPage', () => { const storageApi = MockStorageApi.create(); const renderWrapped = (children: React.ReactNode) => - render( - wrapInTestApp( - - {children} - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, + renderInTestApp( + + {children} + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); // this test right now causes some red lines in the log output when running tests // related to some theme issues in mui-table // https://github.com/mbrn/material-table/issues/1293 it('should render', async () => { - const { findByText } = renderWrapped(); - expect(await findByText(/My Company API Explorer/)).toBeInTheDocument(); + await renderWrapped(); + expect( + await screen.findByText(/My Company API Explorer/), + ).toBeInTheDocument(); }); it('should render the default column of the grid', async () => { - const { getAllByRole } = renderWrapped(); + await renderWrapped(); - const columnHeader = getAllByRole('button').filter( - c => c.tagName === 'SPAN', - ); + const columnHeader = screen + .getAllByRole('button') + .filter(c => c.tagName === 'SPAN'); const columnHeaderLabels = columnHeader.map(c => c.textContent); await waitFor(() => @@ -138,13 +138,11 @@ describe('DefaultApiExplorerPage', () => { { title: 'Bar', field: 'entity.bar' }, { title: 'Baz', field: 'entity.spec.lifecycle' }, ]; - const { getAllByRole } = renderWrapped( - , - ); + await renderWrapped(); - const columnHeader = getAllByRole('button').filter( - c => c.tagName === 'SPAN', - ); + const columnHeader = screen + .getAllByRole('button') + .filter(c => c.tagName === 'SPAN'); const columnHeaderLabels = columnHeader.map(c => c.textContent); await waitFor(() => @@ -153,14 +151,12 @@ describe('DefaultApiExplorerPage', () => { }); it('should render the default actions of an item in the grid', async () => { - const { findByTitle, findByText } = await renderWrapped( - , - ); - expect(await findByText(/All apis \(1\)/)).toBeInTheDocument(); - expect(await findByTitle(/View/)).toBeInTheDocument(); - expect(await findByTitle(/View/)).toBeInTheDocument(); - expect(await findByTitle(/Edit/)).toBeInTheDocument(); - expect(await findByTitle(/Add to favorites/)).toBeInTheDocument(); + await renderWrapped(); + expect(await screen.findByText(/All apis \(1\)/)).toBeInTheDocument(); + expect(await screen.findByTitle(/View/)).toBeInTheDocument(); + expect(await screen.findByTitle(/View/)).toBeInTheDocument(); + expect(await screen.findByTitle(/Edit/)).toBeInTheDocument(); + expect(await screen.findByTitle(/Add to favorites/)).toBeInTheDocument(); }); it('should render the custom actions of an item passed as prop', async () => { @@ -183,12 +179,10 @@ describe('DefaultApiExplorerPage', () => { }, ]; - const { findByTitle, findByText } = await renderWrapped( - , - ); - expect(await findByText(/All apis \(1\)/)).toBeInTheDocument(); - expect(await findByTitle(/Foo Action/)).toBeInTheDocument(); - expect(await findByTitle(/Bar Action/)).toBeInTheDocument(); - expect((await findByTitle(/Bar Action/)).firstChild).toBeDisabled(); + await renderWrapped(); + expect(await screen.findByText(/All apis \(1\)/)).toBeInTheDocument(); + expect(await screen.findByTitle(/Foo Action/)).toBeInTheDocument(); + expect(await screen.findByTitle(/Bar Action/)).toBeInTheDocument(); + expect((await screen.findByTitle(/Bar Action/)).firstChild).toBeDisabled(); }); }); diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx index f5027a332e..f31d3baf39 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx @@ -33,9 +33,8 @@ import { MockPluginProvider } from '@backstage/test-utils/alpha'; import { mockBreakpoint, MockStorageApi, - renderWithEffects, TestApiProvider, - wrapInTestApp, + renderInTestApp, } from '@backstage/test-utils'; import DashboardIcon from '@material-ui/icons/Dashboard'; import { fireEvent, screen } from '@testing-library/react'; @@ -125,25 +124,23 @@ describe('DefaultCatalogPage', () => { const storageApi = MockStorageApi.create(); const renderWrapped = (children: React.ReactNode) => - renderWithEffects( - wrapInTestApp( - - {children} - , - { - mountedRoutes: { - '/create': createComponentRouteRef, - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, + renderInTestApp( + + {children} + , + { + mountedRoutes: { + '/create': createComponentRouteRef, + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); // TODO(freben): The test timeouts are bumped in this file, because it seems diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.test.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.test.tsx index 304a962212..3731e3c221 100644 --- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.test.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.test.tsx @@ -16,7 +16,7 @@ import { Entity, EntityLink } from '@backstage/catalog-model'; import { EntityProvider } from '@backstage/plugin-catalog-react'; -import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; import React from 'react'; import { EntityLinksCard } from './EntityLinksCard'; @@ -44,12 +44,10 @@ describe('EntityLinksCard', () => { it('should render a link', async () => { const links: EntityLink[] = [createLink()]; - await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); expect(screen.getByText('admin dashboard')).toBeInTheDocument(); @@ -57,12 +55,10 @@ describe('EntityLinksCard', () => { }); it('should show empty state', async () => { - await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); expect( diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.test.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.test.tsx index 43f14d69a4..c9b95d2583 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.test.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.test.tsx @@ -13,9 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { CostOverviewLegend } from './CostOverviewLegend'; import { MockBillingDateProvider, @@ -24,23 +25,21 @@ import { MockCurrencyProvider, } from '../../testUtils'; -function renderInTestApp(children: JSX.Element) { - return render( - wrapInTestApp( - - - - {children} - - - , - ), +function render(children: JSX.Element) { + return renderInTestApp( + + + + {children} + + + , ); } describe('', () => { it('displays the legend without exploding', async () => { - const { findByText } = renderInTestApp( + await render( ', () => { />, ); - expect(await findByText('Cost Trend')).toBeInTheDocument(); - expect(await findByText('MSC Trend')).toBeInTheDocument(); + expect(await screen.findByText('Cost Trend')).toBeInTheDocument(); + expect(await screen.findByText('MSC Trend')).toBeInTheDocument(); }); it('does not display metric legend if metric data is not provided', async () => { - const { findByText, queryByText } = renderInTestApp( + await render( ', () => { />, ); - expect(await findByText('Cost Trend')).toBeInTheDocument(); - expect(queryByText('MSC Trend')).not.toBeInTheDocument(); + expect(await screen.findByText('Cost Trend')).toBeInTheDocument(); + expect(screen.queryByText('MSC Trend')).not.toBeInTheDocument(); }); }); @@ -100,7 +99,7 @@ describe.each` ${undefined} | ${-1_000} | ${'-∞'} | ${'Your Savings'} `('', ({ ratio, amount, title, expected }) => { it('displays the correct legend if ratio cannot be calculated and costs are within time period', async () => { - const { findByText, findAllByText } = renderInTestApp( + await render( , ); - expect(await findByText('Cost Trend')).toBeInTheDocument(); - expect(await findByText('MSC Trend')).toBeInTheDocument(); - expect(await findAllByText(title).then(res => res.length)).toBe(2); - expect(await findByText(expected)).toBeInTheDocument(); + expect(await screen.findByText('Cost Trend')).toBeInTheDocument(); + expect(await screen.findByText('MSC Trend')).toBeInTheDocument(); + expect(await screen.findAllByText(title).then(res => res.length)).toBe(2); + expect(await screen.findByText(expected)).toBeInTheDocument(); }); }); diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.test.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.test.tsx index f804031d6f..caa25b2fcf 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.test.tsx +++ b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.test.tsx @@ -15,9 +15,9 @@ */ import React from 'react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { ProductEntityDialog } from './ProductEntityDialog'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { Entity } from '@backstage/plugin-cost-insights-common'; import { MockConfigProvider } from '../../testUtils'; @@ -70,10 +70,10 @@ const multiBreakdownEntity = { }; describe('', () => { - it('Should error if no sub-entities exist', () => { - expect(() => - render( - wrapInTestApp( + it('Should error if no sub-entities exist', async () => { + await expect( + Promise.resolve().then(() => + renderInTestApp( ', () => { />, ), ), - ).toThrow(); + ).rejects.toThrow(); }); - it('Should show a tab for a single sub-entity type', () => { - const { getByText } = render( - wrapInTestApp( - - - , - ), + it('Should show a tab for a single sub-entity type', async () => { + await renderInTestApp( + + + , ); - expect(getByText('Breakdown by SKU')).toBeInTheDocument(); + expect(screen.getByText('Breakdown by SKU')).toBeInTheDocument(); }); - it('Should show tabs when multiple sub-entity types exist', () => { - const { getByText } = render( - wrapInTestApp( - - - , - ), + it('Should show tabs when multiple sub-entity types exist', async () => { + await renderInTestApp( + + + , ); - expect(getByText('Breakdown by SKU')).toBeInTheDocument(); - expect(getByText('Breakdown by deployment')).toBeInTheDocument(); - expect(getByText('sku-1')).toBeInTheDocument(); + expect(screen.getByText('Breakdown by SKU')).toBeInTheDocument(); + expect(screen.getByText('Breakdown by deployment')).toBeInTheDocument(); + expect(screen.getByText('sku-1')).toBeInTheDocument(); }); }); diff --git a/plugins/explore/src/components/ToolCard/ToolCard.test.tsx b/plugins/explore/src/components/ToolCard/ToolCard.test.tsx index 20bf6bb594..f2d0baf93e 100644 --- a/plugins/explore/src/components/ToolCard/ToolCard.test.tsx +++ b/plugins/explore/src/components/ToolCard/ToolCard.test.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ -import { wrapInTestApp } from '@backstage/test-utils'; -import { render } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; import React from 'react'; import { ToolCard } from './ToolCard'; @@ -30,38 +30,36 @@ const minProps = { }; describe('', () => { - it('renders without exploding', () => { - const { getByText } = render(wrapInTestApp()); - expect(getByText('Explore')).toBeInTheDocument(); + it('renders without exploding', async () => { + await renderInTestApp(); + expect(screen.getByText('Explore')).toBeInTheDocument(); }); - it('renders props correctly', () => { - const { getByRole, getByText } = render( - wrapInTestApp(), - ); + it('renders props correctly', async () => { + await renderInTestApp(); expect( - getByRole('heading', { name: minProps.card.title }), + screen.getByRole('heading', { name: minProps.card.title }), ).toBeInTheDocument(); - expect(getByText(minProps.card.description)).toBeInTheDocument(); + expect(screen.getByText(minProps.card.description)).toBeInTheDocument(); }); - it('should link out', () => { - const rendered = render(wrapInTestApp()); - const anchor = rendered.container.querySelector('a'); + it('should link out', async () => { + const { container } = await renderInTestApp(); + const anchor = container.querySelector('a'); expect(anchor).toHaveAttribute('href', minProps.card.url); }); - it('renders default description when missing', () => { + it('renders default description when missing', async () => { const card = { title: 'Title', url: 'http://spotify.com/', image: 'https://developer.spotify.com/assets/WebAPI_intro.png', }; - const { getByText } = render(wrapInTestApp()); - expect(getByText('Description missing')).toBeInTheDocument(); + await renderInTestApp(); + expect(screen.getByText('Description missing')).toBeInTheDocument(); }); - it('renders lifecycle correctly', () => { + it('renders lifecycle correctly', async () => { const propsWithLifecycle = { card: { title: 'Title', @@ -70,15 +68,13 @@ describe('', () => { lifecycle: 'GA', }, }; - const { queryByText } = render( - wrapInTestApp(), - ); - expect(queryByText('GA')).not.toBeInTheDocument(); + await renderInTestApp(); + expect(screen.queryByText('GA')).not.toBeInTheDocument(); }); - it('renders tags correctly', () => { - const { getByText } = render(wrapInTestApp()); - expect(getByText(minProps.card.tags[0])).toBeInTheDocument(); - expect(getByText(minProps.card.tags[1])).toBeInTheDocument(); + it('renders tags correctly', async () => { + await renderInTestApp(); + expect(screen.getByText(minProps.card.tags[0])).toBeInTheDocument(); + expect(screen.getByText(minProps.card.tags[1])).toBeInTheDocument(); }); }); diff --git a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.test.tsx b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.test.tsx index dcafc3b6f2..2d006b32c2 100644 --- a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.test.tsx +++ b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.test.tsx @@ -25,9 +25,9 @@ import { configApiRef, errorApiRef, } from '@backstage/core-plugin-api'; -import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils'; +import { TestApiProvider, renderInTestApp } from '@backstage/test-utils'; import { rootRouteRef } from '../../routes'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; jest.mock('../useWorkflowRuns', () => ({ useWorkflowRuns: jest.fn(), @@ -74,55 +74,54 @@ describe('', () => { jest.resetAllMocks(); }); - const renderSubject = (props: any = {}) => - render( - wrapInTestApp( - - - - - , - { - mountedRoutes: { - '/ci-cd': rootRouteRef, - }, + const renderSubject = async (props: any = {}) => { + renderInTestApp( + + + + + , + { + mountedRoutes: { + '/ci-cd': rootRouteRef, }, - ), + }, ); + }; it('renders a table with a row for each workflow', async () => { - const subject = renderSubject(); + await renderSubject(); workflowRuns.forEach(run => { - expect(subject.getByText(run.message)).toBeInTheDocument(); + expect(screen.getByText(run.message)).toBeInTheDocument(); }); }); it('renders a workflow row correctly', async () => { - const subject = renderSubject(); + await renderSubject(); const [run] = workflowRuns; - expect(subject.getByText(run.message).closest('a')).toHaveAttribute( + expect(screen.getByText(run.message).closest('a')).toHaveAttribute( 'href', `/ci-cd/${run.id}`, ); - expect(subject.getByText(run.source.branchName)).toBeInTheDocument(); + expect(screen.getByText(run.source.branchName)).toBeInTheDocument(); }); it('requests only the required number of workflow runs', async () => { const limit = 3; - renderSubject({ limit }); + await renderSubject({ limit }); expect(useWorkflowRuns).toHaveBeenCalledWith( expect.objectContaining({ initialPageSize: limit }), ); }); it('uses the github hostname, repo and owner from the entity annotations', async () => { - renderSubject(); + await renderSubject(); expect(useWorkflowRuns).toHaveBeenCalledWith( expect.objectContaining({ hostname: 'ghes.acme.co', @@ -134,7 +133,7 @@ describe('', () => { it('filters workflows by branch if one is specified', async () => { const branch = 'master'; - renderSubject({ branch }); + await renderSubject({ branch }); expect(useWorkflowRuns).toHaveBeenCalledWith( expect.objectContaining({ branch }), ); @@ -147,7 +146,7 @@ describe('', () => { }); it('sends the error to the errorApi', async () => { - renderSubject(); + await renderSubject(); expect(mockErrorApi.post).toHaveBeenCalledWith(error); }); }); diff --git a/plugins/kubernetes/src/components/Cluster/Cluster.test.tsx b/plugins/kubernetes/src/components/Cluster/Cluster.test.tsx index 620af05e69..482a386efb 100644 --- a/plugins/kubernetes/src/components/Cluster/Cluster.test.tsx +++ b/plugins/kubernetes/src/components/Cluster/Cluster.test.tsx @@ -15,8 +15,8 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { Cluster } from './Cluster'; jest.mock('../../hooks'); @@ -24,38 +24,36 @@ import * as oneDeployment from '../../__fixtures__/1-deployments.json'; describe('Cluster', () => { it('render 1 cluster', async () => { - const { getByText } = render( - wrapInTestApp( - (), - } as any)} - />, - ), + resources: [ + { + type: 'deployments', + resources: oneDeployment.deployments, + }, + { + type: 'replicasets', + resources: oneDeployment.replicaSets, + }, + { + type: 'pods', + resources: oneDeployment.pods, + }, + ], + podMetrics: [], + errors: [], + }, + podsWithErrors: new Set(), + } as any)} + />, ); - expect(getByText('cluster-1')).toBeInTheDocument(); - expect(getByText('10 pods')).toBeInTheDocument(); + expect(screen.getByText('cluster-1')).toBeInTheDocument(); + expect(screen.getByText('10 pods')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsAccordions.test.tsx b/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsAccordions.test.tsx index 9d2df328d2..6b8912df82 100644 --- a/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsAccordions.test.tsx +++ b/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsAccordions.test.tsx @@ -13,38 +13,35 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { CronJobsAccordions } from './CronJobsAccordions'; import * as oneCronJobsFixture from '../../__fixtures__/1-cronjobs.json'; import * as twoCronJobsFixture from '../../__fixtures__/2-cronjobs.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { kubernetesProviders } from '../../hooks/test-utils'; describe('CronJobsAccordions', () => { it('should render 1 active cronjobs', async () => { const wrapper = kubernetesProviders(oneCronJobsFixture, new Set()); - const { getByText } = render( - wrapper(wrapInTestApp()), - ); + await renderInTestApp(wrapper()); - expect(getByText('dice-roller-cronjob')).toBeInTheDocument(); - expect(getByText('CronJob')).toBeInTheDocument(); - expect(getByText('namespace: default')).toBeInTheDocument(); - expect(getByText('Active')).toBeInTheDocument(); + expect(screen.getByText('dice-roller-cronjob')).toBeInTheDocument(); + expect(screen.getByText('CronJob')).toBeInTheDocument(); + expect(screen.getByText('namespace: default')).toBeInTheDocument(); + expect(screen.getByText('Active')).toBeInTheDocument(); }); it('should render 1 suspended cronjobs', async () => { const wrapper = kubernetesProviders(twoCronJobsFixture, new Set()); - const { getByText } = render( - wrapper(wrapInTestApp()), - ); + await renderInTestApp(wrapper()); - expect(getByText('dice-roller-cronjob')).toBeInTheDocument(); - expect(getByText('CronJob')).toBeInTheDocument(); - expect(getByText('namespace: default')).toBeInTheDocument(); - expect(getByText('Suspended')).toBeInTheDocument(); + expect(screen.getByText('dice-roller-cronjob')).toBeInTheDocument(); + expect(screen.getByText('CronJob')).toBeInTheDocument(); + expect(screen.getByText('namespace: default')).toBeInTheDocument(); + expect(screen.getByText('Suspended')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.test.tsx b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.test.tsx index f3e1d47479..00063afa99 100644 --- a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.test.tsx +++ b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.test.tsx @@ -15,8 +15,8 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { kubernetesProviders } from '../../../hooks/test-utils'; import * as rollout from './__fixtures__/rollout.json'; import * as pausedRollout from './__fixtures__/paused-rollout.json'; @@ -29,32 +29,34 @@ describe('Rollout', () => { it('should render RolloutAccordion', async () => { const wrapper = kubernetesProviders(groupedResources, new Set([])); - const { getByText, queryByText } = render( - wrapper(wrapInTestApp()), + await renderInTestApp( + wrapper(), ); - expect(getByText('dice-roller')).toBeInTheDocument(); - expect(getByText('Rollout')).toBeInTheDocument(); - expect(getByText('2 pods')).toBeInTheDocument(); - expect(getByText('No pods with errors')).toBeInTheDocument(); - expect(queryByText('Paused')).toBeNull(); + expect(screen.getByText('dice-roller')).toBeInTheDocument(); + expect(screen.getByText('Rollout')).toBeInTheDocument(); + expect(screen.getByText('2 pods')).toBeInTheDocument(); + expect(screen.getByText('No pods with errors')).toBeInTheDocument(); + expect(screen.queryByText('Paused')).toBeNull(); }); + it('should render RolloutAccordion with error', async () => { const wrapper = kubernetesProviders( groupedResources, new Set(['dice-roller-6c8646bfd-2m5hv']), ); - const { getByText, queryByText } = render( - wrapper(wrapInTestApp()), + await renderInTestApp( + wrapper(), ); - expect(getByText('dice-roller')).toBeInTheDocument(); - expect(getByText('Rollout')).toBeInTheDocument(); - expect(getByText('2 pods')).toBeInTheDocument(); - expect(getByText('1 pod with errors')).toBeInTheDocument(); - expect(queryByText('Paused')).toBeNull(); + expect(screen.getByText('dice-roller')).toBeInTheDocument(); + expect(screen.getByText('Rollout')).toBeInTheDocument(); + expect(screen.getByText('2 pods')).toBeInTheDocument(); + expect(screen.getByText('1 pod with errors')).toBeInTheDocument(); + expect(screen.queryByText('Paused')).toBeNull(); }); + it('should render Paused Rollout with pause text', async () => { const wrapper = kubernetesProviders(groupedResources, new Set([])); @@ -63,41 +65,38 @@ describe('Rollout', () => { // millis * secs * mins = 45 mins .minus(Duration.fromMillis(1000 * 60 * 45)); - const { getByText } = render( - wrapper( - wrapInTestApp(), - ), + await renderInTestApp( + wrapper(), ); - expect(getByText('dice-roller')).toBeInTheDocument(); - expect(getByText('Rollout')).toBeInTheDocument(); - expect(getByText('2 pods')).toBeInTheDocument(); - expect(getByText('No pods with errors')).toBeInTheDocument(); - expect(getByText('Paused (45 minutes ago)')).toBeInTheDocument(); + expect(screen.getByText('dice-roller')).toBeInTheDocument(); + expect(screen.getByText('Rollout')).toBeInTheDocument(); + expect(screen.getByText('2 pods')).toBeInTheDocument(); + expect(screen.getByText('No pods with errors')).toBeInTheDocument(); + expect(screen.getByText('Paused (45 minutes ago)')).toBeInTheDocument(); }); + it('should render aborted Rollout with aborted text', async () => { const wrapper = kubernetesProviders(groupedResources, new Set([])); - const { getByText, getAllByText, queryByText } = render( + await renderInTestApp( wrapper( - wrapInTestApp( - , - ), + , ), ); - expect(getByText('dice-roller')).toBeInTheDocument(); - expect(getByText('Rollout')).toBeInTheDocument(); - expect(getByText('2 pods')).toBeInTheDocument(); - expect(getByText('No pods with errors')).toBeInTheDocument(); - expect(queryByText('Paused')).toBeNull(); - expect(getByText('Rollout status')).toBeInTheDocument(); - expect(getAllByText('Aborted')).toHaveLength(2); + expect(screen.getByText('dice-roller')).toBeInTheDocument(); + expect(screen.getByText('Rollout')).toBeInTheDocument(); + expect(screen.getByText('2 pods')).toBeInTheDocument(); + expect(screen.getByText('No pods with errors')).toBeInTheDocument(); + expect(screen.queryByText('Paused')).toBeNull(); + expect(screen.getByText('Rollout status')).toBeInTheDocument(); + expect(screen.getAllByText('Aborted')).toHaveLength(2); expect( - getByText('some metric related failure message'), + screen.getByText('some metric related failure message'), ).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/StepsProgress.test.tsx b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/StepsProgress.test.tsx index e409b196c1..23be984f03 100644 --- a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/StepsProgress.test.tsx +++ b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/StepsProgress.test.tsx @@ -15,125 +15,113 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import pauseSteps from './__fixtures__/pause-steps'; import setWeightSteps from './__fixtures__/setweight-steps'; import analysisSteps from './__fixtures__/analysis-steps'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { StepsProgress } from './StepsProgress'; describe('StepsProgress', () => { it('should render Pause step text', async () => { - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('pause for 1h')).toBeInTheDocument(); - expect(getByText('infinite pause')).toBeInTheDocument(); + expect(screen.getByText('pause for 1h')).toBeInTheDocument(); + expect(screen.getByText('infinite pause')).toBeInTheDocument(); }); + it('should render SetWeight step text', async () => { - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('setWeight 10%')).toBeInTheDocument(); - expect(getByText('setWeight 95%')).toBeInTheDocument(); + expect(screen.getByText('setWeight 10%')).toBeInTheDocument(); + expect(screen.getByText('setWeight 95%')).toBeInTheDocument(); }); + it('should render Analysis step text', async () => { - const { getAllByText, getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getAllByText('analysis templates:')).toHaveLength(2); - expect(getByText('always-pass')).toBeInTheDocument(); - expect(getByText('always-fail')).toBeInTheDocument(); - expect(getByText('req-rate (cluster scoped)')).toBeInTheDocument(); + expect(screen.getAllByText('analysis templates:')).toHaveLength(2); + expect(screen.getByText('always-pass')).toBeInTheDocument(); + expect(screen.getByText('always-fail')).toBeInTheDocument(); + expect(screen.getByText('req-rate (cluster scoped)')).toBeInTheDocument(); }); + it('should render 3 different steps', async () => { - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('setWeight 10%')).toBeInTheDocument(); - expect(getByText('pause for 1h')).toBeInTheDocument(); - expect(getByText('analysis templates:')).toBeInTheDocument(); - expect(getByText('always-pass')).toBeInTheDocument(); - expect(getByText('Canary promoted')).toBeInTheDocument(); + expect(screen.getByText('setWeight 10%')).toBeInTheDocument(); + expect(screen.getByText('pause for 1h')).toBeInTheDocument(); + expect(screen.getByText('analysis templates:')).toBeInTheDocument(); + expect(screen.getByText('always-pass')).toBeInTheDocument(); + expect(screen.getByText('Canary promoted')).toBeInTheDocument(); }); + it('current step is highlighted, previous steps are ticked', async () => { - const { getByText, queryByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); // It is ticked, so it's not visible - expect(queryByText('1')).toBeNull(); + expect(screen.queryByText('1')).toBeNull(); // The current step - expect(getByText('2')).toBeInTheDocument(); + expect(screen.getByText('2')).toBeInTheDocument(); // The future step - expect(getByText('3')).toBeInTheDocument(); + expect(screen.getByText('3')).toBeInTheDocument(); // The canary promoted step should always be added at the end - expect(getByText('4')).toBeInTheDocument(); + expect(screen.getByText('4')).toBeInTheDocument(); }); + it('aborted canary has all steps grey', async () => { - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('1')).toBeInTheDocument(); - expect(getByText('2')).toBeInTheDocument(); - expect(getByText('3')).toBeInTheDocument(); - expect(getByText('4')).toBeInTheDocument(); + expect(screen.getByText('1')).toBeInTheDocument(); + expect(screen.getByText('2')).toBeInTheDocument(); + expect(screen.getByText('3')).toBeInTheDocument(); + expect(screen.getByText('4')).toBeInTheDocument(); }); + it('promoted canary has all steps ticked', async () => { - const { queryByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(queryByText('1')).toBeNull(); - expect(queryByText('2')).toBeNull(); - expect(queryByText('3')).toBeNull(); - expect(queryByText('4')).toBeNull(); + expect(screen.queryByText('1')).toBeNull(); + expect(screen.queryByText('2')).toBeNull(); + expect(screen.queryByText('3')).toBeNull(); + expect(screen.queryByText('4')).toBeNull(); }); }); diff --git a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.test.tsx b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.test.tsx index c7588436ad..a23502a3ad 100644 --- a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.test.tsx +++ b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.test.tsx @@ -15,8 +15,8 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { kubernetesProviders } from '../../hooks/test-utils'; import * as ar from './__fixtures__/analysis-run.json'; import { DefaultCustomResourceAccordions } from './DefaultCustomResource'; @@ -25,17 +25,15 @@ describe('DefaultCustomResource', () => { it('should render DefaultCustomResource Accordion', async () => { const wrapper = kubernetesProviders({}, new Set([])); - const { getByText } = render( + await renderInTestApp( wrapper( - wrapInTestApp( - , - ), + , ), ); - expect(getByText('dice-roller-546c476497-4-1')).toBeInTheDocument(); - expect(getByText('AnalysisRun')).toBeInTheDocument(); + expect(screen.getByText('dice-roller-546c476497-4-1')).toBeInTheDocument(); + expect(screen.getByText('AnalysisRun')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.test.tsx b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.test.tsx index a5f02f58a2..f11826e77f 100644 --- a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.test.tsx +++ b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.test.tsx @@ -15,10 +15,10 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { DeploymentsAccordions } from './DeploymentsAccordions'; import * as twoDeployFixture from '../../__fixtures__/2-deployments.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { kubernetesProviders } from '../../hooks/test-utils'; describe('DeploymentsAccordions', () => { @@ -28,19 +28,19 @@ describe('DeploymentsAccordions', () => { new Set(['dice-roller-canary-7d64cd756c-vtbdx']), ); - const { getByText } = render( - wrapper(wrapInTestApp()), - ); + await renderInTestApp(wrapper()); - expect(getByText('dice-roller')).toBeInTheDocument(); - expect(getByText('10 pods')).toBeInTheDocument(); - expect(getByText('No pods with errors')).toBeInTheDocument(); - expect(getByText('min replicas 10 / max replicas 15')).toBeInTheDocument(); - expect(getByText('current CPU usage: 30%')).toBeInTheDocument(); - expect(getByText('target CPU usage: 50%')).toBeInTheDocument(); + expect(screen.getByText('dice-roller')).toBeInTheDocument(); + expect(screen.getByText('10 pods')).toBeInTheDocument(); + expect(screen.getByText('No pods with errors')).toBeInTheDocument(); + expect( + screen.getByText('min replicas 10 / max replicas 15'), + ).toBeInTheDocument(); + expect(screen.getByText('current CPU usage: 30%')).toBeInTheDocument(); + expect(screen.getByText('target CPU usage: 50%')).toBeInTheDocument(); - expect(getByText('dice-roller-canary')).toBeInTheDocument(); - expect(getByText('2 pods')).toBeInTheDocument(); - expect(getByText('1 pod with errors')).toBeInTheDocument(); + expect(screen.getByText('dice-roller-canary')).toBeInTheDocument(); + expect(screen.getByText('2 pods')).toBeInTheDocument(); + expect(screen.getByText('1 pod with errors')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.test.tsx b/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.test.tsx index 0d75c09a11..5c7b10697c 100644 --- a/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.test.tsx +++ b/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.test.tsx @@ -15,106 +15,99 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { ErrorPanel } from './ErrorPanel'; describe('ErrorPanel', () => { it('displays path and status code when a cluster has an HTTP error', async () => { - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); // title expect( - getByText( + screen.getByText( 'There was a problem retrieving some Kubernetes resources for the entity: THIS_ENTITY. This could mean that the Error Reporting card is not completely accurate.', ), ).toBeInTheDocument(); // message - expect(getByText('Errors:')).toBeInTheDocument(); - expect(getByText('Cluster: THIS_CLUSTER')).toBeInTheDocument(); + expect(screen.getByText('Errors:')).toBeInTheDocument(); + expect(screen.getByText('Cluster: THIS_CLUSTER')).toBeInTheDocument(); expect( - getByText( + screen.getByText( "Error fetching Kubernetes resource: 'some/resource', error: SYSTEM_ERROR, status code: 500", ), ).toBeInTheDocument(); }); + it('displays message for non-HTTP-status-related fetch errors', async () => { - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); // title expect( - getByText( + screen.getByText( 'There was a problem retrieving some Kubernetes resources for the entity: THIS_ENTITY. This could mean that the Error Reporting card is not completely accurate.', ), ).toBeInTheDocument(); // message - expect(getByText('Errors:')).toBeInTheDocument(); - expect(getByText('Cluster: THIS_CLUSTER')).toBeInTheDocument(); + expect(screen.getByText('Errors:')).toBeInTheDocument(); + expect(screen.getByText('Cluster: THIS_CLUSTER')).toBeInTheDocument(); expect( - getByText( + screen.getByText( 'Error communicating with Kubernetes: FETCH_ERROR, message: description of error', ), ).toBeInTheDocument(); }); + it('displays error message', async () => { - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); // title expect( - getByText( + screen.getByText( 'There was a problem retrieving some Kubernetes resources for the entity: THIS_ENTITY. This could mean that the Error Reporting card is not completely accurate.', ), ).toBeInTheDocument(); // message - expect(getByText('Errors: SOME_ERROR_MESSAGE')).toBeInTheDocument(); + expect(screen.getByText('Errors: SOME_ERROR_MESSAGE')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.test.tsx b/plugins/kubernetes/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.test.tsx index 4c68ba6603..beb0db1e2b 100644 --- a/plugins/kubernetes/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.test.tsx +++ b/plugins/kubernetes/src/components/HorizontalPodAutoscalers/HorizontalPodAutoscalerDrawer.test.tsx @@ -15,36 +15,38 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import * as hpas from './__fixtures__/horizontalpodautoscalers.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { HorizontalPodAutoscalerDrawer } from './HorizontalPodAutoscalerDrawer'; describe('HorizontalPodAutoscalersDrawer', () => { it('should render hpa drawer', async () => { - const { getByText } = render( - wrapInTestApp( - -

CHILD

- , - ), + await renderInTestApp( + +

CHILD

+ , ); - expect(getByText('dice-roller')).toBeInTheDocument(); - expect(getByText('CHILD')).toBeInTheDocument(); - expect(getByText('HorizontalPodAutoscaler')).toBeInTheDocument(); - expect(getByText('YAML')).toBeInTheDocument(); - expect(getByText('Target CPU Utilization Percentage')).toBeInTheDocument(); - expect(getByText('50')).toBeInTheDocument(); - expect(getByText('Current CPU Utilization Percentage')).toBeInTheDocument(); - expect(getByText('30')).toBeInTheDocument(); - expect(getByText('Min Replicas')).toBeInTheDocument(); - expect(getByText('10')).toBeInTheDocument(); - expect(getByText('Max Replicas')).toBeInTheDocument(); - expect(getByText('15')).toBeInTheDocument(); - expect(getByText('Current Replicas')).toBeInTheDocument(); - expect(getByText('13')).toBeInTheDocument(); - expect(getByText('Desired Replicas')).toBeInTheDocument(); - expect(getByText('14')).toBeInTheDocument(); + expect(screen.getByText('dice-roller')).toBeInTheDocument(); + expect(screen.getByText('CHILD')).toBeInTheDocument(); + expect(screen.getByText('HorizontalPodAutoscaler')).toBeInTheDocument(); + expect(screen.getByText('YAML')).toBeInTheDocument(); + expect( + screen.getByText('Target CPU Utilization Percentage'), + ).toBeInTheDocument(); + expect(screen.getByText('50')).toBeInTheDocument(); + expect( + screen.getByText('Current CPU Utilization Percentage'), + ).toBeInTheDocument(); + expect(screen.getByText('30')).toBeInTheDocument(); + expect(screen.getByText('Min Replicas')).toBeInTheDocument(); + expect(screen.getByText('10')).toBeInTheDocument(); + expect(screen.getByText('Max Replicas')).toBeInTheDocument(); + expect(screen.getByText('15')).toBeInTheDocument(); + expect(screen.getByText('Current Replicas')).toBeInTheDocument(); + expect(screen.getByText('13')).toBeInTheDocument(); + expect(screen.getByText('Desired Replicas')).toBeInTheDocument(); + expect(screen.getByText('14')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.test.tsx b/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.test.tsx index f478278b02..8619e362b7 100644 --- a/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.test.tsx +++ b/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.test.tsx @@ -14,31 +14,29 @@ * limitations under the License. */ +import { renderInTestApp, textContentMatcher } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; import React from 'react'; -import { render } from '@testing-library/react'; -import * as ingresses from './__fixtures__/2-ingresses.json'; -import { textContentMatcher, wrapInTestApp } from '@backstage/test-utils'; import { IngressDrawer } from './IngressDrawer'; +import * as ingresses from './__fixtures__/2-ingresses.json'; describe('IngressDrawer', () => { it('should render ingress drawer', async () => { - const { getByText, getAllByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getAllByText('awesome-service')).toHaveLength(4); - expect(getByText('YAML')).toBeInTheDocument(); - expect(getByText('Rules')).toBeInTheDocument(); + expect(screen.getAllByText('awesome-service')).toHaveLength(4); + expect(screen.getByText('YAML')).toBeInTheDocument(); + expect(screen.getByText('Rules')).toBeInTheDocument(); expect( - getByText(textContentMatcher('Host: api.awesome-host.io')), + screen.getByText(textContentMatcher('Host: api.awesome-host.io')), ).toBeInTheDocument(); - expect(getAllByText(textContentMatcher('Service Port: 80'))).toHaveLength( - 2, - ); expect( - getAllByText(textContentMatcher('Service Name: awesome-service')), + screen.getAllByText(textContentMatcher('Service Port: 80')), + ).toHaveLength(2); + expect( + screen.getAllByText(textContentMatcher('Service Name: awesome-service')), ).toHaveLength(2); }); }); diff --git a/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.test.tsx b/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.test.tsx index d8b046b53f..9ed13c1703 100644 --- a/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.test.tsx +++ b/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.test.tsx @@ -15,9 +15,9 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import * as oneIngressFixture from './__fixtures__/2-ingresses.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { IngressesAccordions } from './IngressesAccordions'; import { kubernetesProviders } from '../../hooks/test-utils'; @@ -25,11 +25,9 @@ describe('IngressesAccordions', () => { it('should render 1 ingress', async () => { const wrapper = kubernetesProviders(oneIngressFixture, new Set()); - const { getByText } = render( - wrapper(wrapInTestApp()), - ); + await renderInTestApp(wrapper()); - expect(getByText('awesome-service')).toBeInTheDocument(); - expect(getByText('Ingress')).toBeInTheDocument(); + expect(screen.getByText('awesome-service')).toBeInTheDocument(); + expect(screen.getByText('Ingress')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/JobsAccordions/JobsAccordions.test.tsx b/plugins/kubernetes/src/components/JobsAccordions/JobsAccordions.test.tsx index ea16e933c6..857b472841 100644 --- a/plugins/kubernetes/src/components/JobsAccordions/JobsAccordions.test.tsx +++ b/plugins/kubernetes/src/components/JobsAccordions/JobsAccordions.test.tsx @@ -13,11 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { JobsAccordions } from './JobsAccordions'; import * as oneCronJobsFixture from '../../__fixtures__/1-cronjobs.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { kubernetesProviders } from '../../hooks/test-utils'; import { V1Job, ObjectSerializer } from '@kubernetes/client-node'; @@ -29,14 +30,16 @@ describe('JobsAccordions', () => { job => ObjectSerializer.deserialize(job, 'V1Job') as V1Job, ); - const { getByText } = render( - wrapper(wrapInTestApp()), - ); + await renderInTestApp(wrapper()); - expect(getByText('dice-roller-cronjob-1637028600')).toBeInTheDocument(); - expect(getByText('Running')).toBeInTheDocument(); + expect( + screen.getByText('dice-roller-cronjob-1637028600'), + ).toBeInTheDocument(); + expect(screen.getByText('Running')).toBeInTheDocument(); - expect(getByText('dice-roller-cronjob-1637025000')).toBeInTheDocument(); - expect(getByText('Succeeded')).toBeInTheDocument(); + expect( + screen.getByText('dice-roller-cronjob-1637025000'), + ).toBeInTheDocument(); + expect(screen.getByText('Succeeded')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/KubernetesContent.test.tsx b/plugins/kubernetes/src/components/KubernetesContent.test.tsx index ffa5358537..4c85298dba 100644 --- a/plugins/kubernetes/src/components/KubernetesContent.test.tsx +++ b/plugins/kubernetes/src/components/KubernetesContent.test.tsx @@ -15,8 +15,8 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { KubernetesContent } from './KubernetesContent'; import { useKubernetesObjects } from '../hooks'; @@ -32,22 +32,21 @@ describe('KubernetesContent', () => { }, error: undefined, }); - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('Your Clusters')).toBeInTheDocument(); + expect(screen.getByText('Your Clusters')).toBeInTheDocument(); // TODO add a prompt for the user to configure their clusters }); + it('render 1 cluster happy path', async () => { (useKubernetesObjects as any).mockReturnValue({ kubernetesObjects: { @@ -75,25 +74,24 @@ describe('KubernetesContent', () => { }, error: undefined, }); - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('cluster-1')).toBeInTheDocument(); - expect(getByText('Cluster')).toBeInTheDocument(); - expect(getByText('10 pods')).toBeInTheDocument(); - expect(getByText('No pods with errors')).toBeInTheDocument(); + expect(screen.getByText('cluster-1')).toBeInTheDocument(); + expect(screen.getByText('Cluster')).toBeInTheDocument(); + expect(screen.getByText('10 pods')).toBeInTheDocument(); + expect(screen.getByText('No pods with errors')).toBeInTheDocument(); }); + it('render 2 clusters happy path, one with errors', async () => { (useKubernetesObjects as any).mockReturnValue({ kubernetesObjects: { @@ -140,26 +138,24 @@ describe('KubernetesContent', () => { }, error: undefined, }); - const { getByText, getAllByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getAllByText('Cluster')).toHaveLength(2); - expect(getByText('cluster-a')).toBeInTheDocument(); - expect(getByText('10 pods')).toBeInTheDocument(); - expect(getByText('No pods with errors')).toBeInTheDocument(); + expect(screen.getAllByText('Cluster')).toHaveLength(2); + expect(screen.getByText('cluster-a')).toBeInTheDocument(); + expect(screen.getByText('10 pods')).toBeInTheDocument(); + expect(screen.getByText('No pods with errors')).toBeInTheDocument(); - expect(getAllByText('cluster-1')).toHaveLength(6); - expect(getByText('12 pods')).toBeInTheDocument(); - expect(getByText('2 pods with errors')).toBeInTheDocument(); + expect(screen.getAllByText('cluster-1')).toHaveLength(6); + expect(screen.getByText('12 pods')).toBeInTheDocument(); + expect(screen.getByText('2 pods with errors')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/Pods/PodDrawer/ContainerCard.test.tsx b/plugins/kubernetes/src/components/Pods/PodDrawer/ContainerCard.test.tsx index bdea9dd0be..b7729f8b5f 100644 --- a/plugins/kubernetes/src/components/Pods/PodDrawer/ContainerCard.test.tsx +++ b/plugins/kubernetes/src/components/Pods/PodDrawer/ContainerCard.test.tsx @@ -15,10 +15,10 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import '@testing-library/jest-dom'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { ContainerCard } from './ContainerCard'; import { DateTime } from 'luxon'; @@ -30,110 +30,106 @@ const twoHoursAgo = now.minus({ hours: 2 }).toISO(); describe('ContainerCard', () => { it('show healthy when all checks pass', async () => { - const { getByText, queryByText, getAllByText } = render( - wrapInTestApp( - , - ), + }, + } as any)} + />, ); - expect(getByText('Started: 1 hour ago')).toBeInTheDocument(); - expect(getByText('Status: Running')).toBeInTheDocument(); - expect(getByText('some-name')).toBeInTheDocument(); - expect(getByText('gcr.io/some-proj/some-image')).toBeInTheDocument(); - expect(getAllByText('✅')).toHaveLength(5); - expect(queryByText('❌')).toBeNull(); + expect(screen.getByText('Started: 1 hour ago')).toBeInTheDocument(); + expect(screen.getByText('Status: Running')).toBeInTheDocument(); + expect(screen.getByText('some-name')).toBeInTheDocument(); + expect(screen.getByText('gcr.io/some-proj/some-image')).toBeInTheDocument(); + expect(screen.getAllByText('✅')).toHaveLength(5); + expect(screen.queryByText('❌')).toBeNull(); }); + it('show unhealthy when all checks fail', async () => { - const { getByText, queryByText, getAllByText } = render( - wrapInTestApp( - , - ), + }, + } as any)} + />, ); - expect(getByText('some-name')).toBeInTheDocument(); - expect(getByText('gcr.io/some-proj/some-image')).toBeInTheDocument(); - expect(getAllByText('❌')).toHaveLength(5); - expect(queryByText('✅')).toBeNull(); + expect(screen.getByText('some-name')).toBeInTheDocument(); + expect(screen.getByText('gcr.io/some-proj/some-image')).toBeInTheDocument(); + expect(screen.getAllByText('❌')).toHaveLength(5); + expect(screen.queryByText('✅')).toBeNull(); }); + it('show correct checks for completed container', async () => { - const { getByText, queryByText, getAllByText } = render( - wrapInTestApp( - , - ), + }, + } as any)} + />, ); - expect(getByText('some-name')).toBeInTheDocument(); - expect(getByText('gcr.io/some-proj/some-image')).toBeInTheDocument(); - expect(getByText('Started: 2 hours ago')).toBeInTheDocument(); - expect(getByText('Completed: 1 hour ago')).toBeInTheDocument(); + expect(screen.getByText('some-name')).toBeInTheDocument(); + expect(screen.getByText('gcr.io/some-proj/some-image')).toBeInTheDocument(); + expect(screen.getByText('Started: 2 hours ago')).toBeInTheDocument(); + expect(screen.getByText('Completed: 1 hour ago')).toBeInTheDocument(); expect( - getByText('Execution time: 1 hour, 0 minutes, 0 seconds'), + screen.getByText('Execution time: 1 hour, 0 minutes, 0 seconds'), ).toBeInTheDocument(); - expect(getByText('Status: Completed')).toBeInTheDocument(); - expect(getAllByText('✅')).toHaveLength(2); - expect(queryByText('❌')).toBeNull(); + expect(screen.getByText('Status: Completed')).toBeInTheDocument(); + expect(screen.getAllByText('✅')).toHaveLength(2); + expect(screen.queryByText('❌')).toBeNull(); }); }); diff --git a/plugins/kubernetes/src/components/Pods/PodDrawer/PendingPodContent.test.tsx b/plugins/kubernetes/src/components/Pods/PodDrawer/PendingPodContent.test.tsx index 8896654696..8d562d4270 100644 --- a/plugins/kubernetes/src/components/Pods/PodDrawer/PendingPodContent.test.tsx +++ b/plugins/kubernetes/src/components/Pods/PodDrawer/PendingPodContent.test.tsx @@ -16,10 +16,10 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import '@testing-library/jest-dom'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { PendingPodContent } from './PendingPodContent'; import { IPodCondition } from 'kubernetes-models/v1'; import { DateTime } from 'luxon'; @@ -46,141 +46,141 @@ const podWithConditions = (conditions: IPodCondition[]): any => { describe('PendingPodContent', () => { it('show startup conditions - all healthy', async () => { const oneDayAgo = DateTime.now().minus({ days: 1 }).toISO()!; - const { getByText, queryByLabelText, queryAllByLabelText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('Pod is Pending. Conditions:')).toBeInTheDocument(); + expect(screen.getByText('Pod is Pending. Conditions:')).toBeInTheDocument(); - expect(getByText('Initialized - (1 day ago)')).toBeInTheDocument(); - expect(getByText('PodScheduled - (1 day ago)')).toBeInTheDocument(); - expect(getByText('ContainersReady - (1 day ago)')).toBeInTheDocument(); - expect(getByText('Ready - (1 day ago)')).toBeInTheDocument(); + expect(screen.getByText('Initialized - (1 day ago)')).toBeInTheDocument(); + expect(screen.getByText('PodScheduled - (1 day ago)')).toBeInTheDocument(); + expect( + screen.getByText('ContainersReady - (1 day ago)'), + ).toBeInTheDocument(); + expect(screen.getByText('Ready - (1 day ago)')).toBeInTheDocument(); - expect(queryAllByLabelText('Status ok')).toHaveLength(4); - expect(queryByLabelText('Status warning')).not.toBeInTheDocument(); - expect(queryByLabelText('Status error')).not.toBeInTheDocument(); + expect(screen.queryAllByLabelText('Status ok')).toHaveLength(4); + expect(screen.queryByLabelText('Status warning')).not.toBeInTheDocument(); + expect(screen.queryByLabelText('Status error')).not.toBeInTheDocument(); }); + it('show startup conditions - all fail', async () => { const oneHourAgo = DateTime.now().minus({ hours: 1 }).toISO()!; - const { getByText, queryByLabelText, queryAllByLabelText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('Pod is Pending. Conditions:')).toBeInTheDocument(); + expect(screen.getByText('Pod is Pending. Conditions:')).toBeInTheDocument(); expect( - getByText( + screen.getByText( 'Initialized - (InitializedFailureReason 1 hour ago) - reason why Initialized failed', ), ).toBeInTheDocument(); expect( - getByText( + screen.getByText( 'PodScheduled - (PodScheduledFailureReason 1 hour ago) - reason why PodScheduled failed', ), ).toBeInTheDocument(); expect( - getByText( + screen.getByText( 'ContainersReady - (ContainersReadyFailureReason 1 hour ago) - reason why ContainersReady failed', ), ).toBeInTheDocument(); expect( - getByText( + screen.getByText( 'Ready - (ReadyFailureReason 1 hour ago) - reason why Ready failed', ), ).toBeInTheDocument(); - expect(queryByLabelText('Status ok')).not.toBeInTheDocument(); - expect(queryByLabelText('Status warning')).not.toBeInTheDocument(); - expect(queryAllByLabelText('Status error')).toHaveLength(4); + expect(screen.queryByLabelText('Status ok')).not.toBeInTheDocument(); + expect(screen.queryByLabelText('Status warning')).not.toBeInTheDocument(); + expect(screen.queryAllByLabelText('Status error')).toHaveLength(4); }); + it('show startup conditions - show unknown', async () => { const oneHourAgo = DateTime.now().minus({ hours: 1 }).toISO()!; - const { getByText, queryByLabelText, getByLabelText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('Pod is Pending. Conditions:')).toBeInTheDocument(); + expect(screen.getByText('Pod is Pending. Conditions:')).toBeInTheDocument(); expect( - getByText('Initialized - (1 hour ago) dont know what is happening'), + screen.getByText( + 'Initialized - (1 hour ago) dont know what is happening', + ), ).toBeInTheDocument(); - expect(queryByLabelText('Status ok')).not.toBeInTheDocument(); - expect(getByLabelText('Status warning')).toBeInTheDocument(); - expect(queryByLabelText('Status error')).not.toBeInTheDocument(); + expect(screen.queryByLabelText('Status ok')).not.toBeInTheDocument(); + expect(screen.getByLabelText('Status warning')).toBeInTheDocument(); + expect(screen.queryByLabelText('Status error')).not.toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.test.tsx b/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.test.tsx index 393b834392..0822aeb060 100644 --- a/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.test.tsx +++ b/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.test.tsx @@ -16,11 +16,11 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { TestApiProvider, renderInTestApp } from '@backstage/test-utils'; import '@testing-library/jest-dom'; -import { PodDrawer } from '.'; +import { PodDrawer } from './PodDrawer'; import { DiscoveryApi, discoveryApiRef } from '@backstage/core-plugin-api'; jest.mock('../../../hooks/useIsPodExecTerminalSupported'); @@ -31,69 +31,67 @@ describe('PodDrawer', () => { getBaseUrl: () => Promise.resolve('http://localhost'), }; - const { getAllByText, getByText } = render( - wrapInTestApp( - - + - , - ), + errors: [ + { + type: 'some-error', + severity: 10, + message: 'some error message', + occurrenceCount: 1, + sourceRef: { + name: 'some-pod', + namespace: 'some-namespace', + kind: 'Pod', + apiGroup: 'v1', + }, + proposedFix: [ + { + type: 'logs', + container: 'some-container', + errorType: 'some error type', + rootCauseExplanation: 'some root cause', + actions: ['fix1', 'fix2'], + }, + ], + }, + ], + }, + } as any)} + /> + , ); - expect(getAllByText('some-pod')).toHaveLength(3); - expect(getByText('Pod (127.0.0.1)')).toBeInTheDocument(); - expect(getByText('YAML')).toBeInTheDocument(); - expect(getByText('Containers')).toBeInTheDocument(); - expect(getByText('some-container')).toBeInTheDocument(); - expect(getByText('some error message')).toBeInTheDocument(); + expect(screen.getAllByText('some-pod')).toHaveLength(3); + expect(screen.getByText('Pod (127.0.0.1)')).toBeInTheDocument(); + expect(screen.getByText('YAML')).toBeInTheDocument(); + expect(screen.getByText('Containers')).toBeInTheDocument(); + expect(screen.getByText('some-container')).toBeInTheDocument(); + expect(screen.getByText('some error message')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/Pods/PodsTable.test.tsx b/plugins/kubernetes/src/components/Pods/PodsTable.test.tsx index 35402527f8..fe67de7049 100644 --- a/plugins/kubernetes/src/components/Pods/PodsTable.test.tsx +++ b/plugins/kubernetes/src/components/Pods/PodsTable.test.tsx @@ -15,52 +15,49 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import * as pod from './__fixtures__/pod.json'; import * as crashingPod from './__fixtures__/crashing-pod.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { PodsTable, READY_COLUMNS, RESOURCE_COLUMNS } from './PodsTable'; import { kubernetesProviders } from '../../hooks/test-utils'; import { ClientPodStatus } from '@backstage/plugin-kubernetes-common'; describe('PodsTable', () => { it('should render pod', async () => { - const { getByText } = render( - wrapInTestApp(), - ); + await renderInTestApp(); // titles - expect(getByText('name')).toBeInTheDocument(); - expect(getByText('phase')).toBeInTheDocument(); - expect(getByText('status')).toBeInTheDocument(); + expect(screen.getByText('name')).toBeInTheDocument(); + expect(screen.getByText('phase')).toBeInTheDocument(); + expect(screen.getByText('status')).toBeInTheDocument(); // values - expect(getByText('dice-roller-6c8646bfd-2m5hv')).toBeInTheDocument(); - expect(getByText('Running')).toBeInTheDocument(); - expect(getByText('OK')).toBeInTheDocument(); + expect(screen.getByText('dice-roller-6c8646bfd-2m5hv')).toBeInTheDocument(); + expect(screen.getByText('Running')).toBeInTheDocument(); + expect(screen.getByText('OK')).toBeInTheDocument(); }); it('should render pod with extra columns', async () => { - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); // titles - expect(getByText('name')).toBeInTheDocument(); - expect(getByText('phase')).toBeInTheDocument(); - expect(getByText('containers ready')).toBeInTheDocument(); - expect(getByText('total restarts')).toBeInTheDocument(); - expect(getByText('status')).toBeInTheDocument(); + expect(screen.getByText('name')).toBeInTheDocument(); + expect(screen.getByText('phase')).toBeInTheDocument(); + expect(screen.getByText('containers ready')).toBeInTheDocument(); + expect(screen.getByText('total restarts')).toBeInTheDocument(); + expect(screen.getByText('status')).toBeInTheDocument(); // values - expect(getByText('dice-roller-6c8646bfd-2m5hv')).toBeInTheDocument(); - expect(getByText('Running')).toBeInTheDocument(); - expect(getByText('1/1')).toBeInTheDocument(); - expect(getByText('0')).toBeInTheDocument(); - expect(getByText('OK')).toBeInTheDocument(); + expect(screen.getByText('dice-roller-6c8646bfd-2m5hv')).toBeInTheDocument(); + expect(screen.getByText('Running')).toBeInTheDocument(); + expect(screen.getByText('1/1')).toBeInTheDocument(); + expect(screen.getByText('0')).toBeInTheDocument(); + expect(screen.getByText('OK')).toBeInTheDocument(); }); + it('should render pod, with metrics context', async () => { const clusterToClientPodStatus = new Map(); @@ -93,37 +90,36 @@ describe('PodsTable', () => { name: 'some-cluster', }, ); - const { getByText } = render( + await renderInTestApp( wrapper( - wrapInTestApp( - , - ), + , ), ); // titles - expect(getByText('name')).toBeInTheDocument(); - expect(getByText('phase')).toBeInTheDocument(); - expect(getByText('containers ready')).toBeInTheDocument(); - expect(getByText('total restarts')).toBeInTheDocument(); - expect(getByText('status')).toBeInTheDocument(); - expect(getByText('CPU usage %')).toBeInTheDocument(); - expect(getByText('Memory usage %')).toBeInTheDocument(); + expect(screen.getByText('name')).toBeInTheDocument(); + expect(screen.getByText('phase')).toBeInTheDocument(); + expect(screen.getByText('containers ready')).toBeInTheDocument(); + expect(screen.getByText('total restarts')).toBeInTheDocument(); + expect(screen.getByText('status')).toBeInTheDocument(); + expect(screen.getByText('CPU usage %')).toBeInTheDocument(); + expect(screen.getByText('Memory usage %')).toBeInTheDocument(); // values - expect(getByText('dice-roller-6c8646bfd-2m5hv')).toBeInTheDocument(); - expect(getByText('Running')).toBeInTheDocument(); - expect(getByText('1/1')).toBeInTheDocument(); - expect(getByText('0')).toBeInTheDocument(); - expect(getByText('OK')).toBeInTheDocument(); - expect(getByText('requests: 99% of 50m')).toBeInTheDocument(); - expect(getByText('limits: 99% of 50m')).toBeInTheDocument(); - expect(getByText('requests: 1% of 64MiB')).toBeInTheDocument(); - expect(getByText('limits: 0% of 128MiB')).toBeInTheDocument(); + expect(screen.getByText('dice-roller-6c8646bfd-2m5hv')).toBeInTheDocument(); + expect(screen.getByText('Running')).toBeInTheDocument(); + expect(screen.getByText('1/1')).toBeInTheDocument(); + expect(screen.getByText('0')).toBeInTheDocument(); + expect(screen.getByText('OK')).toBeInTheDocument(); + expect(screen.getByText('requests: 99% of 50m')).toBeInTheDocument(); + expect(screen.getByText('limits: 99% of 50m')).toBeInTheDocument(); + expect(screen.getByText('requests: 1% of 64MiB')).toBeInTheDocument(); + expect(screen.getByText('limits: 0% of 128MiB')).toBeInTheDocument(); }); + it('should render placeholder when empty metrics context', async () => { const podNameToClientPodStatus = new Map(); @@ -132,60 +128,54 @@ describe('PodsTable', () => { undefined, podNameToClientPodStatus, ); - const { getByText, getAllByText } = render( + await renderInTestApp( wrapper( - wrapInTestApp( - , - ), - ), - ); - - // titles - expect(getByText('name')).toBeInTheDocument(); - expect(getByText('phase')).toBeInTheDocument(); - expect(getByText('containers ready')).toBeInTheDocument(); - expect(getByText('total restarts')).toBeInTheDocument(); - expect(getByText('status')).toBeInTheDocument(); - expect(getByText('CPU usage %')).toBeInTheDocument(); - expect(getByText('Memory usage %')).toBeInTheDocument(); - - // values - expect(getByText('dice-roller-6c8646bfd-2m5hv')).toBeInTheDocument(); - expect(getByText('Running')).toBeInTheDocument(); - expect(getByText('1/1')).toBeInTheDocument(); - expect(getByText('0')).toBeInTheDocument(); - expect(getByText('OK')).toBeInTheDocument(); - expect(getAllByText('unknown')).toHaveLength(2); - }); - it('should render crashing pod with extra columns', async () => { - const { getByText, getAllByText } = render( - wrapInTestApp( , ), ); // titles - expect(getByText('name')).toBeInTheDocument(); - expect(getByText('phase')).toBeInTheDocument(); - expect(getByText('containers ready')).toBeInTheDocument(); - expect(getByText('total restarts')).toBeInTheDocument(); - expect(getByText('status')).toBeInTheDocument(); + expect(screen.getByText('name')).toBeInTheDocument(); + expect(screen.getByText('phase')).toBeInTheDocument(); + expect(screen.getByText('containers ready')).toBeInTheDocument(); + expect(screen.getByText('total restarts')).toBeInTheDocument(); + expect(screen.getByText('status')).toBeInTheDocument(); + expect(screen.getByText('CPU usage %')).toBeInTheDocument(); + expect(screen.getByText('Memory usage %')).toBeInTheDocument(); + + // values + expect(screen.getByText('dice-roller-6c8646bfd-2m5hv')).toBeInTheDocument(); + expect(screen.getByText('Running')).toBeInTheDocument(); + expect(screen.getByText('1/1')).toBeInTheDocument(); + expect(screen.getByText('0')).toBeInTheDocument(); + expect(screen.getByText('OK')).toBeInTheDocument(); + expect(screen.getAllByText('unknown')).toHaveLength(2); + }); + + it('should render crashing pod with extra columns', async () => { + await renderInTestApp( + , + ); + + // titles + expect(screen.getByText('name')).toBeInTheDocument(); + expect(screen.getByText('phase')).toBeInTheDocument(); + expect(screen.getByText('containers ready')).toBeInTheDocument(); + expect(screen.getByText('total restarts')).toBeInTheDocument(); + expect(screen.getByText('status')).toBeInTheDocument(); // values expect( - getByText('dice-roller-canary-7d64cd756c-55rfq'), + screen.getByText('dice-roller-canary-7d64cd756c-55rfq'), ).toBeInTheDocument(); - expect(getByText('Running')).toBeInTheDocument(); - expect(getByText('1/3')).toBeInTheDocument(); - expect(getByText('76')).toBeInTheDocument(); - expect(getByText('Container: side-car')).toBeInTheDocument(); - expect(getByText('Container: other-side-car')).toBeInTheDocument(); - expect(getAllByText('CrashLoopBackOff')).toHaveLength(2); + expect(screen.getByText('Running')).toBeInTheDocument(); + expect(screen.getByText('1/3')).toBeInTheDocument(); + expect(screen.getByText('76')).toBeInTheDocument(); + expect(screen.getByText('Container: side-car')).toBeInTheDocument(); + expect(screen.getByText('Container: other-side-car')).toBeInTheDocument(); + expect(screen.getAllByText('CrashLoopBackOff')).toHaveLength(2); }); }); diff --git a/plugins/kubernetes/src/components/ResourceUtilization/ResourceUtilization.test.tsx b/plugins/kubernetes/src/components/ResourceUtilization/ResourceUtilization.test.tsx index 60087022a5..6357e98aff 100644 --- a/plugins/kubernetes/src/components/ResourceUtilization/ResourceUtilization.test.tsx +++ b/plugins/kubernetes/src/components/ResourceUtilization/ResourceUtilization.test.tsx @@ -15,40 +15,37 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { ResourceUtilization } from './ResourceUtilization'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; describe('ResourceUtilization', () => { it('should render utilization', async () => { - const { getByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('some-title: 15%')).toBeInTheDocument(); - expect(getByText('usage: 10%')).toBeInTheDocument(); + expect(screen.getByText('some-title: 15%')).toBeInTheDocument(); + expect(screen.getByText('usage: 10%')).toBeInTheDocument(); }); + it('no usage when compressed', async () => { - const { getByText, queryByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getByText('some-title: 15%')).toBeInTheDocument(); - expect(queryByText('usage: 10%')).toBeNull(); + expect(screen.getByText('some-title: 15%')).toBeInTheDocument(); + expect(screen.queryByText('usage: 10%')).toBeNull(); }); }); diff --git a/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.test.tsx b/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.test.tsx index 7eb51f073b..dda5e300eb 100644 --- a/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.test.tsx +++ b/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.test.tsx @@ -15,29 +15,27 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import * as services from './__fixtures__/2-services.json'; -import { textContentMatcher, wrapInTestApp } from '@backstage/test-utils'; +import { textContentMatcher, renderInTestApp } from '@backstage/test-utils'; import { ServiceDrawer } from './ServiceDrawer'; describe('ServiceDrawer', () => { it('should render deployment drawer', async () => { - const { getByText, getAllByText } = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(getAllByText('awesome-service-grpc')).toHaveLength(2); - expect(getAllByText('Service')).toHaveLength(2); - expect(getByText('YAML')).toBeInTheDocument(); - expect(getByText('Cluster IP')).toBeInTheDocument(); - expect(getByText('Ports')).toBeInTheDocument(); + expect(screen.getAllByText('awesome-service-grpc')).toHaveLength(2); + expect(screen.getAllByText('Service')).toHaveLength(2); + expect(screen.getByText('YAML')).toBeInTheDocument(); + expect(screen.getByText('Cluster IP')).toBeInTheDocument(); + expect(screen.getByText('Ports')).toBeInTheDocument(); expect( - getByText(textContentMatcher('Target Port: 1997')), + screen.getByText(textContentMatcher('Target Port: 1997')), ).toBeInTheDocument(); expect( - getByText(textContentMatcher('App: awesome-service')), + screen.getByText(textContentMatcher('App: awesome-service')), ).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.test.tsx b/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.test.tsx index 0aa0c27794..a86a3d6fda 100644 --- a/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.test.tsx +++ b/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.test.tsx @@ -15,9 +15,9 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import * as twoDeployFixture from './__fixtures__/2-services.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { ServicesAccordions } from './ServicesAccordions'; import { kubernetesProviders } from '../../hooks/test-utils'; @@ -25,14 +25,12 @@ describe('ServicesAccordions', () => { it('should render 2 services', async () => { const wrapper = kubernetesProviders(twoDeployFixture, new Set()); - const { getByText } = render( - wrapper(wrapInTestApp()), - ); + await renderInTestApp(wrapper()); - expect(getByText('awesome-service-grpc')).toBeInTheDocument(); - expect(getByText('Type: ClusterIP')).toBeInTheDocument(); + expect(screen.getByText('awesome-service-grpc')).toBeInTheDocument(); + expect(screen.getByText('Type: ClusterIP')).toBeInTheDocument(); - expect(getByText('awesome-service-pg')).toBeInTheDocument(); - expect(getByText('Type: ExternalName')).toBeInTheDocument(); + expect(screen.getByText('awesome-service-pg')).toBeInTheDocument(); + expect(screen.getByText('Type: ExternalName')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetsAccordions.test.tsx b/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetsAccordions.test.tsx index 158727108e..f16335321f 100644 --- a/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetsAccordions.test.tsx +++ b/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetsAccordions.test.tsx @@ -15,10 +15,10 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { StatefulSetsAccordions } from './StatefulSetsAccordions'; import * as twoStatefulSetsFixture from '../../__fixtures__/2-statefulsets.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { kubernetesProviders } from '../../hooks/test-utils'; describe('StatefulSetsAccordions', () => { @@ -28,18 +28,16 @@ describe('StatefulSetsAccordions', () => { new Set(['dice-roller-canary-7d64cd756c-vtbdx']), ); - const { getByText, getAllByText } = render( - wrapper(wrapInTestApp()), - ); + await renderInTestApp(wrapper()); - expect(getByText('dice-roller')).toBeInTheDocument(); - expect(getByText('10 pods')).toBeInTheDocument(); - expect(getByText('No pods with errors')).toBeInTheDocument(); + expect(screen.getByText('dice-roller')).toBeInTheDocument(); + expect(screen.getByText('10 pods')).toBeInTheDocument(); + expect(screen.getByText('No pods with errors')).toBeInTheDocument(); - expect(getByText('dice-roller-canary')).toBeInTheDocument(); - expect(getByText('2 pods')).toBeInTheDocument(); - expect(getByText('1 pod with errors')).toBeInTheDocument(); + expect(screen.getByText('dice-roller-canary')).toBeInTheDocument(); + expect(screen.getByText('2 pods')).toBeInTheDocument(); + expect(screen.getByText('1 pod with errors')).toBeInTheDocument(); - expect(getAllByText('namespace: default')).toHaveLength(2); + expect(screen.getAllByText('namespace: default')).toHaveLength(2); }); }); diff --git a/plugins/lighthouse/src/components/AuditList/AuditListTable.test.tsx b/plugins/lighthouse/src/components/AuditList/AuditListTable.test.tsx index 45889a2cd3..f6c35020b0 100644 --- a/plugins/lighthouse/src/components/AuditList/AuditListTable.test.tsx +++ b/plugins/lighthouse/src/components/AuditList/AuditListTable.test.tsx @@ -15,9 +15,9 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { - wrapInTestApp, + renderInTestApp, setupRequestMockHandlers, TestApiRegistry, } from '@backstage/test-utils'; @@ -56,9 +56,9 @@ describe('AuditListTable', () => { ); }; - it('renders the link to each website', () => { - const rendered = render(wrapInTestApp(auditList(websiteListResponse))); - const link = rendered.queryByText('https://anchor.fm'); + it('renders the link to each website', async () => { + await renderInTestApp(auditList(websiteListResponse)); + const link = screen.queryByText('https://anchor.fm'); const website = websiteListResponse.items.find( w => w.url === 'https://anchor.fm', ); @@ -68,34 +68,34 @@ describe('AuditListTable', () => { expect(link).toHaveAttribute('href', `/audit/${website.lastAudit.id}`); }); - it('renders the dates that are available for a given row', () => { - const rendered = render(wrapInTestApp(auditList(websiteListResponse))); + it('renders the dates that are available for a given row', async () => { + await renderInTestApp(auditList(websiteListResponse)); const website = websiteListResponse.items.find( w => w.url === 'https://anchor.fm', ); if (!website) throw new Error('https://anchor.fm must be present in fixture'); expect( - rendered.getByText(formatTime(website.lastAudit.timeCreated)), + screen.getByText(formatTime(website.lastAudit.timeCreated)), ).toBeInTheDocument(); }); it('renders the status for a given row', async () => { - const rendered = render(wrapInTestApp(auditList(websiteListResponse))); + await renderInTestApp(auditList(websiteListResponse)); - const completed = await rendered.findAllByText('COMPLETED'); + const completed = await screen.findAllByText('COMPLETED'); expect(completed).toHaveLength( websiteListResponse.items.filter(w => w.lastAudit.status === 'COMPLETED') .length, ); - const failed = await rendered.findAllByText('FAILED'); + const failed = await screen.findAllByText('FAILED'); expect(failed).toHaveLength( websiteListResponse.items.filter(w => w.lastAudit.status === 'FAILED') .length, ); - const running = await rendered.findAllByText('FAILED'); + const running = await screen.findAllByText('FAILED'); expect(running).toHaveLength( websiteListResponse.items.filter(w => w.lastAudit.status === 'RUNNING') .length, @@ -103,17 +103,17 @@ describe('AuditListTable', () => { }); describe('sparklines', () => { - it('correctly maps the data from the website payload', () => { - const rendered = render(wrapInTestApp(auditList(websiteListResponse))); - const backstageSEO = rendered.getByTitle( + it('correctly maps the data from the website payload', async () => { + await renderInTestApp(auditList(websiteListResponse)); + const backstageSEO = screen.getByTitle( 'trendline for SEO category of https://backstage.io', ); expect(backstageSEO).toBeInTheDocument(); }); - it('does not break when no data is available', () => { - const rendered = render(wrapInTestApp(auditList(websiteListResponse))); - const anchorSEO = rendered.queryByTitle( + it('does not break when no data is available', async () => { + await renderInTestApp(auditList(websiteListResponse)); + const anchorSEO = screen.queryByTitle( 'trendline for SEO category of https://anchor.fm', ); expect(anchorSEO).not.toBeInTheDocument(); diff --git a/plugins/lighthouse/src/components/AuditList/index.test.tsx b/plugins/lighthouse/src/components/AuditList/index.test.tsx index 55bde9aebd..204a181df3 100644 --- a/plugins/lighthouse/src/components/AuditList/index.test.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.test.tsx @@ -26,9 +26,9 @@ jest.mock('react-router-dom', () => { import { setupRequestMockHandlers, TestApiRegistry, - wrapInTestApp, + renderInTestApp, } from '@backstage/test-utils'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, screen } from '@testing-library/react'; import { rest } from 'msw'; import { setupServer } from 'msw/node'; import React from 'react'; @@ -59,40 +59,34 @@ describe('AuditList', () => { it('should render the table', async () => { server.use(rest.get('*', (_req, res, ctx) => res(ctx.json(data)))); - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - const element = await rendered.findByText('https://anchor.fm'); + const element = await screen.findByText('https://anchor.fm'); expect(element).toBeInTheDocument(); }); it('renders a button to create a new audit', async () => { - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - const button = await rendered.findByText('Create Audit'); + const button = await screen.findByText('Create Audit'); expect(button).toBeInTheDocument(); }); describe('pagination', () => { describe('when only one page is needed', () => { - it('hides pagination elements', () => { - const rendered = render( - wrapInTestApp( - - - , - ), + it('hides pagination elements', async () => { + await renderInTestApp( + + + , ); - expect(rendered.queryByLabelText(/Go to page/)).not.toBeInTheDocument(); + expect(screen.queryByLabelText(/Go to page/)).not.toBeInTheDocument(); }); }); @@ -107,28 +101,22 @@ describe('AuditList', () => { }); it('shows pagination elements', async () => { - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - expect( - await rendered.findByLabelText(/Go to page/), - ).toBeInTheDocument(); + expect(await screen.findByLabelText(/Go to page/)).toBeInTheDocument(); }); it('changes the page on click', async () => { - const rendered = render( - wrapInTestApp( - - - , - { routeEntries: ['?page=2'] }, - ), + await renderInTestApp( + + + , + { routeEntries: ['?page=2'] }, ); - const element = await rendered.findByLabelText(/Go to page 1/); + const element = await screen.findByLabelText(/Go to page 1/); fireEvent.click(element); expect(useNavigate()).toHaveBeenCalledWith(`?page=1`); @@ -139,14 +127,12 @@ describe('AuditList', () => { describe('when waiting on the request', () => { it('should render the loader', async () => { server.use(rest.get('*', (_req, res, ctx) => res(ctx.delay(20000)))); - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - const element = await rendered.findByTestId('progress'); + const element = await screen.findByTestId('progress'); expect(element).toBeInTheDocument(); }); }); @@ -158,14 +144,12 @@ describe('AuditList', () => { res(ctx.status(500, 'something broke')), ), ); - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - const element = await rendered.findByText(/Could not load audit list./); + const element = await screen.findByText(/Could not load audit list./); expect(element).toBeInTheDocument(); }); }); diff --git a/plugins/lighthouse/src/components/AuditView/index.test.tsx b/plugins/lighthouse/src/components/AuditView/index.test.tsx index 7e7d8e4b7d..5b38a388ab 100644 --- a/plugins/lighthouse/src/components/AuditView/index.test.tsx +++ b/plugins/lighthouse/src/components/AuditView/index.test.tsx @@ -32,9 +32,9 @@ import { setupRequestMockHandlers, TestApiProvider, TestApiRegistry, - wrapInTestApp, + renderInTestApp, } from '@backstage/test-utils'; -import { render } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { rest } from 'msw'; import { setupServer } from 'msw/node'; import React from 'react'; @@ -79,16 +79,14 @@ describe('AuditView', () => { }); it('renders the iframe for the selected audit', async () => { - const rendered = render( - wrapInTestApp( - - - , - testAppOptions, - ), + await renderInTestApp( + + + , + testAppOptions, ); - const iframe = await rendered.findByTitle( + const iframe = await screen.findByTitle( 'Lighthouse audit for https://spotify.com', ); expect(iframe).toBeInTheDocument(); @@ -97,38 +95,32 @@ describe('AuditView', () => { describe('sidebar', () => { it('renders a list of all audits for the website', async () => { - const rendered = render( - wrapInTestApp( - - - , - testAppOptions, - ), + await renderInTestApp( + + + , + testAppOptions, ); - await rendered.findByTestId('audit-sidebar'); + await screen.findByTestId('audit-sidebar'); websiteResponse.audits.forEach(a => { - expect( - rendered.getByText(formatTime(a.timeCreated)), - ).toBeInTheDocument(); + expect(screen.getByText(formatTime(a.timeCreated))).toBeInTheDocument(); }); }); it('sets the current audit as active', async () => { - const rendered = render( - wrapInTestApp( - - - , - testAppOptions, - ), + await renderInTestApp( + + + , + testAppOptions, ); - await rendered.findByTestId('audit-sidebar'); + await screen.findByTestId('audit-sidebar'); const audit = websiteResponse.audits.find(a => a.id === id) as Audit; - const auditElement = rendered.getByText(formatTime(audit.timeCreated)); + const auditElement = screen.getByText(formatTime(audit.timeCreated)); expect(auditElement.parentElement?.parentElement?.className).toContain( 'selected', ); @@ -136,7 +128,7 @@ describe('AuditView', () => { const notSelectedAudit = websiteResponse.audits.find( a => a.id !== id, ) as Audit; - const notSelectedAuditElement = rendered.getByText( + const notSelectedAuditElement = screen.getByText( formatTime(notSelectedAudit.timeCreated), ); expect( @@ -145,20 +137,18 @@ describe('AuditView', () => { }); it('navigates to the next report when an audit is clicked', async () => { - const rendered = render( - wrapInTestApp( - - - , - testAppOptions, - ), + await renderInTestApp( + + + , + testAppOptions, ); - await rendered.findByTestId('audit-sidebar'); + await screen.findByTestId('audit-sidebar'); websiteResponse.audits.forEach(a => { expect( - rendered.getByText(formatTime(a.timeCreated)).parentElement + screen.getByText(formatTime(a.timeCreated)).parentElement ?.parentElement, ).toHaveAttribute('href', `/audit/${a.id}`); }); @@ -168,27 +158,25 @@ describe('AuditView', () => { const configApiMock = new ConfigReader({ app: { baseUrl: `http://localhost:3000/example` }, }); - const rendered = render( - wrapInTestApp( - - - , - { - mountedRoutes: { [`/example/lighthouse`]: rootRouteRef }, - }, - ), + await renderInTestApp( + + + , + { + mountedRoutes: { [`/example/lighthouse`]: rootRouteRef }, + }, ); - await rendered.findByTestId('audit-sidebar'); + await screen.findByTestId('audit-sidebar'); websiteResponse.audits.forEach(a => { expect( - rendered.getByText(formatTime(a.timeCreated)).parentElement + screen.getByText(formatTime(a.timeCreated)).parentElement ?.parentElement, ).toHaveAttribute('href', `/example/lighthouse/audit/${a.id}`); }); @@ -198,15 +186,13 @@ describe('AuditView', () => { describe('when the request for the website by id is pending', () => { it('shows the loading', async () => { server.use(rest.get('*', (_req, res, ctx) => res(ctx.delay(20000)))); - const rendered = render( - wrapInTestApp( - - - , - testAppOptions, - ), + await renderInTestApp( + + + , + testAppOptions, ); - expect(await rendered.findByTestId('progress')).toBeInTheDocument(); + expect(await screen.findByTestId('progress')).toBeInTheDocument(); }); }); @@ -217,15 +203,13 @@ describe('AuditView', () => { res(ctx.status(500), ctx.body('failed to fetch')), ), ); - const rendered = render( - wrapInTestApp( - - - , - testAppOptions, - ), + await renderInTestApp( + + + , + testAppOptions, ); - expect(await rendered.findByText(/failed to fetch/)).toBeInTheDocument(); + expect(await screen.findByText(/failed to fetch/)).toBeInTheDocument(); }); }); @@ -235,18 +219,16 @@ describe('AuditView', () => { ?.id as string; useParams.mockReturnValueOnce({ id }); - const rendered = render( - wrapInTestApp( - - - , - testAppOptions, - ), + await renderInTestApp( + + + , + testAppOptions, ); - await rendered.findByTestId('audit-sidebar'); + await screen.findByTestId('audit-sidebar'); - expect(rendered.getByTestId('progress')).toBeInTheDocument(); + expect(screen.getByTestId('progress')).toBeInTheDocument(); }); }); @@ -256,18 +238,16 @@ describe('AuditView', () => { ?.id as string; useParams.mockReturnValueOnce({ id }); - const rendered = render( - wrapInTestApp( - - - , - testAppOptions, - ), + await renderInTestApp( + + + , + testAppOptions, ); - await rendered.findByTestId('audit-sidebar'); + await screen.findByTestId('audit-sidebar'); - expect(rendered.getByText(/This audit failed/)).toBeInTheDocument(); + expect(screen.getByText(/This audit failed/)).toBeInTheDocument(); }); }); }); diff --git a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx index 1b394a30f0..279fc0fb64 100644 --- a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx +++ b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx @@ -26,9 +26,9 @@ jest.mock('react-router-dom', () => { import { setupRequestMockHandlers, TestApiRegistry, - wrapInTestApp, + renderInTestApp, } from '@backstage/test-utils'; -import { fireEvent, render, waitFor } from '@testing-library/react'; +import { fireEvent, screen, waitFor } from '@testing-library/react'; import { rest } from 'msw'; import { setupServer } from 'msw/node'; import React from 'react'; @@ -59,55 +59,49 @@ describe('CreateAudit', () => { ); }); - it('renders the form', () => { - const rendered = render( - wrapInTestApp( - - - , - ), + it('renders the form', async () => { + await renderInTestApp( + + + , ); - expect(rendered.getByLabelText(/URL/)).toBeEnabled(); - expect(rendered.getByLabelText(/URL/)).toHaveAttribute('value', ''); - expect(rendered.getByText(/Create Audit/)).toBeEnabled(); + expect(screen.getByLabelText(/URL/)).toBeEnabled(); + expect(screen.getByLabelText(/URL/)).toHaveAttribute('value', ''); + expect(screen.getByText(/Create Audit/)).toBeEnabled(); }); describe('when the location contains a url', () => { - it('prefills the url into the form', () => { + it('prefills the url into the form', async () => { const url = 'https://spotify.com'; - const rendered = render( - wrapInTestApp( - - - , - { - routeEntries: [`/create-audit?url=${encodeURIComponent(url)}`], - }, - ), + await renderInTestApp( + + + , + { + routeEntries: [`/create-audit?url=${encodeURIComponent(url)}`], + }, ); - expect(rendered.getByLabelText(/URL/)).toHaveAttribute('value', url); + expect(screen.getByLabelText(/URL/)).toHaveAttribute('value', url); }); }); describe('when waiting on the request', () => { - it('disables the form fields', () => { + it('disables the form fields', async () => { server.use(rest.get('*', (_req, res, ctx) => res(ctx.delay(20000)))); - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - fireEvent.change(rendered.getByLabelText(/URL/), { + fireEvent.change(screen.getByLabelText(/URL/), { target: { value: 'https://spotify.com' }, }); - fireEvent.click(rendered.getByText(/Create Audit/)); + fireEvent.click(screen.getByText(/Create Audit/)); - expect(rendered.getByLabelText(/URL/)).toBeDisabled(); - expect(rendered.getByText(/Create Audit/).parentElement).toBeDisabled(); + expect(screen.getByLabelText(/URL/)).toBeDisabled(); + expect(screen.getByText(/Create Audit/).parentElement).toBeDisabled(); }); }); @@ -121,18 +115,16 @@ describe('CreateAudit', () => { }), ); - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - fireEvent.change(rendered.getByLabelText(/URL/), { + fireEvent.change(screen.getByLabelText(/URL/), { target: { value: 'https://spotify.com' }, }); - fireEvent.click(rendered.getByText(/Create Audit/)); + fireEvent.click(screen.getByText(/Create Audit/)); await waitFor(() => expect(triggerAuditPayload).toMatchObject({ @@ -155,20 +147,18 @@ describe('CreateAudit', () => { }), ); - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - fireEvent.change(rendered.getByLabelText(/URL/), { + fireEvent.change(screen.getByLabelText(/URL/), { target: { value: 'https://spotify.com' }, }); - fireEvent.mouseDown(rendered.getByText(/Mobile/)); - fireEvent.click(rendered.getByText(/Desktop/)); - fireEvent.click(rendered.getByText(/Create Audit/)); + fireEvent.mouseDown(screen.getByText(/Mobile/)); + fireEvent.click(screen.getByText(/Desktop/)); + fireEvent.click(screen.getByText(/Create Audit/)); await waitFor(() => expect(triggerAuditPayload).toMatchObject({ @@ -202,20 +192,18 @@ describe('CreateAudit', () => { ), ); - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - fireEvent.change(rendered.getByLabelText(/URL/), { + fireEvent.change(screen.getByLabelText(/URL/), { target: { value: 'https://spotify.com' }, }); - fireEvent.click(rendered.getByText(/Create Audit/)); + fireEvent.click(screen.getByText(/Create Audit/)); - await waitFor(() => expect(rendered.getByLabelText(/URL/)).toBeEnabled()); + await waitFor(() => expect(screen.getByLabelText(/URL/)).toBeEnabled()); expect(useNavigate()).toHaveBeenCalledWith('..'); }); @@ -228,20 +216,18 @@ describe('CreateAudit', () => { res(ctx.status(500, 'failed to post')), ), ); - const rendered = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - fireEvent.change(rendered.getByLabelText(/URL/), { + fireEvent.change(screen.getByLabelText(/URL/), { target: { value: 'https://spotify.com' }, }); - fireEvent.click(rendered.getByText(/Create Audit/)); + fireEvent.click(screen.getByText(/Create Audit/)); - await waitFor(() => expect(rendered.getByLabelText(/URL/)).toBeEnabled()); + await waitFor(() => expect(screen.getByLabelText(/URL/)).toBeEnabled()); expect(errorApi.post).toHaveBeenCalledWith(expect.any(Error)); }); diff --git a/plugins/lighthouse/src/components/Intro/index.test.tsx b/plugins/lighthouse/src/components/Intro/index.test.tsx index 173dce1315..c37517794e 100644 --- a/plugins/lighthouse/src/components/Intro/index.test.tsx +++ b/plugins/lighthouse/src/components/Intro/index.test.tsx @@ -14,18 +14,16 @@ * limitations under the License. */ -/* eslint-disable jest/no-disabled-tests */ - -import { wrapInTestApp } from '@backstage/test-utils'; -import { fireEvent, render } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { fireEvent, screen } from '@testing-library/react'; import React from 'react'; import LighthouseIntro from './index'; describe('LighthouseIntro', () => { - it('renders successfully', () => { - const rendered = render(wrapInTestApp()); + it('renders successfully', async () => { + await renderInTestApp(); expect( - rendered.getByText('Welcome to Lighthouse in Backstage!'), + screen.getByText('Welcome to Lighthouse in Backstage!'), ).toBeInTheDocument(); }); @@ -33,28 +31,28 @@ describe('LighthouseIntro', () => { const firstTabRe = /This plugin allows you to/; const secondTabRe = /you will need a running instance of/; - it('selects the first text element', () => { - const rendered = render(wrapInTestApp()); - expect(rendered.getByText(firstTabRe)).toBeInTheDocument(); - expect(rendered.queryByText(secondTabRe)).not.toBeInTheDocument(); + it('selects the first text element', async () => { + await renderInTestApp(); + expect(screen.getByText(firstTabRe)).toBeInTheDocument(); + expect(screen.queryByText(secondTabRe)).not.toBeInTheDocument(); }); - it('shows the other text when the tab is clicked', () => { - const rendered = render(wrapInTestApp()); - fireEvent.click(rendered.getByText('Setup')); - expect(rendered.queryByText(firstTabRe)).not.toBeInTheDocument(); - expect(rendered.getByText(secondTabRe)).toBeInTheDocument(); + it('shows the other text when the tab is clicked', async () => { + await renderInTestApp(); + fireEvent.click(screen.getByText('Setup')); + expect(screen.queryByText(firstTabRe)).not.toBeInTheDocument(); + expect(screen.getByText(secondTabRe)).toBeInTheDocument(); }); }); describe('closing', () => { - it('hides the content on click', () => { - const rendered = render(wrapInTestApp()); - const welcomeMessage = rendered.queryByText( + it('hides the content on click', async () => { + await renderInTestApp(); + const welcomeMessage = screen.queryByText( 'Welcome to Lighthouse in Backstage!', ); expect(welcomeMessage).toBeInTheDocument(); - fireEvent.click(rendered.getByText('Hide intro')); + fireEvent.click(screen.getByText('Hide intro')); expect(welcomeMessage).not.toBeInTheDocument(); }); diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx index f5a2d50cb5..6613aa5b6a 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx @@ -23,12 +23,7 @@ import { StarredEntitiesApi, starredEntitiesApiRef, } from '@backstage/plugin-catalog-react'; -import { - renderInTestApp, - renderWithEffects, - TestApiProvider, - wrapInTestApp, -} from '@backstage/test-utils'; +import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import React from 'react'; import { MembersListCard } from './MembersListCard'; import { @@ -117,56 +112,50 @@ describe('MemberTab Test', () => { }; it('Display Profile Card', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - - - - - , - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, + await renderInTestApp( + + + + + , + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); - expect(rendered.getByAltText('Tara MacGovern')).toHaveAttribute( + expect(screen.getByAltText('Tara MacGovern')).toHaveAttribute( 'src', 'https://example.com/staff/tara.jpeg', ); - expect( - rendered.getByText('tara-macgovern@example.com'), - ).toBeInTheDocument(); - expect(rendered.getByText('Tara MacGovern').closest('a')).toHaveAttribute( + expect(screen.getByText('tara-macgovern@example.com')).toBeInTheDocument(); + expect(screen.getByText('Tara MacGovern').closest('a')).toHaveAttribute( 'href', '/catalog/foo-bar/user/tara.macgovern', ); - expect(rendered.getByText('Super Awesome Developer')).toBeInTheDocument(); + expect(screen.getByText('Super Awesome Developer')).toBeInTheDocument(); - expect(rendered.getByText('Members (1)')).toBeInTheDocument(); + expect(screen.getByText('Members (1)')).toBeInTheDocument(); }); it('Can render different member display title', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - - - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, + await renderInTestApp( + + + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); - expect(rendered.getByText('Testers (1)')).toBeInTheDocument(); + expect(screen.getByText('Testers (1)')).toBeInTheDocument(); }); describe('Aggregate members toggle', () => { @@ -196,6 +185,7 @@ describe('MemberTab Test', () => { const toggleSwitch = screen.queryByRole('checkbox'); expect(toggleSwitch).toBeNull(); }); + it('Shows the aggregate members toggle if the showAggregateMembersToggle prop is true', async () => { await renderInTestApp( { duplicatedUserText.compareDocumentPosition(groupAUserOneText), ).toBe(Node.DOCUMENT_POSITION_FOLLOWING); }); + it('Shows only direct members if the aggregate members switch is turned off', async () => { await renderInTestApp( { duplicatedUserText.compareDocumentPosition(groupAUserOneText), ).toBe(Node.DOCUMENT_POSITION_FOLLOWING); }); + it('Shows all descendant members of the group when the aggregate users switch is turned on, showing duplicated members only once', async () => { await renderInTestApp( { const userEntity: UserEntity = { @@ -48,29 +49,27 @@ describe('UserSummary Test', () => { }; it('Display Profile Card', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, + await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); - expect(rendered.getByText('calum-leavy@example.com')).toBeInTheDocument(); - expect(rendered.getByAltText('Calum Leavy')).toHaveAttribute( + expect(screen.getByText('calum-leavy@example.com')).toBeInTheDocument(); + expect(screen.getByAltText('Calum Leavy')).toHaveAttribute( 'src', 'https://example.com/staff/calum.jpeg', ); - expect(rendered.getByText('examplegroup')).toHaveAttribute( + expect(screen.getByText('examplegroup')).toHaveAttribute( 'href', '/catalog/default/group/examplegroup', ); - expect(rendered.getByText('Super awesome human')).toBeInTheDocument(); + expect(screen.getByText('Super awesome human')).toBeInTheDocument(); }); }); @@ -98,20 +97,18 @@ describe('Edit Button', () => { ], }; - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, + await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); - expect(rendered.queryByTitle('Edit Metadata')).not.toBeInTheDocument(); + expect(screen.queryByTitle('Edit Metadata')).not.toBeInTheDocument(); }); it('Should be visible when edit URL annotation is present', async () => { @@ -141,19 +138,17 @@ describe('Edit Button', () => { ], }; - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, + await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); - expect(rendered.getByRole('button')).toBeInTheDocument(); + expect(screen.getByRole('button')).toBeInTheDocument(); }); it('Should not show links by default', async () => { @@ -194,20 +189,18 @@ describe('Edit Button', () => { ], }; - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, + await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); - expect(rendered.queryByText('Slack')).toBeNull(); - expect(rendered.queryByText('Google')).toBeNull(); + expect(screen.queryByText('Slack')).toBeNull(); + expect(screen.queryByText('Google')).toBeNull(); }); it('Should show the links if showLinks is set', async () => { @@ -248,19 +241,17 @@ describe('Edit Button', () => { ], }; - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, + await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); - expect(rendered.getByText('Slack')).toBeInTheDocument(); - expect(rendered.getByText('Google')).toBeInTheDocument(); + expect(screen.getByText('Slack')).toBeInTheDocument(); + expect(screen.getByText('Google')).toBeInTheDocument(); }); }); diff --git a/plugins/pagerduty/src/components/ChangeEvents/ChangeEvents.test.tsx b/plugins/pagerduty/src/components/ChangeEvents/ChangeEvents.test.tsx index a518e0caea..3bd49d777b 100644 --- a/plugins/pagerduty/src/components/ChangeEvents/ChangeEvents.test.tsx +++ b/plugins/pagerduty/src/components/ChangeEvents/ChangeEvents.test.tsx @@ -13,10 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { PagerDutyChangeEvent } from '../types'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { pagerDutyApiRef } from '../../api'; import { ApiProvider } from '@backstage/core-app-api'; import { ChangeEvents } from './ChangeEvents'; @@ -32,15 +33,15 @@ describe('Incidents', () => { .fn() .mockImplementationOnce(async () => ({ change_events: [] })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('No change events to display yet.')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect( + screen.getByText('No change events to display yet.'), + ).toBeInTheDocument(); }); it('Renders all change events', async () => { @@ -76,19 +77,17 @@ describe('Incidents', () => { }, ] as PagerDutyChangeEvent[], })); - const { getByText, getAllByTitle, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('summary of event')).toBeInTheDocument(); - expect(getByText('sum of EVENT')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('summary of event')).toBeInTheDocument(); + expect(screen.getByText('sum of EVENT')).toBeInTheDocument(); // assert links, mailto and hrefs, date calculation - expect(getAllByTitle('View in PagerDuty').length).toEqual(2); + expect(screen.getAllByTitle('View in PagerDuty').length).toEqual(2); }); it('Does not render a pagerduty link when html_url is not present in response', async () => { @@ -123,19 +122,17 @@ describe('Incidents', () => { }, ] as PagerDutyChangeEvent[], })); - const { getByText, getAllByTitle, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('summary of event')).toBeInTheDocument(); - expect(getByText('sum of EVENT')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('summary of event')).toBeInTheDocument(); + expect(screen.getByText('sum of EVENT')).toBeInTheDocument(); // assert links, mailto and hrefs, date calculation - expect(getAllByTitle('View in PagerDuty').length).toEqual(1); + expect(screen.getAllByTitle('View in PagerDuty').length).toEqual(1); }); it('Handle errors', async () => { @@ -143,16 +140,16 @@ describe('Incidents', () => { .fn() .mockRejectedValueOnce(new Error('Error occurred')); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText('Error encountered while fetching information. Error occurred'), + screen.getByText( + 'Error encountered while fetching information. Error occurred', + ), ).toBeInTheDocument(); }); }); diff --git a/plugins/pagerduty/src/components/EntityPagerDutyCard/index.test.tsx b/plugins/pagerduty/src/components/EntityPagerDutyCard/index.test.tsx index 3f3a4ca1a8..a69b25a3dc 100644 --- a/plugins/pagerduty/src/components/EntityPagerDutyCard/index.test.tsx +++ b/plugins/pagerduty/src/components/EntityPagerDutyCard/index.test.tsx @@ -13,8 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render, waitFor, fireEvent, act } from '@testing-library/react'; +import { screen, waitFor, fireEvent, act } from '@testing-library/react'; import { EntityPagerDutyCard, isPluginApplicableToEntity, @@ -22,7 +23,7 @@ import { import { Entity } from '@backstage/catalog-model'; import { EntityProvider } from '@backstage/plugin-catalog-react'; import { NotFoundError } from '@backstage/errors'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { pagerDutyApiRef, UnauthorizedError, PagerDutyClient } from '../../api'; import { PagerDutyService, PagerDutyUser } from '../types'; @@ -136,20 +137,18 @@ describe('EntityPagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); - expect(getByText('Create Incident')).toBeInTheDocument(); - expect(getByText('Nice! No incidents found!')).toBeInTheDocument(); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); + expect(screen.getByText('Create Incident')).toBeInTheDocument(); + expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); }); it('Handles custom error for missing token', async () => { @@ -157,17 +156,17 @@ describe('EntityPagerDutyCard', () => { .fn() .mockRejectedValueOnce(new UnauthorizedError()); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Missing or invalid PagerDuty Token')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect( + screen.getByText('Missing or invalid PagerDuty Token'), + ).toBeInTheDocument(); }); it('Handles custom NotFoundError', async () => { @@ -175,36 +174,32 @@ describe('EntityPagerDutyCard', () => { .fn() .mockRejectedValueOnce(new NotFoundError()); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('PagerDuty Service Not Found')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('PagerDuty Service Not Found')).toBeInTheDocument(); }); it('handles general error', async () => { mockPagerDutyApi.getServiceByPagerDutyEntity = jest .fn() .mockRejectedValueOnce(new Error('An error occurred')); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText( + screen.getByText( 'Error encountered while fetching information. An error occurred', ), ).toBeInTheDocument(); @@ -215,23 +210,21 @@ describe('EntityPagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId, getByRole } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); - const triggerLink = getByText('Create Incident'); + const triggerLink = screen.getByText('Create Incident'); await act(async () => { fireEvent.click(triggerLink); }); - expect(getByRole('dialog')).toBeInTheDocument(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); }); describe('when entity has the pagerduty.com/service-id annotation', () => { @@ -240,20 +233,18 @@ describe('EntityPagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); - expect(getByText('Create Incident')).toBeInTheDocument(); - expect(getByText('Nice! No incidents found!')).toBeInTheDocument(); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); + expect(screen.getByText('Create Incident')).toBeInTheDocument(); + expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); }); it('Handles custom error for missing token', async () => { @@ -261,18 +252,16 @@ describe('EntityPagerDutyCard', () => { .fn() .mockRejectedValueOnce(new UnauthorizedError()); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText('Missing or invalid PagerDuty Token'), + screen.getByText('Missing or invalid PagerDuty Token'), ).toBeInTheDocument(); }); @@ -281,36 +270,34 @@ describe('EntityPagerDutyCard', () => { .fn() .mockRejectedValueOnce(new NotFoundError()); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('PagerDuty Service Not Found')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect( + screen.getByText('PagerDuty Service Not Found'), + ).toBeInTheDocument(); }); it('handles general error', async () => { mockPagerDutyApi.getServiceByPagerDutyEntity = jest .fn() .mockRejectedValueOnce(new Error('An error occurred')); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText( + screen.getByText( 'Error encountered while fetching information. An error occurred', ), ).toBeInTheDocument(); @@ -321,18 +308,16 @@ describe('EntityPagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { queryByTestId, getByTitle } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByTitle('Must provide an integration-key to create incidents') + screen.getByTitle('Must provide an integration-key to create incidents') .className, ).toMatch('disabled'); }); @@ -344,20 +329,18 @@ describe('EntityPagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); - expect(getByText('Create Incident')).toBeInTheDocument(); - expect(getByText('Nice! No incidents found!')).toBeInTheDocument(); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); + expect(screen.getByText('Create Incident')).toBeInTheDocument(); + expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); }); }); @@ -367,20 +350,18 @@ describe('EntityPagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); - expect(getByText('Nice! No incidents found!')).toBeInTheDocument(); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); - expect(() => getByText('Create Incident')).toThrow(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); + expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); + expect(() => screen.getByText('Create Incident')).toThrow(); }); }); }); diff --git a/plugins/pagerduty/src/components/Escalation/Escalation.test.tsx b/plugins/pagerduty/src/components/Escalation/Escalation.test.tsx index 97c02a37f3..5e780f3fa0 100644 --- a/plugins/pagerduty/src/components/Escalation/Escalation.test.tsx +++ b/plugins/pagerduty/src/components/Escalation/Escalation.test.tsx @@ -13,10 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { EscalationPolicy } from './EscalationPolicy'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { PagerDutyUser } from '../types'; import { pagerDutyApiRef } from '../../api'; import { ApiProvider } from '@backstage/core-app-api'; @@ -32,16 +33,14 @@ describe('Escalation', () => { .fn() .mockImplementationOnce(async () => ({ oncalls: [] })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); expect(mockPagerDutyApi.getOnCallByPolicyId).toHaveBeenCalledWith('456'); }); @@ -62,17 +61,15 @@ describe('Escalation', () => { ], })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); - expect(getByText('person1')).toBeInTheDocument(); - expect(getByText('person1@example.com')).toBeInTheDocument(); + expect(screen.getByText('person1')).toBeInTheDocument(); + expect(screen.getByText('person1@example.com')).toBeInTheDocument(); expect(mockPagerDutyApi.getOnCallByPolicyId).toHaveBeenCalledWith('abc'); }); @@ -81,17 +78,17 @@ describe('Escalation', () => { .fn() .mockRejectedValueOnce(new Error('Error message')); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText('Error encountered while fetching information. Error message'), + screen.getByText( + 'Error encountered while fetching information. Error message', + ), ).toBeInTheDocument(); }); }); diff --git a/plugins/pagerduty/src/components/Incident/Incidents.test.tsx b/plugins/pagerduty/src/components/Incident/Incidents.test.tsx index bd2016eb16..f10f48e059 100644 --- a/plugins/pagerduty/src/components/Incident/Incidents.test.tsx +++ b/plugins/pagerduty/src/components/Incident/Incidents.test.tsx @@ -15,9 +15,9 @@ */ import React from 'react'; -import { render, screen, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { Incidents } from './Incidents'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { pagerDutyApiRef } from '../../api'; import { PagerDutyIncident } from '../types'; import { ApiProvider } from '@backstage/core-app-api'; @@ -33,12 +33,10 @@ describe('Incidents', () => { .fn() .mockImplementationOnce(async () => ({ incidents: [] })); - render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); await waitFor(() => !screen.queryByTestId('progress')); expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(); @@ -86,12 +84,10 @@ describe('Incidents', () => { }, ] as PagerDutyIncident[], })); - render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); await waitFor(() => !screen.queryByTestId('progress')); expect(screen.getByText('title1')).toBeInTheDocument(); @@ -112,12 +108,10 @@ describe('Incidents', () => { .fn() .mockRejectedValueOnce(new Error('Error occurred')); - render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); await waitFor(() => !screen.queryByTestId('progress')); expect( diff --git a/plugins/pagerduty/src/components/PagerDutyCard/index.test.tsx b/plugins/pagerduty/src/components/PagerDutyCard/index.test.tsx index 6f4501450c..bc00d7d6e6 100644 --- a/plugins/pagerduty/src/components/PagerDutyCard/index.test.tsx +++ b/plugins/pagerduty/src/components/PagerDutyCard/index.test.tsx @@ -13,11 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render, waitFor, fireEvent, act } from '@testing-library/react'; +import { screen, waitFor, fireEvent, act } from '@testing-library/react'; import { PagerDutyCard } from '../PagerDutyCard'; import { NotFoundError } from '@backstage/errors'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { pagerDutyApiRef, UnauthorizedError, PagerDutyClient } from '../../api'; import { PagerDutyService, PagerDutyUser } from '../types'; @@ -61,18 +62,16 @@ describe('PagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); - expect(getByText('Create Incident')).toBeInTheDocument(); - expect(getByText('Nice! No incidents found!')).toBeInTheDocument(); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); + expect(screen.getByText('Create Incident')).toBeInTheDocument(); + expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); }); it('Handles custom error for missing token', async () => { @@ -80,15 +79,15 @@ describe('PagerDutyCard', () => { .fn() .mockRejectedValueOnce(new UnauthorizedError()); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Missing or invalid PagerDuty Token')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect( + screen.getByText('Missing or invalid PagerDuty Token'), + ).toBeInTheDocument(); }); it('Handles custom NotFoundError', async () => { @@ -96,32 +95,28 @@ describe('PagerDutyCard', () => { .fn() .mockRejectedValueOnce(new NotFoundError()); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('PagerDuty Service Not Found')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('PagerDuty Service Not Found')).toBeInTheDocument(); }); it('handles general error', async () => { mockPagerDutyApi.getServiceByPagerDutyEntity = jest .fn() .mockRejectedValueOnce(new Error('An error occurred')); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText( + screen.getByText( 'Error encountered while fetching information. An error occurred', ), ).toBeInTheDocument(); @@ -132,21 +127,19 @@ describe('PagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId, getByRole } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); - const triggerLink = getByText('Create Incident'); + const triggerLink = screen.getByText('Create Incident'); await act(async () => { fireEvent.click(triggerLink); }); - expect(getByRole('dialog')).toBeInTheDocument(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); }); describe('when entity has the pagerduty.com/service-id annotation', () => { @@ -155,18 +148,16 @@ describe('PagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); - expect(getByText('Create Incident')).toBeInTheDocument(); - expect(getByText('Nice! No incidents found!')).toBeInTheDocument(); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); + expect(screen.getByText('Create Incident')).toBeInTheDocument(); + expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); }); it('Handles custom error for missing token', async () => { @@ -174,20 +165,18 @@ describe('PagerDutyCard', () => { .fn() .mockRejectedValueOnce(new UnauthorizedError()); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText('Missing or invalid PagerDuty Token'), + screen.getByText('Missing or invalid PagerDuty Token'), ).toBeInTheDocument(); }); @@ -196,40 +185,38 @@ describe('PagerDutyCard', () => { .fn() .mockRejectedValueOnce(new NotFoundError()); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('PagerDuty Service Not Found')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect( + screen.getByText('PagerDuty Service Not Found'), + ).toBeInTheDocument(); }); it('handles general error', async () => { mockPagerDutyApi.getServiceByPagerDutyEntity = jest .fn() .mockRejectedValueOnce(new Error('An error occurred')); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText( + screen.getByText( 'Error encountered while fetching information. An error occurred', ), ).toBeInTheDocument(); @@ -240,16 +227,14 @@ describe('PagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { queryByTestId, getByTitle } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByTitle('Must provide an integration-key to create incidents') + screen.getByTitle('Must provide an integration-key to create incidents') .className, ).toMatch('disabled'); }); @@ -261,22 +246,20 @@ describe('PagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); - expect(getByText('Create Incident')).toBeInTheDocument(); - expect(getByText('Nice! No incidents found!')).toBeInTheDocument(); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); + expect(screen.getByText('Create Incident')).toBeInTheDocument(); + expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); }); }); @@ -286,23 +269,21 @@ describe('PagerDutyCard', () => { .fn() .mockImplementationOnce(async () => ({ service })); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Service Directory')).toBeInTheDocument(); - expect(getByText('Nice! No incidents found!')).toBeInTheDocument(); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); - expect(() => getByText('Create Incident')).toThrow(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Service Directory')).toBeInTheDocument(); + expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); + expect(() => screen.getByText('Create Incident')).toThrow(); }); }); }); diff --git a/plugins/rollbar/src/components/RollbarTopItemsTable/RollbarTopItemsTable.test.tsx b/plugins/rollbar/src/components/RollbarTopItemsTable/RollbarTopItemsTable.test.tsx index c436c8f37a..79d4fc5f41 100644 --- a/plugins/rollbar/src/components/RollbarTopItemsTable/RollbarTopItemsTable.test.tsx +++ b/plugins/rollbar/src/components/RollbarTopItemsTable/RollbarTopItemsTable.test.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ -import { wrapInTestApp } from '@backstage/test-utils'; -import { render } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; import * as React from 'react'; import { RollbarTopActiveItem } from '../../api/types'; import { RollbarTopItemsTable } from './RollbarTopItemsTable'; @@ -40,32 +40,28 @@ const items: RollbarTopActiveItem[] = [ describe('RollbarTopItemsTable component', () => { it('should render empty data message when loaded and no data', async () => { - const rendered = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(rendered.getByText(/No records to display/)).toBeInTheDocument(); + expect(screen.getByText(/No records to display/)).toBeInTheDocument(); }); it('should display item attributes when loading has finished', async () => { - const rendered = render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); - expect(rendered.getByText(/1234/)).toBeInTheDocument(); - expect(rendered.getByText(/Error in foo/)).toBeInTheDocument(); - expect(rendered.getByText(/critical/)).toBeInTheDocument(); + expect(screen.getByText(/1234/)).toBeInTheDocument(); + expect(screen.getByText(/Error in foo/)).toBeInTheDocument(); + expect(screen.getByText(/critical/)).toBeInTheDocument(); }); }); diff --git a/plugins/rollbar/src/components/TrendGraph/TrendGraph.test.tsx b/plugins/rollbar/src/components/TrendGraph/TrendGraph.test.tsx index 29288f5cad..996ae5bb2c 100644 --- a/plugins/rollbar/src/components/TrendGraph/TrendGraph.test.tsx +++ b/plugins/rollbar/src/components/TrendGraph/TrendGraph.test.tsx @@ -14,17 +14,16 @@ * limitations under the License. */ -import { wrapInTestApp } from '@backstage/test-utils'; -import { render } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import React from 'react'; import { TrendGraph } from './TrendGraph'; describe('TrendGraph component', () => { it('should render a trend graph sparkline', async () => { const mockCounts = [1, 2, 3, 4]; - const rendered = render( - wrapInTestApp(), + await renderInTestApp( + , ); - expect(rendered).toBeTruthy(); + expect(true).toBeTruthy(); }); }); diff --git a/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx index 4b8caa2780..fc772dd154 100644 --- a/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx +++ b/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx @@ -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( - - - {value => { - expect(value.results).toStrictEqual(results); - return <>; - }} - - , - ), + await renderInTestApp( + + + {value => { + expect(value.results).toStrictEqual(results); + return <>; + }} + + , ); expect(query).toHaveBeenCalledWith({ diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx index 8a9e8986b8..1d572b371b 100644 --- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx +++ b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx @@ -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( - - } - title="Documentation" - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + /> + , ); expect(screen.getByTitle('Docs icon')).toBeInTheDocument(); @@ -104,22 +101,20 @@ describe('SearchResultGroup', () => { results, }); - await renderWithEffects( - wrapInTestApp( - - - } - title="Documentation" - /> - - , - ), + await renderInTestApp( + + + } + title="Documentation" + /> + + , ); expect(screen.getByText('Search Result 1')).toBeInTheDocument(); @@ -147,23 +142,21 @@ describe('SearchResultGroup', () => { }), ); - await renderWithEffects( - wrapInTestApp( - + } + title="Documentation" > - } - title="Documentation" - > - - - , - ), + + + , ); await waitFor(() => { @@ -178,21 +171,19 @@ describe('SearchResultGroup', () => { results, }); - await renderWithEffects( - wrapInTestApp( - - } - title="Documentation" - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + /> + , ); const link = screen.getByText('See all', { exact: false }); @@ -204,21 +195,19 @@ describe('SearchResultGroup', () => { results, }); - await renderWithEffects( - wrapInTestApp( - - } - title="Documentation" - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + /> + , ); 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( - - } - title="Documentation" - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + /> + , ); expect( @@ -260,22 +247,20 @@ describe('SearchResultGroup', () => { results, }); - await renderWithEffects( - wrapInTestApp( - - } - title="Documentation" - filterOptions={['lifecycle', 'owner']} - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + filterOptions={['lifecycle', 'owner']} + /> + , ); 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( - - } - title="Documentation" - filterOptions={['owner']} - renderFilterField={(key: string) => - key === 'owner' ? ( - - ) : null - } - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + filterOptions={['owner']} + renderFilterField={(key: string) => + key === 'owner' ? ( + + ) : null + } + /> + , ); 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( - - } - title="Documentation" - filterOptions={['lifecycle']} - renderFilterField={(key: string) => - key === 'lifecycle' ? ( - - Production - Experimental - - ) : null - } - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + filterOptions={['lifecycle']} + renderFilterField={(key: string) => + key === 'lifecycle' ? ( + + Production + Experimental + + ) : null + } + /> + , ); 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( - - } - title="Documentation" - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + /> + , ); 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( - - } - title="Documentation" - disableRenderingWithNoResults - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + disableRenderingWithNoResults + /> + , ); await waitFor(() => { @@ -446,22 +423,20 @@ describe('SearchResultGroup', () => { it('Should render custom component when no results returned', async () => { query.mockResolvedValueOnce({ results: [] }); - await renderWithEffects( - wrapInTestApp( - - } - title="Documentation" - noResultsComponent="No results were found" - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + noResultsComponent="No results were found" + /> + , ); 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( - - } - title="Documentation" - /> - , - ), + await renderInTestApp( + + } + title="Documentation" + /> + , ); await waitFor(() => { diff --git a/plugins/search-react/src/components/SearchResultList/SearchResultList.test.tsx b/plugins/search-react/src/components/SearchResultList/SearchResultList.test.tsx index a0f5bc7830..146e5822a4 100644 --- a/plugins/search-react/src/components/SearchResultList/SearchResultList.test.tsx +++ b/plugins/search-react/src/components/SearchResultList/SearchResultList.test.tsx @@ -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( - - - , - ), + await renderInTestApp( + + + , ); expect(query).toHaveBeenCalledWith({ @@ -89,21 +86,19 @@ describe('SearchResultList', () => { results, }); - await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); 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( - - - , - ), + await renderInTestApp( + + + , ); 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( - - - , - ), + await renderInTestApp( + + + , ); await waitFor(() => { @@ -166,20 +157,18 @@ describe('SearchResultList', () => { it('Should render custom component when no results returned', async () => { query.mockResolvedValueOnce({ results: [] }); - await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); 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( - - - , - ), + await renderInTestApp( + + + , ); await waitFor(() => { @@ -229,23 +216,21 @@ describe('SearchResultList', () => { }), ); - await renderWithEffects( - wrapInTestApp( - + - - - - , - ), + + + , ); await waitFor(() => { diff --git a/plugins/search-react/src/extensions.test.tsx b/plugins/search-react/src/extensions.test.tsx index 7e5070c738..febe82dbe1 100644 --- a/plugins/search-react/src/extensions.test.tsx +++ b/plugins/search-react/src/extensions.test.tsx @@ -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( - - - , - ), + await renderInTestApp( + + + , ); expect(screen.getByText('Search Result 1')).toBeInTheDocument(); @@ -111,12 +108,10 @@ describe('extensions', () => { }); it('capture results discovery events', async () => { - await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); await userEvent.click( @@ -135,12 +130,10 @@ describe('extensions', () => { const plugin = createPlugin({ id: 'plugin' }); const DefaultSearchResultListItemExtension = createExtension(plugin); - await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); expect(screen.getByText('Default')).toBeInTheDocument(); @@ -160,14 +153,12 @@ describe('extensions', () => { const plugin = createPlugin({ id: 'plugin' }); const DefaultSearchResultListItemExtension = createExtension(plugin); - await renderWithEffects( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); expect(screen.getAllByText('Default')).toHaveLength(2); @@ -188,15 +179,13 @@ describe('extensions', () => { ), }); - await renderWithEffects( - wrapInTestApp( - - - - - - , - ), + await renderInTestApp( + + + + + + , ); expect(screen.getAllByText('Default')).toHaveLength(1); diff --git a/plugins/search/src/components/util.test.tsx b/plugins/search/src/components/util.test.tsx index 74d5ec0b50..ce1ef351f6 100644 --- a/plugins/search/src/components/util.test.tsx +++ b/plugins/search/src/components/util.test.tsx @@ -15,8 +15,7 @@ */ import React from 'react'; -import { wrapInTestApp } from '@backstage/test-utils'; -import { act, render } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { useNavigateToQuery } from './util'; import { rootRouteRef } from '../plugin'; @@ -35,18 +34,14 @@ describe('util', () => { return
test
; }; - await act(async () => { - await render( - wrapInTestApp(, { - mountedRoutes: { - '/search': rootRouteRef, - }, - }), - ); - - expect(navigate).toHaveBeenCalledTimes(1); - expect(navigate).toHaveBeenCalledWith('/search?query=test'); + await renderInTestApp(, { + mountedRoutes: { + '/search': rootRouteRef, + }, }); + + expect(navigate).toHaveBeenCalled(); + expect(navigate).toHaveBeenCalledWith('/search?query=test'); }); }); }); diff --git a/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.test.tsx b/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.test.tsx index 704d2d9ed9..5d1d41d01c 100644 --- a/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.test.tsx +++ b/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.test.tsx @@ -22,8 +22,8 @@ import { configApiRef, } from '@backstage/core-plugin-api'; import { EntityProvider } from '@backstage/plugin-catalog-react'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; -import { act, fireEvent, render, waitFor } from '@testing-library/react'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; +import { act, fireEvent, screen, waitFor } from '@testing-library/react'; import React from 'react'; import { splunkOnCallApiRef, @@ -114,22 +114,23 @@ describe('SplunkOnCallCard', () => { .fn() .mockImplementation(async () => [MOCK_TEAM_NO_INCIDENTS]); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Create Incident')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Create Incident')).toBeInTheDocument(); await waitFor( - () => expect(getByText('Nice! No incidents found!')).toBeInTheDocument(), + () => + expect( + screen.getByText('Nice! No incidents found!'), + ).toBeInTheDocument(), { timeout: 2000 }, ); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); }); it('does not render a "Create incident" link in read only mode', async () => { @@ -140,22 +141,23 @@ describe('SplunkOnCallCard', () => { .fn() .mockImplementation(async () => [MOCK_TEAM_NO_INCIDENTS]); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(() => getByText('Create Incident')).toThrow(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(() => screen.getByText('Create Incident')).toThrow(); await waitFor( - () => expect(getByText('Nice! No incidents found!')).toBeInTheDocument(), + () => + expect( + screen.getByText('Nice! No incidents found!'), + ).toBeInTheDocument(), { timeout: 2000 }, ); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); }); it('handles a "splunk.com/on-call-routing-key" annotation', async () => { @@ -171,32 +173,30 @@ describe('SplunkOnCallCard', () => { const mockTriggerAlarmFn = jest.fn(); mockSplunkOnCallApi.incidentAction = mockTriggerAlarmFn; - const { getByRole, getByTestId, getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText(`Team: ${MOCK_TEAM.name}`)).toBeInTheDocument(); - expect(getByText('Create Incident')).toBeInTheDocument(); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText(`Team: ${MOCK_TEAM.name}`)).toBeInTheDocument(); + expect(screen.getByText('Create Incident')).toBeInTheDocument(); await waitFor( - () => expect(getByText('test-incident')).toBeInTheDocument(), + () => expect(screen.getByText('test-incident')).toBeInTheDocument(), { timeout: 2000 }, ); - const createIncidentButton = getByText('Create Incident'); + const createIncidentButton = screen.getByText('Create Incident'); await act(async () => { fireEvent.click(createIncidentButton); }); - expect(getByRole('dialog')).toBeInTheDocument(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); await expectTriggeredIncident( 'test-routing-key', - getByTestId, + screen.getByTestId, mockTriggerAlarmFn, ); }); @@ -206,18 +206,18 @@ describe('SplunkOnCallCard', () => { .fn() .mockRejectedValueOnce(new UnauthorizedError()); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText('Missing or invalid Splunk On-Call API key and/or API id'), + screen.getByText( + 'Missing or invalid Splunk On-Call API key and/or API id', + ), ).toBeInTheDocument(); }); @@ -225,36 +225,32 @@ describe('SplunkOnCallCard', () => { mockSplunkOnCallApi.getUsers = jest .fn() .mockRejectedValueOnce(new Error('An error occurred')); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText( + screen.getByText( 'Error encountered while fetching information. An error occurred', ), ).toBeInTheDocument(); }); it('handles warning for missing required annotations', async () => { - const { getAllByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getAllByText('Missing Annotation').length).toEqual(1); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getAllByText('Missing Annotation').length).toEqual(1); }); it('handles warning for incorrect team annotation', async () => { @@ -265,18 +261,16 @@ describe('SplunkOnCallCard', () => { .fn() .mockImplementationOnce(async () => []); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText( + screen.getByText( 'Splunk On-Call API returned no record of teams associated with the "test" team name', ), ).toBeInTheDocument(); @@ -293,18 +287,16 @@ describe('SplunkOnCallCard', () => { .fn() .mockImplementationOnce(async () => []); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText( + screen.getByText( `Splunk On-Call API returned no record of teams associated with the "${MOCK_ROUTING_KEY.routingKey}" routing key`, ), ).toBeInTheDocument(); @@ -318,21 +310,19 @@ describe('SplunkOnCallCard', () => { .fn() .mockImplementationOnce(async () => [MOCK_TEAM]); - const { getByText, queryByTestId, getByRole } = render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); - await waitFor(() => !queryByTestId('progress')); - expect(getByText('Create Incident')).toBeInTheDocument(); - const triggerButton = getByText('Create Incident'); + await waitFor(() => !screen.queryByTestId('progress')); + expect(screen.getByText('Create Incident')).toBeInTheDocument(); + const triggerButton = screen.getByText('Create Incident'); await act(async () => { fireEvent.click(triggerButton); }); - expect(getByRole('dialog')).toBeInTheDocument(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); }); }); diff --git a/plugins/splunk-on-call/src/components/Escalation/Escalation.test.tsx b/plugins/splunk-on-call/src/components/Escalation/Escalation.test.tsx index 046c6a37f9..70242dd388 100644 --- a/plugins/splunk-on-call/src/components/Escalation/Escalation.test.tsx +++ b/plugins/splunk-on-call/src/components/Escalation/Escalation.test.tsx @@ -13,10 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { EscalationPolicy } from './EscalationPolicy'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { splunkOnCallApiRef } from '../../api'; import { MOCKED_ON_CALL, MOCKED_USER } from '../../api/mocks'; import { ApiProvider } from '@backstage/core-app-api'; @@ -32,21 +33,19 @@ describe('Escalation', () => { .fn() .mockImplementationOnce(async () => []); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); + expect(screen.getByText('Empty escalation policy')).toBeInTheDocument(); expect(mockSplunkOnCallApi.getOnCallUsers).toHaveBeenCalled(); }); @@ -55,22 +54,20 @@ describe('Escalation', () => { .fn() .mockImplementationOnce(async () => MOCKED_ON_CALL); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); - expect(getByText('FirstNameTest LastNameTest')).toBeInTheDocument(); - expect(getByText('test@example.com')).toBeInTheDocument(); + expect(screen.getByText('FirstNameTest LastNameTest')).toBeInTheDocument(); + expect(screen.getByText('test@example.com')).toBeInTheDocument(); expect(mockSplunkOnCallApi.getOnCallUsers).toHaveBeenCalled(); }); @@ -79,22 +76,22 @@ describe('Escalation', () => { .fn() .mockRejectedValueOnce(new Error('Error message')); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); expect( - getByText('Error encountered while fetching information. Error message'), + screen.getByText( + 'Error encountered while fetching information. Error message', + ), ).toBeInTheDocument(); }); }); diff --git a/plugins/splunk-on-call/src/components/Incident/Incidents.test.tsx b/plugins/splunk-on-call/src/components/Incident/Incidents.test.tsx index c180a4f637..665dd3281c 100644 --- a/plugins/splunk-on-call/src/components/Incident/Incidents.test.tsx +++ b/plugins/splunk-on-call/src/components/Incident/Incidents.test.tsx @@ -13,10 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { Incidents } from './Incidents'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { splunkOnCallApiRef } from '../../api'; import { MOCK_TEAM, MOCK_INCIDENT } from '../../api/mocks'; @@ -41,16 +42,17 @@ describe('Incidents', () => { mockSplunkOnCallApi.getIncidents.mockResolvedValue([]); mockSplunkOnCallApi.getTeams.mockResolvedValue([MOCK_TEAM]); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); await waitFor( - () => expect(getByText('Nice! No incidents found!')).toBeInTheDocument(), + () => + expect( + screen.getByText('Nice! No incidents found!'), + ).toBeInTheDocument(), { timeout: 2000 }, ); }); @@ -59,69 +61,59 @@ describe('Incidents', () => { mockSplunkOnCallApi.getIncidents.mockResolvedValue([MOCK_INCIDENT]); mockSplunkOnCallApi.getTeams.mockResolvedValue([MOCK_TEAM]); - const { - getByText, - getByTitle, - getAllByTitle, - getByLabelText, - queryByTestId, - } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); await waitFor( () => expect( - getByText('user', { + screen.getByText('user', { exact: false, }), ).toBeInTheDocument(), { timeout: 2000 }, ); - expect(getByText('test-incident')).toBeInTheDocument(); - expect(getByTitle('Acknowledged')).toBeInTheDocument(); - expect(getByLabelText('Status warning')).toBeInTheDocument(); + expect(screen.getByText('test-incident')).toBeInTheDocument(); + expect(screen.getByTitle('Acknowledged')).toBeInTheDocument(); + expect(screen.getByLabelText('Status warning')).toBeInTheDocument(); // assert links, mailto and hrefs, date calculation - expect(getAllByTitle('View in Splunk On-Call').length).toEqual(1); + expect(screen.getAllByTitle('View in Splunk On-Call').length).toEqual(1); }); it('does not render incident action buttons in read only mode', async () => { mockSplunkOnCallApi.getIncidents.mockResolvedValue([MOCK_INCIDENT]); mockSplunkOnCallApi.getTeams.mockResolvedValue([MOCK_TEAM]); - const { getByText, getAllByTitle, getByLabelText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); await waitFor( () => expect( - getByText('user', { + screen.getByText('user', { exact: false, }), ).toBeInTheDocument(), { timeout: 2000 }, ); - expect(getByText('test-incident')).toBeInTheDocument(); - expect(getByLabelText('Status warning')).toBeInTheDocument(); - expect(() => getAllByTitle('Acknowledge')).toThrow( + expect(screen.getByText('test-incident')).toBeInTheDocument(); + expect(screen.getByLabelText('Status warning')).toBeInTheDocument(); + expect(() => screen.getAllByTitle('Acknowledge')).toThrow( 'Unable to find an element with the title: Acknowledge.', ); - expect(() => getAllByTitle('Resolve')).toThrow( + expect(() => screen.getAllByTitle('Resolve')).toThrow( 'Unable to find an element with the title: Resolve.', ); // assert links, mailto and hrefs, date calculation - expect(getAllByTitle('View in Splunk On-Call').length).toEqual(1); + expect(screen.getAllByTitle('View in Splunk On-Call').length).toEqual(1); }); it('Handle errors', async () => { @@ -130,18 +122,16 @@ describe('Incidents', () => { ); mockSplunkOnCallApi.getTeams.mockResolvedValue([]); - const { getByText, queryByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => !queryByTestId('progress')); + await waitFor(() => !screen.queryByTestId('progress')); await waitFor( () => expect( - getByText( + screen.getByText( 'Error encountered while fetching information. Error occurred', ), ).toBeInTheDocument(), diff --git a/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.test.tsx b/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.test.tsx index 3bfbddb0e4..f66d4a0333 100644 --- a/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.test.tsx +++ b/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.test.tsx @@ -13,10 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { ApiProvider } from '@backstage/core-app-api'; import { alertApiRef } from '@backstage/core-plugin-api'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; -import { render } from '@testing-library/react'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; import React from 'react'; import { splunkOnCallApiRef } from '../../api'; import { TriggerDialog } from './TriggerDialog'; @@ -34,25 +35,27 @@ describe('TriggerDialog', () => { ); it('open the dialog and trigger an alarm', async () => { - const { getByText, getByRole, getByTestId } = render( - wrapInTestApp( - - {}} - onIncidentCreated={() => {}} - /> - , - ), + await renderInTestApp( + + {}} + onIncidentCreated={() => {}} + /> + , ); - expect(getByRole('dialog')).toBeInTheDocument(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); expect( - getByText('This action will trigger an incident', { + screen.getByText('This action will trigger an incident', { exact: false, }), ).toBeInTheDocument(); - await expectTriggeredIncident('Example', getByTestId, mockTriggerAlarmFn); + await expectTriggeredIncident( + 'Example', + screen.getByTestId, + mockTriggerAlarmFn, + ); }); }); diff --git a/plugins/tech-radar/src/components/RadarPage.test.tsx b/plugins/tech-radar/src/components/RadarPage.test.tsx index b65d9b31b2..20ef707b8e 100644 --- a/plugins/tech-radar/src/components/RadarPage.test.tsx +++ b/plugins/tech-radar/src/components/RadarPage.test.tsx @@ -16,11 +16,10 @@ import { MockErrorApi, - renderInTestApp, TestApiProvider, - wrapInTestApp, + renderInTestApp, } from '@backstage/test-utils'; -import { act, render, waitFor } from '@testing-library/react'; +import { act, screen, waitFor } from '@testing-library/react'; import React from 'react'; import GetBBoxPolyfill from '../utils/polyfills/getBBox'; import { RadarPage } from './RadarPage'; @@ -49,7 +48,16 @@ describe('RadarPage', () => { const mockClient = new MockClient(); it('should render a progress bar', async () => { - jest.useFakeTimers(); + class SlowClient implements TechRadarApi { + async load(): Promise { + await new Promise(resolve => setTimeout(resolve, 1000)); + return { + entries: [], + quadrants: [], + rings: [], + }; + } + } const techRadarProps = { width: 1200, @@ -57,21 +65,19 @@ describe('RadarPage', () => { svgProps: { 'data-testid': 'tech-radar-svg' }, }; - const { getByTestId, findByTestId } = render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - act(() => { - jest.advanceTimersByTime(250); + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 300)); }); - expect(getByTestId('progress')).toBeInTheDocument(); - await findByTestId('tech-radar-svg'); - jest.useRealTimers(); + expect(screen.getByTestId('progress')).toBeInTheDocument(); + + await screen.findByTestId('tech-radar-svg'); }); it('should render a header with a svg', async () => { @@ -82,15 +88,17 @@ describe('RadarPage', () => { }; jest.spyOn(mockClient, 'load'); - const { getByText, findByTestId } = await renderInTestApp( + await renderInTestApp( , ); - await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument(); + await expect( + screen.findByTestId('tech-radar-svg'), + ).resolves.toBeInTheDocument(); expect( - getByText('Pick the recommended technologies for your projects'), + screen.getByText('Pick the recommended technologies for your projects'), ).toBeInTheDocument(); expect(mockClient.load).toHaveBeenCalledWith(undefined); }); @@ -104,13 +112,15 @@ describe('RadarPage', () => { }; jest.spyOn(mockClient, 'load'); - const { findByTestId } = await renderInTestApp( + await renderInTestApp( , ); - await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument(); + await expect( + screen.findByTestId('tech-radar-svg'), + ).resolves.toBeInTheDocument(); expect(mockClient.load).toHaveBeenCalledWith('myId'); }); diff --git a/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.test.tsx b/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.test.tsx index 9a34fcf011..85ffaa5782 100644 --- a/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.test.tsx @@ -15,13 +15,13 @@ */ import React from 'react'; -import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { screen, fireEvent, waitFor } from '@testing-library/react'; import { analyticsApiRef } from '@backstage/core-plugin-api'; import { MockAnalyticsApi, TestApiProvider, - wrapInTestApp, + renderInTestApp, } from '@backstage/test-utils'; import { IssueLink } from './IssueLink'; @@ -57,13 +57,11 @@ const defaultGitlabProps = { describe('FeedbackLink', () => { const apiSpy = new MockAnalyticsApi(); - it('Should open new Github issue tab', () => { - render( - wrapInTestApp( - - - , - ), + it('Should open new Github issue tab', async () => { + await renderInTestApp( + + + , ); const link = screen.getByText(/Open new Github issue/); @@ -77,13 +75,11 @@ describe('FeedbackLink', () => { ); }); - it('Should open new Gitlab issue tab', () => { - render( - wrapInTestApp( - - - , - ), + it('Should open new Gitlab issue tab', async () => { + await renderInTestApp( + + + , ); const link = screen.getByText(/Open new Gitlab issue/); @@ -98,12 +94,10 @@ describe('FeedbackLink', () => { }); it('Should track click events', async () => { - render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); fireEvent.click(screen.getByText(/Open new Github issue/)); diff --git a/plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx b/plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx index 0891ddcfd3..852c638ffd 100644 --- a/plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx +++ b/plugins/techdocs/src/home/components/Grids/DocsCardGrid.test.tsx @@ -15,8 +15,8 @@ */ import { configApiRef } from '@backstage/core-plugin-api'; -import { wrapInTestApp } from '@backstage/test-utils'; -import { render } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; import React from 'react'; import { rootDocsRouteRef } from '../../../routes'; import { DocsCardGrid } from './DocsCardGrid'; @@ -46,42 +46,40 @@ describe('Entity Docs Card Grid', () => { }); it('should render all entities passed to it', async () => { - const { findByText, findAllByRole } = render( - wrapInTestApp( - , - { - mountedRoutes: { - '/docs/:namespace/:kind/:name/*': rootDocsRouteRef, }, + { + apiVersion: 'version', + kind: 'TestKind2', + metadata: { + name: 'testName2', + }, + spec: { + owner: 'not-owned@example.com', + }, + }, + ]} + />, + { + mountedRoutes: { + '/docs/:namespace/:kind/:name/*': rootDocsRouteRef, }, - ), + }, ); - expect(await findByText('testName')).toBeInTheDocument(); - expect(await findByText('testName2')).toBeInTheDocument(); - const [button1, button2] = await findAllByRole('button'); + expect(await screen.findByText('testName')).toBeInTheDocument(); + expect(await screen.findByText('testName2')).toBeInTheDocument(); + const [button1, button2] = await screen.findAllByRole('button'); expect(button1.getAttribute('href')).toContain( '/docs/default/testkind/testname', ); @@ -93,32 +91,30 @@ describe('Entity Docs Card Grid', () => { it('should fall back to case-sensitive links when configured', async () => { getOptionalBooleanMock.mockReturnValue(true); - const { findByRole } = render( - wrapInTestApp( - , - { - mountedRoutes: { - '/techdocs/:namespace/:kind/:name/*': rootDocsRouteRef, }, + ]} + />, + { + mountedRoutes: { + '/techdocs/:namespace/:kind/:name/*': rootDocsRouteRef, }, - ), + }, ); - const button = await findByRole('button'); + const button = await screen.findByRole('button'); expect(getOptionalBooleanMock).toHaveBeenCalledWith( 'techdocs.legacyUseCaseSensitiveTripletPaths', ); @@ -128,30 +124,28 @@ describe('Entity Docs Card Grid', () => { }); it('should render entity title if available', async () => { - const { findByText } = render( - wrapInTestApp( - , - { - mountedRoutes: { - '/docs/:namespace/:kind/:name/*': rootDocsRouteRef, }, + ]} + />, + { + mountedRoutes: { + '/docs/:namespace/:kind/:name/*': rootDocsRouteRef, }, - ), + }, ); - expect(await findByText('TestTitle')).toBeInTheDocument(); + expect(await screen.findByText('TestTitle')).toBeInTheDocument(); }); }); diff --git a/plugins/techdocs/src/home/components/Tables/DocsTable.test.tsx b/plugins/techdocs/src/home/components/Tables/DocsTable.test.tsx index 098f613773..9075b4ef12 100644 --- a/plugins/techdocs/src/home/components/Tables/DocsTable.test.tsx +++ b/plugins/techdocs/src/home/components/Tables/DocsTable.test.tsx @@ -13,9 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { configApiRef } from '@backstage/core-plugin-api'; import { DocsTable } from './DocsTable'; import { rootDocsRouteRef } from '../../../routes'; @@ -46,55 +47,53 @@ describe('DocsTable test', () => { }); it('should render documents passed', async () => { - const { findByText } = render( - wrapInTestApp( - , - { - mountedRoutes: { - '/docs/:namespace/:kind/:name/*': rootDocsRouteRef, - '/catalog/:namespace/:kind/:name': entityRouteRef, + relations: [ + { + targetRef: 'user:default/owned', + type: 'ownedBy', + }, + ], }, + { + apiVersion: 'version', + kind: 'TestKind2', + metadata: { + name: 'testName2', + }, + spec: { + owner: 'not-owned@example.com', + }, + relations: [ + { + targetRef: 'user:default/not-owned', + type: 'ownedBy', + }, + ], + }, + ]} + />, + { + mountedRoutes: { + '/docs/:namespace/:kind/:name/*': rootDocsRouteRef, + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); - const link1 = await findByText('testName'); - const link2 = await findByText('testName2'); + const link1 = await screen.findByText('testName'); + const link2 = await screen.findByText('testName2'); expect(link1).toBeInTheDocument(); expect(link1.getAttribute('href')).toContain( '/docs/default/testkind/testname', @@ -108,39 +107,37 @@ describe('DocsTable test', () => { it('should fall back to case-sensitive links when configured', async () => { getOptionalBooleanMock.mockReturnValue(true); - const { findByText } = render( - wrapInTestApp( - , - { - mountedRoutes: { - '/techdocs/:namespace/:kind/:name/*': rootDocsRouteRef, - '/catalog/:namespace/:kind/:name': entityRouteRef, + spec: { + owner: 'user:owned', + }, + relations: [ + { + targetRef: 'user:default/owned', + type: 'ownedBy', + }, + ], }, + ]} + />, + { + mountedRoutes: { + '/techdocs/:namespace/:kind/:name/*': rootDocsRouteRef, + '/catalog/:namespace/:kind/:name': entityRouteRef, }, - ), + }, ); - const button = await findByText('testName'); + const button = await screen.findByText('testName'); expect(getOptionalBooleanMock).toHaveBeenCalledWith( 'techdocs.legacyUseCaseSensitiveTripletPaths', ); @@ -150,15 +147,13 @@ describe('DocsTable test', () => { }); it('should render empty state if no owned documents exist', async () => { - const { findByText } = render( - wrapInTestApp(, { - mountedRoutes: { - '/docs/:namespace/:kind/:name/*': rootDocsRouteRef, - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, - }), - ); + await renderInTestApp(, { + mountedRoutes: { + '/docs/:namespace/:kind/:name/*': rootDocsRouteRef, + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }); - expect(await findByText('No documents to show')).toBeInTheDocument(); + expect(await screen.findByText('No documents to show')).toBeInTheDocument(); }); }); diff --git a/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx b/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx index 4c6fdf1bf7..ce029a1910 100644 --- a/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsNotFound.test.tsx @@ -13,45 +13,42 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { TechDocsNotFound } from './TechDocsNotFound'; import React from 'react'; -import { render } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; describe('', () => { - it('should render with status code, status message and go back link', () => { - const rendered = render(wrapInTestApp()); - rendered.getByText(/Documentation not found/i); - rendered.getByText(/404/i); - rendered.getByText(/Looks like someone dropped the mic!/i); - expect(rendered.getByTestId('go-back-link')).toBeDefined(); + it('should render with status code, status message and go back link', async () => { + await renderInTestApp(); + screen.getByText(/Documentation not found/i); + screen.getByText(/404/i); + screen.getByText(/Looks like someone dropped the mic!/i); + expect(screen.getByTestId('go-back-link')).toBeDefined(); }); }); describe('', () => { - it('should render with status code, custom error message and go back link', () => { - const rendered = render( - wrapInTestApp( - , - ), + it('should render with status code, custom error message and go back link', async () => { + await renderInTestApp( + , ); - rendered.getByText(/This is a custom error message/i); - rendered.getByText(/404/i); - rendered.getByText(/Looks like someone dropped the mic!/i); - expect(rendered.getByTestId('go-back-link')).toBeDefined(); + screen.getByText(/This is a custom error message/i); + screen.getByText(/404/i); + screen.getByText(/Looks like someone dropped the mic!/i); + expect(screen.getByTestId('go-back-link')).toBeDefined(); }); }); describe('', () => { - it('should render with a 404 code, custom error message and go back link', () => { - const rendered = render( - wrapInTestApp( - , - ), + it('should render with a 404 code, custom error message and go back link', async () => { + await renderInTestApp( + , ); - rendered.getByText(/This is a custom error message/i); - rendered.getByText(/404/i); - rendered.getByText(/Looks like someone dropped the mic!/i); - expect(rendered.getByTestId('go-back-link')).toBeDefined(); + screen.getByText(/This is a custom error message/i); + screen.getByText(/404/i); + screen.getByText(/Looks like someone dropped the mic!/i); + expect(screen.getByTestId('go-back-link')).toBeDefined(); }); }); diff --git a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx index 05d26b87d8..fd008e301c 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx +++ b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx @@ -13,17 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { ApiProvider } from '@backstage/core-app-api'; import { searchApiRef } from '@backstage/plugin-search-react'; -import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import Button from '@material-ui/core/Button'; -import { - act, - fireEvent, - render, - waitFor, - within, -} from '@testing-library/react'; +import { fireEvent, screen, waitFor, within } from '@testing-library/react'; import React, { useState } from 'react'; import { TechDocsSearch } from './TechDocsSearch'; @@ -57,125 +52,115 @@ describe('', () => { const apiRegistry = TestApiRegistry.from([searchApiRef, searchApi]); - await act(async () => { - const rendered = render( - wrapInTestApp( - - - , - ), - ); + await renderInTestApp( + + + , + ); - await emptyResults; - expect(querySpy).toHaveBeenCalled(); - expect(rendered.getByTestId('techdocs-search-bar')).toBeInTheDocument(); - }); - }); - - it('should trigger query when autocomplete input changed', async () => { - const query = () => singleResult; - const querySpy = jest.fn(query); - const searchApi = { query: querySpy }; - - const apiRegistry = TestApiRegistry.from([searchApiRef, searchApi]); - - await act(async () => { - const rendered = render( - wrapInTestApp( - - - , - ), - ); - - await singleResult; - expect(querySpy).toHaveBeenCalledWith({ - filters: { - kind: 'Testable', - name: 'test', - namespace: 'testspace', - }, - pageCursor: '', - term: '', - types: ['techdocs'], - }); - - const autocomplete = rendered.getByTestId('techdocs-search-bar'); - const input = within(autocomplete).getByRole('textbox'); - autocomplete.click(); - autocomplete.focus(); - fireEvent.change(input, { target: { value: 'asdf' } }); - - await singleResult; - await waitFor(() => - expect(querySpy).toHaveBeenCalledWith({ - filters: { - kind: 'Testable', - name: 'test', - namespace: 'testspace', - }, - pageCursor: '', - term: 'asdf', - types: ['techdocs'], - }), - ); - }); - }); - - it('should update filter values when a new entityName is provided', async () => { - const query = () => singleResult; - const querySpy = jest.fn(query); - const searchApi = { query: querySpy }; - const apiRegistry = TestApiRegistry.from([searchApiRef, searchApi]); - const newEntityId = { - name: 'test-diff', - namespace: 'testspace-diff', - kind: 'TestableDiff', - }; - - const WrappedSearchBar = () => { - const [entityName, setEntityName] = useState(entityId); - return wrapInTestApp( - - - - , - ); - }; - - await act(async () => { - const rendered = render(); - - await singleResult; - expect(querySpy).toHaveBeenCalledWith({ - filters: { - kind: 'Testable', - name: 'test', - namespace: 'testspace', - }, - pageCursor: '', - term: '', - types: ['techdocs'], - }); - - const button = rendered.getByText('Update Entity'); - button.click(); - - await singleResult; - await waitFor(() => - expect(querySpy).toHaveBeenCalledWith({ - filters: { - kind: 'TestableDiff', - name: 'test-diff', - namespace: 'testspace-diff', - }, - pageCursor: '', - term: '', - types: ['techdocs'], - }), - ); - }); + await emptyResults; + expect(querySpy).toHaveBeenCalled(); + expect(screen.getByTestId('techdocs-search-bar')).toBeInTheDocument(); }); }); + +it('should trigger query when autocomplete input changed', async () => { + const query = () => singleResult; + const querySpy = jest.fn(query); + const searchApi = { query: querySpy }; + + const apiRegistry = TestApiRegistry.from([searchApiRef, searchApi]); + + await renderInTestApp( + + + , + ); + + await singleResult; + expect(querySpy).toHaveBeenCalledWith({ + filters: { + kind: 'Testable', + name: 'test', + namespace: 'testspace', + }, + pageCursor: '', + term: '', + types: ['techdocs'], + }); + + const autocomplete = screen.getByTestId('techdocs-search-bar'); + const input = within(autocomplete).getByRole('textbox'); + autocomplete.click(); + autocomplete.focus(); + fireEvent.change(input, { target: { value: 'asdf' } }); + + await singleResult; + await waitFor(() => + expect(querySpy).toHaveBeenCalledWith({ + filters: { + kind: 'Testable', + name: 'test', + namespace: 'testspace', + }, + pageCursor: '', + term: 'asdf', + types: ['techdocs'], + }), + ); +}); + +it('should update filter values when a new entityName is provided', async () => { + const query = () => singleResult; + const querySpy = jest.fn(query); + const searchApi = { query: querySpy }; + const apiRegistry = TestApiRegistry.from([searchApiRef, searchApi]); + const newEntityId = { + name: 'test-diff', + namespace: 'testspace-diff', + kind: 'TestableDiff', + }; + + const WrappedSearchBar = () => { + const [entityName, setEntityName] = useState(entityId); + return ( + + + + + ); + }; + + await renderInTestApp(); + + await singleResult; + expect(querySpy).toHaveBeenCalledWith({ + filters: { + kind: 'Testable', + name: 'test', + namespace: 'testspace', + }, + pageCursor: '', + term: '', + types: ['techdocs'], + }); + + const button = screen.getByText('Update Entity'); + button.click(); + + await singleResult; + await waitFor(() => + expect(querySpy).toHaveBeenCalledWith({ + filters: { + kind: 'TestableDiff', + name: 'test-diff', + namespace: 'testspace-diff', + }, + pageCursor: '', + term: '', + types: ['techdocs'], + }), + ); +}); diff --git a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx b/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx index fe5440d355..47bc6e575d 100644 --- a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx +++ b/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx @@ -14,12 +14,8 @@ * limitations under the License. */ -import { - renderWithEffects, - TestApiRegistry, - wrapInTestApp, -} from '@backstage/test-utils'; -import { fireEvent } from '@testing-library/react'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; +import { fireEvent, screen } from '@testing-library/react'; import React from 'react'; import { UserSettingsAuthProviders } from './UserSettingsAuthProviders'; @@ -56,22 +52,20 @@ const apiRegistry = TestApiRegistry.from( describe('', () => { it('displays a provider and calls its sign-in handler on click', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - expect(rendered.getByText('Google')).toBeInTheDocument(); + expect(screen.getByText('Google')).toBeInTheDocument(); expect( - rendered.getByText( + screen.getByText( 'Provides authentication towards Google APIs and identities', ), ).toBeInTheDocument(); - const button = rendered.getByTitle('Sign in to Google'); + const button = screen.getByTitle('Sign in to Google'); fireEvent.click(button); expect(mockSignInHandler).toHaveBeenCalledTimes(1); }); diff --git a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx index e2ec3b0ba9..243e348319 100644 --- a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx +++ b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { DefaultSettingsPage } from './DefaultSettingsPage'; import { UserSettingsTab } from '../UserSettingsTab'; import { useOutlet } from 'react-router-dom'; @@ -32,9 +32,7 @@ describe('', () => { }); it('should render the settings page with 3 tabs', async () => { - const { container } = await renderWithEffects( - wrapInTestApp(), - ); + const { container } = await renderInTestApp(); const tabs = container.querySelectorAll('[class*=MuiTabs-root] button'); expect(tabs).toHaveLength(3); @@ -46,8 +44,8 @@ describe('', () => {
Advanced settings
); - const { container } = await renderWithEffects( - wrapInTestApp(), + const { container } = await renderInTestApp( + , ); const tabs = container.querySelectorAll('[class*=MuiTabs-root] button'); @@ -61,8 +59,8 @@ describe('', () => {
Advanced settings
); - const { container } = await renderWithEffects( - wrapInTestApp(), + const { container } = await renderInTestApp( + , ); const tabs = container.querySelectorAll('[class*=MuiTabs-root] button'); diff --git a/plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx b/plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx index 026e0517bb..df1fabab0a 100644 --- a/plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx @@ -14,11 +14,7 @@ * limitations under the License. */ -import { - renderWithEffects, - wrapInTestApp, - TestApiRegistry, -} from '@backstage/test-utils'; +import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; import { screen } from '@testing-library/react'; import React from 'react'; import { UserSettingsIdentityCard } from './UserSettingsIdentityCard'; @@ -40,15 +36,13 @@ const apiRegistry = TestApiRegistry.from([ describe('', () => { it('displays an identity card', async () => { - await renderWithEffects( - wrapInTestApp( - - - , - { - mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef }, - }, - ), + await renderInTestApp( + + + , + { + mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef }, + }, ); expect(screen.getByText('user:default/test-ownership')).toBeInTheDocument(); diff --git a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx index bb0e778993..51b277c8f8 100644 --- a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx @@ -13,11 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { screen, fireEvent } from '@testing-library/react'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { UserSettingsLanguageToggle } from './UserSettingsLanguageToggle'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { useTranslation } from 'react-i18next'; jest.mock('@backstage/core-plugin-api/alpha', () => ({ @@ -35,7 +36,7 @@ describe('UserSettingsLanguageToggle', () => { jest.clearAllMocks(); }); - it('should render correctly with multiple supported languages', () => { + it('should render correctly with multiple supported languages', async () => { const messages: Record = { en: 'English', fr: 'French', @@ -61,7 +62,7 @@ describe('UserSettingsLanguageToggle', () => { messages[option?.language || key] || 'translatedValue', ); - render(wrapInTestApp()); + await renderInTestApp(); expect(screen.getAllByText('Change the language')).toHaveLength(1); expect(screen.getAllByText('English')).toHaveLength(1); @@ -69,7 +70,7 @@ describe('UserSettingsLanguageToggle', () => { expect(screen.getAllByText('German')).toHaveLength(1); }); - it('should not render when only one supported language', () => { + it('should not render when only one supported language', async () => { const tMock = jest.fn().mockReturnValue('translatedValue'); const i18nMock = { language: 'en', @@ -85,13 +86,13 @@ describe('UserSettingsLanguageToggle', () => { i18n: i18nMock, }); - render(wrapInTestApp()); + await renderInTestApp(); expect(screen.queryByText('translatedValue')).toBeNull(); expect(screen.queryByText('English')).toBeNull(); }); - it('should handle language change', () => { + it('should handle language change', async () => { const messages: Record = { en: 'English', fr: 'French', @@ -116,7 +117,7 @@ describe('UserSettingsLanguageToggle', () => { i18n: i18nMock, }); - render(wrapInTestApp()); + await renderInTestApp(); fireEvent.click(screen.getByText('French')); diff --git a/plugins/user-settings/src/components/General/UserSettingsMenu.test.tsx b/plugins/user-settings/src/components/General/UserSettingsMenu.test.tsx index 9c501bc775..c3b0aae4a7 100644 --- a/plugins/user-settings/src/components/General/UserSettingsMenu.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsMenu.test.tsx @@ -16,26 +16,22 @@ import { MockErrorApi, - renderInTestApp, TestApiProvider, - renderWithEffects, - wrapInTestApp, + renderInTestApp, } from '@backstage/test-utils'; import { errorApiRef, identityApiRef } from '@backstage/core-plugin-api'; -import { fireEvent, waitFor } from '@testing-library/react'; +import { fireEvent, waitFor, screen } from '@testing-library/react'; import React from 'react'; import { UserSettingsMenu } from './UserSettingsMenu'; describe('', () => { it('displays a menu button with a sign-out option', async () => { - const rendered = await renderWithEffects( - wrapInTestApp(), - ); + await renderInTestApp(); - const menuButton = rendered.getByLabelText('more'); + const menuButton = screen.getByLabelText('more'); fireEvent.click(menuButton); - expect(rendered.getByText('Sign Out')).toBeInTheDocument(); + expect(screen.getByText('Sign Out')).toBeInTheDocument(); }); it('handles errors that occur when signing out', async () => { @@ -43,7 +39,7 @@ describe('', () => { signOut: jest.fn().mockRejectedValue(new Error('Logout error')), }; const mockErrorApi = new MockErrorApi({ collect: true }); - const rendered = await renderInTestApp( + await renderInTestApp( ', () => { , ); - const menuButton = rendered.getByLabelText('more'); + const menuButton = screen.getByLabelText('more'); fireEvent.click(menuButton); - fireEvent.click(rendered.getByText('Sign Out')); + fireEvent.click(screen.getByText('Sign Out')); await waitFor(() => { expect(mockErrorApi.getErrors()).toHaveLength(1); diff --git a/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx index ef8046a54e..01fa5b6aa5 100644 --- a/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ -import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; -import { fireEvent } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { fireEvent, screen } from '@testing-library/react'; import React from 'react'; import { UserSettingsPinToggle } from './UserSettingsPinToggle'; import { SidebarPinStateProvider } from '@backstage/core-components'; @@ -23,22 +23,20 @@ import { SidebarPinStateProvider } from '@backstage/core-components'; describe('', () => { it('toggles the pin sidebar button', async () => { const mockToggleFn = jest.fn(); - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - expect(rendered.getByText('Pin Sidebar')).toBeInTheDocument(); + expect(screen.getByText('Pin Sidebar')).toBeInTheDocument(); - const pinButton = rendered.getByLabelText('Pin Sidebar Switch'); + const pinButton = screen.getByLabelText('Pin Sidebar Switch'); fireEvent.click(pinButton); expect(mockToggleFn).toHaveBeenCalled(); }); diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx index 0e07fa8c59..0f34134e30 100644 --- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx @@ -15,15 +15,11 @@ */ import { AppTheme, appThemeApiRef } from '@backstage/core-plugin-api'; -import { - renderWithEffects, - TestApiRegistry, - wrapInTestApp, -} from '@backstage/test-utils'; +import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import { lightTheme } from '@backstage/theme'; import { ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; -import { fireEvent } from '@testing-library/react'; +import { fireEvent, screen } from '@testing-library/react'; import React from 'react'; import { UserSettingsThemeToggle } from './UserSettingsThemeToggle'; import { ApiProvider, AppThemeSelector } from '@backstage/core-app-api'; @@ -48,17 +44,15 @@ describe('', () => { it('toggles the theme select button', async () => { const themeApi = apiRegistry.get(appThemeApiRef); - const rendered = await renderWithEffects( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - expect(rendered.getByText('Theme')).toBeInTheDocument(); + expect(screen.getByText('Theme')).toBeInTheDocument(); - const themeButton = rendered.getByText('Mock Theme'); + const themeButton = screen.getByText('Mock Theme'); expect(themeApi?.getActiveThemeId()).toBe(undefined); fireEvent.click(themeButton); expect(themeApi?.getActiveThemeId()).toBe('light-theme'); diff --git a/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx b/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx index 89c755f3e3..8f2efa73f4 100644 --- a/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx +++ b/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import { SettingsPage } from './SettingsPage'; import { UserSettingsTab } from '../UserSettingsTab'; import { useOutlet } from 'react-router-dom'; @@ -34,9 +34,7 @@ describe('', () => { }); it('should render the default settings page with 3 tabs', async () => { - const { container } = await renderWithEffects( - wrapInTestApp(), - ); + const { container } = await renderInTestApp(); const tabs = container.querySelectorAll('[class*=MuiTabs-root] button'); expect(tabs).toHaveLength(3); @@ -49,9 +47,7 @@ describe('', () => { ); (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute); - const { container } = await renderWithEffects( - wrapInTestApp(), - ); + const { container } = await renderInTestApp(); const tabs = container.querySelectorAll('[class*=MuiTabs-root] button'); expect(tabs).toHaveLength(4); @@ -65,9 +61,7 @@ describe('', () => { ); (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute); - const { container } = await renderWithEffects( - wrapInTestApp(), - ); + const { container } = await renderInTestApp(); const tabs = container.querySelectorAll('[class*=MuiTabs-root] button'); expect(tabs).toHaveLength(4); @@ -90,9 +84,7 @@ describe('', () => { ); (useOutlet as jest.Mock).mockReturnValue(customLayout); - const { container } = await renderWithEffects( - wrapInTestApp(), - ); + const { container } = await renderInTestApp(); const tabs = container.querySelectorAll('[class*=MuiTabs-root] button'); expect(tabs).toHaveLength(2);