test(search): mock config api ref

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/search-react/src/components/SearchBar/SearchBar.test.tsx

@@ -43,10 +43,6 @@ const createInitialState = ({
 describe('SearchBar', () => {
   const user = userEvent.setup({ delay: null });
 
-  const query = jest.fn().mockResolvedValue({ results: [] });
-
-  const searchApiMock = { query };
-
   const configApiMock = new ConfigReader({
     app: {
       title: 'Mock title',
@@ -58,6 +54,8 @@ describe('SearchBar', () => {
     },
   });
 
+  const searchApiMock = { query: jest.fn().mockResolvedValue({ results: [] }) };
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -172,7 +170,7 @@ describe('SearchBar', () => {
 
     await waitFor(() => expect(textbox).toHaveValue(value));
 
-    expect(query).toHaveBeenLastCalledWith(
+    expect(searchApiMock.query).toHaveBeenLastCalledWith(
       expect.objectContaining({ term: value }),
     );
 
@@ -204,7 +202,7 @@ describe('SearchBar', () => {
 
     await waitFor(() => expect(textbox).toHaveValue(''));
 
-    expect(query).toHaveBeenLastCalledWith(
+    expect(searchApiMock.query).toHaveBeenLastCalledWith(
       expect.objectContaining({ term: '' }),
     );
   });
@@ -255,7 +253,7 @@ describe('SearchBar', () => {
     await user.type(textbox, value);
 
     await waitFor(() =>
-      expect(query).not.toHaveBeenLastCalledWith(
+      expect(searchApiMock.query).not.toHaveBeenLastCalledWith(
         expect.objectContaining({ term: value }),
       ),
     );
@@ -266,7 +264,7 @@ describe('SearchBar', () => {
 
     await waitFor(() => expect(textbox).toHaveValue(value));
 
-    expect(query).toHaveBeenLastCalledWith(
+    expect(searchApiMock.query).toHaveBeenLastCalledWith(
       expect.objectContaining({ term: value }),
     );
 

plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TestApiProvider } from '@backstage/test-utils';
+import { MockConfigApi, TestApiProvider } from '@backstage/test-utils';
 import { screen, render, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -22,6 +22,7 @@ import React from 'react';
 import { searchApiRef } from '../../api';
 import { SearchContextProvider, useSearch } from '../../context';
 import { SearchFilter } from './SearchFilter';
+import { configApiRef } from '@backstage/core-plugin-api';
 
 const SearchContextFilterSpy = ({ name }: { name: string }) => {
   const { filters } = useSearch();
@@ -34,7 +35,16 @@ const SearchContextFilterSpy = ({ name }: { name: string }) => {
 };
 
 describe('SearchFilter.Autocomplete', () => {
-  const query = jest.fn().mockResolvedValue({});
+  const configApiMock = new MockConfigApi({
+    search: {
+      query: {
+        pageLimit: 100,
+      },
+    },
+  });
+
+  const searchApiMock = { query: jest.fn().mockResolvedValue({ results: [] }) };
+
   const emptySearchContext = {
     term: '',
     types: [],
@@ -46,7 +56,12 @@ describe('SearchFilter.Autocomplete', () => {
 
   it('renders as expected', async () => {
     render(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider>
           <SearchFilter.Autocomplete name={name} values={values} />
         </SearchContextProvider>
@@ -67,7 +82,12 @@ describe('SearchFilter.Autocomplete', () => {
 
   it('renders as expected with async values', async () => {
     render(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider>
           <SearchFilter.Autocomplete name={name} values={async () => values} />
         </SearchContextProvider>
@@ -88,7 +108,12 @@ describe('SearchFilter.Autocomplete', () => {
 
   it('does not affect unrelated filter state', async () => {
     render(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider
           initialState={{
             ...emptySearchContext,
@@ -132,7 +157,12 @@ describe('SearchFilter.Autocomplete', () => {
   describe('single', () => {
     it('renders as expected with defaultValue', async () => {
       render(
-        <TestApiProvider apis={[[searchApiRef, { query }]]}>
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
           <SearchContextProvider>
             <SearchFilter.Autocomplete
               name={name}
@@ -157,7 +187,12 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('renders as expected with initial context', async () => {
       render(
-        <TestApiProvider apis={[[searchApiRef, { query }]]}>
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
           <SearchContextProvider
             initialState={{
               ...emptySearchContext,
@@ -183,7 +218,12 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('sets filter state when selecting a value', async () => {
       render(
-        <TestApiProvider apis={[[searchApiRef, { query }]]}>
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
           <SearchContextProvider>
             <SearchFilter.Autocomplete name={name} values={values} />
             <SearchContextFilterSpy name={name} />
@@ -221,7 +261,12 @@ describe('SearchFilter.Autocomplete', () => {
   describe('multiple', () => {
     it('renders as expected with defaultValue', async () => {
       render(
-        <TestApiProvider apis={[[searchApiRef, { query }]]}>
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
           <SearchContextProvider>
             <SearchFilter.Autocomplete
               multiple
@@ -245,7 +290,12 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('renders as expected with initial context', async () => {
       render(
-        <TestApiProvider apis={[[searchApiRef, { query }]]}>
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
           <SearchContextProvider
             initialState={{
               ...emptySearchContext,
@@ -269,7 +319,12 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('respects tag limit configuration', async () => {
       render(
-        <TestApiProvider apis={[[searchApiRef, { query }]]}>
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
           <SearchContextProvider>
             <SearchFilter.Autocomplete
               multiple
@@ -318,7 +373,12 @@ describe('SearchFilter.Autocomplete', () => {
 
     it('sets filter state when selecting a value', async () => {
       render(
-        <TestApiProvider apis={[[searchApiRef, { query }]]}>
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
           <SearchContextProvider>
             <SearchFilter.Autocomplete multiple name={name} values={values} />
             <SearchContextFilterSpy name={name} />

plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx

@@ -18,15 +18,12 @@ import React from 'react';
 import { screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { useApi } from '@backstage/core-plugin-api';
+import { configApiRef } from '@backstage/core-plugin-api';
 
 import { SearchContextProvider } from '../../context';
 import { SearchFilter } from './SearchFilter';
-
-jest.mock('@backstage/core-plugin-api', () => ({
-  ...jest.requireActual('@backstage/core-plugin-api'),
-  useApi: jest.fn().mockReturnValue({}),
-}));
+import { MockConfigApi, TestApiProvider } from '@backstage/test-utils';
+import { searchApiRef } from '../../api';
 
 describe('SearchFilter', () => {
   const initialState = {
@@ -40,8 +37,15 @@ describe('SearchFilter', () => {
   const values = ['value1', 'value2'];
   const filters = { unrelated: 'unrelated' };
 
-  const query = jest.fn().mockResolvedValue({});
-  (useApi as jest.Mock).mockReturnValue({ query: query });
+  const configApiMock = new MockConfigApi({
+    search: {
+      query: {
+        pagelimit: 10,
+      },
+    },
+  });
+
+  const searchApiMock = { query: jest.fn().mockResolvedValue({ results: [] }) };
 
   afterAll(() => {
     jest.resetAllMocks();
@@ -58,9 +62,16 @@ describe('SearchFilter', () => {
   describe('Checkbox', () => {
     it('Renders field name and values when provided as props', async () => {
       render(
-        <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Checkbox label={label} name={name} values={values} />
-        </SearchContextProvider>,
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <SearchContextProvider initialState={initialState}>
+            <SearchFilter.Checkbox label={label} name={name} values={values} />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -77,16 +88,23 @@ describe('SearchFilter', () => {
 
     it('Renders correctly based on filter state', async () => {
       render(
-        <SearchContextProvider
-          initialState={{
-            ...initialState,
-            filters: {
-              [name]: [values[1]],
-            },
-          }}
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
         >
-          <SearchFilter.Checkbox label={label} name={name} values={values} />
-        </SearchContextProvider>,
+          <SearchContextProvider
+            initialState={{
+              ...initialState,
+              filters: {
+                [name]: [values[1]],
+              },
+            }}
+          >
+            <SearchFilter.Checkbox label={label} name={name} values={values} />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -101,14 +119,21 @@ describe('SearchFilter', () => {
 
     it('Renders correctly based on defaultValue', async () => {
       render(
-        <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Checkbox
-            label={label}
-            name={name}
-            values={values}
-            defaultValue={[values[0]]}
-          />
-        </SearchContextProvider>,
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <SearchContextProvider initialState={initialState}>
+            <SearchFilter.Checkbox
+              label={label}
+              name={name}
+              values={values}
+              defaultValue={[values[0]]}
+            />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -123,9 +148,16 @@ describe('SearchFilter', () => {
 
     it('Checking / unchecking a value sets filter state', async () => {
       render(
-        <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Checkbox label={label} name={name} values={values} />
-        </SearchContextProvider>,
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <SearchContextProvider initialState={initialState}>
+            <SearchFilter.Checkbox label={label} name={name} values={values} />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -137,7 +169,7 @@ describe('SearchFilter', () => {
       // Check the box.
       await userEvent.click(checkBox);
       await waitFor(() => {
-        expect(query).toHaveBeenLastCalledWith(
+        expect(searchApiMock.query).toHaveBeenLastCalledWith(
           expect.objectContaining({ filters: { field: [values[0]] } }),
         );
       });
@@ -145,7 +177,7 @@ describe('SearchFilter', () => {
       // Uncheck the box.
       await userEvent.click(checkBox);
       await waitFor(() => {
-        expect(query).toHaveBeenLastCalledWith(
+        expect(searchApiMock.query).toHaveBeenLastCalledWith(
           expect.objectContaining({ filters: {} }),
         );
       });
@@ -153,9 +185,16 @@ describe('SearchFilter', () => {
 
     it('Checking / unchecking a value maintains unrelated filter state', async () => {
       render(
-        <SearchContextProvider initialState={{ ...initialState, filters }}>
-          <SearchFilter.Checkbox label={label} name={name} values={values} />
-        </SearchContextProvider>,
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <SearchContextProvider initialState={{ ...initialState, filters }}>
+            <SearchFilter.Checkbox label={label} name={name} values={values} />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -167,7 +206,7 @@ describe('SearchFilter', () => {
       // Check the box.
       await userEvent.click(checkBox);
       await waitFor(() => {
-        expect(query).toHaveBeenLastCalledWith(
+        expect(searchApiMock.query).toHaveBeenLastCalledWith(
           expect.objectContaining({
             filters: { ...filters, field: [values[0]] },
           }),
@@ -177,7 +216,7 @@ describe('SearchFilter', () => {
       // Uncheck the box.
       await userEvent.click(checkBox);
       await waitFor(() => {
-        expect(query).toHaveBeenLastCalledWith(
+        expect(searchApiMock.query).toHaveBeenLastCalledWith(
           expect.objectContaining({ filters }),
         );
       });
@@ -187,9 +226,16 @@ describe('SearchFilter', () => {
   describe('Select', () => {
     it('Renders field name and values when provided as props', async () => {
       render(
-        <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Select label={label} name={name} values={values} />
-        </SearchContextProvider>,
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <SearchContextProvider initialState={initialState}>
+            <SearchFilter.Select label={label} name={name} values={values} />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -212,13 +258,20 @@ describe('SearchFilter', () => {
 
     it('Renders values when provided asynchronously', async () => {
       render(
-        <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Select
-            label={label}
-            name={name}
-            values={async () => values}
-          />
-        </SearchContextProvider>,
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <SearchContextProvider initialState={initialState}>
+            <SearchFilter.Select
+              label={label}
+              name={name}
+              values={async () => values}
+            />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -244,16 +297,23 @@ describe('SearchFilter', () => {
 
     it('Renders correctly based on filter state', async () => {
       render(
-        <SearchContextProvider
-          initialState={{
-            ...initialState,
-            filters: {
-              [name]: values[0],
-            },
-          }}
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
         >
-          <SearchFilter.Select label={label} name={name} values={values} />
-        </SearchContextProvider>,
+          <SearchContextProvider
+            initialState={{
+              ...initialState,
+              filters: {
+                [name]: values[0],
+              },
+            }}
+          >
+            <SearchFilter.Select label={label} name={name} values={values} />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -280,14 +340,21 @@ describe('SearchFilter', () => {
 
     it('Renders correctly based on defaultValue', async () => {
       render(
-        <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Select
-            name={name}
-            label={label}
-            values={values}
-            defaultValue={values[0]}
-          />
-        </SearchContextProvider>,
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <SearchContextProvider initialState={initialState}>
+            <SearchFilter.Select
+              name={name}
+              label={label}
+              values={values}
+              defaultValue={values[0]}
+            />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -314,9 +381,16 @@ describe('SearchFilter', () => {
 
     it('Selecting a value sets filter state', async () => {
       render(
-        <SearchContextProvider initialState={initialState}>
-          <SearchFilter.Select label={label} name={name} values={values} />
-        </SearchContextProvider>,
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
+        >
+          <SearchContextProvider initialState={initialState}>
+            <SearchFilter.Select label={label} name={name} values={values} />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -334,7 +408,7 @@ describe('SearchFilter', () => {
       await userEvent.click(screen.getByRole('option', { name: values[0] }));
 
       await waitFor(() => {
-        expect(query).toHaveBeenLastCalledWith(
+        expect(searchApiMock.query).toHaveBeenLastCalledWith(
           expect.objectContaining({
             filters: { [name]: values[0] },
           }),
@@ -350,7 +424,7 @@ describe('SearchFilter', () => {
       await userEvent.click(screen.getByRole('option', { name: 'All' }));
 
       await waitFor(() => {
-        expect(query).toHaveBeenLastCalledWith(
+        expect(searchApiMock.query).toHaveBeenLastCalledWith(
           expect.objectContaining({
             filters: {},
           }),
@@ -360,14 +434,21 @@ describe('SearchFilter', () => {
 
     it('Selecting a value maintains unrelated filter state', async () => {
       render(
-        <SearchContextProvider
-          initialState={{
-            ...initialState,
-            filters,
-          }}
+        <TestApiProvider
+          apis={[
+            [searchApiRef, searchApiMock],
+            [configApiRef, configApiMock],
+          ]}
         >
-          <SearchFilter.Select label={label} name={name} values={values} />
-        </SearchContextProvider>,
+          <SearchContextProvider
+            initialState={{
+              ...initialState,
+              filters,
+            }}
+          >
+            <SearchFilter.Select label={label} name={name} values={values} />
+          </SearchContextProvider>
+        </TestApiProvider>,
       );
 
       await waitFor(() => {
@@ -385,7 +466,7 @@ describe('SearchFilter', () => {
       await userEvent.click(screen.getByRole('option', { name: values[0] }));
 
       await waitFor(() => {
-        expect(query).toHaveBeenLastCalledWith(
+        expect(searchApiMock.query).toHaveBeenLastCalledWith(
           expect.objectContaining({
             filters: { ...filters, [name]: values[0] },
           }),
@@ -401,7 +482,7 @@ describe('SearchFilter', () => {
       await userEvent.click(screen.getByRole('option', { name: 'All' }));
 
       await waitFor(() => {
-        expect(query).toHaveBeenLastCalledWith(
+        expect(searchApiMock.query).toHaveBeenLastCalledWith(
           expect.objectContaining({ filters }),
         );
       });

plugins/search-react/src/components/SearchFilter/hooks.test.tsx

@@ -15,19 +15,32 @@
  */
 import React from 'react';
 import { ApiProvider } from '@backstage/core-app-api';
-import { TestApiRegistry } from '@backstage/test-utils';
+import { MockConfigApi, TestApiRegistry } from '@backstage/test-utils';
 import { renderHook } from '@testing-library/react-hooks';
 
 import { searchApiRef } from '../../api';
 import { SearchContextProvider, useSearch } from '../../context';
 import { useDefaultFilterValue, useAsyncFilterValues } from './hooks';
+import { configApiRef } from '@backstage/core-plugin-api';
 
 jest.useFakeTimers();
 
 describe('SearchFilter.hooks', () => {
   describe('useDefaultFilterValue', () => {
-    const query = jest.fn().mockResolvedValue({});
-    const mockApis = TestApiRegistry.from([searchApiRef, { query }]);
+    const configApiMock = new MockConfigApi({
+      search: {
+        query: {
+          pageLimit: 100,
+        },
+      },
+    });
+    const searchApiMock = {
+      query: jest.fn().mockResolvedValue({ results: [] }),
+    };
+    const mockApis = TestApiRegistry.from(
+      [searchApiRef, searchApiMock],
+      [configApiRef, configApiMock],
+    );
     const wrapper = ({
       children,
       overrides = {},

plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx

@@ -18,27 +18,47 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { renderWithEffects, TestApiProvider } from '@backstage/test-utils';
+import {
+  MockConfigApi,
+  renderWithEffects,
+  TestApiProvider,
+} from '@backstage/test-utils';
 
 import { searchApiRef } from '../../api';
 import { SearchContextProvider } from '../../context';
 
 import { SearchPagination } from './SearchPagination';
-
-const query = jest.fn().mockResolvedValue({
-  results: [],
-  nextPageCursor: 'Mg==',
-  previousPageCursor: 'MA==',
-});
+import { configApiRef } from '@backstage/core-plugin-api';
 
 describe('SearchPagination', () => {
+  const configApiMock = new MockConfigApi({
+    search: {
+      query: {
+        pagelimit: 10,
+      },
+    },
+  });
+
+  const searchApiMock = {
+    query: jest.fn().mockResolvedValue({
+      results: [],
+      nextPageCursor: 'Mg==',
+      previousPageCursor: 'MA==',
+    }),
+  };
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('Renders without exploding', async () => {
     await renderWithEffects(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider>
           <SearchPagination />
         </SearchContextProvider>
@@ -54,7 +74,12 @@ describe('SearchPagination', () => {
 
   it('Define default page limit options', async () => {
     await renderWithEffects(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider>
           <SearchPagination />
         </SearchContextProvider>
@@ -74,7 +99,12 @@ describe('SearchPagination', () => {
   it('Accept custom page limit label', async () => {
     const label = 'Page limit:';
     await renderWithEffects(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider>
           <SearchPagination limitLabel={label} />
         </SearchContextProvider>
@@ -86,7 +116,12 @@ describe('SearchPagination', () => {
 
   it('Show the total in text', async () => {
     await renderWithEffects(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider>
           <SearchPagination total={100} />
         </SearchContextProvider>
@@ -98,7 +133,12 @@ describe('SearchPagination', () => {
 
   it('Accept custom page limit text', async () => {
     await renderWithEffects(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider>
           <SearchPagination
             limitText={({ from, to }) => `${from}-${to} of more than ${to}`}
@@ -112,7 +152,12 @@ describe('SearchPagination', () => {
 
   it('Accept custom page limit options', async () => {
     await renderWithEffects(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider>
           <SearchPagination limitOptions={[5, 10, 20, 25]} />
         </SearchContextProvider>
@@ -131,7 +176,12 @@ describe('SearchPagination', () => {
 
   it('Set page limit in the context', async () => {
     await renderWithEffects(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider>
           <SearchPagination />
         </SearchContextProvider>
@@ -142,7 +192,7 @@ describe('SearchPagination', () => {
 
     await userEvent.click(screen.getByText('10'));
 
-    expect(query).toHaveBeenCalledWith(
+    expect(searchApiMock.query).toHaveBeenCalledWith(
       expect.objectContaining({
         pageLimit: 10,
       }),
@@ -158,7 +208,12 @@ describe('SearchPagination', () => {
     };
 
     await renderWithEffects(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider initialState={initialState}>
           <SearchPagination />
         </SearchContextProvider>
@@ -169,7 +224,7 @@ describe('SearchPagination', () => {
 
     expect(screen.getByText('51-75')).toBeInTheDocument();
 
-    expect(query).toHaveBeenLastCalledWith(
+    expect(searchApiMock.query).toHaveBeenLastCalledWith(
       expect.objectContaining({
         pageCursor: 'Mg==', // page: 2
       }),
@@ -179,7 +234,7 @@ describe('SearchPagination', () => {
 
     expect(screen.getByText('26-50')).toBeInTheDocument();
 
-    expect(query).toHaveBeenLastCalledWith(
+    expect(searchApiMock.query).toHaveBeenLastCalledWith(
       expect.objectContaining({
         pageCursor: 'MQ==', // page: 1
       }),
@@ -195,7 +250,12 @@ describe('SearchPagination', () => {
     };
 
     await renderWithEffects(
-      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+      <TestApiProvider
+        apis={[
+          [searchApiRef, searchApiMock],
+          [configApiRef, configApiMock],
+        ]}
+      >
         <SearchContextProvider initialState={initialState}>
           <SearchPagination />
         </SearchContextProvider>
@@ -205,7 +265,7 @@ describe('SearchPagination', () => {
     await userEvent.click(screen.getByText('25')); // first click to open the options
     await userEvent.click(screen.getByText('10')); // second click to select the option
 
-    expect(query).toHaveBeenLastCalledWith(
+    expect(searchApiMock.query).toHaveBeenLastCalledWith(
       expect.objectContaining({
         pageCursor: undefined,
         pageLimit: 10,

plugins/search-react/src/context/SearchContext.test.tsx

@@ -27,20 +27,23 @@ import {
 import { searchApiRef } from '../api';
 
 describe('SearchContext', () => {
-  const query = jest.fn();
+  const searchApiMock = { query: jest.fn() };
 
-  const wrapper = ({ children, initialState, config = {} }: any) => (
-    <TestApiProvider
-      apis={[
-        [configApiRef, new MockConfigApi(config)],
-        [searchApiRef, { query }],
-      ]}
-    >
-      <SearchContextProvider initialState={initialState}>
-        {children}
-      </SearchContextProvider>
-    </TestApiProvider>
-  );
+  const wrapper = ({ children, initialState, config = {} }: any) => {
+    const configApiMock = new MockConfigApi(config);
+    return (
+      <TestApiProvider
+        apis={[
+          [configApiRef, configApiMock],
+          [searchApiRef, searchApiMock],
+        ]}
+      >
+        <SearchContextProvider initialState={initialState}>
+          {children}
+        </SearchContextProvider>
+      </TestApiProvider>
+    );
+  };
 
   const initialState = {
     term: '',
@@ -49,7 +52,7 @@ describe('SearchContext', () => {
   };
 
   beforeEach(() => {
-    query.mockResolvedValue({});
+    searchApiMock.query.mockResolvedValue({});
   });
 
   afterAll(() => {
@@ -276,7 +279,7 @@ describe('SearchContext', () => {
 
       await waitForNextUpdate();
 
-      expect(query).toHaveBeenLastCalledWith({
+      expect(searchApiMock.query).toHaveBeenLastCalledWith({
         term,
         types: ['*'],
         filters: {},
@@ -301,7 +304,7 @@ describe('SearchContext', () => {
 
       await waitForNextUpdate();
 
-      expect(query).toHaveBeenLastCalledWith({
+      expect(searchApiMock.query).toHaveBeenLastCalledWith({
         types,
         term: '',
         filters: {},
@@ -326,7 +329,7 @@ describe('SearchContext', () => {
 
       await waitForNextUpdate();
 
-      expect(query).toHaveBeenLastCalledWith({
+      expect(searchApiMock.query).toHaveBeenLastCalledWith({
         filters,
         term: '',
         types: ['*'],
@@ -351,7 +354,7 @@ describe('SearchContext', () => {
 
       await waitForNextUpdate();
 
-      expect(query).toHaveBeenLastCalledWith({
+      expect(searchApiMock.query).toHaveBeenLastCalledWith({
         pageLimit,
         term: '',
         types: ['*'],
@@ -377,7 +380,7 @@ describe('SearchContext', () => {
 
       await waitForNextUpdate();
 
-      expect(query).toHaveBeenLastCalledWith({
+      expect(searchApiMock.query).toHaveBeenLastCalledWith({
         pageCursor,
         term: '',
         types: ['*'],
@@ -386,7 +389,7 @@ describe('SearchContext', () => {
     });
 
     it('provides function for fetch the next page', async () => {
-      query.mockResolvedValue({
+      searchApiMock.query.mockResolvedValue({
         results: [],
         nextPageCursor: 'NEXT',
       });
@@ -409,7 +412,7 @@ describe('SearchContext', () => {
 
       await waitForNextUpdate();
 
-      expect(query).toHaveBeenLastCalledWith({
+      expect(searchApiMock.query).toHaveBeenLastCalledWith({
         term: '',
         types: ['*'],
         filters: {},
@@ -418,7 +421,7 @@ describe('SearchContext', () => {
     });
 
     it('provides function for fetch the previous page', async () => {
-      query.mockResolvedValue({
+      searchApiMock.query.mockResolvedValue({
         results: [],
         previousPageCursor: 'PREVIOUS',
       });
@@ -441,7 +444,7 @@ describe('SearchContext', () => {
 
       await waitForNextUpdate();
 
-      expect(query).toHaveBeenLastCalledWith({
+      expect(searchApiMock.query).toHaveBeenLastCalledWith({
         term: '',
         types: ['*'],
         filters: {},