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 1/5] 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);

From b6ce38122d79f1c43d04bc88711cf2ad94fbe5f3 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 7 Apr 2022 10:12:23 -0400
Subject: [PATCH 2/5] Add simple test for FormActions

---
 .../ui/form-actions/__tests__/form-actions.test.tsx  | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 app/soapbox/components/ui/form-actions/__tests__/form-actions.test.tsx

diff --git a/app/soapbox/components/ui/form-actions/__tests__/form-actions.test.tsx b/app/soapbox/components/ui/form-actions/__tests__/form-actions.test.tsx
new file mode 100644
index 000000000..3c954ca69
--- /dev/null
+++ b/app/soapbox/components/ui/form-actions/__tests__/form-actions.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import FormActions from '../form-actions';
+
+describe('<FormActions />', () => {
+  it('renders successfully', () => {
+    render(<FormActions><div data-testid='child'>child</div></FormActions>);
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+});

From 4f1cf84d3924f337f0a8c03fa2a4d134bea2a1e7 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 7 Apr 2022 11:01:38 -0400
Subject: [PATCH 3/5] Add tests for Modal

---
 .../components/ui/icon-button/icon-button.tsx |   1 +
 .../ui/modal/__tests__/modal.test.tsx         | 138 ++++++++++++++++++
 app/soapbox/components/ui/modal/modal.tsx     |   6 +-
 3 files changed, 142 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/components/ui/modal/__tests__/modal.test.tsx

diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index 291b0b4f8..10d08fc80 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -22,6 +22,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
         'bg-white dark:bg-transparent': !transparent,
       }, className)}
       {...filteredProps}
+      data-testid='icon-button'
     >
       <InlineSVG src={src} className={iconClassName} />
 
