From f8b6f8db2829e8cdc56f4134de4e246739553d8c Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 6 Apr 2022 10:10:21 -0400
Subject: [PATCH] Add tests for Search

---
 ...moji-test.js => autosuggest_emoji.test.js} |  0
 app/soapbox/components/account.tsx            |  2 +-
 app/soapbox/components/autosuggest_input.js   |  1 +
 .../components/__tests__/search.test.tsx      | 28 +++++++++++++++++++
 app/soapbox/jest/test-setup.ts                |  3 ++
 5 files changed, 33 insertions(+), 1 deletion(-)
 rename app/soapbox/components/__tests__/{autosuggest_emoji-test.js => autosuggest_emoji.test.js} (100%)
 create mode 100644 app/soapbox/features/compose/components/__tests__/search.test.tsx

diff --git a/app/soapbox/components/__tests__/autosuggest_emoji-test.js b/app/soapbox/components/__tests__/autosuggest_emoji.test.js
similarity index 100%
rename from app/soapbox/components/__tests__/autosuggest_emoji-test.js
rename to app/soapbox/components/__tests__/autosuggest_emoji.test.js
diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 21178d5e4..3288127a1 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -125,7 +125,7 @@ const Account = ({
   const LinkEl: any = showProfileHoverCard ? Link : 'div';
 
   return (
-    <div className='flex-shrink-0 group block w-full overflow-hidden' ref={overflowRef}>
+    <div data-testid='account' className='flex-shrink-0 group block w-full overflow-hidden' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
         <HStack alignItems='center' space={3} grow>
           <ProfilePopper
diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js
index bdb739e06..1bb2e2edf 100644
--- a/app/soapbox/components/autosuggest_input.js
+++ b/app/soapbox/components/autosuggest_input.js
@@ -289,6 +289,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
           aria-autocomplete='list'
           id={id}
           maxLength={maxLength}
+          data-testid='autosuggest-input'
         />
 
         <div className={classNames({
diff --git a/app/soapbox/features/compose/components/__tests__/search.test.tsx b/app/soapbox/features/compose/components/__tests__/search.test.tsx
new file mode 100644
index 000000000..1ecb11969
--- /dev/null
+++ b/app/soapbox/features/compose/components/__tests__/search.test.tsx
@@ -0,0 +1,28 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { __stub } from 'soapbox/api';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import Search from '../search';
+
+describe('<Search />', () => {
+  it('successfully renders', async() => {
+    render(<Search autosuggest />);
+    expect(screen.getByLabelText('Search')).toBeInTheDocument();
+  });
+
+  it('handles onChange', async() => {
+    __stub(mock => {
+      mock.onGet('/api/v1/accounts/search').reply(200, [{ id: 1 }]);
+    });
+    const user = userEvent.setup();
+
+    render(<Search autosuggest />);
+
+    await user.type(screen.getByLabelText('Search'), '@jus');
+
+    expect(screen.getByLabelText('Search')).toHaveValue('@jus');
+    expect(screen.getByTestId('account')).toBeInTheDocument();
+  });
+});
diff --git a/app/soapbox/jest/test-setup.ts b/app/soapbox/jest/test-setup.ts
index b3100425c..82beb982a 100644
--- a/app/soapbox/jest/test-setup.ts
+++ b/app/soapbox/jest/test-setup.ts
@@ -8,3 +8,6 @@ afterEach(() => clearApiMocks());
 
 // Mock external dependencies
 jest.mock('uuid', () => ({ v4: jest.fn(() => 1) }));
+
+const intersectionObserverMock = () => ({ observe: () => null, disconnect: () => null });
+window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);