@@ -53,20 +53,31 @@ export interface PageSidebarProps { | |||
} | |||
export default function PageSidebar(props: PageSidebarProps) { | |||
const { applicationsEnabled, facets, onQueryChange, query, view } = props; | |||
const { applicationsEnabled, facets, onClearAll, onQueryChange, query, view } = props; | |||
const isFiltered = hasFilterParams(query); | |||
const isLeakView = view === 'leak'; | |||
const maxFacetValue = getMaxFacetValue(facets); | |||
const facetProps = { onQueryChange, maxFacetValue }; | |||
const heading = React.useRef<HTMLHeadingElement>(null); | |||
const clearAll = React.useCallback(() => { | |||
onClearAll(); | |||
if (heading.current) { | |||
heading.current.focus(); | |||
} | |||
}, [onClearAll, heading]); | |||
return ( | |||
<div className="huge-spacer-bottom huge-padded-bottom"> | |||
<FavoriteFilter /> | |||
<div className="projects-facets-header clearfix"> | |||
{isFiltered && <ClearAll onClearAll={props.onClearAll} />} | |||
{isFiltered && <ClearAll onClearAll={clearAll} />} | |||
<h2 className="h3">{translate('filters')}</h2> | |||
<h2 className="h3" tabIndex={-1} ref={heading}> | |||
{translate('filters')} | |||
</h2> | |||
</div> | |||
<QualityGateFilter {...facetProps} facet={getFacet(facets, 'gate')} value={query.gate} /> | |||
{!isLeakView && ( |
@@ -18,6 +18,7 @@ | |||
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | |||
*/ | |||
import { screen } from '@testing-library/react'; | |||
import userEvent from '@testing-library/user-event'; | |||
import * as React from 'react'; | |||
import { CurrentUserContext } from '../../../../app/components/current-user/CurrentUserContext'; | |||
import { mockCurrentUser } from '../../../../helpers/testMocks'; | |||
@@ -67,6 +68,25 @@ it('should show "new lines" instead of "size" when in `leak` view', () => { | |||
).toBeInTheDocument(); | |||
}); | |||
it('should allow to clear all filters', async () => { | |||
const user = userEvent.setup(); | |||
const onClearAll = jest.fn(); | |||
renderPageSidebar({ | |||
onClearAll, | |||
applicationsEnabled: false, | |||
query: { size: '3', reliability: '2' } | |||
}); | |||
const clearAllButton = screen.getByRole('button', { name: 'clear_all_filters' }); | |||
expect(clearAllButton).toBeInTheDocument(); | |||
await user.click(clearAllButton); | |||
expect(onClearAll).toBeCalled(); | |||
expect(screen.getByRole('heading', { level: 2, name: 'filters' })).toHaveFocus(); | |||
}); | |||
function renderPageSidebar(overrides: Partial<PageSidebarProps> = {}, currentUser?: CurrentUser) { | |||
return renderComponent( | |||
<CurrentUserContext.Provider |