diff --git a/app/soapbox/components/ui/modal/__tests__/modal.test.tsx b/app/soapbox/components/ui/modal/__tests__/modal.test.tsx
new file mode 100644
index 000000000..3894a4604
--- /dev/null
+++ b/app/soapbox/components/ui/modal/__tests__/modal.test.tsx
@@ -0,0 +1,138 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import Modal from '../modal';
+
+describe('<Modal />', () => {
+  it('renders', () => {
+    render(<Modal title='Modal title' />);
+    expect(screen.getByTestId('modal')).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    render(<Modal title='Modal title'><div data-testid='child' /></Modal>);
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('focuses the primary action', () => {
+    render(
+      <Modal
+        title='Modal title'
+        confirmationAction={() => null}
+        confirmationText='Click me'
+      />,
+    );
+
+    expect(screen.getByRole('button')).toHaveFocus();
+  });
+
+  describe('onClose prop', () => {
+    it('renders the Icon to close the modal', async() => {
+      const mockFn = jest.fn();
+      const user = userEvent.setup();
+
+      render(<Modal title='Modal title' onClose={mockFn} />);
+      expect(screen.getByTestId('icon-button')).toBeInTheDocument();
+
+      expect(mockFn).not.toBeCalled();
+      await user.click(screen.getByTestId('icon-button'));
+      expect(mockFn).toBeCalled();
+    });
+
+    it('does not render the Icon to close the modal', () => {
+      render(<Modal title='Modal title' />);
+      expect(screen.queryAllByTestId('icon-button')).toHaveLength(0);
+    });
+  });
+
+  describe('confirmationAction prop', () => {
+    it('renders the confirmation button', async() => {
+      const mockFn = jest.fn();
+      const user = userEvent.setup();
+
+      render(
+        <Modal
+          title='Modal title'
+          confirmationAction={mockFn}
+          confirmationText='Click me'
+        />,
+      );
+
+      expect(mockFn).not.toBeCalled();
+      await user.click(screen.getByRole('button'));
+      expect(mockFn).toBeCalled();
+    });
+
+    it('does not render the actions to', () => {
+      render(<Modal title='Modal title' />);
+      expect(screen.queryAllByTestId('modal-actions')).toHaveLength(0);
+    });
+
+    describe('with secondaryAction', () => {
+      it('renders the secondary button', async() => {
+        const confirmationAction = jest.fn();
+        const secondaryAction = jest.fn();
+        const user = userEvent.setup();
+
+        render(
+          <Modal
+            title='Modal title'
+            confirmationAction={confirmationAction}
+            confirmationText='Primary'
+            secondaryAction={secondaryAction}
+            secondaryText='Secondary'
+          />,
+        );
+
+        await user.click(screen.getByText(/secondary/i));
+        expect(secondaryAction).toBeCalled();
+        expect(confirmationAction).not.toBeCalled();
+      });
+
+      it('does not render the secondary action', () => {
+        render(
+          <Modal
+            title='Modal title'
+            confirmationAction={() => null}
+            confirmationText='Click me'
+          />,
+        );
+        expect(screen.queryAllByRole('button')).toHaveLength(1);
+      });
+    });
+
+    describe('with cancelAction', () => {
+      it('renders the cancel button', async() => {
+        const confirmationAction = jest.fn();
+        const cancelAction = jest.fn();
+        const user = userEvent.setup();
+
+        render(
+          <Modal
+            title='Modal title'
+            confirmationAction={confirmationAction}
+            confirmationText='Primary'
+            secondaryAction={cancelAction}
+            secondaryText='Cancel'
+          />,
+        );
+
+        await user.click(screen.getByText(/cancel/i));
+        expect(cancelAction).toBeCalled();
+        expect(confirmationAction).not.toBeCalled();
+      });
+
+      it('does not render the cancel action', () => {
+        render(
+          <Modal
+            title='Modal title'
+            confirmationAction={() => null}
+            confirmationText='Click me'
+          />,
+        );
+        expect(screen.queryAllByRole('button')).toHaveLength(1);
+      });
+    });
+  });
+});
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index d6d23ce92..efe580c23 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -17,7 +17,7 @@ interface IModal {
   confirmationDisabled?: boolean,
   confirmationText?: string,
   confirmationTheme?: 'danger',
-  onClose: () => void,
+  onClose?: () => void,
   secondaryAction?: () => void,
   secondaryText?: string,
   title: string | React.ReactNode,
@@ -46,7 +46,7 @@ const Modal: React.FC<IModal> = ({
   }, [buttonRef]);
 
   return (
-    <div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 shadow-xl rounded-2xl pointer-events-auto'>
+    <div data-testid='modal' className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 shadow-xl rounded-2xl pointer-events-auto'>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           <div className='w-full flex flex-row justify-between items-center'>
@@ -71,7 +71,7 @@ const Modal: React.FC<IModal> = ({
       </div>
 
       {confirmationAction && (
-        <div className='mt-5 flex flex-row justify-between'>
+        <div className='mt-5 flex flex-row justify-between' data-testid='modal-actions'>
           <div className='flex-grow'>
             {cancelAction && (
               <Button

From 182f5e6302b3c966e2aff5f68d3e0b7b05e0e3e1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 7 Apr 2022 10:24:41 -0500
Subject: [PATCH 4/5] Refactor Emoji component, add more comprehensive tests

---
 .../ui/emoji/__tests__/emoji.test.tsx         | 19 +++++++++++++++----
 app/soapbox/components/ui/emoji/emoji.tsx     | 10 +++++-----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx b/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
index 0f65103d8..85126806f 100644
--- a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
+++ b/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
@@ -1,12 +1,23 @@
-import React from 'react';
+import * as React from 'react';
 
 import { render, screen } from '../../../../jest/test-helpers';
 import Emoji from '../emoji';
 
 describe('<Emoji />', () => {
-  it('renders the given text', () => {
-    render(<Emoji emoji='smile' />);
+  it('renders a simple emoji', () => {
+    render(<Emoji emoji='😀' />);
 
-    expect(screen.getByRole('img').getAttribute('alt')).toBe('smile');
+    const img = screen.getByRole('img');
+    expect(img.getAttribute('src')).toBe('/packs/emoji/1f600.svg');
+    expect(img.getAttribute('alt')).toBe('😀');
+  });
+
+  // https://emojipedia.org/emoji-flag-sequence/
+  it('renders a sequence emoji', () => {
+    render(<Emoji emoji='🇺🇸' />);
+
+    const img = screen.getByRole('img');
+    expect(img.getAttribute('src')).toBe('/packs/emoji/1f1fa-1f1f8.svg');
+    expect(img.getAttribute('alt')).toBe('🇺🇸');
   });
 });
diff --git a/app/soapbox/components/ui/emoji/emoji.tsx b/app/soapbox/components/ui/emoji/emoji.tsx
index 9bbaa0dec..e9bcda2ed 100644
--- a/app/soapbox/components/ui/emoji/emoji.tsx
+++ b/app/soapbox/components/ui/emoji/emoji.tsx
@@ -29,12 +29,12 @@ const toCodePoints = (unicodeSurrogates: string): string[] => {
   return points;
 };
 
-interface IEmoji {
-  className?: string,
+interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
   emoji: string,
 }
 
-const Emoji: React.FC<IEmoji> = ({ className, emoji }): JSX.Element | null => {
+const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
+  const { emoji, alt, ...rest } = props;
   const codepoints = toCodePoints(removeVS16s(emoji));
   const filename = codepoints.join('-');
 
@@ -43,9 +43,9 @@ const Emoji: React.FC<IEmoji> = ({ className, emoji }): JSX.Element | null => {
   return (
     <img
       draggable='false'
-      className={className}
-      alt={emoji}
+      alt={alt || emoji}
       src={joinPublicPath(`packs/emoji/${filename}.svg`)}
+      {...rest}
     />
   );
 };

From ad381d7fbc1a939dcddfcba7c01752d795c491a1 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 7 Apr 2022 11:55:15 -0400
Subject: [PATCH 5/5] Add tests for TrendsPanel

---
 app/soapbox/components/hashtag.js             |  2 +-
 .../__tests__/trends-panel.test.tsx           | 72 +++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx

diff --git a/app/soapbox/components/hashtag.js b/app/soapbox/components/hashtag.js
index d74911f2e..1b19bbff3 100644
--- a/app/soapbox/components/hashtag.js
+++ b/app/soapbox/components/hashtag.js
@@ -16,7 +16,7 @@ const Hashtag = ({ hashtag }) => {
   const brandColor = useSelector((state) => getSoapboxConfig(state).get('brandColor'));
 
   return (
-    <HStack alignItems='center' justifyContent='between'>
+    <HStack alignItems='center' justifyContent='between' data-testid='hashtag'>
       <Stack>
         <Permalink href={hashtag.get('url')} to={`/tags/${hashtag.get('name')}`} className='hover:underline'>
           <Text tag='span' size='sm' weight='semibold'>#{hashtag.get('name')}</Text>
diff --git a/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx b/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
new file mode 100644
index 000000000..f2d310c55
--- /dev/null
+++ b/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
@@ -0,0 +1,72 @@
+import { Map as ImmutableMap, fromJS } from 'immutable';
+import React from 'react';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import TrendsPanel from '../trends-panel';
+
+describe('<TrendsPanel />', () => {
+  it('renders trending hashtags', () => {
+    const store = {
+      trends: ImmutableMap({
+        items: fromJS([{
+          name: 'hashtag 1',
+          history: [{ accounts: [] }],
+        }]),
+      }),
+    };
+
+    render(<TrendsPanel limit={1} />, null, store);
+    expect(screen.getByTestId('hashtag')).toHaveTextContent(/hashtag 1/i);
+  });
+
+  it('renders multiple trends', () => {
+    const store = {
+      trends: ImmutableMap({
+        items: fromJS([
+          {
+            name: 'hashtag 1',
+            history: [{ accounts: [] }],
+          },
+          {
+            name: 'hashtag 2',
+            history: [{ accounts: [] }],
+          },
+        ]),
+      }),
+    };
+
+    render(<TrendsPanel limit={3} />, null, store);
+    expect(screen.queryAllByTestId('hashtag')).toHaveLength(2);
+  });
+
+  it('respects the limit prop', () => {
+    const store = {
+      trends: ImmutableMap({
+        items: fromJS([
+          {
+            name: 'hashtag 1',
+            history: [{ accounts: [] }],
+          },
+          {
+            name: 'hashtag 2',
+            history: [{ accounts: [] }],
+          },
+        ]),
+      }),
+    };
+
+    render(<TrendsPanel limit={1} />, null, store);
+    expect(screen.queryAllByTestId('hashtag')).toHaveLength(1);
+  });
+
+  it('renders empty', () => {
+    const store = {
+      trends: ImmutableMap({
+        items: fromJS([]),
+      }),
+    };
+
+    render(<TrendsPanel limit={1} />, null, store);
+    expect(screen.queryAllByTestId('hashtag')).toHaveLength(0);
+  });
+});