feat,chore(frontend/testing): migrate to msw v2, fix further tests

hotosm · Dec 22, 2024 · e68dabe · e68dabe
1 parent 750e654
commit e68dabe
Show file tree

Hide file tree

Showing 11 changed files with 431 additions and 564 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -135,7 +135,7 @@
     "@vitest/ui": "2.1.8",
     "combine-react-intl-messages": "^4.0.0",
     "jest-canvas-mock": "^2.5.2",
-    "msw": "^1.3.2",
+    "msw": "^2.7.0",
     "prettier": "^2.8.8",
     "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.1",

diff --git a/frontend/src/components/banner/tests/topBanner.test.tsx b/frontend/src/components/banner/tests/topBanner.test.tsx
@@ -4,12 +4,11 @@ import { banner } from '../../../network/tests/mockData/miscellaneous';
 import { ReduxIntlProviders, renderWithRouter } from '../../../utils/testWithIntl';
 import { TopBanner } from '../topBanner';
 
-it('should render the banner text ', async () => {
+it('should render the banner text', async () => {
   renderWithRouter(
     <ReduxIntlProviders>
       <TopBanner />
     </ReduxIntlProviders>,
   );
-  screen.debug();
   expect(await screen.findByText(banner.message)).toBeInTheDocument();
 });
diff --git a/frontend/src/components/banner/topBanner.tsx b/frontend/src/components/banner/topBanner.tsx
@@ -2,12 +2,23 @@ import { useLocation } from 'react-router-dom';
 import { useFetchWithAbort } from '../../hooks/UseFetch';
 import { htmlFromMarkdown } from '../../utils/htmlFromMarkdown';
 import './styles.scss';
+import { useEffect, useState } from 'react';
 
 export function TopBanner() {
   const location = useLocation();
   const [, error, data] = useFetchWithAbort<{
     message: string;
   }>(`system/banner/`);
+  const [safeHTML, setSafeHTML] = useState<string>();
+
+  useEffect(() => {
+    (async () => {
+      if (data?.message) {
+        const html = await htmlFromMarkdown(data.message);
+        setSafeHTML(html.__html);
+      }
+    })();
+  }, [data?.message])
 
   return (
     <>
@@ -16,7 +27,9 @@ export function TopBanner() {
         <div className="ph3 b--grey-light bb bg-tan top-banner-container">
           <div
             className="fw6 flex justify-center"
-            dangerouslySetInnerHTML={htmlFromMarkdown(data.message)}
+            dangerouslySetInnerHTML={{
+              __html: safeHTML,
+            }}
           />
         </div>
       )}

diff --git a/frontend/src/components/contributions/tests/myProjectsDropdown.test.tsx b/frontend/src/components/contributions/tests/myProjectsDropdown.test.tsx
@@ -4,6 +4,7 @@ import selectEvent from 'react-select-event';
 
 import MyProjectsDropdown from '../myProjectsDropdown';
 import { ReduxIntlProviders } from '../../../utils/testWithIntl';
+import { API_URL } from '../../../config';
 
 it('displays placeholder and typed text on type', async () => {
   const setQueryMock = vi.fn();
@@ -24,7 +25,7 @@ it('displays placeholder and typed text on type', async () => {
     </ReduxIntlProviders>,
   );
 
-  screen.debug()
+  // screen.debug()
 
   await selectEvent.select(screen.getByRole('combobox'), '#8629');
   expect(setQueryMock).toHaveBeenCalled();

diff --git a/frontend/src/components/header/updateEmail.tsx b/frontend/src/components/header/updateEmail.tsx
@@ -26,7 +26,9 @@ export const UpdateEmail = ({ closeModal }: {
   const onSubmit = (e) => {
     e.preventDefault();
     let userData = userDetails;
-    userData.emailAddress = userState.email;
+    if (userData) {
+      userData.emailAddress = userState.email;
+    }
     dispatch(updateUserEmail(userData, token, PROFILE_RELEVANT_FIELDS.concat(['id'])));
     setUserState({
       ...userState,

diff --git a/frontend/src/network/genericJSONRequest.ts b/frontend/src/network/genericJSONRequest.ts
@@ -34,6 +34,7 @@ export function fetchLocalJSONAPI(endpoint: string, token: string, method = 'GET
   if (token) {
     headers['Authorization'] = `Token ${token}`;
   }
+
   return fetch(url, {
     method: method,
     headers: headers,
@@ -59,6 +60,9 @@ export function fetchLocalJSONAPIWithAbort(
   if (token) {
     headers['Authorization'] = `Token ${token}`;
   }
+
+  // return fetch(url);
+
   return fetch(url, {
     method: method,
     headers: headers,