Merge pull request #6678 from JoltCode/typescript-vite

fix: JS -> TS test migrations

frontend/.env.expand

@@ -2,47 +2,47 @@
 # Variables that are available for the frontend.
 # Usually doesn't need to be modified
 #
-VITE_BASE_URL=$TM_APP_BASE_URL
-VITE_API_URL=$TM_APP_API_URL
-VITE_API_VERSION=$TM_APP_API_VERSION
-VITE_ORG_NAME=$TM_ORG_NAME
-VITE_ORG_CODE=$TM_ORG_CODE
-VITE_ORG_URL=$TM_ORG_URL
-VITE_ORG_LOGO=$TM_ORG_LOGO
-VITE_ORG_PRIVACY_POLICY_URL=$TM_ORG_PRIVACY_POLICY_URL
-VITE_ORG_TWITTER=$TM_ORG_TWITTER
-VITE_ORG_FB=$TM_ORG_FB
-VITE_ORG_INSTAGRAM=$TM_ORG_INSTAGRAM
-VITE_ORG_YOUTUBE=$TM_ORG_YOUTUBE
-VITE_ORG_GITHUB=$TM_ORG_GITHUB
-VITE_DEFAULT_LOCALE=$TM_DEFAULT_LOCALE
-VITE_TM_MAPPER_LEVEL_INTERMEDIATE=$TM_MAPPER_LEVEL_INTERMEDIATE
-VITE_TM_MAPPER_LEVEL_ADVANCED=$TM_MAPPER_LEVEL_ADVANCED
-VITE_MATOMO_ID=$TM_MATOMO_ID
-VITE_MATOMO_ENDPOINT=$TM_MATOMO_ENDPOINT
-VITE_SERVICE_DESK=$TM_SERVICE_DESK
-VITE_IMAGE_UPLOAD_API_URL=$TM_IMAGE_UPLOAD_API_URL
-VITE_HOMEPAGE_VIDEO_URL=$TM_HOMEPAGE_VIDEO_URL
-VITE_HOMEPAGE_IMG_HIGH=$TM_HOMEPAGE_IMG_HIGH
-VITE_HOMEPAGE_IMG_LOW=$TM_HOMEPAGE_IMG_LOW
-VITE_MAPBOX_TOKEN=$TM_MAPBOX_TOKEN
-VITE_ENABLE_SERVICEWORKER=$TM_ENABLE_SERVICEWORKER
-VITE_MAX_FILESIZE=$TM_IMPORT_MAX_FILESIZE
-VITE_MAX_AOI_AREA=$TM_MAX_AOI_AREA
-VITE_OHSOME_STATS_BASE_URL=$OHSOME_STATS_BASE_URL
-VITE_OHSOME_STATS_TOKEN=$OHSOME_STATS_TOKEN
-VITE_OSM_CLIENT_ID=$TM_CLIENT_ID
-VITE_OSM_CLIENT_SECRET=$TM_CLIENT_SECRET
-VITE_OSM_REDIRECT_URI=$TM_REDIRECT_URI
-VITE_OSM_SERVER_URL=$OSM_SERVER_URL
-VITE_OSM_SERVER_API_URL=$OSM_SERVER_API_URL
-VITE_TM_ORG_NAME=$TM_ORG_NAME
-VITE_OSM_REGISTER_URL=$OSM_REGISTER_URL
-VITE_ID_EDITOR_URL=$ID_EDITOR_URL
-VITE_POTLATCH2_EDITOR_URL=$POTLATCH2_EDITOR_URL
-VITE_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN
-VITE_ENVIRONMENT=$TM_ENVIRONMENT
-VITE_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT
-VITE_RAPID_EDITOR_URL=$RAPID_EDITOR_URL
-VITE_EXPORT_TOOL_S3_URL=$EXPORT_TOOL_S3_URL
-VITE_ENABLE_EXPORT_TOOL=$ENABLE_EXPORT_TOOL
+REACT_APP_BASE_URL=$TM_APP_BASE_URL
+REACT_APP_API_URL=$TM_APP_API_URL
+REACT_APP_API_VERSION=$TM_APP_API_VERSION
+REACT_APP_ORG_NAME=$TM_ORG_NAME
+REACT_APP_ORG_CODE=$TM_ORG_CODE
+REACT_APP_ORG_URL=$TM_ORG_URL
+REACT_APP_ORG_LOGO=$TM_ORG_LOGO
+REACT_APP_ORG_PRIVACY_POLICY_URL=$TM_ORG_PRIVACY_POLICY_URL
+REACT_APP_ORG_TWITTER=$TM_ORG_TWITTER
+REACT_APP_ORG_FB=$TM_ORG_FB
+REACT_APP_ORG_INSTAGRAM=$TM_ORG_INSTAGRAM
+REACT_APP_ORG_YOUTUBE=$TM_ORG_YOUTUBE
+REACT_APP_ORG_GITHUB=$TM_ORG_GITHUB
+REACT_APP_DEFAULT_LOCALE=$TM_DEFAULT_LOCALE
+REACT_APP_TM_MAPPER_LEVEL_INTERMEDIATE=$TM_MAPPER_LEVEL_INTERMEDIATE
+REACT_APP_TM_MAPPER_LEVEL_ADVANCED=$TM_MAPPER_LEVEL_ADVANCED
+REACT_APP_MATOMO_ID=$TM_MATOMO_ID
+REACT_APP_MATOMO_ENDPOINT=$TM_MATOMO_ENDPOINT
+REACT_APP_SERVICE_DESK=$TM_SERVICE_DESK
+REACT_APP_IMAGE_UPLOAD_API_URL=$TM_IMAGE_UPLOAD_API_URL
+REACT_APP_HOMEPAGE_VIDEO_URL=$TM_HOMEPAGE_VIDEO_URL
+REACT_APP_HOMEPAGE_IMG_HIGH=$TM_HOMEPAGE_IMG_HIGH
+REACT_APP_HOMEPAGE_IMG_LOW=$TM_HOMEPAGE_IMG_LOW
+REACT_APP_MAPBOX_TOKEN=$TM_MAPBOX_TOKEN
+REACT_APP_ENABLE_SERVICEWORKER=$TM_ENABLE_SERVICEWORKER
+REACT_APP_MAX_FILESIZE=$TM_IMPORT_MAX_FILESIZE
+REACT_APP_MAX_AOI_AREA=$TM_MAX_AOI_AREA
+REACT_APP_OHSOME_STATS_BASE_URL=$OHSOME_STATS_BASE_URL
+REACT_APP_OHSOME_STATS_TOKEN=$OHSOME_STATS_TOKEN
+REACT_APP_OSM_CLIENT_ID=$TM_CLIENT_ID
+REACT_APP_OSM_CLIENT_SECRET=$TM_CLIENT_SECRET
+REACT_APP_OSM_REDIRECT_URI=$TM_REDIRECT_URI
+REACT_APP_OSM_SERVER_URL=$OSM_SERVER_URL
+REACT_APP_OSM_SERVER_API_URL=$OSM_SERVER_API_URL
+REACT_APP_TM_ORG_NAME=$TM_ORG_NAME
+REACT_APP_OSM_REGISTER_URL=$OSM_REGISTER_URL
+REACT_APP_ID_EDITOR_URL=$ID_EDITOR_URL
+REACT_APP_POTLATCH2_EDITOR_URL=$POTLATCH2_EDITOR_URL
+REACT_APP_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN
+REACT_APP_ENVIRONMENT=$TM_ENVIRONMENT
+REACT_APP_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT
+REACT_APP_RAPID_EDITOR_URL=$RAPID_EDITOR_URL
+REACT_APP_EXPORT_TOOL_S3_URL=$EXPORT_TOOL_S3_URL
+REACT_APP_ENABLE_EXPORT_TOOL=$ENABLE_EXPORT_TOOL

