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.

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

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(

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();

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: [] };
 

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