From d6d780780745291e2ce0d1d70cd4b3e51d06c89c Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 1 Mar 2023 09:43:30 -0500
Subject: [PATCH] Add tests for RecentSearches

---
 .../search/__tests__/recent-searches.test.tsx | 79 +++++++++++++++++++
 .../discover/search/recent-searches.tsx       |  7 +-
 2 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/features/groups/components/discover/search/__tests__/recent-searches.test.tsx

diff --git a/app/soapbox/features/groups/components/discover/search/__tests__/recent-searches.test.tsx b/app/soapbox/features/groups/components/discover/search/__tests__/recent-searches.test.tsx
new file mode 100644
index 000000000..8c0e54262
--- /dev/null
+++ b/app/soapbox/features/groups/components/discover/search/__tests__/recent-searches.test.tsx
@@ -0,0 +1,79 @@
+import userEvent from '@testing-library/user-event';
+import { Map as ImmutableMap } from 'immutable';
+import React from 'react';
+import { VirtuosoMockContext } from 'react-virtuoso';
+
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { normalizeAccount } from 'soapbox/normalizers';
+import { groupSearchHistory } from 'soapbox/settings';
+import { clearRecentGroupSearches, saveGroupSearch } from 'soapbox/utils/groups';
+
+import RecentSearches from '../recent-searches';
+
+const userId = '1';
+const store = {
+  me: userId,
+  accounts: ImmutableMap({
+    [userId]: normalizeAccount({
+      id: userId,
+      acct: 'justin-username',
+      display_name: 'Justin L',
+      avatar: 'test.jpg',
+      chats_onboarded: false,
+    }),
+  }),
+};
+
+const renderApp = (children: React.ReactNode) => (
+  render(
+    <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
+      {children}
+    </VirtuosoMockContext.Provider>,
+    undefined,
+    store,
+  )
+);
+
+describe('<RecentSearches />', () => {
+  describe('with recent searches', () => {
+    beforeEach(() => {
+      saveGroupSearch(userId, 'foobar');
+    });
+
+    afterEach(() => {
+      clearRecentGroupSearches(userId);
+    });
+
+    it('should render the recent searches', async () => {
+      renderApp(<RecentSearches onSelect={jest.fn()} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('recent-search')).toBeInTheDocument();
+      });
+    });
+
+    it('should support clearing recent searches', async () => {
+      renderApp(<RecentSearches onSelect={jest.fn()} />);
+
+      expect(groupSearchHistory.get(userId)).toHaveLength(1);
+      await userEvent.click(screen.getByTestId('clear-recent-searches'));
+      expect(groupSearchHistory.get(userId)).toBeNull();
+    });
+
+    it('should support click events on the results', async () => {
+      const handler = jest.fn();
+      renderApp(<RecentSearches onSelect={handler} />);
+      expect(handler.mock.calls.length).toEqual(0);
+      await userEvent.click(screen.getByTestId('recent-search-result'));
+      expect(handler.mock.calls.length).toEqual(1);
+    });
+  });
+
+  describe('without recent searches', () => {
+    it('should render the blankslate', async () => {
+      renderApp(<RecentSearches onSelect={jest.fn()} />);
+
+      expect(screen.getByTestId('recent-searches-blankslate')).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/app/soapbox/features/groups/components/discover/search/recent-searches.tsx b/app/soapbox/features/groups/components/discover/search/recent-searches.tsx
index 397276602..ca3c4168a 100644
--- a/app/soapbox/features/groups/components/discover/search/recent-searches.tsx
+++ b/app/soapbox/features/groups/components/discover/search/recent-searches.tsx
@@ -36,7 +36,7 @@ export default (props: Props) => {
               Recent searches
             </Text>
 
-            <button onClick={onClearRecentSearches}>
+            <button onClick={onClearRecentSearches} data-testid='clear-recent-searches'>
               <Text theme='primary' size='sm' className='hover:underline'>
                 Clear All
               </Text>
@@ -47,10 +47,11 @@ export default (props: Props) => {
             useWindowScroll
             data={recentSearches}
             itemContent={(_index, recentSearch) => (
-              <div key={recentSearch}>
+              <div key={recentSearch} data-testid='recent-search'>
                 <button
                   onClick={() => onSelect(recentSearch)}
                   className='group flex w-full flex-col rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-800'
+                  data-testid='recent-search-result'
                 >
                   <HStack alignItems='center' space={2}>
                     <div className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-800 dark:group-hover:bg-gray-700/20'>
@@ -68,7 +69,7 @@ export default (props: Props) => {
           />
         </>
       ) : (
-        <Stack space={2}>
+        <Stack space={2} data-testid='recent-searches-blankslate'>
           <Text weight='bold' size='lg'>
             <FormattedMessage id='groups.discover.search.blankslate.title' defaultMessage='No recent searches' />
           </Text>