Add tests for RecentSearches

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();
+    });
+  });
+});

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>