From e91b68854b0a75a26a41685b541875a38bc68d90 Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Wed, 6 Mar 2024 18:38:45 +0500
Subject: [PATCH] fix search box is clear when click back button

---
 src/pages/people/peopleList/PeopleList.tsx    |  1 +
 .../peopleList/__tests__/PeopleList.spec.tsx  | 46 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 src/pages/people/peopleList/__tests__/PeopleList.spec.tsx

diff --git a/src/pages/people/peopleList/PeopleList.tsx b/src/pages/people/peopleList/PeopleList.tsx
index 6bac60b7..0843beff 100644
--- a/src/pages/people/peopleList/PeopleList.tsx
+++ b/src/pages/people/peopleList/PeopleList.tsx
@@ -80,6 +80,7 @@ export const PeopleList = observer(() => {
 
   function goBack() {
     ui.setSelectingPerson(0);
+    ui.setSearchText('');
     history.replace('/p');
   }
 
diff --git a/src/pages/people/peopleList/__tests__/PeopleList.spec.tsx b/src/pages/people/peopleList/__tests__/PeopleList.spec.tsx
new file mode 100644
index 00000000..e040bd54
--- /dev/null
+++ b/src/pages/people/peopleList/__tests__/PeopleList.spec.tsx
@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { useStores } from '../../../../store';
+import { PeopleList } from '../../peopleList';
+
+jest.mock('store', () => ({
+  useStores: jest.fn()
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    replace: jest.fn()
+  })
+}));
+
+describe('PeopleList Component', () => {
+  it('clears the search bar when back arrow button is clicked', async () => {
+    const mockSetSearchText = jest.fn();
+    (useStores as jest.Mock).mockReturnValue({
+      ui: {
+        searchText: 'John Doe',
+        setSearchText: mockSetSearchText,
+        setSelectingPerson: jest.fn(),
+        setSelectedPerson: jest.fn()
+      },
+      main: {
+        getPeople: jest.fn(),
+        people: []
+      }
+    });
+
+    const history = createMemoryHistory();
+    const { getByText, getByPlaceholderText } = render(
+      <Router history={history}>
+        <PeopleList />
+      </Router>
+    );
+    expect(getByPlaceholderText('Search')).toHaveValue('John Doe');
+    fireEvent.click(getByText('Back'));
+    expect(mockSetSearchText).toHaveBeenCalledWith('');
+  });
+});