From fcda1e32d84f366b83f653a1355b4f920a607e84 Mon Sep 17 00:00:00 2001
From: Wille Marcel <wille.yyz@gmail.com>
Date: Wed, 5 Jul 2023 16:33:59 -0300
Subject: [PATCH] Add tests to OSM Teams integration

---
 backend/__init__.py                           |   2 +-
 backend/api/teams/resources.py                |   1 +
 backend/models/dtos/team_dto.py               |   1 +
 backend/models/postgis/statuses.py            |   1 +
 .../src/components/teamsAndOrgs/management.js |   1 +
 .../src/components/teamsAndOrgs/members.js    |   8 +-
 .../src/components/teamsAndOrgs/messages.js   |  17 ++-
 .../src/components/teamsAndOrgs/teamSync.js   |  19 ++-
 frontend/src/components/teamsAndOrgs/teams.js |   5 +-
 frontend/src/hooks/UseOSMTeams.js             |   6 +-
 .../src/network/tests/mockData/osmTeams.js    |  79 +++++++++++
 frontend/src/network/tests/mockData/teams.js  |   2 +-
 frontend/src/network/tests/server-handlers.js |  20 ++-
 frontend/src/routes.js                        |   3 +-
 frontend/src/views/teams.js                   |  18 +--
 frontend/src/views/tests/teams.test.js        | 127 +++++++++++++++++-
 16 files changed, 274 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/network/tests/mockData/osmTeams.js

diff --git a/backend/__init__.py b/backend/__init__.py
index f4e631c63e..88d8848bbe 100644
--- a/backend/__init__.py
+++ b/backend/__init__.py
@@ -106,7 +106,7 @@ def create_app(env="backend.config.EnvironmentConfig"):
         env = "backend.config.TestEnvironmentConfig"
     app.config.from_object(env)
     # Enable logging to files
-    initialise_logger(app)
+    # initialise_logger(app)
     app.logger.info("Starting up a new Tasking Manager application")
 
     # Connect to database
diff --git a/backend/api/teams/resources.py b/backend/api/teams/resources.py
index 4643349aea..b2494d723c 100644
--- a/backend/api/teams/resources.py
+++ b/backend/api/teams/resources.py
@@ -366,6 +366,7 @@ def post(self):
                         - "ANY"
                         - "BY_REQUEST"
                         - "BY_INVITE"
+                        - "OSM_TEAMS"
         responses:
             201:
                 description: Team created successfully
diff --git a/backend/models/dtos/team_dto.py b/backend/models/dtos/team_dto.py
index 30cf5a16d6..d0b266ab60 100644
--- a/backend/models/dtos/team_dto.py
+++ b/backend/models/dtos/team_dto.py
@@ -39,6 +39,7 @@ def validate_team_join_method(value):
             f"{TeamJoinMethod.ANY.name}, "
             f"{TeamJoinMethod.BY_INVITE.name}, "
             f"{TeamJoinMethod.BY_REQUEST.name}"
+            f"{TeamJoinMethod.OSM_TEAMS.name}"
         )
 
 
diff --git a/backend/models/postgis/statuses.py b/backend/models/postgis/statuses.py
index ef78498948..57c70b7651 100644
--- a/backend/models/postgis/statuses.py
+++ b/backend/models/postgis/statuses.py
@@ -130,6 +130,7 @@ class TeamJoinMethod(Enum):
     ANY = 0
     BY_REQUEST = 1
     BY_INVITE = 2
+    OSM_TEAMS = 3
 
 
 class TeamRoles(Enum):
