From 5acc231cdac1f27a71ca84cdb72c77834130cc38 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 28 Feb 2023 15:03:03 -0500
Subject: [PATCH] Add tests for Search component

---
 .../discover/search/__tests__/search.test.tsx | 62 +++++++++++++++++++
 .../discover/search/no-results-blankslate.tsx |  4 +-
 .../discover/search/recent-searches.tsx       |  4 +-
 .../components/discover/search/results.tsx    |  2 +-
 .../discover/search/{index.tsx => search.tsx} |  0
 app/soapbox/features/groups/discover.tsx      |  2 +-
 6 files changed, 68 insertions(+), 6 deletions(-)
 create mode 100644 app/soapbox/features/groups/components/discover/search/__tests__/search.test.tsx
 rename app/soapbox/features/groups/components/discover/search/{index.tsx => search.tsx} (100%)

diff --git a/app/soapbox/features/groups/components/discover/search/__tests__/search.test.tsx b/app/soapbox/features/groups/components/discover/search/__tests__/search.test.tsx
new file mode 100644
index 0000000000..698608363e
--- /dev/null
+++ b/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();
+    });
+  });
+});
\ No newline at end of file
diff --git a/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx b/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx
index b4ff0d6050..1713488468 100644
--- a/app/soapbox/features/groups/components/discover/search/no-results-blankslate.tsx
+++ b/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'>
-    <Text weight='bold' size='lg' data-testid='no-results'>
+  <Stack space={2} className='px-4 py-2' data-testid='no-results'>
+    <Text weight='bold' size='lg'>
       <FormattedMessage
         id='groups.discover.search.no_results.title'
         defaultMessage='No matches found'
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 efe0e76fe0..3972766026 100644
--- a/app/soapbox/features/groups/components/discover/search/recent-searches.tsx
+++ b/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>
 
diff --git a/app/soapbox/features/groups/components/discover/search/results.tsx b/app/soapbox/features/groups/components/discover/search/results.tsx
index 08494ebdf2..b51552f3d9 100644
--- a/app/soapbox/features/groups/components/discover/search/results.tsx
+++ b/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>
 
diff --git a/app/soapbox/features/groups/components/discover/search/index.tsx b/app/soapbox/features/groups/components/discover/search/search.tsx
similarity index 100%
rename from app/soapbox/features/groups/components/discover/search/index.tsx
rename to app/soapbox/features/groups/components/discover/search/search.tsx
diff --git a/app/soapbox/features/groups/discover.tsx b/app/soapbox/features/groups/discover.tsx
index 4b40be492d..4e0c0c70a8 100644
--- a/app/soapbox/features/groups/discover.tsx
+++ b/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';