diff --git a/.changeset/forty-insects-drop.md b/.changeset/forty-insects-drop.md new file mode 100644 index 0000000000..e2a94662ed --- /dev/null +++ b/.changeset/forty-insects-drop.md @@ -0,0 +1,5 @@ +--- +'@backstage/frontend-test-utils': patch +--- + +Updates for compatibility with the new extension IDs. diff --git a/packages/frontend-test-utils/src/app/createExtensionTester.test.tsx b/packages/frontend-test-utils/src/app/createExtensionTester.test.tsx index 398acf4c74..e738bee7d1 100644 --- a/packages/frontend-test-utils/src/app/createExtensionTester.test.tsx +++ b/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:
test
}), @@ -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'", ); }); }); diff --git a/packages/frontend-test-utils/src/app/createExtensionTester.ts b/packages/frontend-test-utils/src/app/createExtensionTester.ts index c95ece342d..b6d6542818 100644 --- a/packages/frontend-test-utils/src/app/createExtensionTester.ts +++ b/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( - subject: Extension, + subject: ExtensionDefinition, options?: { config?: TConfig }, ): ExtensionTester { const tester = new ExtensionTester(); @@ -33,16 +38,22 @@ export class ExtensionTester { } readonly #extensions = new Array<{ - extension: Extension; + id: string; + extension: ExtensionDefinition; config?: JsonValue; }>(); add( - extension: Extension, + extension: ExtensionDefinition, 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( - subject: Extension, + subject: ExtensionDefinition, options?: { config?: TConfig }, ): ExtensionTester { return ExtensionTester.forSubject(subject, options); diff --git a/plugins/search-react/src/alpha.test.tsx b/plugins/search-react/src/alpha.test.tsx index 11e0b3fdb0..6950dec664 100644 --- a/plugins/search-react/src/alpha.test.tsx +++ b/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({ diff --git a/plugins/tech-radar/package.json b/plugins/tech-radar/package.json index bcfcc7c583..2fba4121c7 100644 --- a/plugins/tech-radar/package.json +++ b/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", diff --git a/plugins/tech-radar/src/alpha.test.tsx b/plugins/tech-radar/src/alpha.test.tsx new file mode 100644 index 0000000000..37d39c412b --- /dev/null +++ b/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(); + }); +}); diff --git a/plugins/tech-radar/src/alpha.tsx b/plugins/tech-radar/src/alpha.tsx index 5d650bd245..295d084a9a 100644 --- a/plugins/tech-radar/src/alpha.tsx +++ b/plugins/tech-radar/src/alpha.tsx @@ -47,7 +47,7 @@ export const TechRadarPage = createPageExtension({ import('./components').then(m => ), }); -const sampleTechRadarApi = createApiExtension({ +export const sampleTechRadarApi = createApiExtension({ factory() { return createApiFactory(techRadarApiRef, new SampleTechRadarApi()); }, diff --git a/yarn.lock b/yarn.lock index 45e22286fa..aac0b29773 100644 --- a/yarn.lock +++ b/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