search-react: use frontend-test-utils

Co-authored-by: Vincenzo Scamporlino <vincenzos@spotify.com>
Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

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",

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,
     ) => (
       <div>
         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());
+    await 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();