,
+ options?: { config?: TConfig },
+): ExtensionTester {
+ return ExtensionTester.forSubject(subject, options);
+}
diff --git a/packages/frontend-test-utils/src/app/index.ts b/packages/frontend-test-utils/src/app/index.ts
new file mode 100644
index 0000000000..3152fac6e7
--- /dev/null
+++ b/packages/frontend-test-utils/src/app/index.ts
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export {
+ createExtensionTester,
+ type ExtensionTester,
+} from './createExtensionTester';
diff --git a/packages/frontend-test-utils/src/index.ts b/packages/frontend-test-utils/src/index.ts
new file mode 100644
index 0000000000..6a28cc2abe
--- /dev/null
+++ b/packages/frontend-test-utils/src/index.ts
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+/**
+ * @packageDocumentation
+ *
+ * Contains utilities that can be used when testing frontend features such as extensions.
+ */
+
+export * from './app';
diff --git a/packages/frontend-test-utils/src/setupTests.ts b/packages/frontend-test-utils/src/setupTests.ts
new file mode 100644
index 0000000000..c30f1d15cb
--- /dev/null
+++ b/packages/frontend-test-utils/src/setupTests.ts
@@ -0,0 +1,17 @@
+/*
+ * 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 '@testing-library/jest-dom';
diff --git a/plugins/search-react/package.json b/plugins/search-react/package.json
index bef3865069..50f4de28ba 100644
--- a/plugins/search-react/package.json
+++ b/plugins/search-react/package.json
@@ -69,6 +69,7 @@
"@backstage/cli": "workspace:^",
"@backstage/core-app-api": "workspace:^",
"@backstage/frontend-app-api": "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/search-react/src/alpha.test.tsx b/plugins/search-react/src/alpha.test.tsx
index 5222e4dad5..e1a8166390 100644
--- a/plugins/search-react/src/alpha.test.tsx
+++ b/plugins/search-react/src/alpha.test.tsx
@@ -14,41 +14,28 @@
* limitations under the License.
*/
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-
import {
createExtensionInput,
createPageExtension,
- createPlugin,
createSchemaFromZod,
} from '@backstage/frontend-plugin-api';
+import { createExtensionTester } from '@backstage/frontend-test-utils';
import { SearchResult } from '@backstage/plugin-search-common';
-import { createApp } from '@backstage/frontend-app-api';
-import { MockConfigApi } from '@backstage/test-utils';
-
+import { screen } from '@testing-library/react';
+import React from 'react';
import {
BaseSearchResultListItemProps,
createSearchResultListItemExtension,
searchResultItemExtensionData as searchResultListItemExtensionData,
} from './alpha';
-// TODO: Remove this mock when we have a permanent solution for nav items extensions
-// The `GraphiQLIcon` used in "packages/frontend-app-api/src/extensions/CoreNav.tsx" file
-// is throwing a "ReferenceError: ref is not defined" error during test
-jest.mock('@backstage/plugin-graphiql', () => ({
- ...jest.requireActual('@backstage/plugin-graphiql'),
- GraphiQLIcon: () => null,
-}));
-
describe('createSearchResultListItemExtension', () => {
it('Should use the correct result component', async () => {
- type TechDocsSearchReasulListItemProps = BaseSearchResultListItemProps<{
+ type TechDocsSearchResultListItemProps = BaseSearchResultListItemProps<{
lineClamp: number;
}>;
const TechDocsSearchResultItemComponent = (
- props: TechDocsSearchReasulListItemProps,
+ props: TechDocsSearchResultListItemProps,
) => (
TechDocs - Rank: {props.rank} - Line clamp: {props.lineClamp}
@@ -60,10 +47,12 @@ describe('createSearchResultListItemExtension', () => {
id: 'techdocs',
attachTo: { id: 'plugin.search.page', input: 'items' },
configSchema: createSchemaFromZod(z =>
- z.object({
- noTrack: z.boolean().default(true),
- lineClamp: z.number().default(5),
- }),
+ z
+ .object({
+ noTrack: z.boolean().default(true),
+ lineClamp: z.number().default(5),
+ })
+ .default({}),
),
predicate: result => result.type === 'techdocs',
component:
@@ -158,34 +147,15 @@ describe('createSearchResultListItemExtension', () => {
},
});
- const SearchPlugin = createPlugin({
- id: 'search.plugin',
- extensions: [
- SearchPageExtension,
- ExploreSearchResultItemExtension,
- TechDocsSearchResultItemExtension,
- ],
- });
-
- const app = createApp({
- features: [SearchPlugin],
- configLoader: async () =>
- new MockConfigApi({
- app: {
- extensions: [
- {
- 'plugin.search.result.item.techdocs': {
- config: {
- lineClamp: 3,
- },
- },
- },
- ],
- },
- }),
- });
-
- render(app.createRoot());
+ createExtensionTester(SearchPageExtension)
+ .add(TechDocsSearchResultItemExtension, {
+ // TODO(Rugvip): We need to make the config input type available for use here
+ config: {
+ lineClamp: 3,
+ } as any,
+ })
+ .add(ExploreSearchResultItemExtension)
+ .render();
expect(await screen.findByText(/Search Page/)).toBeInTheDocument();
diff --git a/yarn.lock b/yarn.lock
index 0a5ad1d720..bce2a24505 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4354,6 +4354,7 @@ __metadata:
"@backstage/core-components": "workspace:^"
"@backstage/core-plugin-api": "workspace:^"
"@backstage/frontend-app-api": "workspace:^"
+ "@backstage/frontend-test-utils": "workspace:^"
"@backstage/test-utils": "workspace:^"
"@backstage/types": "workspace:^"
"@backstage/version-bridge": "workspace:^"
@@ -4371,6 +4372,22 @@ __metadata:
languageName: unknown
linkType: soft
+"@backstage/frontend-test-utils@workspace:^, @backstage/frontend-test-utils@workspace:packages/frontend-test-utils":
+ version: 0.0.0-use.local
+ resolution: "@backstage/frontend-test-utils@workspace:packages/frontend-test-utils"
+ dependencies:
+ "@backstage/cli": "workspace:^"
+ "@backstage/frontend-app-api": "workspace:^"
+ "@backstage/frontend-plugin-api": "workspace:^"
+ "@backstage/test-utils": "workspace:^"
+ "@backstage/types": "workspace:^"
+ "@testing-library/jest-dom": ^6.0.0
+ peerDependencies:
+ "@testing-library/react": ^12.1.3 || ^13.0.0 || ^14.0.0
+ react: ^16.13.1 || ^17.0.0 || ^18.0.0
+ languageName: unknown
+ linkType: soft
+
"@backstage/integration-aws-node@workspace:^, @backstage/integration-aws-node@workspace:packages/integration-aws-node":
version: 0.0.0-use.local
resolution: "@backstage/integration-aws-node@workspace:packages/integration-aws-node"
@@ -9117,6 +9134,7 @@ __metadata:
"@backstage/core-plugin-api": "workspace:^"
"@backstage/frontend-app-api": "workspace:^"
"@backstage/frontend-plugin-api": "workspace:^"
+ "@backstage/frontend-test-utils": "workspace:^"
"@backstage/plugin-search-common": "workspace:^"
"@backstage/test-utils": "workspace:^"
"@backstage/theme": "workspace:^"