Use renderInTestApp in test where possible

Signed-off-by: Marcus Eide <eide@spotify.com>

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(<AddShortcut {...props} />));
+    await renderInTestApp(<AddShortcut {...props} />);
 
-    await waitFor(() => {
-      expect(screen.getByText('Add Shortcut')).toBeInTheDocument();
-    });
+    expect(screen.getByText('Add Shortcut')).toBeInTheDocument();
   });
 
   it('closes the popup', async () => {
-    render(wrapInTestApp(<AddShortcut {...props} />));
+    await renderInTestApp(<AddShortcut {...props} />);
 
     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(<AddShortcut {...props} />));
+    await renderInTestApp(<AddShortcut {...props} />);
 
     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(<AddShortcut {...props} />, {
-        routeEntries: ['/some-initial-url'],
-      }),
-    );
+    await renderInTestApp(<AddShortcut {...props} />, {
+      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(
-        <>
-          <AlertDisplay />
-          <AddShortcut {...props} />
-        </>,
-      ),
+    await renderInTestApp(
+      <>
+        <AlertDisplay />
+        <AddShortcut {...props} />
+      </>,
     );
 
     fireEvent.click(screen.getByText('Use current page'));

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(<EditShortcut {...props} />));
+    await renderInTestApp(<EditShortcut {...props} />);
 
-    await waitFor(() => {
-      expect(screen.getByText('Edit Shortcut')).toBeInTheDocument();
-    });
+    expect(screen.getByText('Edit Shortcut')).toBeInTheDocument();
   });
 
   it('closes the popup', async () => {
-    render(wrapInTestApp(<EditShortcut {...props} />));
+    await renderInTestApp(<EditShortcut {...props} />);
 
     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(<EditShortcut {...props} />));
+    await renderInTestApp(<EditShortcut {...props} />);
 
     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(<EditShortcut {...props} />));
+    await renderInTestApp(<EditShortcut {...props} />);
 
     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(
-        <>
-          <AlertDisplay />
-          <EditShortcut {...props} />
-        </>,
-      ),
+    await renderInTestApp(
+      <>
+        <AlertDisplay />
+        <EditShortcut {...props} />
+      </>,
     );
 
     fireEvent.click(screen.getByText('Save'));

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(<ShortcutForm {...props} />));
+    await renderInTestApp(<ShortcutForm {...props} />);
 
     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(
-        <ShortcutForm
-          {...props}
-          formValues={{ url: '/some-url', title: 'some title' }}
-        />,
-      ),
+    await renderInTestApp(
+      <ShortcutForm
+        {...props}
+        formValues={{ url: '/some-url', title: 'some title' }}
+      />,
     );
 
     fireEvent.click(screen.getByText('Save'));
@@ -63,7 +61,7 @@ describe('ShortcutForm', () => {
   });
 
   it('calls the close handler', async () => {
-    render(wrapInTestApp(<ShortcutForm {...props} />));
+    await renderInTestApp(<ShortcutForm {...props} />);
 
     fireEvent.click(screen.getByText('Cancel'));
     await waitFor(() => {

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(
-        <SidebarContext.Provider value={{ isOpen: true }}>
-          <ShortcutItem api={api} shortcut={shortcut} />
-        </SidebarContext.Provider>,
-      ),
+    await renderInTestApp(
+      <SidebarContext.Provider value={{ isOpen: true }}>
+        <ShortcutItem api={api} shortcut={shortcut} />
+      </SidebarContext.Provider>,
     );
-    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(<ShortcutItem api={api} shortcut={shortcut1} />),
+    const { rerender } = await renderInTestApp(
+      <ShortcutItem api={api} shortcut={shortcut1} />,
     );
-
-    await waitFor(() => {
-      expect(screen.getByText('On')).toBeInTheDocument();
-    });
+    expect(screen.getByText('On')).toBeInTheDocument();
 
     rerender(wrapInTestApp(<ShortcutItem api={api} shortcut={shortcut2} />));
     await waitFor(() => {
@@ -82,15 +79,13 @@ describe('ShortcutItem', () => {
   });
 
   it('gets the color based on the theme', async () => {
-    const { rerender } = render(
-      wrapInTestApp(<ShortcutItem api={api} shortcut={shortcut} />),
+    const { rerender } = await renderInTestApp(
+      <ShortcutItem api={api} shortcut={shortcut} />,
     );
 
-    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',

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(
-        <SidebarContext.Provider value={{ isOpen: true }}>
-          <ApiProvider apis={apis}>
-            <Shortcuts />
-          </ApiProvider>
-        </SidebarContext.Provider>,
-      ),
+    await renderInTestApp(
+      <SidebarContext.Provider value={{ isOpen: true }}>
+        <ApiProvider apis={apis}>
+          <Shortcuts />
+        </ApiProvider>
+      </SidebarContext.Provider>,
     );
     await waitFor(() => !screen.queryByTestId('progress'));
     expect(screen.getByText('Add Shortcuts')).toBeInTheDocument();