Merge pull request #2046 from saithsab877/Clear-Button-Not-Working-se…

…arch-filters

Clear Button Not Working for `Source Nodes`, `Hops` and `Max results` Options `[FilterSearch]`

src/components/App/SideBar/FilterSearch/__tests__/index.tsx

@@ -176,4 +176,31 @@ describe('FilterSearch Component', () => {
 
     expect(screen.queryByText('Type')).not.toBeInTheDocument()
   })
+
+  it('should reset Source Nodes, Hops, and Max Results to default values when "Clear" button is clicked', async () => {
+    renderComponent()
+
+    const type1Pill = screen.getByText('Type1')
+    fireEvent.click(type1Pill)
+
+    const hopsCheckbox = screen.getByLabelText('2 hops away')
+    fireEvent.click(hopsCheckbox)
+
+    const maxResultsSlider = screen.getByTestId('max-results-slider')
+    fireEvent.mouseDown(maxResultsSlider)
+    fireEvent.mouseUp(maxResultsSlider, { clientX: 50 })
+
+    const sourceNodesSlider = screen.getByTestId('source-nodes-slider')
+    fireEvent.mouseDown(sourceNodesSlider)
+    fireEvent.mouseUp(sourceNodesSlider, { clientX: 20 })
+
+    const clearButton = screen.getByText('Clear')
+    fireEvent.click(clearButton)
+
+    waitFor(() => {
+      expect(screen.getByLabelText('Direct relationship')).toBeChecked()
+      expect(screen.getByTestId('max-results-slider')).toHaveValue(30)
+      expect(screen.getByTestId('source-nodes-slider')).toHaveValue(10)
+    })
+  })
 })

src/components/App/SideBar/FilterSearch/index.tsx

@@ -19,6 +19,13 @@ type Props = {
   anchorEl: HTMLElement | null
 }
 
+const defaultValues = {
+  selectedTypes: [] as string[],
+  hops: 1,
+  sourceNodes: 10,
+  maxResults: 30,
+}
+
 export const FilterSearch = ({ showAllSchemas, setShowAllSchemas, schemaAll, anchorEl }: Props) => {
   const handleSchemaTypeClick = (type: string) => {
     setSelectedTypes((prevSelectedTypes) =>
@@ -28,13 +35,20 @@ export const FilterSearch = ({ showAllSchemas, setShowAllSchemas, schemaAll, anc
 
   const { setFilters, fetchData, setAbortRequests } = useDataStore((s) => s)
   const [setBudget] = useUserStore((s) => [s.setBudget])
-  const [selectedTypes, setSelectedTypes] = useState<string[]>([])
-  const [hops, setHops] = useState(1)
-  const [sourceNodes, setSourceNodes] = useState<number>(10)
-  const [maxResults, setMaxResults] = useState<number>(30)
+  const [selectedTypes, setSelectedTypes] = useState<string[]>(defaultValues.selectedTypes)
+  const [hops, setHops] = useState(defaultValues.hops)
+  const [sourceNodes, setSourceNodes] = useState<number>(defaultValues.sourceNodes)
+  const [maxResults, setMaxResults] = useState<number>(defaultValues.maxResults)
+
+  const resetToDefaultValues = () => {
+    setSelectedTypes(defaultValues.selectedTypes)
+    setHops(defaultValues.hops)
+    setSourceNodes(defaultValues.sourceNodes)
+    setMaxResults(defaultValues.maxResults)
+  }
 
   const handleClear = async () => {
-    setSelectedTypes([])
+    resetToDefaultValues()
   }
 
   const handleViewMoreClick = () => {