From d623157eee0add29a5809a92f7baa993e3bd6fc5 Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@dev.to>
Date: Thu, 26 Nov 2020 06:11:25 -0500
Subject: [PATCH] Fixed some frontend tests causing unhandled rejection errors
 (#11627)

* Fixed unhandled rejection in <ImageUploader /> test.

* Fixed <FollowUsers /> tests.

* Fixed the tests for the <RequestManager /> component.

* Fixed unhandled rejection in search utilities.

* Added an unhandledRejection listener so tests will fail if a Promise fails.

* Added a comment about why you might get an unhandled rejection exception.
---
 .../__tests__/ImageUploader.test.jsx          |  5 ++-
 .../chat/__tests__/requestManager.test.jsx    | 43 ++++++++++++++++---
 .../components/__tests__/FollowUsers.test.jsx |  2 +
 .../utilities/__tests__/search.test.js        |  4 --
 testSetup.js                                  |  5 +++
 5 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx b/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx
index 58721d598..3143422ee 100644
--- a/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx
+++ b/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx
@@ -106,9 +106,10 @@ describe('<ImageUploader />', () => {
       },
     });
 
-    expect(await findByText(/uploading.../i)).toBeDefined();
+    expect(await findByText(/uploading.../i)).not.toBeNull();
 
-    waitForElementToBeRemoved(() => queryByText(/uploading.../i));
+    // Upload is finished, so the messsage has disappeared.
+    expect(queryByText(/uploading.../i)).toBeNull();
 
     await findByText(/some fake error/i);
   });
diff --git a/app/javascript/chat/__tests__/requestManager.test.jsx b/app/javascript/chat/__tests__/requestManager.test.jsx
index f2bacccd0..ba8322870 100644
--- a/app/javascript/chat/__tests__/requestManager.test.jsx
+++ b/app/javascript/chat/__tests__/requestManager.test.jsx
@@ -1,17 +1,48 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
+import fetch from 'jest-fetch-mock';
+import { axe } from 'jest-axe';
+import { beforeEach } from '@jest/globals';
 import RequestManager from '../RequestManager/RequestManager';
 
-const data = [
-  {
-    resource: {},
-  },
-];
+function getData() {
+  const data = [
+    {
+      resource: {},
+    },
+  ];
 
+  return data;
+}
+
+// TODO: There needs to be some better tests in here in regards to different data: empty, some data etc.
 describe('<RequestManager />', () => {
+  beforeEach(() => {
+    const csrfToken = 'this-is-a-csrf-token';
+
+    window.fetch = fetch;
+    window.getCsrfToken = async () => csrfToken;
+
+    fetch.mockResponse(
+      JSON.stringify({
+        result: { user_joining_requests: [], channel_joining_memberships: [] },
+      }),
+    );
+  });
+
+  it('should have no a11y violations', async () => {
+    const { container } = render(
+      <RequestManager resource={getData()} updateRequestCount={jest.fn()} />,
+    );
+
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+
   it('should have the proper elements', () => {
     const { queryByText } = render(
-      <RequestManager resource={data} updateRequestCount={jest.fn()} />,
+      <RequestManager resource={getData()} updateRequestCount={jest.fn()} />,
     );
 
     expect(
diff --git a/app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx b/app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx
index 4c745a9c7..f369b0e84 100644
--- a/app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx
+++ b/app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx
@@ -81,6 +81,8 @@ describe('FollowUsers', () => {
   });
 
   it('should render the correct navigation button on first load', () => {
+    fetch.mockResponseOnce(fakeUsersResponse);
+
     const { queryByText } = renderFollowUsers();
 
     expect(queryByText(/skip for now/i)).toBeDefined();
diff --git a/app/javascript/utilities/__tests__/search.test.js b/app/javascript/utilities/__tests__/search.test.js
index b14f274c8..604518b29 100644
--- a/app/javascript/utilities/__tests__/search.test.js
+++ b/app/javascript/utilities/__tests__/search.test.js
@@ -248,10 +248,6 @@ describe('Search utilities', () => {
   });
 
   describe('fetchSearch', () => {
-    it('should return a Promise', () => {
-      expect(fetchSearch('tags', { name: 'jav' })).toBeInstanceOf(Promise);
-    });
-
     it('should return response formatted as JSON', async () => {
       const expected = { results: [] };
 
diff --git a/testSetup.js b/testSetup.js
index 5c10f2d33..a94d77162 100644
--- a/testSetup.js
+++ b/testSetup.js
@@ -1,3 +1,8 @@
 /* eslint-env node */
 import 'jest-axe/extend-expect';
 import './app/assets/javascripts/lib/xss';
+
+process.on('unhandledRejection', (error) => {
+  // Errors thrown here are typically fetch responses that have not been mocked.
+  throw error;
+});