From cbe9f47a59270b10b6b31f30cef4f26cd566028c Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 10 Aug 2022 10:31:09 -0400
Subject: [PATCH] Fix Trends Panel test

---
 .../__tests__/trends-panel.test.tsx           | 131 ++++++++----------
 1 file changed, 58 insertions(+), 73 deletions(-)

diff --git a/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx b/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
index 487a84bfb..20eb3c5af 100644
--- a/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
+++ b/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
@@ -1,85 +1,70 @@
-import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 import React from 'react';
 
-import { render, screen } from '../../../../jest/test-helpers';
-import { normalizeTag } from '../../../../normalizers';
+import { __stub } from 'soapbox/api';
+
+import { render, screen, waitFor } from '../../../../jest/test-helpers';
 import TrendsPanel from '../trends-panel';
 
 describe('<TrendsPanel />', () => {
-  it('renders trending hashtags', () => {
-    const store = {
-      trends: ImmutableRecord({
-        items: ImmutableList([
-          normalizeTag({
-            name: 'hashtag 1',
-            history: [{
-              day: '1652745600',
-              uses: '294',
-              accounts: '180',
-            }],
-          }),
-        ]),
-        isLoading: false,
-      })(),
-    };
+  describe('with hashtags', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onGet('/api/v1/trends')
+          .reply(200, [
+            {
+              name: 'hashtag 1',
+              url: 'https://example.com',
+              history: [{
+                day: '1652745600',
+                uses: '294',
+                accounts: '180',
+              }],
+            },
+            { name: 'hashtag 2', url: 'https://example.com' },
+          ]);
+      });
+    });
 
-    render(<TrendsPanel limit={1} />, undefined, store);
-    expect(screen.getByTestId('hashtag')).toHaveTextContent(/hashtag 1/i);
-    expect(screen.getByTestId('hashtag')).toHaveTextContent(/180 people talking/i);
-    expect(screen.getByTestId('sparklines')).toBeInTheDocument();
+    it('renders trending hashtags', async() => {
+      render(<TrendsPanel limit={1} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('hashtag')).toHaveTextContent(/hashtag 1/i);
+        expect(screen.getByTestId('hashtag')).toHaveTextContent(/180 people talking/i);
+        expect(screen.getByTestId('sparklines')).toBeInTheDocument();
+      });
+    });
+
+    it('renders multiple trends', async() => {
+      render(<TrendsPanel limit={3} />);
+
+      await waitFor(() => {
+        expect(screen.queryAllByTestId('hashtag')).toHaveLength(2);
+      });
+    });
+
+    it('respects the limit prop', async() => {
+      render(<TrendsPanel limit={1} />);
+
+      await waitFor(() => {
+        expect(screen.queryAllByTestId('hashtag')).toHaveLength(1);
+      });
+    });
   });
 
-  it('renders multiple trends', () => {
-    const store = {
-      trends: ImmutableRecord({
-        items: ImmutableList([
-          normalizeTag({
-            name: 'hashtag 1',
-            history: ImmutableList([{ accounts: [] }]),
-          }),
-          normalizeTag({
-            name: 'hashtag 2',
-            history: ImmutableList([{ accounts: [] }]),
-          }),
-        ]),
-        isLoading: false,
-      })(),
-    };
+  describe('without hashtags', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onGet('/api/v1/trends').reply(200, []);
+      });
+    });
 
-    render(<TrendsPanel limit={3} />, undefined, store);
-    expect(screen.queryAllByTestId('hashtag')).toHaveLength(2);
-  });
+    it('renders empty', async() => {
+      render(<TrendsPanel limit={1} />);
 
-  it('respects the limit prop', () => {
-    const store = {
-      trends: ImmutableRecord({
-        items: ImmutableList([
-          normalizeTag({
-            name: 'hashtag 1',
-            history: [{ accounts: [] }],
-          }),
-          normalizeTag({
-            name: 'hashtag 2',
-            history: [{ accounts: [] }],
-          }),
-        ]),
-        isLoading: false,
-      })(),
-    };
-
-    render(<TrendsPanel limit={1} />, undefined, store);
-    expect(screen.queryAllByTestId('hashtag')).toHaveLength(1);
-  });
-
-  it('renders empty', () => {
-    const store = {
-      trends: ImmutableRecord({
-        items: ImmutableList([]),
-        isLoading: false,
-      })(),
-    };
-
-    render(<TrendsPanel limit={1} />, undefined, store);
-    expect(screen.queryAllByTestId('hashtag')).toHaveLength(0);
+      await waitFor(() => {
+        expect(screen.queryAllByTestId('hashtag')).toHaveLength(0);
+      });
+    });
   });
 });