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..102ad35cb3 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()); + 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(); diff --git a/yarn.lock b/yarn.lock index 45a07bc83a..3121aa5326 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9105,6 +9105,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:^"