diff --git a/frontend/src/components/teamsAndOrgs/management.js b/frontend/src/components/teamsAndOrgs/management.js
index c35dd62c44..47d073aaff 100644
--- a/frontend/src/components/teamsAndOrgs/management.js
+++ b/frontend/src/components/teamsAndOrgs/management.js
@@ -54,6 +54,7 @@ export function JoinMethodBox(props) {
     ANY: 'anyoneCanJoin',
     BY_REQUEST: 'byRequest',
     BY_INVITE: 'byInvite',
+    OSM_TEAMS: 'OSMTeams',
   };
   return (
     <div className={`tc br1 f7 ttu ba red b--red ${props.className}`}>
diff --git a/frontend/src/components/teamsAndOrgs/members.js b/frontend/src/components/teamsAndOrgs/members.js
index e69f49b580..4a174bee1c 100644
--- a/frontend/src/components/teamsAndOrgs/members.js
+++ b/frontend/src/components/teamsAndOrgs/members.js
@@ -83,15 +83,13 @@ export function Members({
       <div className={`bg-white b--grey-light pa4 ${editMode ? 'bt bl br' : 'ba'}`}>
         <div className="cf db">
           <h3 className="f3 blue-dark mv2 fw6 fl">{title}</h3>
-          {!disableEdit &&
-            <EditModeControl editMode={editMode} switchModeFn={setEditMode} />
-          }
+          {!disableEdit && <EditModeControl editMode={editMode} switchModeFn={setEditMode} />}
         </div>
-        {disableEdit &&
+        {disableEdit && (
           <div className="blue-grey f6">
             <FormattedMessage {...messages.syncedWithOSMTeams} />
           </div>
-        }
+        )}
         <div className="cf mb1">
           {editMode && (
             <AsyncSelect
diff --git a/frontend/src/components/teamsAndOrgs/messages.js b/frontend/src/components/teamsAndOrgs/messages.js
index 9a4b4daafd..170927d135 100644
--- a/frontend/src/components/teamsAndOrgs/messages.js
+++ b/frontend/src/components/teamsAndOrgs/messages.js
@@ -490,6 +490,15 @@ export default defineMessages({
     id: 'management.teams.join_method.by_invite.description',
     defaultMessage: 'Users can only join this team if managers invite them.',
   },
+  OSMTeams: {
+    id: 'management.teams.join_method.osm_teams',
+    defaultMessage: 'OSM Teams',
+  },
+  OSMTeamsDescription: {
+    id: 'management.teams.join_method.osm_teams.description',
+    defaultMessage:
+      'The users of this team are managed in OSM Teams. This option is automatically selected when you enable the sync with OSM Teams.',
+  },
   public: {
     id: 'management.teams.visibility.public',
     defaultMessage: 'Public',
@@ -578,10 +587,6 @@ export default defineMessages({
     id: 'management.teams.sync.update',
     defaultMessage: 'Synchronize again',
   },
-  confirmResync: {
-    id: 'management.teams.sync.confirm_resync',
-    defaultMessage: 'Confirm sync',
-  },
   confirmSelection: {
     id: 'management.teams.sync.confirm',
     defaultMessage: 'Confirm selection',
@@ -599,6 +604,10 @@ export default defineMessages({
     defaultMessage:
       '{number, plural, one {It was not possible to add the user: {users}.} other {It was not possible to add the users: {users}.}}',
   },
+  syncUsersGenericError: {
+    id: 'management.teams.sync.users.generic_error',
+    defaultMessage: 'It was not possible to add some users.',
+  },
   syncUsersErrorExtra: {
     id: 'management.teams.sync.users.error.extra',
     defaultMessage:
diff --git a/frontend/src/components/teamsAndOrgs/teamSync.js b/frontend/src/components/teamsAndOrgs/teamSync.js
index fb09d9fa05..07fc267e41 100644
--- a/frontend/src/components/teamsAndOrgs/teamSync.js
+++ b/frontend/src/components/teamsAndOrgs/teamSync.js
@@ -105,6 +105,7 @@ export const TeamSync = ({
   const token = useSelector((state) => state.auth.token);
   const [errors, setErrors] = useState(searchParams?.get('syncUsersErrors'));
   const [showSelectionModal, setShowSelectionModal] = useState(false);
+  const [isSyncing, setIsSyncing] = useState(false);
   const reSyncParams = {
     tmTeamId,
     members,
@@ -141,11 +142,16 @@ export const TeamSync = ({
               <>
                 <Button
                   className="ba b--red white bg-red mh1"
-                  onClick={() => reSyncUsers(reSyncParams)}
+                  loading={isSyncing}
+                  onClick={() => {
+                    setIsSyncing(true);
+                    reSyncUsers(reSyncParams);
+                    setIsSyncing(false);
+                  }}
                 >
                   <FormattedMessage {...messages.updateUsers} />
                 </Button>
-                {errors?.length > 0 && (
+                {errors && (
                   <div
                     className="pt2 pointer"
                     role="button"
@@ -154,9 +160,14 @@ export const TeamSync = ({
                   >
                     <Alert type="error">
                       <FormattedMessage
-                        {...messages.syncUsersError}
+                        {...messages[
+                          typeof errors === 'object' ? 'syncUsersError' : 'syncUsersGenericError'
+                        ]}
                         values={{
-                          users: errors.map((u) => u.username).join(' ,'),
+                          users:
+                            typeof errors === 'object'
+                              ? errors.map((u) => u.username).join(', ')
+                              : [],
                           number: errors.length,
                         }}
                       />
diff --git a/frontend/src/components/teamsAndOrgs/teams.js b/frontend/src/components/teamsAndOrgs/teams.js
index 7906cc0b55..6732478f13 100644
--- a/frontend/src/components/teamsAndOrgs/teams.js
+++ b/frontend/src/components/teamsAndOrgs/teams.js
@@ -167,6 +167,7 @@ export function TeamInformation({ disableJoinMethodField }) {
     ANY: 'anyoneCanJoin',
     BY_REQUEST: 'byRequest',
     BY_INVITE: 'byInvite',
+    OSM_TEAMS: 'OSMTeams',
   };
 
   return (
@@ -199,7 +200,7 @@ export function TeamInformation({ disableJoinMethodField }) {
               name="joinMethod"
               value={method}
               required
-              disabled={disableJoinMethodField}
+              disabled={disableJoinMethodField || method === 'OSM_TEAMS'}
             />
             <span className="f5">
               <FormattedMessage {...messages[joinMethods[method]]} />
@@ -214,7 +215,7 @@ export function TeamInformation({ disableJoinMethodField }) {
           </div>
         ))}
       </div>
-      {formState.values.joinMethod === 'BY_INVITE' && (
+      {['BY_INVITE', 'OSM_TEAMS'].includes(formState.values.joinMethod) && (
         <div className="cf pt1">
           <label className={labelClasses}>
             <FormattedMessage {...messages.visibility} />
diff --git a/frontend/src/hooks/UseOSMTeams.js b/frontend/src/hooks/UseOSMTeams.js
index 0cabd049c0..7bdaa1d656 100644
--- a/frontend/src/hooks/UseOSMTeams.js
+++ b/frontend/src/hooks/UseOSMTeams.js
@@ -15,11 +15,7 @@ const useFetchExternal = (url, trigger = true, token) => {
         setLoading(true);
         try {
           // replace in locale is needed because the backend uses underscore instead of dash
-          const response = await fetchExternalJSONAPI(
-            url,
-            token,
-            'GET',
-          );
+          const response = await fetchExternalJSONAPI(url, token, 'GET');
           setData(response);
           setLoading(false);
         } catch (e) {
diff --git a/frontend/src/network/tests/mockData/osmTeams.js b/frontend/src/network/tests/mockData/osmTeams.js
new file mode 100644
index 0000000000..561f7013a1
--- /dev/null
+++ b/frontend/src/network/tests/mockData/osmTeams.js
@@ -0,0 +1,79 @@
+export const myTeams = {
+  data: [
+    {
+      id: 1,
+      name: 'OSM Teams Developers',
+      hashtag: null,
+      bio: null,
+      privacy: 'private',
+      require_join_request: false,
+      updated_at: '2023-06-11T15:37:57.793Z',
+      created_at: '2022-05-06T16:10:18.452Z',
+      location: '{"type":"Point","coordinates":[-77.02438,38.906337]}',
+      members: '8',
+    },
+    {
+      id: 10,
+      name: 'SOTMUS 2023',
+      hashtag: '#sotmus',
+      bio: 'Attendees of State of the Map 2023 in Richmond, VA',
+      privacy: 'public',
+      require_join_request: false,
+      updated_at: '2023-06-09T20:00:51.108Z',
+      created_at: '2023-06-09T17:01:41.376Z',
+      location: '{"type":"Point","coordinates":[-77.4508325,37.548201459]}',
+      members: '27',
+    },
+    {
+      id: 20,
+      name: 'My Friends',
+      hashtag: null,
+      bio: null,
+      privacy: 'private',
+      require_join_request: false,
+      updated_at: '2022-11-17T15:32:58.615Z',
+      created_at: '2022-11-17T15:32:58.615Z',
+      location: null,
+      members: '2',
+    },
+  ],
+  pagination: { total: 3, lastPage: 1, perPage: 10, currentPage: 1, from: 0, to: 3 },
+};
+
+export const osmTeam1 = {
+  id: 73,
+  name: 'OSM Teams Developers',
+  hashtag: '#OSMDevs',
+  bio: 'OSM Team Developers',
+  privacy: 'private',
+  require_join_request: false,
+  updated_at: '2023-03-13T18:05:23.679Z',
+  created_at: '2022-05-06T16:10:18.452Z',
+  location: null,
+  org: { organization_id: 5, name: 'Development Seed' },
+  requesterIsMember: true,
+};
+
+export const osmTeamMembers = {
+  teamId: 73,
+  members: {
+    data: [
+      { id: 146675, name: 'geohacker' },
+      { id: 2454337, name: 'kamicut' },
+      { id: 2206554, name: 'LsGoodman' },
+      { id: 10139859, name: 'MarcFarra' },
+      { id: 261012, name: 'sanjayb' },
+      { id: 62817, name: 'vgeorge' },
+      { id: 15547551, name: 'Vgeorge2' },
+      { id: 360183, name: 'wille' },
+    ],
+    pagination: { total: 8, lastPage: 1, perPage: 10, currentPage: 1, from: 0, to: 8 },
+  },
+};
+
+export const osmTeamModerators = [
+  { id: 64, team_id: 73, osm_id: 2454337 },
+  { id: 443, team_id: 73, osm_id: 15547551 },
+  { id: 459, team_id: 73, osm_id: 146675 },
+  { id: 464, team_id: 73, osm_id: 2206554 },
+];
diff --git a/frontend/src/network/tests/mockData/teams.js b/frontend/src/network/tests/mockData/teams.js
index f8aaf1fbb8..2559a8c23f 100644
--- a/frontend/src/network/tests/mockData/teams.js
+++ b/frontend/src/network/tests/mockData/teams.js
@@ -51,7 +51,7 @@ export const teamCreationSuccess = {
   teamId: 123,
 };
 
-export const teamUpdationSuccess = {
+export const teamUpdateSuccess = {
   Status: 'Updated',
 };
 
diff --git a/frontend/src/network/tests/server-handlers.js b/frontend/src/network/tests/server-handlers.js
index 993e02e77e..68ff46349e 100644
--- a/frontend/src/network/tests/server-handlers.js
+++ b/frontend/src/network/tests/server-handlers.js
@@ -55,14 +55,14 @@ import {
   teams,
   team,
   teamCreationSuccess,
-  teamUpdationSuccess,
+  teamUpdateSuccess,
   teamDeletionSuccess,
 } from './mockData/teams';
 import { userTasks } from './mockData/tasksStats';
 import { homepageStats } from './mockData/homepageStats';
 import { banner, countries, josmRemote, systemStats } from './mockData/miscellaneous';
 import tasksGeojson from '../../utils/tests/snippets/tasksGeometry';
-import { API_URL } from '../../config';
+import { API_URL, OSM_TEAMS_API_URL } from '../../config';
 import { notifications, ownCountUnread } from './mockData/notifications';
 import { authLogin, setUser, userRegister } from './mockData/auth';
 import {
@@ -74,6 +74,7 @@ import {
   submitValidationTask,
   userLockedTasks,
 } from './mockData/taskHistory';
+import { myTeams, osmTeam1, osmTeamMembers, osmTeamModerators } from './mockData/osmTeams';
 
 const handlers = [
   rest.get(API_URL + 'projects/:id/queries/summary/', async (req, res, ctx) => {
@@ -242,7 +243,7 @@ const handlers = [
     return res(ctx.json(teamCreationSuccess));
   }),
   rest.patch(API_URL + 'teams/:id/', (req, res, ctx) => {
-    return res(ctx.json(teamUpdationSuccess));
+    return res(ctx.json(teamUpdateSuccess));
   }),
   rest.delete(API_URL + 'teams/:id', (req, res, ctx) => {
     return res(ctx.json(teamDeletionSuccess));
@@ -357,6 +358,19 @@ const handlers = [
   rest.get('http://127.0.0.1:8111/version', (req, res, ctx) => {
     return res(ctx.json(josmRemote));
   }),
+  // OSM Teams
+  rest.get(OSM_TEAMS_API_URL + '/api/my/teams', (req, res, ctx) => {
+    return res(ctx.json(myTeams));
+  }),
+  rest.get(OSM_TEAMS_API_URL + '/api/teams/:id', (req, res, ctx) => {
+    return res(ctx.json(osmTeam1));
+  }),
+  rest.get(OSM_TEAMS_API_URL + '/api/teams/:id/members', (req, res, ctx) => {
+    return res(ctx.json(osmTeamMembers));
+  }),
+  rest.get(OSM_TEAMS_API_URL + '/api/teams/:id/moderators', (req, res, ctx) => {
+    return res(ctx.json(osmTeamModerators));
+  }),
 ];
 
 const failedToConnectError = (req, res, ctx) => {
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 457a3a0244..5803377774 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -1,7 +1,7 @@
 import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
 
 import { Root } from './views/root';
-import { Authorized } from './views/authorized';
+import { Authorized, OSMTeamsAuthorized } from './views/authorized';
 import { NotFound } from './views/notFound';
 import { FallbackComponent } from './views/fallback';
 import { Redirect } from './components/redirect';
@@ -198,6 +198,7 @@ export const router = createBrowserRouter(
         }}
       />
       <Route path="authorized" element={<Authorized />} />
+      <Route path="osmteams-authorized" element={<OSMTeamsAuthorized />} />
       <Route
         path="login"
         lazy={async () => {
diff --git a/frontend/src/views/teams.js b/frontend/src/views/teams.js
index 227df89954..b1227db2c2 100644
--- a/frontend/src/views/teams.js
+++ b/frontend/src/views/teams.js
@@ -189,10 +189,10 @@ export function CreateTeam() {
         const errors = [];
         Promise.all([
           ...managers
-              .filter((user) => user.username !== userDetails.username)
-              .map((user) =>
+            .filter((user) => user.username !== userDetails.username)
+            .map((user) =>
               joinTeamRequest(result.teamId, user.username, 'MANAGER', token).catch((e) =>
-                  errors.push({ username: user.username, function: 'MANAGER' }),
+                errors.push({ username: user.username, function: 'MANAGER' }),
               ),
             ),
           ...members.map((user) =>
@@ -212,7 +212,7 @@ export function CreateTeam() {
           );
           navigate(`/manage/teams/${result.teamId}${additionalSearchParam}`);
         });
-    })
+      })
       .catch(() => setIsError(true));
   };
 
@@ -221,7 +221,7 @@ export function CreateTeam() {
       onSubmit={(values) => createTeam(values)}
       initialValues={{ visibility: 'PUBLIC' }}
       render={({ handleSubmit, pristine, submitting, values }) => {
-        if (osmTeamsId) values.joinMethod = 'BY_INVITE';
+        if (osmTeamsId) values.joinMethod = 'OSM_TEAMS';
         return (
           <form onSubmit={handleSubmit} className="blue-grey">
             <div className="cf pb5">
@@ -403,12 +403,12 @@ export function EditTeam() {
   const onUpdateTeamFailure = () => setIsError(true);
 
   const updateTeam = (payload) => {
-    if (payload.joinMethod !== 'BY_INVITE') {
+    if (['ANY', 'BY_REQUEST'].includes(payload.joinMethod)) {
       payload.visibility = 'PUBLIC';
     }
     payload.osm_teams_id = osmTeamsId;
-    // force teams synced with OSM Teams to have BY_INVITE join method
-    if (osmTeamsId) payload.joinMethod = 'BY_INVITE';
+    // force teams synced with OSM Teams to have OSM_TEAMS join method
+    if (osmTeamsId) payload.joinMethod = 'OSM_TEAMS';
 
     updateEntity(`teams/${id}/`, 'team', payload, token, forceUpdate, onUpdateTeamFailure);
   };
@@ -490,7 +490,7 @@ export function EditTeam() {
                 updateTeam={(selectedTeamId) =>
                   pushToLocalJSONAPI(
                     `teams/${id}/`,
-                    JSON.stringify({ osm_teams_id: selectedTeamId, joinMethod: 'BY_INVITE' }),
+                    JSON.stringify({ osm_teams_id: selectedTeamId, joinMethod: 'OSM_TEAMS' }),
                     token,
                     'PATCH',
                   )
diff --git a/frontend/src/views/tests/teams.test.js b/frontend/src/views/tests/teams.test.js
index 84545fa4b0..2dd3ba66dd 100644
--- a/frontend/src/views/tests/teams.test.js
+++ b/frontend/src/views/tests/teams.test.js
@@ -1,7 +1,8 @@
 import '@testing-library/jest-dom';
-import { screen, waitFor, within, act } from '@testing-library/react';
+import { screen, waitFor, within, act, render } from '@testing-library/react';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
 import { QueryParamProvider } from 'use-query-params';
+import userEvent from '@testing-library/user-event';
 import toast from 'react-hot-toast';
 
 import {
@@ -12,12 +13,20 @@ import {
 import { ManageTeams, EditTeam, CreateTeam, MyTeams } from '../teams';
 import { store } from '../../store';
 import { setupFaultyHandlers } from '../../network/tests/server';
+import * as config from '../../config';
+import { teamWithOSMTeams } from '../../network/tests/mockData/teams';
 
 jest.mock('react-hot-toast', () => ({
   success: jest.fn(),
   error: jest.fn(),
 }));
 
+// Set OSM_TEAMS_CLIENT_ID to be able to test OSM Teams integration components
+Object.defineProperty(config, 'OSM_TEAMS_CLIENT_ID', {
+  value: () => '123abc',
+  writable: true,
+});
+
 describe('List Teams', () => {
   it('should show loading placeholder when teams are being fetched', async () => {
     const { container } = renderWithRouter(
@@ -119,6 +128,79 @@ describe('Create Team', () => {
   });
 });
 
+describe('Create Team with OSM Teams integration', () => {
+  it('Sync with OSM Teams section is present', () => {
+    renderWithRouter(
+      <ReduxIntlProviders>
+        <CreateTeam />
+      </ReduxIntlProviders>,
+    );
+    act(() => {
+      store.dispatch({
+        type: 'SET_USER_DETAILS',
+        userDetails: { id: 122, username: 'test_user', role: 'ADMIN' },
+      });
+      store.dispatch({ type: 'SET_TOKEN', token: 'validToken' });
+    });
+    expect(screen.getByText('Sync with OSM Teams')).toBeInTheDocument();
+    expect(screen.getByText('Authenticate OSM Teams')).toBeInTheDocument();
+  });
+  it('Setting osmteams_token enables team selection', async () => {
+    renderWithRouter(
+      <ReduxIntlProviders>
+        <CreateTeam />
+      </ReduxIntlProviders>,
+    );
+    act(() => {
+      store.dispatch({
+        type: 'SET_USER_DETAILS',
+        userDetails: { id: 122, username: 'test_user', role: 'ADMIN' },
+      });
+      store.dispatch({ type: 'SET_TOKEN', token: 'validToken' });
+      store.dispatch({
+        type: 'SET_OSM_TEAMS_TOKEN',
+        osmteams_token: 'abc123',
+      });
+    });
+    expect(screen.queryByText('Authenticate OSM Teams')).not.toBeInTheDocument();
+    expect(screen.getByText('Select a team from OSM Teams')).toBeInTheDocument();
+    // Open OSM Teams selection modal
+    await userEvent.click(screen.getByText('Select a team from OSM Teams'));
+    await waitFor(() => expect(screen.getByText('OSM Teams Developers')).toBeInTheDocument());
+    expect(screen.getByText('SOTMUS 2023')).toBeInTheDocument();
+    expect(screen.getByText('My Friends')).toBeInTheDocument();
+    expect(screen.getAllByText('Cancel').length).toBe(2);
+    // Select a team
+    await userEvent.click(screen.getByText('OSM Teams Developers'));
+    await waitFor(() => expect(screen.getByTitle('geohacker')).toBeInTheDocument());
+    expect(screen.getByText('Selected team')).toBeInTheDocument();
+    expect(screen.getByText('Back')).toBeInTheDocument();
+    expect(screen.getAllByText('Managers').length).toBe(2);
+    expect(screen.getAllByText('Members').length).toBe(2);
+    await userEvent.click(screen.getByText('Confirm selection'));
+    // Modal closes
+    await waitFor(() =>
+      expect(screen.getByTitle('Open on OSM Teams').href.endsWith('/teams/1')).toBeTruthy()
+    );
+    expect(screen.queryByText('Selected team')).not.toBeInTheDocument();
+    expect(screen.getByTitle('kamicut')).toBeInTheDocument();
+    expect(screen.getByTitle('geohacker')).toBeInTheDocument();
+    expect(screen.getByTitle('wille')).toBeInTheDocument();
+    expect(screen.getByTitle('sanjayb')).toBeInTheDocument();
+    expect(screen.getByText('OSM Teams Developers')).toBeInTheDocument();
+    const radios = screen.getAllByRole('radio');
+    expect(radios.length).toBe(6);
+    // OSM Teams join method is checked and disabled
+    expect(radios.slice(0, 2).filter((i) => i.checked)).toEqual([]);
+    expect(radios[3].checked).toBeTruthy();
+    expect(radios[3].disabled).toBeTruthy();
+    // Privacy options are enabled and public is selected
+    expect(radios[4].checked).toBeTruthy();
+    expect(radios[4].disabled).toBeFalsy();
+    expect(radios[5].disabled).toBeFalsy();
+  });
+});
+
 describe('Edit Team', () => {
   it('should display default details of the team before editing', async () => {
     renderWithRouter(
@@ -193,6 +275,49 @@ describe('Edit Team', () => {
       ).toBeInTheDocument(),
     );
   });
+
+  it('Enable OSM Teams sync', async () => {
+    renderWithRouter(
+      <ReduxIntlProviders>
+        <EditTeam id={123} />
+      </ReduxIntlProviders>,
+    );
+    act(() => {
+      store.dispatch({
+        type: 'SET_USER_DETAILS',
+        userDetails: { id: 122, username: 'test_user', role: 'ADMIN' },
+      });
+      store.dispatch({ type: 'SET_TOKEN', token: 'validToken' });
+      store.dispatch({
+        type: 'SET_OSM_TEAMS_TOKEN',
+        osmteams_token: 'abc123',
+      });
+    });
+    // Open OSM Teams selection modal
+    await userEvent.click(screen.getByText('Select a team from OSM Teams'));
+    await waitFor(() => expect(screen.getByText('OSM Teams Developers')).toBeInTheDocument());
+    expect(screen.getByText('SOTMUS 2023')).toBeInTheDocument();
+    expect(screen.getByText('My Friends')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    // Select a team
+    await userEvent.click(screen.getByText('OSM Teams Developers'));
+    await waitFor(() => expect(screen.getByTitle('geohacker')).toBeInTheDocument());
+    expect(screen.getByText('Selected team')).toBeInTheDocument();
+    expect(screen.getByText('Back')).toBeInTheDocument();
+    expect(screen.getAllByText('Managers').length).toBe(2);
+    expect(screen.getAllByText('Members').length).toBe(2);
+    await userEvent.click(screen.getByText('Confirm selection'));
+    // Modal closes
+    await waitFor(() =>
+      expect(screen.getByTitle('Open on OSM Teams').href.endsWith('/teams/1')).toBeTruthy()
+    );
+    expect(screen.queryByText('Selected team')).not.toBeInTheDocument();
+    expect(screen.getByTitle('kamicut')).toBeInTheDocument();
+    expect(screen.getByTitle('geohacker')).toBeInTheDocument();
+    expect(screen.getByTitle('wille')).toBeInTheDocument();
+    expect(screen.getByTitle('sanjayb')).toBeInTheDocument();
+    expect(screen.getByText('OSM Teams Developers')).toBeInTheDocument();
+  });
 });
 
 describe('Delete Team', () => {