packages,plugins: migrate to using TestApiProvider and Registry

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/app/src/components/catalog/EntityPage.test.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
 import { EntityLayout } from '@backstage/plugin-catalog';
 import {
   DefaultStarredEntitiesApi,
@@ -22,7 +21,11 @@ import {
   starredEntitiesApiRef,
 } from '@backstage/plugin-catalog-react';
 import { githubActionsApiRef } from '@backstage/plugin-github-actions';
-import { MockStorageApi, renderInTestApp } from '@backstage/test-utils';
+import {
+  MockStorageApi,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/test-utils';
 import React from 'react';
 import { cicdContent } from './EntityPage';
 
@@ -45,22 +48,22 @@ describe('EntityPage Test', () => {
 
   const mockedApi = {
     listWorkflowRuns: jest.fn().mockResolvedValue([]),
-    getWorkflow: jest.fn(),
-    getWorkflowRun: jest.fn(),
-    reRunWorkflow: jest.fn(),
-    listJobsForWorkflowRun: jest.fn(),
-    downloadJobLogsForWorkflowRun: jest.fn(),
-  } as jest.Mocked<typeof githubActionsApiRef.T>;
-
-  const apis = ApiRegistry.with(githubActionsApiRef, mockedApi).with(
-    starredEntitiesApiRef,
-    new DefaultStarredEntitiesApi({ storageApi: MockStorageApi.create() }),
-  );
+  };
 
   describe('cicdContent', () => {
     it('Should render GitHub Actions View', async () => {
       const rendered = await renderInTestApp(
-        <ApiProvider apis={apis}>
+        <TestApiProvider
+          apis={[
+            [githubActionsApiRef, mockedApi],
+            [
+              starredEntitiesApiRef,
+              new DefaultStarredEntitiesApi({
+                storageApi: MockStorageApi.create(),
+              }),
+            ],
+          ]}
+        >
           <EntityProvider entity={entity}>
             <EntityLayout>
               <EntityLayout.Route path="/ci-cd" title="CI-CD">
@@ -68,7 +71,7 @@ describe('EntityPage Test', () => {
               </EntityLayout.Route>
             </EntityLayout>
           </EntityProvider>
-        </ApiProvider>,
+        </TestApiProvider>,
       );
 
       expect(rendered.getByText('ExampleComponent')).toBeInTheDocument();

packages/dev-utils/src/devApp/SidebarThemeSwitcher.test.tsx

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
+
 import { AppThemeApi, appThemeApiRef } from '@backstage/core-plugin-api';
-import { renderInTestApp } from '@backstage/test-utils';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { BackstageTheme } from '@backstage/theme';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -24,7 +24,6 @@ import { SidebarThemeSwitcher } from './SidebarThemeSwitcher';
 
 describe('SidebarThemeSwitcher', () => {
   let appThemeApi: jest.Mocked<AppThemeApi>;
-  let apiRegistry: ApiRegistry;
 
   beforeEach(() => {
     appThemeApi = {
@@ -51,15 +50,13 @@ describe('SidebarThemeSwitcher', () => {
         theme: {} as unknown as BackstageTheme,
       },
     ]);
-
-    apiRegistry = ApiRegistry.with(appThemeApiRef, appThemeApi);
   });
 
   it('should display current theme', async () => {
     const { getByLabelText, getByRole, getByText } = await renderInTestApp(
-      <ApiProvider apis={apiRegistry}>
+      <TestApiProvider apis={[[appThemeApiRef, appThemeApi]]}>
         <SidebarThemeSwitcher />
-      </ApiProvider>,
+      </TestApiProvider>,
     );
 
     const button = getByLabelText('Switch Theme');
@@ -76,9 +73,9 @@ describe('SidebarThemeSwitcher', () => {
 
   it('should select different theme', async () => {
     const { getByLabelText, getByRole, getByText } = await renderInTestApp(
-      <ApiProvider apis={apiRegistry}>
+      <TestApiProvider apis={[[appThemeApiRef, appThemeApi]]}>
         <SidebarThemeSwitcher />
-      </ApiProvider>,
+      </TestApiProvider>,
     );
 
     const button = getByLabelText('Switch Theme');

packages/storybook/.storybook/apis.js

@@ -1,6 +1,5 @@
 import {
   AlertApiForwarder,
-  ApiRegistry,
   ErrorAlerter,
   ErrorApiForwarder,
   GithubAuth,
@@ -27,78 +26,57 @@ import {
   configApiRef,
 } from '@backstage/core-plugin-api';
 
-const builder = ApiRegistry.builder();
-
-builder.add(configApiRef, new ConfigReader({}));
-
-const alertApi = builder.add(alertApiRef, new AlertApiForwarder());
-
-builder.add(errorApiRef, new ErrorAlerter(alertApi, new ErrorApiForwarder()));
-
-builder.add(identityApiRef, {
+const configApi = new ConfigReader({});
+const alertApi = new AlertApiForwarder();
+const errorApi = new ErrorAlerter(alertApi, new ErrorApiForwarder());
+const identityApi = {
   getUserId: () => 'guest',
   getProfile: () => ({ email: 'guest@example.com' }),
   getIdToken: () => undefined,
   signOut: async () => {},
+};
+const oauthRequestApi = new OAuthRequestManager();
+const googleAuthApi = GoogleAuth.create({
+  apiOrigin: 'http://localhost:7000',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const githubAuthApi = GithubAuth.create({
+  apiOrigin: 'http://localhost:7000',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const gitlabAuthApi = GitlabAuth.create({
+  apiOrigin: 'http://localhost:7000',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const oktaAuthApi = OktaAuth.create({
+  apiOrigin: 'http://localhost:7000',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const auth0AuthApi = Auth0Auth.create({
+  apiOrigin: 'http://localhost:7000',
+  basePath: '/auth/',
+  oauthRequestApi,
+});
+const oauth2Api = OAuth2.create({
+  apiOrigin: 'http://localhost:7000',
+  basePath: '/auth/',
+  oauthRequestApi,
 });
 
-const oauthRequestApi = builder.add(
-  oauthRequestApiRef,
-  new OAuthRequestManager(),
-);
-
-builder.add(
-  googleAuthApiRef,
-  GoogleAuth.create({
-    apiOrigin: 'http://localhost:7000',
-    basePath: '/auth/',
-    oauthRequestApi,
-  }),
-);
-
-builder.add(
-  githubAuthApiRef,
-  GithubAuth.create({
-    apiOrigin: 'http://localhost:7000',
-    basePath: '/auth/',
-    oauthRequestApi,
-  }),
-);
-
-builder.add(
-  gitlabAuthApiRef,
-  GitlabAuth.create({
-    apiOrigin: 'http://localhost:7000',
-    basePath: '/auth/',
-    oauthRequestApi,
-  }),
-);
-
-builder.add(
-  oktaAuthApiRef,
-  OktaAuth.create({
-    apiOrigin: 'http://localhost:7000',
-    basePath: '/auth/',
-    oauthRequestApi,
-  }),
-);
-
-builder.add(
-  auth0AuthApiRef,
-  Auth0Auth.create({
-    apiOrigin: 'http://localhost:7000',
-    basePath: '/auth/',
-    oauthRequestApi,
-  }),
-);
-
-builder.add(
-  oauth2ApiRef,
-  OAuth2.create({
-    apiOrigin: 'http://localhost:7000',
-    basePath: '/auth/',
-    oauthRequestApi,
-  }),
-);
-
-export const apis = builder.build();
+export const apis = [
+  [configApiRef, configApi],
+  [alertApiRef, alertApi],
+  [errorApiRef, errorApi],
+  [identityApiRef, identityApi],
+  [oauthRequestApiRef, oauthRequestApi],
+  [googleAuthApiRef, googleAuthApi],
+  [githubAuthApiRef, githubAuthApi],
+  [gitlabAuthApiRef, gitlabAuthApi],
+  [oktaAuthApiRef, oktaAuthApi],
+  [auth0AuthApiRef, auth0AuthApi],
+  [oauth2ApiRef, oauth2Api],
+];

packages/storybook/.storybook/preview.js

@@ -6,17 +6,17 @@ import { useDarkMode } from 'storybook-dark-mode';
 import { apis } from './apis';
 
 import { Content, AlertDisplay } from '@backstage/core-components';
-import { ApiProvider } from '@backstage/core-app-api';
+import { TestApiProvider } from '@backstage/test-utils';
 
 addDecorator(story => (
-  <ApiProvider apis={apis}>
+  <TestApiProvider apis={apis}>
     <ThemeProvider theme={useDarkMode() ? darkTheme : lightTheme}>
       <CssBaseline>
         <AlertDisplay />
         <Content>{story()}</Content>
       </CssBaseline>
     </ThemeProvider>
-  </ApiProvider>
+  </TestApiProvider>
 ));
 
 addParameters({

packages/test-utils/src/testUtils/TestApiProvider.tsx

@@ -54,7 +54,7 @@ export class TestApiRegistry implements ApiHolder {
    *
    * @example
    * ```ts
-   * const apis = TestApiRegistry.with(
+   * const apis = TestApiRegistry.from(
    *   [configApiRef, new ConfigReader({})],
    *   [identityApiRef, { getUserId: () => 'tester' }],
    * );

packages/test-utils/src/testUtils/appWrappers.test.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
 import {
   createExternalRouteRef,
   createRouteRef,
@@ -29,6 +28,7 @@ import React, { useEffect } from 'react';
 import { Route, Routes } from 'react-router';
 import { MockErrorApi } from './apis';
 import { renderInTestApp, wrapInTestApp } from './appWrappers';
+import { TestApiProvider } from './TestApiProvider';
 
 describe('wrapInTestApp', () => {
   it('should provide routing and warn about missing act()', async () => {
@@ -111,9 +111,9 @@ describe('wrapInTestApp', () => {
     };
 
     const rendered = await renderInTestApp(
-      <ApiProvider apis={ApiRegistry.with(errorApiRef, mockErrorApi)}>
+      <TestApiProvider apis={[[errorApiRef, mockErrorApi]]}>
         <A />
-      </ApiProvider>,
+      </TestApiProvider>,
     );
 
     expect(rendered.getByText('foo')).toBeInTheDocument();