frontend/index.html

@@ -14,14 +14,14 @@
     <meta name="application-name" content="Tasking Manager" />
 
     <!-- for Facebook -->
-    <meta property="og:title" content="%VITE_ORG_CODE% Tasking Manager" />
-    <meta property="og:site_name" content="%VITE_ORG_CODE% Tasking Manager" />
+    <meta property="og:title" content="%REACT_APP_ORG_CODE% Tasking Manager" />
+    <meta property="og:site_name" content="%REACT_APP_ORG_CODE% Tasking Manager" />
     <meta property="og:type" content="website" />
     <meta property="og:description" content="Collaborative mapping for humanitarian action." />
 
     <!-- for Twitter -->
     <meta name="twitter:card" content="summary" />
-    <meta name="twitter:title" content="%VITE_ORG_CODE% Tasking Manager" />
+    <meta name="twitter:title" content="%REACT_APP_ORG_CODE% Tasking Manager" />
     <meta name="twitter:description" content="Collaborative mapping for humanitarian action." />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -39,7 +39,7 @@
 
       %PUBLIC_URL% is now no longer used, it is automatically refactored to the correct path during the build process.
     -->
-    <title>%VITE_ORG_CODE% Tasking Manager</title>
+    <title>%REACT_APP_ORG_CODE% Tasking Manager</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -59,10 +59,10 @@
       _paq.push(['trackPageView']);
       _paq.push(['enableLinkTracking']); // Tracks downloads
       _paq.push(['trackVisibleContentImpressions']); // Tracks content blocks
