frontend-test-utils: updates to work with new extension IDs

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/forty-insects-drop.md

@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-test-utils': patch
+---
+
+Updates for compatibility with the new extension IDs.

packages/frontend-test-utils/src/app/createExtensionTester.test.tsx

@@ -26,7 +26,7 @@ describe('createExtensionTester', () => {
   it('should render a simple extension', async () => {
     createExtensionTester(
       createExtension({
-        id: 'test',
+        namespace: 'test',
         attachTo: { id: 'ignored', input: 'ignored' },
         output: { element: coreExtensionData.reactElement },
         factory: () => ({ element: <div>test</div> }),
@@ -39,7 +39,7 @@ describe('createExtensionTester', () => {
   it('should render an extension even if disabled by default', async () => {
     createExtensionTester(
       createExtension({
-        id: 'test',
+        namespace: 'test',
         attachTo: { id: 'ignored', input: 'ignored' },
         disabled: true,
         output: { element: coreExtensionData.reactElement },
@@ -54,7 +54,7 @@ describe('createExtensionTester', () => {
     expect(() =>
       createExtensionTester(
         createExtension({
-          id: 'test',
+          namespace: 'test',
           attachTo: { id: 'ignored', input: 'ignored' },
           disabled: true,
           output: { path: coreExtensionData.routePath },
@@ -62,7 +62,7 @@ describe('createExtensionTester', () => {
         }),
       ).render(),
     ).toThrow(
-      "Failed to instantiate extension 'core.router', input 'children' did not receive required extension data 'core.reactElement' from extension 'test'",
+      "Failed to instantiate extension 'core/router', input 'children' did not receive required extension data 'core.reactElement' from extension 'test'",
     );
   });
 });

packages/frontend-test-utils/src/app/createExtensionTester.ts

@@ -15,7 +15,12 @@
  */
 
 import { createSpecializedApp } from '@backstage/frontend-app-api';
-import { Extension, createPlugin } from '@backstage/frontend-plugin-api';
+import {
+  ExtensionDefinition,
+  createExtensionOverrides,
+} from '@backstage/frontend-plugin-api';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { resolveExtensionDefinition } from '../../../frontend-plugin-api/src/wiring/resolveExtensionDefinition';
 import { MockConfigApi } from '@backstage/test-utils';
 import { JsonArray, JsonObject, JsonValue } from '@backstage/types';
 import { RenderResult, render } from '@testing-library/react';
@@ -24,7 +29,7 @@ import { RenderResult, render } from '@testing-library/react';
 export class ExtensionTester {
   /** @internal */
   static forSubject<TConfig>(
-    subject: Extension<TConfig>,
+    subject: ExtensionDefinition<TConfig>,
     options?: { config?: TConfig },
   ): ExtensionTester {
     const tester = new ExtensionTester();
@@ -33,16 +38,22 @@ export class ExtensionTester {
   }
 
   readonly #extensions = new Array<{
-    extension: Extension<any>;
+    id: string;
+    extension: ExtensionDefinition<any>;
     config?: JsonValue;
   }>();
 
   add<TConfig>(
-    extension: Extension<TConfig>,
+    extension: ExtensionDefinition<TConfig>,
     options?: { config?: TConfig },
   ): ExtensionTester {
+    const withNamespace = {
+      ...extension,
+      namespace: extension.namespace ?? 'test',
+    };
     this.#extensions.push({
-      extension,
+      id: resolveExtensionDefinition(withNamespace).id,
+      extension: withNamespace,
       config: options?.config as JsonValue,
     });
 
@@ -61,25 +72,25 @@ export class ExtensionTester {
 
     const extensionsConfig: JsonArray = [
       ...rest.map(entry => ({
-        [entry.extension.id]: {
+        [entry.id]: {
           config: entry.config,
         },
       })),
       {
-        [subject.extension.id]: {
-          attachTo: { id: 'core.router', input: 'children' },
+        [subject.id]: {
+          attachTo: { id: 'core/router', input: 'children' },
           config: subject.config,
           disabled: false,
         },
       },
       {
-        'core.layout': false,
+        'core/layout': false,
       },
       {
-        'core.nav': false,
+        'core/nav': false,
       },
       {
-        'core.routes': false,
+        'core/routes': false,
       },
     ];
 
@@ -93,8 +104,7 @@ export class ExtensionTester {
 
     const app = createSpecializedApp({
       features: [
-        createPlugin({
-          id: 'test',
+        createExtensionOverrides({
           extensions: this.#extensions.map(entry => entry.extension),
         }),
       ],
@@ -107,7 +117,7 @@ export class ExtensionTester {
 
 /** @public */
 export function createExtensionTester<TConfig>(
-  subject: Extension<TConfig>,
+  subject: ExtensionDefinition<TConfig>,
   options?: { config?: TConfig },
 ): ExtensionTester {
   return ExtensionTester.forSubject(subject, options);

plugins/search-react/src/alpha.test.tsx

@@ -44,7 +44,7 @@ describe('createSearchResultListItemExtension', () => {
 
     const TechDocsSearchResultItemExtension =
       createSearchResultListItemExtension({
-        attachTo: { id: 'plugin.search.page', input: 'items' },
+        namespace: 'techdocs',
         configSchema: createSchemaFromZod(z =>
           z
             .object({
@@ -66,12 +66,13 @@ describe('createSearchResultListItemExtension', () => {
 
     const ExploreSearchResultItemExtension =
       createSearchResultListItemExtension({
-        attachTo: { id: 'plugin.search.page', input: 'items' },
+        namespace: 'explore',
         predicate: result => result.type === 'explore',
         component: async () => ExploreSearchResultItemComponent,
       });
 
     const SearchPageExtension = createPageExtension({
+      namespace: 'search',
       defaultPath: '/',
       inputs: {
         items: createExtensionInput({

plugins/tech-radar/package.json

@@ -68,6 +68,7 @@
     "@backstage/cli": "workspace:^",
     "@backstage/core-app-api": "workspace:^",
     "@backstage/dev-utils": "workspace:^",
+    "@backstage/frontend-test-utils": "workspace:^",
     "@backstage/test-utils": "workspace:^",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^6.0.0",

plugins/tech-radar/src/alpha.test.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createExtensionTester } from '@backstage/frontend-test-utils';
+import { screen } from '@testing-library/react';
+import { TechRadarPage, sampleTechRadarApi } from './alpha';
+
+describe('TechRadarPage', () => {
+  beforeAll(() => {
+    Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
+      value: () => ({ width: 100, height: 100 }),
+      configurable: true,
+    });
+  });
+
+  it('renders without exploding', async () => {
+    createExtensionTester(TechRadarPage).add(sampleTechRadarApi).render();
+
+    await expect(screen.findByText('Tech Radar')).resolves.toBeInTheDocument();
+  });
+});

plugins/tech-radar/src/alpha.tsx

@@ -47,7 +47,7 @@ export const TechRadarPage = createPageExtension({
     import('./components').then(m => <m.RadarPage {...config} />),
 });
 
-const sampleTechRadarApi = createApiExtension({
+export const sampleTechRadarApi = createApiExtension({
   factory() {
     return createApiFactory(techRadarApiRef, new SampleTechRadarApi());
   },

yarn.lock

@@ -9587,6 +9587,7 @@ __metadata:
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
     "@backstage/frontend-plugin-api": "workspace:^"
+    "@backstage/frontend-test-utils": "workspace:^"
     "@backstage/test-utils": "workspace:^"
     "@backstage/theme": "workspace:^"
     "@material-ui/core": ^4.12.2