Fix test cases failure for Task page

- Reason: Due to change in Tab selection logic with url routes
hotosm · Nov 11, 2024 · 1276d76 · 1276d76
1 parent 96aec9c
commit 1276d76
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 79 deletions.
diff --git a/frontend/src/components/taskSelection/index.js b/frontend/src/components/taskSelection/index.js
@@ -1,4 +1,4 @@
-import { lazy, useState, useEffect, useCallback, Suspense } from 'react';
+import { lazy, useState, useEffect, useCallback, Suspense, useRef } from 'react';
 import { useLocation, useParams, useNavigate } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { useQueryParam, StringParam } from 'use-query-params';
@@ -70,6 +70,7 @@ export function TaskSelection({ project }: Object) {
   const [activeStatus, setActiveStatus] = useState(null);
   const [activeUser, setActiveUser] = useState(null);
   const [textSearch, setTextSearch] = useQueryParam('search', StringParam);
+  const isFirstRender = useRef(true); // to check if component is rendered first time
 
   const { data: userTeams, isLoading: isUserTeamsLoading } = useTeamsQuery(
     {
@@ -137,15 +138,16 @@ export function TaskSelection({ project }: Object) {
   // show the tasks tab when the page loads if the user has already contributed
   // to the project. If no, show the instructions tab.
   useEffect(() => {
-    if (contributions && activeSection === null) {
+    if (contributions && isFirstRender.current) {
       const currentUserContributions = contributions.filter((u) => u.username === user.username);
       if (textSearch || (user.isExpert && currentUserContributions.length > 0)) {
         setActiveSection('tasks');
       } else {
         setActiveSection('instructions');
       }
+      isFirstRender.current = false;
     }
-  }, [contributions, user.username, user, activeSection, textSearch, setActiveSection]);
+  }, [contributions, user.username, user, textSearch, setActiveSection]);
 
   useEffect(() => {
     // run it only when the component is initialized
@@ -278,22 +280,20 @@ export function TaskSelection({ project }: Object) {
             <div className="mt3">
               <TabSelector activeSection={activeSection} setActiveSection={setActiveSection} />
               <div className="pt3">
-                {activeSection && (
-                  <div className={`${activeSection !== 'tasks' ? 'dn' : ''}`}>
-                    <TaskList
-                      project={project}
-                      tasks={tasks}
-                      userCanValidate={isValidationAllowed}
-                      updateActivities={getActivities}
-                      selectTask={selectTask}
-                      selected={selected}
-                      textSearch={textSearch}
-                      setTextSearch={setTextSearch}
-                      setZoomedTaskId={setZoomedTaskId}
-                      userContributions={contributions}
-                    />
-                  </div>
-                )}
+                <div className={`${activeSection !== 'tasks' ? 'dn' : ''}`}>
+                  <TaskList
+                    project={project}
+                    tasks={tasks}
+                    userCanValidate={isValidationAllowed}
+                    updateActivities={getActivities}
+                    selectTask={selectTask}
+                    selected={selected}
+                    textSearch={textSearch}
+                    setTextSearch={setTextSearch}
+                    setZoomedTaskId={setZoomedTaskId}
+                    userContributions={contributions}
+                  />
+                </div>
                 {activeSection === 'instructions' ? (
                   <>
                     {project.enforceRandomTaskSelection && (

diff --git a/frontend/src/components/taskSelection/tests/footer.test.js b/frontend/src/components/taskSelection/tests/footer.test.js
@@ -144,6 +144,7 @@ describe('Footer Lock Tasks', () => {
       store.dispatch({ type: 'SET_PROJECT', project: null });
       store.dispatch({ type: 'SET_LOCKED_TASKS', tasks: [] });
       store.dispatch({ type: 'SET_TASKS_STATUS', status: null });
+      store.dispatch({ type: 'SET_TOKEN', token: 'validToken' });
     });
 
   it('should display task cannot be locked for mapping message', async () => {

diff --git a/frontend/src/components/taskSelection/tests/index.test.js b/frontend/src/components/taskSelection/tests/index.test.js
@@ -1,38 +1,51 @@
 import '@testing-library/jest-dom';
-import { screen, act, waitFor } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
 import { QueryParamProvider } from 'use-query-params';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
 
 import { TaskSelection } from '..';
 import { getProjectSummary } from '../../../network/tests/mockData/projects';
-import {
-  QueryClientProviders,
-  ReduxIntlProviders,
-  renderWithRouter,
-} from '../../../utils/testWithIntl';
+import { QueryClientProviders, ReduxIntlProviders } from '../../../utils/testWithIntl';
 import { store } from '../../../store';
 
 describe('Contributions', () => {
+  const setup = () => {
+    return {
+      user: userEvent.setup(),
+      ...render(
+        <MemoryRouter initialEntries={['/projects/122/tasks']}>
+          <Routes>
+            <Route
+              path="projects/:id/:tabname"
+              element={
+                <QueryClientProviders>
+                  <QueryParamProvider adapter={ReactRouter6Adapter}>
+                    <ReduxIntlProviders>
+                      <TaskSelection project={getProjectSummary(123)} />
+                    </ReduxIntlProviders>
+                  </QueryParamProvider>
+                </QueryClientProviders>
+              }
+            />
+          </Routes>
+        </MemoryRouter>,
+      ),
+    };
+  };
+
   it('should select tasks mapped by the selected user', async () => {
     act(() => {
-      store.dispatch({ type: 'SET_TOKEN', token: null });
+      store.dispatch({ type: 'SET_TOKEN', token: 'validToken' });
       store.dispatch({ type: 'SET_LOCALE', locale: 'en-US' });
       store.dispatch({
         type: 'SET_USER_DETAILS',
         userDetails: { id: 420, username: 'somebodyWhoHasntContributed', isExpert: true },
       });
     });
 
-    const { user } = renderWithRouter(
-      <QueryClientProviders>
-        <QueryParamProvider adapter={ReactRouter6Adapter}>
-          <ReduxIntlProviders>
-            <TaskSelection project={getProjectSummary(123)} />
-          </ReduxIntlProviders>
-        </QueryParamProvider>
-      </QueryClientProviders>,
-    );
-
+    const { user } = setup();
     await waitFor(() =>
       expect(screen.getByText(/Project Specific Mapping Notes/i)).toBeInTheDocument(),
     );
@@ -54,16 +67,7 @@ describe('Contributions', () => {
   });
 
   it('should select tasks validated by the selected user', async () => {
-    const { user } = renderWithRouter(
-      <QueryClientProviders>
-        <QueryParamProvider adapter={ReactRouter6Adapter}>
-          <ReduxIntlProviders>
-            <TaskSelection project={getProjectSummary(123)} />
-          </ReduxIntlProviders>
-        </QueryParamProvider>
-      </QueryClientProviders>,
-    );
-
+    const { user } = setup();
     await waitFor(() =>
       expect(screen.getByText(/Project Specific Mapping Notes/i)).toBeInTheDocument(),
     );
@@ -85,16 +89,7 @@ describe('Contributions', () => {
   });
 
   it('should sort tasks by their task number', async () => {
-    const { user } = renderWithRouter(
-      <QueryClientProviders>
-        <QueryParamProvider adapter={ReactRouter6Adapter}>
-          <ReduxIntlProviders>
-            <TaskSelection project={getProjectSummary(123)} />
-          </ReduxIntlProviders>
-        </QueryParamProvider>
-      </QueryClientProviders>,
-    );
-
+    const { user } = setup();
     await waitFor(() =>
       expect(screen.getByText(/Project Specific Mapping Notes/i)).toBeInTheDocument(),
     );
@@ -120,16 +115,7 @@ describe('Contributions', () => {
   });
 
   it('should clear text when close icon is clicked', async () => {
-    const { user } = renderWithRouter(
-      <QueryClientProviders>
-        <QueryParamProvider adapter={ReactRouter6Adapter}>
-          <ReduxIntlProviders>
-            <TaskSelection project={getProjectSummary(123)} />
-          </ReduxIntlProviders>
-        </QueryParamProvider>
-      </QueryClientProviders>,
-    );
-
+    const { user } = setup();
     await waitFor(() =>
       expect(screen.getByText(/Project Specific Mapping Notes/i)).toBeInTheDocument(),
     );

diff --git a/frontend/src/components/taskSelection/tests/tabSelector.test.js b/frontend/src/components/taskSelection/tests/tabSelector.test.js
@@ -1,14 +1,20 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { ReduxIntlProviders } from '../../../utils/testWithIntl';
 import { TabSelector } from '../tabSelector';
-import userEvent from '@testing-library/user-event';
+import { store } from '../../../store';
 
 describe('TabSelector component', () => {
   const setActiveSection = jest.fn();
+  const user = userEvent.setup();
+
+  act(() => {
+    store.dispatch({ type: 'SET_TOKEN', token: 'validToken' });
+  });
+
   it('with the tasks tab active', async () => {
-    const user = userEvent.setup();
     const { container } = render(
       <ReduxIntlProviders>
         <TabSelector activeSection={'tasks'} setActiveSection={setActiveSection} />
@@ -23,8 +29,8 @@ describe('TabSelector component', () => {
     await user.click(screen.getByText('Instructions'));
     expect(setActiveSection).toHaveBeenCalledWith('instructions');
   });
+
   it('with the instructions tab active', async () => {
-    const user = userEvent.setup();
     render(
       <ReduxIntlProviders>
         <TabSelector activeSection={'instructions'} setActiveSection={setActiveSection} />
@@ -36,8 +42,8 @@ describe('TabSelector component', () => {
     await user.click(screen.getByText('contributions'));
     expect(setActiveSection).toHaveBeenLastCalledWith('contributions');
   });
+
   it('with the contributions tab active', async () => {
-    const user = userEvent.setup();
     render(
       <ReduxIntlProviders>
         <TabSelector activeSection={'contributions'} setActiveSection={setActiveSection} />

diff --git a/frontend/src/hooks/UseFilterContributors.js b/frontend/src/hooks/UseFilterContributors.js
@@ -6,7 +6,7 @@ export function useFilterContributors(contributors, level, username) {
   const [filteredContributors, setFilter] = useState([]);
 
   useEffect(() => {
-    let users = contributors;
+    let users = contributors || [];
     if (['ADVANCED', 'INTERMEDIATE', 'BEGINNER'].includes(level)) {
       users = users.filter((user) => user.mappingLevel === level);
     }