Add tests for Search component

app/soapbox/features/groups/components/discover/search/__tests__/search.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { __stub } from 'soapbox/api';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { normalizeGroup, normalizeInstance } from 'soapbox/normalizers';
+
+import Search from '../search';
+
+const store = {
+  instance: normalizeInstance({
+    version: '3.4.1 (compatible; TruthSocial 1.0.0+unreleased)',
+  }),
+};
+
+const renderApp = (children: React.ReactElement) => render(children, undefined, store);
+
+describe('<Search />', () => {
+  describe('with no results', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onGet('/api/v1/groups/search').reply(200, []);
+      });
+    });
+
+    it('should render the blankslate', async () => {
+      renderApp(<Search searchValue={'some-search'} onSelect={jest.fn()} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('no-results')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('with results', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onGet('/api/v1/groups/search').reply(200, [
+          normalizeGroup({
+            display_name: 'Group',
+            id: '1',
+          }),
+        ]);
+      });
+    });
+
+    it('should render the results', async () => {
+      renderApp(<Search searchValue={'some-search'} onSelect={jest.fn()} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('results')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('before starting a search', () => {
+    it('should render the RecentSearches component', () => {
+      renderApp(<Search searchValue={''} onSelect={jest.fn()} />);
+
+      expect(screen.getByTestId('recent-searches')).toBeInTheDocument();
+    });
+  });
+});

app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx

@@ -4,8 +4,8 @@ import { FormattedMessage } from 'react-intl';
 import { Stack, Text } from 'soapbox/components/ui';
 
 export default () => (
-  <Stack space={2} className='px-4 py-2'>
+  <Stack space={2} className='px-4 py-2' data-testid='no-results'>
-    <Text weight='bold' size='lg' data-testid='no-results'>
+    <Text weight='bold' size='lg'>
       <FormattedMessage
         id='groups.discover.search.no_results.title'
         defaultMessage='No matches found'

app/soapbox/features/groups/components/discover/search/recent-searches.tsx

@@ -24,7 +24,7 @@ export default (props: Props) => {
   };
 
   return (
-    <Stack space={2}>
+    <Stack space={2} data-testid='recent-searches'>
       {recentSearches.length > 0 ? (
         <>
           <HStack
@@ -69,7 +69,7 @@ export default (props: Props) => {
         </>
       ) : (
         <Stack space={2}>
-          <Text weight='bold' size='lg' data-testid='no-results'>
+          <Text weight='bold' size='lg'>
             <FormattedMessage id='groups.discover.search.blankslate.title' defaultMessage='No recent searches' />
           </Text>
 

app/soapbox/features/groups/components/discover/search/results.tsx

@@ -101,7 +101,7 @@ export default (props: Props) => {
   ), []);
 
   return (
-    <Stack space={4}>
+    <Stack space={4} data-testid='results'>
       <HStack alignItems='center' justifyContent='between'>
         <Text weight='semibold'>Groups</Text>
 

app/soapbox/features/groups/discover.tsx

@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { HStack, Icon, IconButton, Input, Stack } from 'soapbox/components/ui';
 
 import PopularGroups from './components/discover/popular-groups';
-import Search from './components/discover/search';
+import Search from './components/discover/search/search';
 import SuggestedGroups from './components/discover/suggested-groups';
 import TabBar, { TabItems } from './components/tab-bar';