From 19d979dc48b5ba29e9ad2d6a12b51f6fc36a5354 Mon Sep 17 00:00:00 2001 From: Enrico Alvarenga Date: Mon, 26 Jun 2023 11:29:59 -0700 Subject: [PATCH] test: unit test initial state config Signed-off-by: Enrico Alvarenga --- .../components/SearchPage/SearchPage.test.tsx | 66 +++++++++++++++++-- 1 file changed, 59 insertions(+), 7 deletions(-) diff --git a/plugins/search/src/components/SearchPage/SearchPage.test.tsx b/plugins/search/src/components/SearchPage/SearchPage.test.tsx index be9e7f7b10..f364cb8dd4 100644 --- a/plugins/search/src/components/SearchPage/SearchPage.test.tsx +++ b/plugins/search/src/components/SearchPage/SearchPage.test.tsx @@ -14,18 +14,41 @@ * limitations under the License. */ -import { renderInTestApp } from '@backstage/test-utils'; +import { + MockConfigApi, + TestApiProvider, + renderInTestApp, +} from '@backstage/test-utils'; import React from 'react'; import { useLocation } from 'react-router-dom'; -import { useSearch } from '@backstage/plugin-search-react'; +import { + type SearchContextState, + useSearch, + getSearchContextInitialStateDefaults, +} from '@backstage/plugin-search-react'; import { SearchPage } from './SearchPage'; +import { configApiRef } from '@backstage/core-plugin-api'; +import type { JsonObject } from '@backstage/types'; + +const TestingContext = React.createContext( + getSearchContextInitialStateDefaults(), +); jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useLocation: jest.fn().mockReturnValue({ search: '', }), - useOutlet: jest.fn().mockReturnValue('Route Children'), + useOutlet: jest.fn().mockImplementation(() => ( + + {value => ( + <> +

Route Children

+
Page Limit: {value.pageLimit}
+ + )} +
+ )), })); const setTermMock = jest.fn(); @@ -37,7 +60,11 @@ jest.mock('@backstage/plugin-search-react', () => ({ ...jest.requireActual('@backstage/plugin-search-react'), SearchContextProvider: jest .fn() - .mockImplementation(({ children }) => children), + .mockImplementation(({ initialState, children }) => ( + + {children} + + )), useSearch: jest.fn().mockReturnValue({ term: '', setTerm: (term: any) => setTermMock(term), @@ -50,6 +77,13 @@ jest.mock('@backstage/plugin-search-react', () => ({ }), })); +const renderSearchPageWithConfig = (config: JsonObject = {}) => + renderInTestApp( + + + , + ); + describe('SearchPage', () => { const origReplaceState = window.history.replaceState; @@ -76,7 +110,7 @@ describe('SearchPage', () => { }); // When we render the page... - await renderInTestApp(); + await renderSearchPageWithConfig(); // Then search context should be set with these values... expect(setTermMock).toHaveBeenCalledWith(expectedTerm); @@ -86,7 +120,7 @@ describe('SearchPage', () => { }); it('renders provided router element', async () => { - const { getByText } = await renderInTestApp(); + const { getByText } = await renderSearchPageWithConfig(); expect(getByText('Route Children')).toBeInTheDocument(); }); @@ -106,9 +140,27 @@ describe('SearchPage', () => { '?query=bieber&types[]=software-catalog&pageCursor=SOMEPAGE&filters[anyKey]=anyValue', ); - await renderInTestApp(); + await renderSearchPageWithConfig(); const calls = (window.history.replaceState as jest.Mock).mock.calls[0]; expect(calls[2]).toContain(expectedLocation); }); + + it('initializes the SearchPage with a custom page limit', async () => { + const { getByText } = await renderSearchPageWithConfig({ + app: { + search: { + initialState: { + pageLimit: 50, + }, + }, + }, + }); + + const calls = (window.history.replaceState as jest.Mock).mock.calls[0]; + const expectedLocation = encodeURI('?query=&pageCursor='); + expect(calls[2]).toContain(expectedLocation); + + expect(getByText('Page Limit: 50')).toBeInTheDocument(); + }); });