diff --git a/plugins/shortcuts/src/AddShortcut.test.tsx b/plugins/shortcuts/src/AddShortcut.test.tsx index cee5d8cf28..8001cdc293 100644 --- a/plugins/shortcuts/src/AddShortcut.test.tsx +++ b/plugins/shortcuts/src/AddShortcut.test.tsx @@ -15,10 +15,10 @@ */ import React from 'react'; -import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { screen, fireEvent, waitFor } from '@testing-library/react'; import { AddShortcut } from './AddShortcut'; import { LocalStoredShortcuts } from './api'; -import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils'; +import { MockStorageApi, renderInTestApp } from '@backstage/test-utils'; import { AlertDisplay } from '@backstage/core'; describe('AddShortcut', () => { @@ -36,26 +36,22 @@ describe('AddShortcut', () => { }); it('displays the title', async () => { - render(wrapInTestApp()); + await renderInTestApp(); - await waitFor(() => { - expect(screen.getByText('Add Shortcut')).toBeInTheDocument(); - }); + expect(screen.getByText('Add Shortcut')).toBeInTheDocument(); }); it('closes the popup', async () => { - render(wrapInTestApp()); + await renderInTestApp(); fireEvent.click(screen.getByText('Cancel')); - await waitFor(() => { - expect(props.onClose).toHaveBeenCalledTimes(1); - }); + expect(props.onClose).toHaveBeenCalledTimes(1); }); it('saves the input', async () => { const spy = jest.spyOn(api, 'add'); - render(wrapInTestApp()); + await renderInTestApp(); const urlInput = screen.getByPlaceholderText('Enter a URL'); const titleInput = screen.getByPlaceholderText('Enter a display name'); @@ -74,11 +70,9 @@ describe('AddShortcut', () => { it('pastes the values', async () => { const spy = jest.spyOn(api, 'add'); - render( - wrapInTestApp(, { - routeEntries: ['/some-initial-url'], - }), - ); + await renderInTestApp(, { + routeEntries: ['/some-initial-url'], + }); fireEvent.click(screen.getByText('Use current page')); fireEvent.click(screen.getByText('Save')); @@ -93,13 +87,11 @@ describe('AddShortcut', () => { it('displays errors', async () => { jest.spyOn(api, 'add').mockRejectedValueOnce(new Error('some add error')); - render( - wrapInTestApp( - <> - - - , - ), + await renderInTestApp( + <> + + + , ); fireEvent.click(screen.getByText('Use current page')); diff --git a/plugins/shortcuts/src/EditShortcut.test.tsx b/plugins/shortcuts/src/EditShortcut.test.tsx index 20ef433c37..eaab6cf609 100644 --- a/plugins/shortcuts/src/EditShortcut.test.tsx +++ b/plugins/shortcuts/src/EditShortcut.test.tsx @@ -15,11 +15,11 @@ */ import React from 'react'; -import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { screen, fireEvent, waitFor } from '@testing-library/react'; import { EditShortcut } from './EditShortcut'; import { Shortcut } from './types'; import { LocalStoredShortcuts } from './api'; -import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils'; +import { MockStorageApi, renderInTestApp } from '@backstage/test-utils'; import { AlertDisplay } from '@backstage/core'; describe('EditShortcut', () => { @@ -42,26 +42,22 @@ describe('EditShortcut', () => { }); it('displays the title', async () => { - render(wrapInTestApp()); + await renderInTestApp(); - await waitFor(() => { - expect(screen.getByText('Edit Shortcut')).toBeInTheDocument(); - }); + expect(screen.getByText('Edit Shortcut')).toBeInTheDocument(); }); it('closes the popup', async () => { - render(wrapInTestApp()); + await renderInTestApp(); fireEvent.click(screen.getByText('Cancel')); - await waitFor(() => { - expect(props.onClose).toHaveBeenCalledTimes(1); - }); + expect(props.onClose).toHaveBeenCalledTimes(1); }); it('updates the shortcut', async () => { const spy = jest.spyOn(api, 'update'); - render(wrapInTestApp()); + await renderInTestApp(); const urlInput = screen.getByPlaceholderText('Enter a URL'); const titleInput = screen.getByPlaceholderText('Enter a display name'); @@ -82,12 +78,10 @@ describe('EditShortcut', () => { it('removes the shortcut', async () => { const spy = jest.spyOn(api, 'remove'); - render(wrapInTestApp()); + await renderInTestApp(); fireEvent.click(screen.getByText('Remove')); - await waitFor(() => { - expect(spy).toBeCalledWith('id'); - }); + expect(spy).toBeCalledWith('id'); }); it('displays errors', async () => { @@ -99,13 +93,11 @@ describe('EditShortcut', () => { .spyOn(api, 'remove') .mockRejectedValueOnce(new Error('some remove error')); - render( - wrapInTestApp( - <> - - - , - ), + await renderInTestApp( + <> + + + , ); fireEvent.click(screen.getByText('Save')); diff --git a/plugins/shortcuts/src/ShortcutForm.test.tsx b/plugins/shortcuts/src/ShortcutForm.test.tsx index 4586c484d0..23a36126c6 100644 --- a/plugins/shortcuts/src/ShortcutForm.test.tsx +++ b/plugins/shortcuts/src/ShortcutForm.test.tsx @@ -14,9 +14,9 @@ * limitations under the License. */ import React from 'react'; -import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { screen, fireEvent, waitFor } from '@testing-library/react'; import { ShortcutForm } from './ShortcutForm'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; describe('ShortcutForm', () => { const props = { @@ -25,7 +25,7 @@ describe('ShortcutForm', () => { }; it('displays validation messages', async () => { - render(wrapInTestApp()); + await renderInTestApp(); const urlInput = screen.getByPlaceholderText('Enter a URL'); const titleInput = screen.getByPlaceholderText('Enter a display name'); @@ -44,13 +44,11 @@ describe('ShortcutForm', () => { }); it('calls the save handler', async () => { - render( - wrapInTestApp( - , - ), + await renderInTestApp( + , ); fireEvent.click(screen.getByText('Save')); @@ -63,7 +61,7 @@ describe('ShortcutForm', () => { }); it('calls the close handler', async () => { - render(wrapInTestApp()); + await renderInTestApp(); fireEvent.click(screen.getByText('Cancel')); await waitFor(() => { diff --git a/plugins/shortcuts/src/ShortcutItem.test.tsx b/plugins/shortcuts/src/ShortcutItem.test.tsx index ffeec0cdc4..080f847952 100644 --- a/plugins/shortcuts/src/ShortcutItem.test.tsx +++ b/plugins/shortcuts/src/ShortcutItem.test.tsx @@ -15,12 +15,16 @@ */ import React from 'react'; -import { render, screen, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { ShortcutItem } from './ShortcutItem'; import { Shortcut } from './types'; import { SidebarContext } from '@backstage/core'; import { LocalStoredShortcuts } from './api'; -import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils'; +import { + MockStorageApi, + renderInTestApp, + wrapInTestApp, +} from '@backstage/test-utils'; import { pageTheme } from '@backstage/theme'; describe('ShortcutItem', () => { @@ -32,17 +36,13 @@ describe('ShortcutItem', () => { const api = new LocalStoredShortcuts(MockStorageApi.create()); it('displays the shortcut', async () => { - render( - wrapInTestApp( - - - , - ), + await renderInTestApp( + + + , ); - await waitFor(() => { - expect(screen.getByText('ST')).toBeInTheDocument(); - expect(screen.getByText('some title')).toBeInTheDocument(); - }); + expect(screen.getByText('ST')).toBeInTheDocument(); + expect(screen.getByText('some title')).toBeInTheDocument(); }); it('calculates the shortcut text correctly', async () => { @@ -62,13 +62,10 @@ describe('ShortcutItem', () => { title: 'more | title words', }; - const { rerender } = render( - wrapInTestApp(), + const { rerender } = await renderInTestApp( + , ); - - await waitFor(() => { - expect(screen.getByText('On')).toBeInTheDocument(); - }); + expect(screen.getByText('On')).toBeInTheDocument(); rerender(wrapInTestApp()); await waitFor(() => { @@ -82,15 +79,13 @@ describe('ShortcutItem', () => { }); it('gets the color based on the theme', async () => { - const { rerender } = render( - wrapInTestApp(), + const { rerender } = await renderInTestApp( + , ); - await waitFor(() => { - expect(document.querySelector('circle')?.getAttribute('fill')).toEqual( - pageTheme.tool.colors[0], - ); - }); + expect(document.querySelector('circle')?.getAttribute('fill')).toEqual( + pageTheme.tool.colors[0], + ); const newShortcut: Shortcut = { id: 'id', diff --git a/plugins/shortcuts/src/Shortcuts.test.tsx b/plugins/shortcuts/src/Shortcuts.test.tsx index 088a3705d9..b697f9ed27 100644 --- a/plugins/shortcuts/src/Shortcuts.test.tsx +++ b/plugins/shortcuts/src/Shortcuts.test.tsx @@ -16,8 +16,8 @@ import React from 'react'; import { SidebarContext, ApiProvider, ApiRegistry } from '@backstage/core'; -import { wrapInTestApp, MockStorageApi } from '@backstage/test-utils'; -import { render, screen, waitFor } from '@testing-library/react'; +import { MockStorageApi, renderInTestApp } from '@backstage/test-utils'; +import { screen, waitFor } from '@testing-library/react'; import { Shortcuts } from './Shortcuts'; import { LocalStoredShortcuts, shortcutsApiRef } from './api'; @@ -27,14 +27,12 @@ const apis = ApiRegistry.from([ describe('Shortcuts', () => { it('displays an add button', async () => { - render( - wrapInTestApp( - - - - - , - ), + await renderInTestApp( + + + + + , ); await waitFor(() => !screen.queryByTestId('progress')); expect(screen.getByText('Add Shortcuts')).toBeInTheDocument();