fix(frontend): more frontend test fixes, fix mistakes in merge - task…

…Selection

frontend/src/api/projects.ts

@@ -1,11 +1,11 @@
 import axios from 'axios';
 import { subMonths, format } from 'date-fns';
-import { QueryKey, QueryOptions, useQuery } from '@tanstack/react-query';
+import { QueryKey, QueryOptions, useQuery, UseQueryOptions } from '@tanstack/react-query';
 import { useSelector } from 'react-redux';
 
 import { remapParamsToAPI } from '../utils/remapParamsToAPI';
 import api from './apiClient';
-import { UNDERPASS_URL } from '../config';
+import { API_URL, UNDERPASS_URL } from '../config';
 import { RootStore } from '../store';
 
 export const useProjectsQuery = (
@@ -59,7 +59,10 @@ export const useProjectQuery = (projectId: string, otherOptions: any) => {
     ...otherOptions,
   });
 };
-export const useProjectSummaryQuery = (projectId: string, otherOptions = {}) => {
+
+type ProjectSummaryQueryOptions = Omit<UseQueryOptions<any>, ('queryKey' | 'queryFn' | 'select')>;
+
+export const useProjectSummaryQuery = (projectId: string, otherOptions?: ProjectSummaryQueryOptions) => {
   const token = useSelector((state: RootStore) => state.auth.token);
   const locale = useSelector((state: RootStore) => state.preferences['locale']);
 

frontend/src/components/contributions/myTasksOrderDropdown.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { Dropdown } from '../dropdown';
 import messages from './messages';
 
@@ -7,18 +7,19 @@ export default function MyTasksOrderDropdown({ className, setQuery, allQueryPara
   setQuery: Function;
   allQueryParams: unknown;
 }) {
+  const intl = useIntl();
   const options = [
     {
-      label: <FormattedMessage {...messages.recentlyEdited} />,
+      label: intl.formatMessage(messages.recentlyEdited),
       value: '-action_date',
     },
     {
-      label: <FormattedMessage {...messages.projectId} />,
+      label: intl.formatMessage(messages.projectId),
       value: '-project_id',
     },
   ];
 
-  const onSortSelect = (arr: unknown[]) =>
+  const onSortSelect = (arr: unknown[]) => {
     setQuery(
       {
         // @ts-expect-error TS Migrations
@@ -29,6 +30,7 @@ export default function MyTasksOrderDropdown({ className, setQuery, allQueryPara
       },
       'pushIn',
     );
+  }
 
   return (
     <Dropdown

frontend/src/components/contributions/tests/myTasksOrderDropdown.test.tsx

@@ -30,8 +30,8 @@ describe('MyTasksOrderDropdown', () => {
 
   it('displays dropdown options after button is clicked', async () => {
     await setup();
-    expect(screen.getByText(/recently edited/i)).toBeInTheDocument();
-    expect(screen.getByText(/project id/i)).toBeInTheDocument();
+    expect(await screen.findByText(/recently edited/i)).toBeInTheDocument();
+    expect(await screen.findByText(/project id/i)).toBeInTheDocument();
   });
 
   it('should set query when an option is selected', async () => {
@@ -51,6 +51,6 @@ describe('MyTasksOrderDropdown', () => {
         />
       </IntlProviders>,
     );
-    expect(screen.getByText(/project id/i)).toBeInTheDocument();
+    expect(await screen.findByText(/project id/i)).toBeInTheDocument();
   });
 });

frontend/src/components/dropdown.tsx

@@ -46,31 +46,31 @@ const DropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>((props,
       if (!ourObj) return;
 
       let isRemove = false;
-      if (Array.isArray(value)) {
-        for (let x = 0; x < value.length; x++) {
-          if (value[x].label === label) {
-            isRemove = true;
-            props.onRemove && props.onRemove(ourObj);
-            props.onChange(value.slice(0, x).concat(value.slice(x + 1)));
-          }
+      for (let x = 0; x < value.length; x++) {
+        if (value[x].label === label) {
+          isRemove = true;
+          props.onRemove && props.onRemove(ourObj);
+          props.onChange(value.slice(0, x).concat(value.slice(x + 1)));
         }
+      }
 
-        if (!isRemove) {
-          let newArray = value.slice(0, value.length);
-          if (!props.multi) {
-            newArray = [];
-          }
-          newArray.push(ourObj);
-          props.onAdd && props.onAdd(ourObj);
-          props.onChange(newArray);
+      if (!isRemove) {
+        let newArray = value.slice(0, value.length);
+        if (!props.multi) {
+          newArray = [];
         }
+        newArray.push(ourObj);
+        props.onAdd && props.onAdd(ourObj);
+        props.onChange(newArray);
       }
     }
     if (!props.multi) {
       props.toggleDropdown();
     }
   };
 
+  console.log("OPTIONS!!!", props.options);
+
   return (
     <div
       ref={ref}
@@ -81,6 +81,7 @@ const DropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>((props,
       {props.options.map((i, k) => (
         <span
           key={k}
+          data-testid={i.label}
           onClick={handleClick.bind(null, i)}
           className="pa3 nowrap bg-animate bg-white hover-bg-tan"
         >
@@ -183,16 +184,13 @@ export function Dropdown(props: DropdownProps) {
     setDisplay(!display);
   };
 
-  const getActiveOrDisplay = (): string => {
-    const activeItems = props.options.filter((item) => {
-      if (Array.isArray(props.value)) {
-        return props.value.some(v => v.label === item.label || v.value === item.value);
-      }
-      return item.label === props.value.label || item.value === props.value.value;
-    });
+  const getActiveOrDisplay = () => {
+    const activeItems = props.options.filter(
+      (item) => item.label === props.value || item.value === props.value,
+    );
     return activeItems.length === 0 || activeItems.length > 1
       ? props.display
-      : activeItems[0].label
+      : activeItems[0].label;
   };
 
   return (
@@ -210,6 +208,7 @@ export function Dropdown(props: DropdownProps) {
         <DropdownContent
           ref={contentRef}
           {...props}
+          eventTypes={['click', 'touchend']}
           toggleDropdown={toggleDropdown}
           toTop={props.toTop}
         />

frontend/src/components/notifications/actionButtons.jsx

@@ -79,6 +79,7 @@ export const ActionButtons = ({
   };
 
   function handleSuccess(shouldRetry = true) {
+    console.log("CALLED??")
     setSelected([]);
     shouldRetry && retryFn();
     isAllSelected

frontend/src/components/notifications/tests/actionButtons.test.jsx

@@ -1,4 +1,3 @@
-
 import { render, screen, act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

frontend/src/components/projectCard/tests/projectProgressBar.test.tsx

@@ -0,0 +1,60 @@
+import ProjectProgressBar from '../projectProgressBar';
+import { createComponentWithIntl, IntlProviders } from '../../../utils/testWithIntl';
+import { render, screen } from '@testing-library/react';
+
+describe('test if projectProgressBar', () => {
+  const setup = () => render(
+    <IntlProviders>
+      <ProjectProgressBar className="pb2" percentMapped={40} percentValidated={25} />
+    </IntlProviders>
+  );
+  it('mapped bar has the correct width', async () => {
+    const { container } = setup();
+    const element = container.querySelector('.absolute.bg-blue-grey.br-pill.hhalf.hide-child') as HTMLDivElement;
+    expect(element).toBeInTheDocument();
+    expect(element.style.width).toBe('40%');
+  });
+  it('validated bar has the correct width', () => {
+    const { container } = setup();
+    const element = container.querySelector('.absolute.bg-red.br-pill.hhalf.hide-child') as HTMLDivElement;
+    expect(element).toBeInTheDocument();
+    expect(element.style.width).toBe('25%');
+  });
+  it('has a div with the complete background bar', () => {
+    const { container } = setup();
+    const element = container.querySelector('.bg-tan.br-pill.hhalf.overflow-y-hidden') as HTMLDivElement;
+    expect(element).toBeInTheDocument();
+  });
+  it('the first div has the correct classes', () => {
+    const { container } = setup();
+    const element = container.querySelector('.cf.db.pb2') as HTMLDivElement;
+    expect(element).toBeInTheDocument();
+    expect(element.className).toBe('cf db pb2');
+  });
+  it('tooltip is not present because it is not hovered', async () => {
+    const { container } = setup();
+    const element = container.querySelector(".db.absolute.top-1.z-1.dib.bg-blue-dark.ba.br2.b--blue-dark.pa2.shadow-5") as HTMLDivElement;
+    expect(element).not.toBeInTheDocument();
+    expect(container.getElementsByTagName("span").length).toBe(0);
+  });
+});
+
+describe('test if projectProgressBar with value higher than 100%', () => {
+  const setup = () => render(
+    <IntlProviders>
+      <ProjectProgressBar className="pb2" percentMapped={140} percentValidated={125} />,
+    </IntlProviders>
+  );
+  it('to mapped returns 100% width', () => {
+    const { container } = setup();
+    const element = container.querySelector('.absolute.bg-blue-grey.br-pill.hhalf.hide-child') as HTMLDivElement;
+    expect(element).toBeInTheDocument();
+    expect(element.style.width).toBe('100%');
+  });
+  it('to validated returns 100% width', () => {
+    const { container } = setup();
+    const element = container.querySelector('.absolute.bg-red.br-pill.hhalf.hide-child') as HTMLDivElement;
+    expect(element).toBeInTheDocument();
+    expect(element.style.width).toBe('100%');
+  });
+});

frontend/src/components/projectCreate/setTaskSizes.jsx

@@ -20,7 +20,8 @@ export default function SetTaskSizes({ metadata, mapObj, updateMetadata }) {
 
   const splitHandler = useCallback(
     (event) => {
-      const taskGrid = mapObj.map.getSource('grid')._data;
+      // Not defined for tests
+      const taskGrid = mapObj.map?.getSource('grid')._data;
 
       if (metadata.tempTaskGrid === null) {
         updateMetadata({ ...metadata, tempTaskGrid: taskGrid });
@@ -39,6 +40,7 @@ export default function SetTaskSizes({ metadata, mapObj, updateMetadata }) {
   );
 
   useEffect(() => {
+    if (!mapObj.map) return;
     if (splitMode === 'click') {
       mapObj.map.on('mouseenter', 'grid', (event) => {
         mapObj.map.getCanvas().style.cursor = 'pointer';
@@ -57,6 +59,7 @@ export default function SetTaskSizes({ metadata, mapObj, updateMetadata }) {
 
   const splitDrawing = () => {
     setSplitMode('draw');
+    if (!mapObj.map) return;
     mapObj.map.on('mouseenter', 'grid', (event) => {
       mapObj.map.getCanvas().style.cursor = 'crosshair';
     });
@@ -117,17 +120,17 @@ export default function SetTaskSizes({ metadata, mapObj, updateMetadata }) {
   }, [metadata, updateMetadata]);
 
   useLayoutEffect(() => {
-    if (mapObj.map.getSource('grid') !== undefined) {
-      mapObj.map.getSource('grid').setData(metadata.taskGrid);
+    if (mapObj.map?.getSource('grid') !== undefined) {
+      mapObj.map?.getSource('grid').setData(metadata.taskGrid);
     } else {
-      mapObj.map.addSource('grid', {
+      mapObj.map?.addSource('grid', {
         type: 'geojson',
         data: { type: 'FeatureCollection', features: metadata.taskGrid },
       });
     }
     return () => {
       // remove the split on click function when leaving the page
-      mapObj.map.off('click', 'grid', splitHandler);
+      mapObj.map?.off('click', 'grid', splitHandler);
     };
   }, [metadata, mapObj, smallerSize, largerSize, splitHandler]);
 

frontend/src/components/projectCreate/tests/setTaskSizes.test.jsx

@@ -1,12 +1,11 @@
 import { render, screen } from '@testing-library/react';
 
-import mapboxgl from 'mapbox-gl';
-
 import SetTaskSizes from '../setTaskSizes';
 import { projectMetadata } from '../../../utils/tests/snippets/projectMetadata';
 import { IntlProviders } from '../../../utils/testWithIntl';
 
-vi.mock('mapbox-gl/dist/mapbox-gl', () => ({
+vi.mock('mapbox-gl/dist/mapbox-gl', async (importOriginal) => ({
+  ...(await importOriginal()),
   GeolocateControl: vi.fn(),
   Map: vi.fn(() => ({
     addControl: vi.fn(),
@@ -20,17 +19,8 @@ vi.mock('mapbox-gl/dist/mapbox-gl', () => ({
   NavigationControl: vi.fn(),
 }));
 
-const map = new mapboxgl.Map({
-  container: '',
-  style: {},
-  center: [0, 0],
-  zoom: 1.3,
-  attributionControl: false,
-  source: 'grid',
-});
-
 let mapObj = {
-  map: map,
+  map: null,
   draw: {},
 };