-      var site_id = '%VITE_MATOMO_ID%';
-      if (site_id && '%VITE_MATOMO_ENDPOINT%') {
+      var site_id = '%REACT_APP_MATOMO_ID%';
+      if (site_id && '%REACT_APP_MATOMO_ENDPOINT%') {
         (function () {
-          var u = '%VITE_MATOMO_ENDPOINT%';
+          var u = '%REACT_APP_MATOMO_ENDPOINT%';
           _paq.push(['setTrackerUrl', u + 'piwik.php']);
           _paq.push(['setSiteId', site_id]);
 

frontend/package.json

@@ -134,6 +134,7 @@
     "@vitejs/plugin-react-swc": "^3.7.0",
     "@vitest/ui": "2.1.8",
     "combine-react-intl-messages": "^4.0.0",
+    "happy-dom": "^16.5.2",
     "msw": "^2.7.0",
     "prettier": "^2.8.8",
     "react-scripts": "^5.0.1",

frontend/src/App.tsx

@@ -38,7 +38,7 @@ const queryClient = new QueryClient({
 });
 
 const App = () => {
-  useMeta({ property: 'og:url', content: import.meta.env.VITE_BASE_URL });
+  useMeta({ property: 'og:url', content: import.meta.env.REACT_APP_BASE_URL });
   useMeta({ name: 'author', content: ORG_NAME });
   const isLoading = useSelector((state: RootStore) => state.loader.isLoading);
   const locale = useSelector((state: RootStore) => state.preferences.locale);

frontend/src/components/header/tests/index.test.jsx

@@ -36,7 +36,7 @@ describe('Header', () => {
     if (ORG_LOGO) {
       expect(orgLogo).toHaveAttribute('src', ORG_LOGO);
     } else {
-      expect(orgLogo).toHaveAttribute('src', 'main-logo.svg');
+      expect(orgLogo).toHaveAttribute('src', expect.stringContaining('main-logo.svg'));
     }
     expect(screen.getByText(/Tasking Manager/i)).toBeInTheDocument();
     ['Explore projects', 'Learn', 'About'].forEach((menuItem) =>

frontend/src/components/projectDetail/tests/questionsAndComments.test.jsx

@@ -36,10 +36,12 @@ describe('test if QuestionsAndComments component', () => {
         </ReduxIntlProviders>
       </QueryClientProviders>,
     );
-    const previewBtn = await waitFor(() => screen.getByRole('button', { name: /preview/i }));
-    expect(screen.getAllByRole('button').length).toBe(1);
+    const previewBtn = await screen.findByRole('button', { name: /preview/i }, {
+      timeout: 5000,
+    })
+    expect(screen.getAllByRole('button').length).toBe(11);
     waitFor(() => expect(screen.getByRole('button', { name: /write/i })));
-    expect(screen.getAllByRole('button')).toHaveLength(1);
+    expect(screen.getAllByRole('button')).toHaveLength(11);
     waitFor(() => (screen.getByRole('textbox')));
     await user.click(previewBtn);
     expect(screen.queryByRole('textbox', { hidden: true })).toBeInTheDocument();
@@ -57,7 +59,7 @@ describe('test if QuestionsAndComments component', () => {
         </ReduxIntlProviders>
       </QueryClientProviders>,
     );
-    await waitFor(() => expect(screen.getByText('hello world')).toBeInTheDocument());
+    expect(await screen.findByText('hello world')).toBeInTheDocument();
     const textarea = screen.getByRole('textbox');
     const postBtn = screen.getByRole('button', { name: /post/i });
     await user.type(textarea, 'Test comment');

frontend/src/components/taskSelection/tests/action.test.tsx

@@ -36,20 +36,18 @@ describe('Task Map Action', () => {
     setupFaultyHandlers();
     const { user } = setup();
     await user.click(
-      screen.getByRole('button', {
+      await screen.findByRole('button', {
         name: /iD Editor/i,
       }),
     );
-    await user.click(screen.getByText('JOSM'));
-    await waitFor(() =>
-      expect(
-        screen.getByRole('heading', {
-          name: messages.JOSMError.defaultMessage,
-        }),
-      ).toBeInTheDocument(),
-    );
+    await user.click(await screen.findByText('JOSM'));
+    expect(
+      await screen.findByRole('heading', {
+        name: messages.JOSMError.defaultMessage,
+      }),
+    ).toBeInTheDocument()
     await user.click(
-      screen.getByRole('button', {
+      await screen.findByRole('button', {
         name: /close/i,
       }),
     );

frontend/src/components/taskSelection/tests/taskStatus.test.jsx

@@ -15,8 +15,8 @@ describe('test correct elements of TaskStatus', () => {
     );
     expect(container.querySelectorAll("span")[0]).toHaveStyle({
       backgroundColor: '#fff',
-      height: '0.875rem',
-      width: '0.875rem',
+      height: '14px',
+      width: '14px',
     });
     expect(container.querySelectorAll("span")[0]).toHaveClass('ba bw1 b--grey-light dib v-mid');
     expect(screen.getByText("Locked for mapping by test_user")).toBeInTheDocument();
@@ -32,8 +32,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#fff',
-      height: '0.875rem',
-      width: '0.875rem',
+      height: '14px',
+      width: '14px',
     });
     expect(container.querySelector("span")).toHaveClass(
       'ba bw1 b--grey-light dib v-mid',
@@ -51,8 +51,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#ade6ef',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText("Locked for validation by test_user")).toBeInTheDocument();
@@ -68,8 +68,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#ade6ef',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_LOCKED_FOR_VALIDATION.defaultMessage)).toBeInTheDocument();
@@ -85,8 +85,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#fff',
-      height: '0.875rem',
-      width: '0.875rem',
+      height: '14px',
+      width: '14px',
     });
     expect(container.querySelector("span")).toHaveClass(
       'ba bw1 b--grey-light dib v-mid',
@@ -104,8 +104,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#ade6ef',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_MAPPED.defaultMessage)).toBeInTheDocument();
@@ -121,8 +121,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#40ac8c',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_VALIDATED.defaultMessage)).toBeInTheDocument();
@@ -138,8 +138,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#fceca4',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_INVALIDATED.defaultMessage)).toBeInTheDocument();
@@ -155,8 +155,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#d8dae4',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_BADIMAGERY.defaultMessage)).toBeInTheDocument();

frontend/src/components/user/tests/list.test.jsx

@@ -32,9 +32,7 @@ describe('User list card', () => {
     expect(getByText('Beginner')).toBeInTheDocument();
     expect(getByText('Shyam')).toBeInTheDocument();
     expect(screen.getByText('Shyam').closest('a')).toHaveAttribute('href', '/users/Shyam');
-    expect(screen.getByTitle(/Ram/i)).toHaveStyle(
-      `background-image: url(https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp)`,
-    );
+    expect(container.querySelector("a").firstChild.style.backgroundImage).toEqual(`url("https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp")`);
     expect(container.querySelectorAll('svg').length).toBe(2);
   });
 });