Add tests for TrendsPanel

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>

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