diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx new file mode 100644 index 0000000000..d56b40b879 --- /dev/null +++ b/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx @@ -0,0 +1,119 @@ +/* + * Copyright 2021 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 React from 'react'; +import { render } from '@testing-library/react'; +import user from '@testing-library/user-event'; + +import { SearchContext } from '../SearchContext'; +import { SearchType } from './SearchType'; + +describe('SearchType.Accordion', () => { + const contextSpy = { + result: { loading: false, value: { results: [] } }, + term: '', + types: [], + filters: {}, + toggleModal: jest.fn(), + setTerm: jest.fn(), + setTypes: jest.fn(), + setFilters: jest.fn(), + setPageCursor: jest.fn(), + }; + + const expectedLabel = 'Expected Label'; + const expectedType = { + value: 'expected-type', + name: 'Expected Type', + icon: <>, + }; + + beforeEach(() => { + jest.resetAllMocks(); + }); + + it('should render as expected', () => { + const { getByText } = render( + + + , + ); + + // The given label should be rendered. + expect(getByText(expectedLabel)).toBeInTheDocument(); + + // "Collapse" is visible by default (element is not collapsed) + expect(getByText('Collapse')).toBeInTheDocument(); + + // The default "all" type should be rendered. + expect(getByText('All')).toBeInTheDocument(); + + // The given type is also visible + expect(getByText(expectedType.name)).toBeInTheDocument(); + }); + + it('should set entire types array when a type is selected', () => { + const { getByText } = render( + + + , + ); + + user.click(getByText(expectedType.name)); + + expect(contextSpy.setTypes).toHaveBeenCalledWith([expectedType.value]); + }); + + it('should reset types array when all is selected', () => { + const { getByText } = render( + + + , + ); + + user.click(getByText('All')); + + expect(contextSpy.setTypes).toHaveBeenCalledWith([]); + }); + + it('should reset page cursor when a new type is selected', () => { + const { getByText } = render( + + + , + ); + + user.click(getByText(expectedType.name)); + + expect(contextSpy.setPageCursor).toHaveBeenCalledWith(undefined); + }); + + it('should collapse when a new type is selected', () => { + const { getByText, queryByText } = render( + + + , + ); + + user.click(getByText(expectedType.name)); + + expect(queryByText('Collapse')).not.toBeInTheDocument(); + }); +}); diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx index 9ad03db8a1..57e6609bab 100644 --- a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx +++ b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx @@ -93,7 +93,7 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => { const handleClick = (type: string) => { return () => { setTypes(type !== '' ? [type] : []); - setPageCursor(''); + setPageCursor(undefined); setExpanded(false); }; };