UI: Unit test for TeamsAndUsersPageComponent with 93.59% Statement coverage (#4971)

openmetadata-ui/src/main/resources/ui/src/pages/TeamsAndUsersPage/TeamsAndUsersPage.component.tsx

@@ -89,10 +89,6 @@ const TeamsAndUsersPage = () => {
     setIsDescriptionEditable(value);
   };
 
-  const handleRightPannelLoading = (value: boolean) => {
-    setIsRightPannelLoading(value);
-  };
-
   const handleAddTeam = (value: boolean) => {
     setIsAddingTeam(value);
   };
@@ -369,16 +365,16 @@ const TeamsAndUsersPage = () => {
    * @param data
    */
   const addUsersToTeam = (data: Array<UserTeams>) => {
+    if (!isUndefined(currentTeam)) {
       const updatedTeam = {
         ...currentTeam,
-      users: [...(currentTeam?.users as Array<UserTeams>), ...data],
+        users: [...(currentTeam.users as Array<UserTeams>), ...data],
       };
-    const jsonPatch = compare(currentTeam as Team, updatedTeam);
+      const jsonPatch = compare(currentTeam, updatedTeam);
-    patchTeamDetail(currentTeam?.id, jsonPatch)
+      patchTeamDetail(currentTeam.id, jsonPatch)
         .then((res: AxiosResponse) => {
           if (res.data) {
             fetchCurrentTeam(res.data.name, true);
-          setTeamUsersSearchText('');
           } else {
             throw jsonData['api-error-messages']['unexpected-server-response'];
           }
@@ -392,6 +388,7 @@ const TeamsAndUsersPage = () => {
         .finally(() => {
           setIsAddingUsers(false);
         });
+    }
   };
 
   const handleJoinTeamClick = (id: string, data: Operation[]) => {
@@ -417,7 +414,7 @@ const TeamsAndUsersPage = () => {
   const handleLeaveTeamClick = (id: string, data: Operation[]) => {
     setIsRightPannelLoading(true);
 
-    return new Promise<void>((resolve, reject) => {
+    return new Promise<void>((resolve) => {
       updateUserDetail(id, data)
         .then((res: AxiosResponse) => {
           if (res.data) {
@@ -437,7 +434,6 @@ const TeamsAndUsersPage = () => {
             err,
             jsonData['api-error-messages']['leave-team-error']
           );
-          reject();
         });
     });
   };
@@ -448,7 +444,7 @@ const TeamsAndUsersPage = () => {
    */
   const changeCurrentTeam = (name: string, isUsersCategory: boolean) => {
     if (name !== teamAndUser) {
-      handleRightPannelLoading(true);
+      setIsRightPannelLoading(true);
       history.push(getTeamAndUserDetailsPath(name));
       if (isUsersCategory) {
         setIsTeamVisible(false);
@@ -470,8 +466,6 @@ const TeamsAndUsersPage = () => {
             fetchCurrentTeam(res.data.name, true);
             resolve();
           } else {
-            reject();
-
             throw jsonData['api-error-messages']['unexpected-server-response'];
           }
         })
@@ -592,10 +586,10 @@ const TeamsAndUsersPage = () => {
    * @param updatedHTML - updated description
    */
   const onDescriptionUpdate = (updatedHTML: string) => {
-    if (currentTeam?.description !== updatedHTML) {
+    if (currentTeam && currentTeam.description !== updatedHTML) {
       const updatedTeam = { ...currentTeam, description: updatedHTML };
       const jsonPatch = compare(currentTeam as Team, updatedTeam);
-      patchTeamDetail(currentTeam?.id, jsonPatch)
+      patchTeamDetail(currentTeam.id, jsonPatch)
         .then((res: AxiosResponse) => {
           if (res.data) {
             fetchCurrentTeam(res.data.name, true);

openmetadata-ui/src/main/resources/ui/src/pages/TeamsAndUsersPage/TeamsAndUsersPage.mock.ts

@@ -0,0 +1,754 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+export const getMockTeamByName = {
+  id: '6a0eb1ca-54fe-48a7-aca5-5237700ec649',
+  name: 'Customer_Support',
+  displayName: 'Customer_Support',
+  description: 'This is Customer_Support description.',
+  version: 0.1,
+  updatedAt: 1652428797076,
+  updatedBy: 'anonymous',
+  href: 'http://localhost:8585/api/v1/teams/6a0eb1ca-54fe-48a7-aca5-5237700ec649',
+  users: [
+    {
+      id: '9e36bc89-e899-4f92-81bd-679406caad04',
+      type: 'user',
+      name: 'aaron_warren5',
+      fullyQualifiedName: 'aaron_warren5',
+      displayName: 'Aaron Warren',
+      deleted: false,
+      href: 'http://localhost:8585/api/v1/users/9e36bc89-e899-4f92-81bd-679406caad04',
+    },
+  ],
+  owns: [],
+  isJoinable: true,
+  deleted: false,
+  defaultRoles: [],
+};
+
+export const getMockTeams = {
+  data: [
+    {
+      id: '8778d063-ef32-4357-8e3b-6b9f89f598ea',
+      name: 'Cloud_Infra',
+      displayName: 'Cloud_Infra',
+      description: 'This is Cloud_Infra description.',
+      version: 0.1,
+      updatedAt: 1652428796910,
+      updatedBy: 'anonymous',
+      href: 'http://localhost:8585/api/v1/teams/8778d063-ef32-4357-8e3b-6b9f89f598ea',
+      users: [
+        {
+          id: '8c3f91f0-4db2-4772-98ac-01ef2a105f88',
+          type: 'user',
+          name: 'aaron_johnson0',
+          fullyQualifiedName: 'aaron_johnson0',
+          displayName: 'Aaron Johnson',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/8c3f91f0-4db2-4772-98ac-01ef2a105f88',
+        },
+        {
+          id: '99d17904-338f-4a43-9d1d-fea020b268e9',
+          type: 'user',
+          name: 'aaron_singh2',
+          fullyQualifiedName: 'aaron_singh2',
+          displayName: 'Aaron Singh',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/99d17904-338f-4a43-9d1d-fea020b268e9',
+        },
+        {
+          id: 'c2453005-fb68-445c-9e52-2811f7b2511d',
+          type: 'user',
+          name: 'alexander_jackson5',
+          fullyQualifiedName: 'alexander_jackson5',
+          displayName: 'Alexander Jackson',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/c2453005-fb68-445c-9e52-2811f7b2511d',
+        },
+        {
+          id: '7082513f-6057-4af3-aa1b-204f581e19de',
+          type: 'user',
+          name: 'amanda_york8',
+          fullyQualifiedName: 'amanda_york8',
+          displayName: 'Amanda York',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/7082513f-6057-4af3-aa1b-204f581e19de',
+        },
+        {
+          id: '0556961b-8f54-4c6a-92bd-00c34ae35a91',
+          type: 'user',
+          name: 'ashley_king5',
+          fullyQualifiedName: 'ashley_king5',
+          displayName: 'Ashley King',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/0556961b-8f54-4c6a-92bd-00c34ae35a91',
+        },
+        {
+          id: 'f7e8212e-0af3-43de-b2b4-db9e04df7e55',
+          type: 'user',
+          name: 'autumn_wilcox7',
+          fullyQualifiedName: 'autumn_wilcox7',
+          displayName: 'Autumn Wilcox',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/f7e8212e-0af3-43de-b2b4-db9e04df7e55',
+        },
+        {
+          id: 'e9a5c877-7e09-4876-8a11-113e73aefcfc',
+          type: 'user',
+          name: 'barbara_lee0',
+          fullyQualifiedName: 'barbara_lee0',
+          displayName: 'Barbara Lee',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/e9a5c877-7e09-4876-8a11-113e73aefcfc',
+        },
+        {
+          id: 'f018e760-7fba-45e8-9b8a-151269a845b0',
+          type: 'user',
+          name: 'bradley_hernandez0',
+          fullyQualifiedName: 'bradley_hernandez0',
+          displayName: 'Bradley Hernandez',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/f018e760-7fba-45e8-9b8a-151269a845b0',
+        },
+        {
+          id: '7151f84f-ef3e-4eac-8f34-285f4127f75a',
+          type: 'user',
+          name: 'caitlin_ewing5',
+          fullyQualifiedName: 'caitlin_ewing5',
+          displayName: 'Caitlin Ewing',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/7151f84f-ef3e-4eac-8f34-285f4127f75a',
+        },
+        {
+          id: '569fde47-3cb8-479f-97db-a1cb884d7c9c',
+          type: 'user',
+          name: 'carol_wallace0',
+          fullyQualifiedName: 'carol_wallace0',
+          displayName: 'Carol Wallace',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/569fde47-3cb8-479f-97db-a1cb884d7c9c',
+        },
+        {
+          id: '0c815e63-ad7c-48e7-b712-0d390d55d9b5',
+          type: 'user',
+          name: 'carolyn_davis7',
+          fullyQualifiedName: 'carolyn_davis7',
+          displayName: 'Carolyn Davis',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/0c815e63-ad7c-48e7-b712-0d390d55d9b5',
+        },
+        {
+          id: '57810ffb-11ec-4ca0-a44b-9a6578359964',
+          type: 'user',
+          name: 'cheryl_lopez5',
+          fullyQualifiedName: 'cheryl_lopez5',
+          displayName: 'Cheryl Lopez',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/57810ffb-11ec-4ca0-a44b-9a6578359964',
+        },
+        {
+          id: '34c3ad8b-b20b-47d8-bb45-50c52d2eb5fc',
+          type: 'user',
+          name: 'christopher_campbell7',
+          fullyQualifiedName: 'christopher_campbell7',
+          displayName: 'Christopher Campbell',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/34c3ad8b-b20b-47d8-bb45-50c52d2eb5fc',
+        },
+        {
+          id: 'e9b5434f-49d4-4f8e-9042-4cc9f715ec2d',
+          type: 'user',
+          name: 'colin_ho2',
+          fullyQualifiedName: 'colin_ho2',
+          displayName: 'Colin Ho',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/e9b5434f-49d4-4f8e-9042-4cc9f715ec2d',
+        },
+        {
+          id: '5188b522-090c-4d7a-8df2-842b1665081b',
+          type: 'user',
+          name: 'cristina_deleon7',
+          fullyQualifiedName: 'cristina_deleon7',
+          displayName: 'Cristina Deleon',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/5188b522-090c-4d7a-8df2-842b1665081b',
+        },
+      ],
+      owns: [],
+      isJoinable: true,
+      deleted: false,
+      defaultRoles: [],
+    },
+    {
+      id: '6a0eb1ca-54fe-48a7-aca5-5237700ec649',
+      name: 'Customer_Support',
+      displayName: 'Customer_Support',
+      description: 'This is Customer_Support description.',
+      version: 0.1,
+      updatedAt: 1652428797076,
+      updatedBy: 'anonymous',
+      href: 'http://localhost:8585/api/v1/teams/6a0eb1ca-54fe-48a7-aca5-5237700ec649',
+      users: [
+        {
+          id: '9e36bc89-e899-4f92-81bd-679406caad04',
+          type: 'user',
+          name: 'aaron_warren5',
+          fullyQualifiedName: 'aaron_warren5',
+          displayName: 'Aaron Warren',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/9e36bc89-e899-4f92-81bd-679406caad04',
+        },
+        {
+          id: 'cac95686-06f0-43e2-bef9-f9fc0f94b5e1',
+          type: 'user',
+          name: 'alec_kane4',
+          fullyQualifiedName: 'alec_kane4',
+          displayName: 'Alec Kane',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/cac95686-06f0-43e2-bef9-f9fc0f94b5e1',
+        },
+        {
+          id: 'b237f005-387b-4b84-a0ab-9733375db7b0',
+          type: 'user',
+          name: 'alexa_jordan3',
+          fullyQualifiedName: 'alexa_jordan3',
+          displayName: 'Alexa Jordan',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/b237f005-387b-4b84-a0ab-9733375db7b0',
+        },
+        {
+          id: '684480ba-a028-4732-9db0-09743ed9fd6d',
+          type: 'user',
+          name: 'andrea_bartlett6',
+          fullyQualifiedName: 'andrea_bartlett6',
+          displayName: 'Andrea Bartlett',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/684480ba-a028-4732-9db0-09743ed9fd6d',
+        },
+        {
+          id: '74882070-5791-486e-84f8-72395f467e8a',
+          type: 'user',
+          name: 'andrea_reed7',
+          fullyQualifiedName: 'andrea_reed7',
+          displayName: 'Andrea Reed',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/74882070-5791-486e-84f8-72395f467e8a',
+        },
+        {
+          id: '3f853361-9f90-4205-9c26-1baab5224757',
+          type: 'user',
+          name: 'andrew_jackson3',
+          fullyQualifiedName: 'andrew_jackson3',
+          displayName: 'Andrew Jackson',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/3f853361-9f90-4205-9c26-1baab5224757',
+        },
+        {
+          id: 'afd65c53-e56f-46f9-8690-b7691cf21820',
+          type: 'user',
+          name: 'anthony_wall4',
+          fullyQualifiedName: 'anthony_wall4',
+          displayName: 'Anthony Wall',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/afd65c53-e56f-46f9-8690-b7691cf21820',
+        },
+        {
+          id: '72d88d11-31c4-497c-bc7b-bab2cb4814b3',
+          type: 'user',
+          name: 'antonio_gallegos8',
+          fullyQualifiedName: 'antonio_gallegos8',
+          displayName: 'Antonio Gallegos',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/72d88d11-31c4-497c-bc7b-bab2cb4814b3',
+        },
+        {
+          id: 'bdae7956-b6a9-4146-8157-f9582d654f76',
+          type: 'user',
+          name: 'barbara_gonzalez2',
+          fullyQualifiedName: 'barbara_gonzalez2',
+          displayName: 'Barbara Gonzalez',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/bdae7956-b6a9-4146-8157-f9582d654f76',
+        },
+        {
+          id: '85a51df3-34ec-402b-980c-c2edc67f3b48',
+          type: 'user',
+          name: 'brandy_miller4',
+          fullyQualifiedName: 'brandy_miller4',
+          displayName: 'Brandy Miller',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/85a51df3-34ec-402b-980c-c2edc67f3b48',
+        },
+        {
+          id: '2fc4c7ae-6967-47e8-9cd6-a3386ddf4340',
+          type: 'user',
+          name: 'brian_weaver7',
+          fullyQualifiedName: 'brian_weaver7',
+          displayName: 'Brian Weaver',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/2fc4c7ae-6967-47e8-9cd6-a3386ddf4340',
+        },
+        {
+          id: 'f06ef184-45b0-409a-9557-feea28e9134d',
+          type: 'user',
+          name: 'brittany_nelson5',
+          fullyQualifiedName: 'brittany_nelson5',
+          displayName: 'Brittany Nelson',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/f06ef184-45b0-409a-9557-feea28e9134d',
+        },
+        {
+          id: '1e59c47f-2beb-43de-b216-cd3baf954d76',
+          type: 'user',
+          name: 'brittany_wilson6',
+          fullyQualifiedName: 'brittany_wilson6',
+          displayName: 'Brittany Wilson',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/1e59c47f-2beb-43de-b216-cd3baf954d76',
+        },
+        {
+          id: '2e63e8a6-91b1-4c81-9de1-41268d143ef1',
+          type: 'user',
+          name: 'brittney_thomas3',
+          fullyQualifiedName: 'brittney_thomas3',
+          displayName: 'Brittney Thomas',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/2e63e8a6-91b1-4c81-9de1-41268d143ef1',
+        },
+        {
+          id: '308d24a1-f4b5-40bd-ba80-a0a8d322487d',
+          type: 'user',
+          name: 'cameron_newman8',
+          fullyQualifiedName: 'cameron_newman8',
+          displayName: 'Cameron Newman',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/308d24a1-f4b5-40bd-ba80-a0a8d322487d',
+        },
+        {
+          id: '37207997-7b5c-4de2-b947-7bb1b452da9f',
+          type: 'user',
+          name: 'charles_smith4',
+          fullyQualifiedName: 'charles_smith4',
+          displayName: 'Charles Smith',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/37207997-7b5c-4de2-b947-7bb1b452da9f',
+        },
+        {
+          id: 'd0a8f1db-c2f2-4aa9-aa2a-d49cbb9369c0',
+          type: 'user',
+          name: 'christopher_cole0',
+          fullyQualifiedName: 'christopher_cole0',
+          displayName: 'Christopher Cole',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/d0a8f1db-c2f2-4aa9-aa2a-d49cbb9369c0',
+        },
+        {
+          id: '6f6e2b1c-b122-4145-9fec-4d2dbb8fa355',
+          type: 'user',
+          name: 'christopher_weaver0',
+          fullyQualifiedName: 'christopher_weaver0',
+          displayName: 'Christopher Weaver',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/6f6e2b1c-b122-4145-9fec-4d2dbb8fa355',
+        },
+        {
+          id: '26abc5c6-6129-4f4a-a6fe-064c78336c44',
+          type: 'user',
+          name: 'cindy_tapia6',
+          fullyQualifiedName: 'cindy_tapia6',
+          displayName: 'Cindy Tapia',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/26abc5c6-6129-4f4a-a6fe-064c78336c44',
+        },
+        {
+          id: '2d832ef7-7163-4516-ae7e-3c74846c0d15',
+          type: 'user',
+          name: 'cynthia_reynolds6',
+          fullyQualifiedName: 'cynthia_reynolds6',
+          displayName: 'Cynthia Reynolds',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/2d832ef7-7163-4516-ae7e-3c74846c0d15',
+        },
+      ],
+      owns: [],
+      isJoinable: true,
+      deleted: false,
+      defaultRoles: [],
+    },
+    {
+      id: '38c0add1-2e61-4472-b95a-9319d50d809e',
+      name: 'Data_Platform',
+      displayName: 'Data_Platform',
+      description: 'This is Data_Platform description.',
+      version: 0.1,
+      updatedAt: 1652428797353,
+      updatedBy: 'anonymous',
+      href: 'http://localhost:8585/api/v1/teams/38c0add1-2e61-4472-b95a-9319d50d809e',
+      users: [
+        {
+          id: 'e6000a43-5d32-47a5-b402-5c49f71a6873',
+          type: 'user',
+          name: 'alexander_russell2',
+          fullyQualifiedName: 'alexander_russell2',
+          displayName: 'Alexander Russell',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/e6000a43-5d32-47a5-b402-5c49f71a6873',
+        },
+        {
+          id: '1c3cc386-f61a-4fb5-9be1-76dd3829aa49',
+          type: 'user',
+          name: 'andrew_shelton6',
+          fullyQualifiedName: 'andrew_shelton6',
+          displayName: 'Andrew Shelton',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/1c3cc386-f61a-4fb5-9be1-76dd3829aa49',
+        },
+        {
+          id: 'a6bd02b0-cee1-4c81-9e11-a34f75299dbc',
+          type: 'user',
+          name: 'angela_kidd0',
+          fullyQualifiedName: 'angela_kidd0',
+          displayName: 'Angela Kidd',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/a6bd02b0-cee1-4c81-9e11-a34f75299dbc',
+        },
+        {
+          id: '0a5fe19a-57b8-4d5d-9d64-2b89c5729762',
+          type: 'user',
+          name: 'barbara_fox5',
+          fullyQualifiedName: 'barbara_fox5',
+          displayName: 'Barbara Fox',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/0a5fe19a-57b8-4d5d-9d64-2b89c5729762',
+        },
+        {
+          id: '5af51482-b7f5-4cb8-b613-584520f6e809',
+          type: 'user',
+          name: 'benjamin_martinez5',
+          fullyQualifiedName: 'benjamin_martinez5',
+          displayName: 'Benjamin Martinez',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/5af51482-b7f5-4cb8-b613-584520f6e809',
+        },
+        {
+          id: 'e073f0f5-8b1f-4e39-b562-f9b6fc8c97ea',
+          type: 'user',
+          name: 'brian_dunlap9',
+          fullyQualifiedName: 'brian_dunlap9',
+          displayName: 'Brian Dunlap',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/e073f0f5-8b1f-4e39-b562-f9b6fc8c97ea',
+        },
+        {
+          id: '7d9f3782-2cef-4995-bcc4-78d3ca326879',
+          type: 'user',
+          name: 'caitlin_wilkins0',
+          fullyQualifiedName: 'caitlin_wilkins0',
+          displayName: 'Caitlin Wilkins',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/7d9f3782-2cef-4995-bcc4-78d3ca326879',
+        },
+        {
+          id: '917fa53e-51e7-4a60-a508-3b16f7e0ed19',
+          type: 'user',
+          name: 'caleb_reyes5',
+          fullyQualifiedName: 'caleb_reyes5',
+          displayName: 'Caleb Reyes',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/917fa53e-51e7-4a60-a508-3b16f7e0ed19',
+        },
+        {
+          id: 'd0daad45-032f-4593-98e1-018fe256563a',
+          type: 'user',
+          name: 'carol_morgan5',
+          fullyQualifiedName: 'carol_morgan5',
+          displayName: 'Carol Morgan',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/d0daad45-032f-4593-98e1-018fe256563a',
+        },
+        {
+          id: '3a75497b-93b6-49eb-bd64-91c9ca86fd77',
+          type: 'user',
+          name: 'casey_cortez1',
+          fullyQualifiedName: 'casey_cortez1',
+          displayName: 'Casey Cortez',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/3a75497b-93b6-49eb-bd64-91c9ca86fd77',
+        },
+        {
+          id: 'c5ca1b7f-b163-43b8-9065-402ec3cfe917',
+          type: 'user',
+          name: 'chad_gould1',
+          fullyQualifiedName: 'chad_gould1',
+          displayName: 'Chad Gould',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/c5ca1b7f-b163-43b8-9065-402ec3cfe917',
+        },
+        {
+          id: '7151f6ce-464a-445e-be8c-b641e8f1617e',
+          type: 'user',
+          name: 'charles_wilson0',
+          fullyQualifiedName: 'charles_wilson0',
+          displayName: 'Charles Wilson',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/7151f6ce-464a-445e-be8c-b641e8f1617e',
+        },
+        {
+          id: 'e50886d5-e133-4aa5-879a-921357650dee',
+          type: 'user',
+          name: 'christine_day7',
+          fullyQualifiedName: 'christine_day7',
+          displayName: 'Christine Day',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/e50886d5-e133-4aa5-879a-921357650dee',
+        },
+        {
+          id: '5ea2a3ad-b22e-4b18-a88f-a264ff1cab62',
+          type: 'user',
+          name: 'christopher_garza8',
+          fullyQualifiedName: 'christopher_garza8',
+          displayName: 'Christopher Garza',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/5ea2a3ad-b22e-4b18-a88f-a264ff1cab62',
+        },
+        {
+          id: 'fe06f170-5e64-4c05-88c0-578f7e9a46ed',
+          type: 'user',
+          name: 'christopher_hayes0',
+          fullyQualifiedName: 'christopher_hayes0',
+          displayName: 'Christopher Hayes',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/fe06f170-5e64-4c05-88c0-578f7e9a46ed',
+        },
+        {
+          id: '5f293fe7-3c35-4bf1-b623-64676f44eacd',
+          type: 'user',
+          name: 'craig_owens0',
+          fullyQualifiedName: 'craig_owens0',
+          displayName: 'Craig Owens',
+          deleted: false,
+          href: 'http://localhost:8585/api/v1/users/5f293fe7-3c35-4bf1-b623-64676f44eacd',
+        },
+      ],
+      owns: [],
+      isJoinable: true,
+      deleted: false,
+      defaultRoles: [],
+    },
+  ],
+  paging: {
+    total: 3,
+  },
+};
+
+export const getMockUsers = {
+  data: [
+    {
+      id: '9e36bc89-e899-4f92-81bd-679406caad04',
+      name: 'aaron_warren5',
+      displayName: 'Aaron Warren',
+      version: 0.1,
+      updatedAt: 1652428797092,
+      updatedBy: 'anonymous',
+      email: 'aaron_warren5@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/9e36bc89-e899-4f92-81bd-679406caad04',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: 'cac95686-06f0-43e2-bef9-f9fc0f94b5e1',
+      name: 'alec_kane4',
+      displayName: 'Alec Kane',
+      version: 0.1,
+      updatedAt: 1652428797229,
+      updatedBy: 'anonymous',
+      email: 'alec_kane4@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/cac95686-06f0-43e2-bef9-f9fc0f94b5e1',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: 'b237f005-387b-4b84-a0ab-9733375db7b0',
+      name: 'alexa_jordan3',
+      displayName: 'Alexa Jordan',
+      version: 0.1,
+      updatedAt: 1652428797298,
+      updatedBy: 'anonymous',
+      email: 'alexa_jordan3@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/b237f005-387b-4b84-a0ab-9733375db7b0',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '684480ba-a028-4732-9db0-09743ed9fd6d',
+      name: 'andrea_bartlett6',
+      displayName: 'Andrea Bartlett',
+      version: 0.1,
+      updatedAt: 1652428797605,
+      updatedBy: 'anonymous',
+      email: 'andrea_bartlett6@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/684480ba-a028-4732-9db0-09743ed9fd6d',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '74882070-5791-486e-84f8-72395f467e8a',
+      name: 'andrea_reed7',
+      displayName: 'Andrea Reed',
+      version: 0.1,
+      updatedAt: 1652428797629,
+      updatedBy: 'anonymous',
+      email: 'andrea_reed7@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/74882070-5791-486e-84f8-72395f467e8a',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '3f853361-9f90-4205-9c26-1baab5224757',
+      name: 'andrew_jackson3',
+      displayName: 'Andrew Jackson',
+      version: 0.1,
+      updatedAt: 1652428797703,
+      updatedBy: 'anonymous',
+      email: 'andrew_jackson3@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/3f853361-9f90-4205-9c26-1baab5224757',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: 'afd65c53-e56f-46f9-8690-b7691cf21820',
+      name: 'anthony_wall4',
+      displayName: 'Anthony Wall',
+      version: 0.1,
+      updatedAt: 1652428797912,
+      updatedBy: 'anonymous',
+      email: 'anthony_wall4@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/afd65c53-e56f-46f9-8690-b7691cf21820',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '72d88d11-31c4-497c-bc7b-bab2cb4814b3',
+      name: 'antonio_gallegos8',
+      displayName: 'Antonio Gallegos',
+      version: 0.1,
+      updatedAt: 1652428797975,
+      updatedBy: 'anonymous',
+      email: 'antonio_gallegos8@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/72d88d11-31c4-497c-bc7b-bab2cb4814b3',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: 'bdae7956-b6a9-4146-8157-f9582d654f76',
+      name: 'barbara_gonzalez2',
+      displayName: 'Barbara Gonzalez',
+      version: 0.1,
+      updatedAt: 1652428798185,
+      updatedBy: 'anonymous',
+      email: 'barbara_gonzalez2@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/bdae7956-b6a9-4146-8157-f9582d654f76',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '85a51df3-34ec-402b-980c-c2edc67f3b48',
+      name: 'brandy_miller4',
+      displayName: 'Brandy Miller',
+      version: 0.1,
+      updatedAt: 1652428798372,
+      updatedBy: 'anonymous',
+      email: 'brandy_miller4@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/85a51df3-34ec-402b-980c-c2edc67f3b48',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '2fc4c7ae-6967-47e8-9cd6-a3386ddf4340',
+      name: 'brian_weaver7',
+      displayName: 'Brian Weaver',
+      version: 0.1,
+      updatedAt: 1652428798539,
+      updatedBy: 'anonymous',
+      email: 'brian_weaver7@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/2fc4c7ae-6967-47e8-9cd6-a3386ddf4340',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: 'f06ef184-45b0-409a-9557-feea28e9134d',
+      name: 'brittany_nelson5',
+      displayName: 'Brittany Nelson',
+      version: 0.1,
+      updatedAt: 1652428798598,
+      updatedBy: 'anonymous',
+      email: 'brittany_nelson5@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/f06ef184-45b0-409a-9557-feea28e9134d',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '1e59c47f-2beb-43de-b216-cd3baf954d76',
+      name: 'brittany_wilson6',
+      displayName: 'Brittany Wilson',
+      version: 0.1,
+      updatedAt: 1652428798626,
+      updatedBy: 'anonymous',
+      email: 'brittany_wilson6@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/1e59c47f-2beb-43de-b216-cd3baf954d76',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '2e63e8a6-91b1-4c81-9de1-41268d143ef1',
+      name: 'brittney_thomas3',
+      displayName: 'Brittney Thomas',
+      version: 0.1,
+      updatedAt: 1652428798653,
+      updatedBy: 'anonymous',
+      email: 'brittney_thomas3@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/2e63e8a6-91b1-4c81-9de1-41268d143ef1',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '308d24a1-f4b5-40bd-ba80-a0a8d322487d',
+      name: 'cameron_newman8',
+      displayName: 'Cameron Newman',
+      version: 0.1,
+      updatedAt: 1652428798785,
+      updatedBy: 'anonymous',
+      email: 'cameron_newman8@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/308d24a1-f4b5-40bd-ba80-a0a8d322487d',
+      isAdmin: false,
+      deleted: false,
+    },
+    {
+      id: '37207997-7b5c-4de2-b947-7bb1b452da9f',
+      name: 'charles_smith4',
+      displayName: 'Charles Smith',
+      version: 0.1,
+      updatedAt: 1652428799122,
+      updatedBy: 'anonymous',
+      email: 'charles_smith4@gmail.com',
+      href: 'http://localhost:8585/api/v1/users/37207997-7b5c-4de2-b947-7bb1b452da9f',
+      isAdmin: false,
+      deleted: false,
+    },
+  ],
+  paging: {
+    after: 'Y2hhcmxlc19zbWl0aDQ=',
+    total: 20,
+  },
+};

openmetadata-ui/src/main/resources/ui/src/pages/TeamsAndUsersPage/TeamsAndUsersPage.test.tsx

@@ -0,0 +1,770 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React, { ReactNode } from 'react';
+import {
+  createTeam,
+  getTeamByName,
+  getTeams,
+  patchTeamDetail,
+} from '../../axiosAPIs/teamsAPI';
+import {
+  deleteUser,
+  getUsers,
+  updateUserDetail,
+} from '../../axiosAPIs/userAPI';
+import TeamsAndUsersPageComponent from './TeamsAndUsersPage.component';
+import {
+  getMockTeamByName,
+  getMockTeams,
+  getMockUsers,
+} from './TeamsAndUsersPage.mock';
+
+const MOCK_TEAM = 'Cloud_Infra';
+const MOCK_USER = 'users';
+const MOCK_ADMIN = 'admins';
+const MOCK_BOTS = 'bots';
+const PARAMS_VALUE: {
+  teamAndUser: string | undefined;
+} = { teamAndUser: MOCK_TEAM };
+const MOCK_HISTORY = {
+  push: jest.fn(),
+};
+
+jest.mock('../../components/containers/PageContainerV1', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ children }: { children: ReactNode }) => (
+      <div data-testid="PageContainerV1">{children}</div>
+    ));
+});
+
+jest.mock('../../authentication/auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+    })),
+  };
+});
+
+jest.mock('../../hooks/authHooks', () => ({
+  useAuth: jest.fn().mockReturnValue({ isAdminUser: true }),
+}));
+
+jest.mock('react-router-dom', () => ({
+  useHistory: jest.fn().mockImplementation(() => MOCK_HISTORY),
+  useParams: jest.fn().mockImplementation(() => PARAMS_VALUE),
+}));
+
+jest.mock('../../axiosAPIs/teamsAPI', () => ({
+  createTeam: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ data: getMockTeamByName })),
+  getTeamByName: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ data: getMockTeamByName })),
+  getTeams: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ data: getMockTeams })),
+  patchTeamDetail: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ data: getMockTeamByName })),
+}));
+
+jest.mock('../../axiosAPIs/userAPI', () => ({
+  deleteUser: jest.fn().mockImplementation(() => Promise.resolve()),
+  updateUserDetail: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ data: getMockUsers.data[0] })),
+  getUsers: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ data: getMockUsers })),
+}));
+
+jest.mock('../../axiosAPIs/miscAPI', () => ({
+  searchData: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ data: getMockUsers })),
+}));
+
+jest.mock('../../components/TeamsAndUsers/TeamsAndUsers.component', () => {
+  return jest
+    .fn()
+    .mockImplementation(
+      ({
+        activeUserTabHandler,
+        handleAddUser,
+        handleAddTeam,
+        descriptionHandler,
+        addUsersToTeam,
+        afterDeleteAction,
+        handleUserSearchTerm,
+        handleAddNewUser,
+        changeCurrentTeam,
+        handleDeleteUser,
+        teamUserPaginHandler,
+        handleTeamUsersSearchAction,
+        getUniqueUserList,
+        handleJoinTeamClick,
+        onDescriptionUpdate,
+        handleLeaveTeamClick,
+        updateTeamHandler,
+        onNewTeamDataChange,
+        createNewTeam,
+        removeUserFromTeam,
+      }) => (
+        <div data-testid="teamsAndUsers-component">
+          <button onClick={afterDeleteAction}>afterDeleteAction</button>
+          <button onClick={() => changeCurrentTeam('test')}>
+            changeCurrentTeam
+          </button>
+          <button onClick={() => changeCurrentTeam('test', true)}>
+            changeCurrentTeamWithUserCategory
+          </button>
+          <button onClick={activeUserTabHandler}>activeUserTabHandler</button>
+          <button onClick={handleAddUser}>handleAddUser</button>
+          <button onClick={handleAddTeam}>handleAddTeam</button>
+          <button onClick={descriptionHandler}>descriptionHandler</button>
+          <button onClick={() => addUsersToTeam([])}>addUsersToTeam</button>
+          <button onClick={handleAddNewUser}>handleAddNewUser</button>
+          <button onClick={handleDeleteUser}>handleDeleteUser</button>
+          <button onClick={() => teamUserPaginHandler('after', 2)}>
+            teamUserPaginHandler
+          </button>
+          <button onClick={() => teamUserPaginHandler(2, 2)}>
+            teamUserPaginHandlerWithSearch
+          </button>
+          <button onClick={getUniqueUserList}>getUniqueUserList</button>
+          <button onClick={() => handleJoinTeamClick('id', [])}>
+            handleJoinTeamClick
+          </button>
+          <button onClick={() => handleLeaveTeamClick('id', [])}>
+            handleLeaveTeamClick
+          </button>
+          <button
+            onClick={() =>
+              createNewTeam({
+                name: 'test',
+                displayName: 'test',
+              })
+            }>
+            createNewTeam
+          </button>
+          <button
+            onClick={() => {
+              // As we are rejecting the new promise from code, need to handle that from here
+              // eslint-disable-next-line @typescript-eslint/no-empty-function
+              updateTeamHandler({}).catch(() => {});
+            }}>
+            updateTeamHandler
+          </button>
+          <button onClick={() => onDescriptionUpdate('description')}>
+            onDescriptionUpdate
+          </button>
+          <button
+            onClick={() =>
+              onNewTeamDataChange(
+                {
+                  name: '',
+                  displayName: '',
+                },
+                true
+              )
+            }>
+            onNewTeamDataChange
+          </button>
+          <button onClick={() => removeUserFromTeam({}, false)}>
+            removeUserFromTeam
+          </button>
+
+          <input
+            data-testid="search-box"
+            type="text"
+            onChange={(e) => handleUserSearchTerm(e.target.value)}
+          />
+          <input
+            data-testid="search-box-teams-users"
+            type="text"
+            onChange={(e) => handleTeamUsersSearchAction(e.target.value)}
+          />
+        </div>
+      )
+    );
+});
+
+describe('TeamsAndUsersPage component test', () => {
+  it('TeamsAndUsersPage should render', async () => {
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+    });
+  });
+
+  it('Function calls should work properly part 1', async () => {
+    PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+      const activeUserTabHandler = await screen.findByText(
+        'activeUserTabHandler'
+      );
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+
+      const handleAddUser = await screen.findByText('handleAddUser');
+      const handleAddTeam = await screen.findByText('handleAddTeam');
+      const descriptionHandler = await screen.findByText('descriptionHandler');
+      const addUsersToTeam = await screen.findByText('addUsersToTeam');
+      const afterDeleteAction = await screen.findByText('afterDeleteAction');
+      const handleAddNewUser = await screen.findByText('handleAddNewUser');
+      const changeCurrentTeam = await screen.findByText('changeCurrentTeam');
+      const teamUserPaginHandler = await screen.findByText(
+        'teamUserPaginHandler'
+      );
+
+      expect(activeUserTabHandler).toBeInTheDocument();
+      expect(handleAddUser).toBeInTheDocument();
+      expect(handleAddTeam).toBeInTheDocument();
+      expect(descriptionHandler).toBeInTheDocument();
+      expect(addUsersToTeam).toBeInTheDocument();
+      expect(afterDeleteAction).toBeInTheDocument();
+      expect(handleAddNewUser).toBeInTheDocument();
+      expect(changeCurrentTeam).toBeInTheDocument();
+      expect(teamUserPaginHandler).toBeInTheDocument();
+
+      userEvent.click(activeUserTabHandler);
+      userEvent.click(teamUserPaginHandler);
+      userEvent.click(handleAddUser);
+      userEvent.click(changeCurrentTeam);
+      userEvent.click(handleAddTeam);
+      userEvent.click(descriptionHandler);
+      userEvent.click(addUsersToTeam);
+      userEvent.click(handleAddNewUser);
+      userEvent.click(afterDeleteAction);
+    });
+  });
+
+  it('Function calls should work properly part 2', async () => {
+    PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+
+      const searchBox = await screen.findByTestId('search-box-teams-users');
+      const handleDeleteUser = await screen.findByText('handleDeleteUser');
+      const teamUserPaginHandlerWithSearch = await screen.findByText(
+        'teamUserPaginHandlerWithSearch'
+      );
+      const getUniqueUserList = await screen.findByText('getUniqueUserList');
+      const handleJoinTeamClick = await screen.findByText(
+        'handleJoinTeamClick'
+      );
+      const onDescriptionUpdate = await screen.findByText(
+        'onDescriptionUpdate'
+      );
+      const handleLeaveTeamClick = await screen.findByText(
+        'handleLeaveTeamClick'
+      );
+      const updateTeamHandler = await screen.findByText('updateTeamHandler');
+      const onNewTeamDataChange = await screen.findByText(
+        'onNewTeamDataChange'
+      );
+      const createNewTeam = await screen.findByText('createNewTeam');
+      const removeUserFromTeam = await screen.findByText('removeUserFromTeam');
+      const changeCurrentTeamWithUserCategory = await screen.findByText(
+        'changeCurrentTeamWithUserCategory'
+      );
+
+      expect(handleDeleteUser).toBeInTheDocument();
+      expect(searchBox).toBeInTheDocument();
+      expect(teamUserPaginHandlerWithSearch).toBeInTheDocument();
+      expect(getUniqueUserList).toBeInTheDocument();
+      expect(handleJoinTeamClick).toBeInTheDocument();
+      expect(onDescriptionUpdate).toBeInTheDocument();
+      expect(handleLeaveTeamClick).toBeInTheDocument();
+      expect(updateTeamHandler).toBeInTheDocument();
+      expect(onNewTeamDataChange).toBeInTheDocument();
+      expect(createNewTeam).toBeInTheDocument();
+      expect(removeUserFromTeam).toBeInTheDocument();
+      expect(changeCurrentTeamWithUserCategory).toBeInTheDocument();
+
+      userEvent.type(searchBox, 'aa');
+      userEvent.click(teamUserPaginHandlerWithSearch);
+      userEvent.click(getUniqueUserList);
+      userEvent.click(handleJoinTeamClick);
+      userEvent.click(onDescriptionUpdate);
+      userEvent.click(handleLeaveTeamClick);
+      userEvent.click(updateTeamHandler);
+      userEvent.click(handleDeleteUser);
+      userEvent.click(onNewTeamDataChange);
+      userEvent.click(createNewTeam);
+      userEvent.click(removeUserFromTeam);
+      userEvent.click(changeCurrentTeamWithUserCategory);
+    });
+  });
+
+  it('TeamsAndUsersPage should render properly if provided users param', async () => {
+    PARAMS_VALUE.teamAndUser = MOCK_USER;
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+    });
+  });
+
+  it('TeamsAndUsersPage should render properly if provided admin param', async () => {
+    PARAMS_VALUE.teamAndUser = MOCK_ADMIN;
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+    });
+  });
+
+  it('TeamsAndUsersPage should render properly if provided bots param', async () => {
+    PARAMS_VALUE.teamAndUser = MOCK_BOTS;
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+    });
+  });
+
+  it('TeamsAndUsersPage should render properly if provided no param', async () => {
+    PARAMS_VALUE.teamAndUser = undefined;
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+    });
+  });
+
+  it('Search action function should work for usears page', async () => {
+    PARAMS_VALUE.teamAndUser = MOCK_USER;
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+      const searchBox = await screen.findByTestId('search-box');
+      userEvent.type(searchBox, 'test');
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+    });
+  });
+
+  it('Search action function should work for admin page', async () => {
+    PARAMS_VALUE.teamAndUser = MOCK_ADMIN;
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+      const searchBox = await screen.findByTestId('search-box');
+      userEvent.type(searchBox, 'test');
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+    });
+  });
+
+  it('Search action function should work for bots page', async () => {
+    PARAMS_VALUE.teamAndUser = MOCK_BOTS;
+    await act(async () => {
+      render(<TeamsAndUsersPageComponent />);
+
+      const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+      const teamsAndUsersComponent = await screen.findByTestId(
+        'teamsAndUsers-component'
+      );
+      const searchBox = await screen.findByTestId('search-box');
+      userEvent.type(searchBox, 'test');
+
+      expect(PageContainerV1).toBeInTheDocument();
+      expect(teamsAndUsersComponent).toBeInTheDocument();
+    });
+  });
+
+  describe('render Sad Paths', () => {
+    it('should render component if patchTeamDetail api fails', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (patchTeamDetail as jest.Mock).mockImplementation(() =>
+        Promise.reject({
+          response: { data: { message: 'Error!' } },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        const addUsersToTeam = await screen.findByText('addUsersToTeam');
+        const onDescriptionUpdate = await screen.findByText(
+          'onDescriptionUpdate'
+        );
+
+        expect(addUsersToTeam).toBeInTheDocument();
+        expect(onDescriptionUpdate).toBeInTheDocument();
+
+        userEvent.click(addUsersToTeam);
+        userEvent.click(onDescriptionUpdate);
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+      });
+    });
+
+    it('should render component if patchTeamDetail api has no data', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (patchTeamDetail as jest.Mock).mockImplementation(() =>
+        Promise.resolve({
+          response: { data: '' },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        const addUsersToTeam = await screen.findByText('addUsersToTeam');
+        const onDescriptionUpdate = await screen.findByText(
+          'onDescriptionUpdate'
+        );
+        const updateTeamHandler = await screen.findByText('updateTeamHandler');
+        const removeUserFromTeam = await screen.findByText(
+          'removeUserFromTeam'
+        );
+
+        expect(addUsersToTeam).toBeInTheDocument();
+        expect(onDescriptionUpdate).toBeInTheDocument();
+        expect(updateTeamHandler).toBeInTheDocument();
+        expect(removeUserFromTeam).toBeInTheDocument();
+
+        userEvent.click(addUsersToTeam);
+        userEvent.click(onDescriptionUpdate);
+        userEvent.click(updateTeamHandler);
+        userEvent.click(removeUserFromTeam);
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+      });
+    });
+
+    it('should render component if getTeams api fails', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (getTeams as jest.Mock).mockImplementationOnce(() =>
+        Promise.reject({
+          response: { data: { message: 'Error!' } },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        const addUsersToTeam = await screen.findByText('addUsersToTeam');
+
+        expect(addUsersToTeam).toBeInTheDocument();
+
+        userEvent.click(addUsersToTeam);
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+      });
+    });
+
+    it('should render component if getTeams api has no data', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (getTeams as jest.Mock).mockImplementationOnce(() =>
+        Promise.resolve({
+          response: { data: '' },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        const addUsersToTeam = await screen.findByText('addUsersToTeam');
+
+        expect(addUsersToTeam).toBeInTheDocument();
+
+        userEvent.click(addUsersToTeam);
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+      });
+    });
+
+    it('should render component if getTeamByName api fails', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (getTeamByName as jest.Mock).mockImplementationOnce(() =>
+        Promise.reject({
+          response: { data: { message: 'Error!' } },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        const addUsersToTeam = await screen.findByText('addUsersToTeam');
+
+        expect(addUsersToTeam).toBeInTheDocument();
+
+        userEvent.click(addUsersToTeam);
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+      });
+    });
+
+    it('should render component if getTeamByName api has no data', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (getTeamByName as jest.Mock).mockImplementationOnce(() =>
+        Promise.resolve({
+          response: { data: '' },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        const addUsersToTeam = await screen.findByText('addUsersToTeam');
+
+        expect(addUsersToTeam).toBeInTheDocument();
+
+        userEvent.click(addUsersToTeam);
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+      });
+    });
+
+    it('should render component if deleteUser api fails', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (deleteUser as jest.Mock).mockImplementationOnce(() =>
+        Promise.reject({
+          response: { data: { message: 'Error!' } },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+
+        const handleDeleteUser = await screen.findByText('handleDeleteUser');
+
+        expect(handleDeleteUser).toBeInTheDocument();
+
+        userEvent.click(handleDeleteUser);
+      });
+    });
+
+    it('should render component if updateUserDetail api fails', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (updateUserDetail as jest.Mock).mockImplementation(() =>
+        Promise.reject({
+          response: { data: { message: 'Error!' } },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        const handleJoinTeamClick = await screen.findByText(
+          'handleJoinTeamClick'
+        );
+
+        const handleLeaveTeamClick = await screen.findByText(
+          'handleJoinTeamClick'
+        );
+
+        expect(handleJoinTeamClick).toBeInTheDocument();
+        expect(handleLeaveTeamClick).toBeInTheDocument();
+
+        userEvent.click(handleJoinTeamClick);
+        userEvent.click(handleLeaveTeamClick);
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+      });
+    });
+
+    it('should render component if updateUserDetail api has no data', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (updateUserDetail as jest.Mock).mockImplementation(() =>
+        Promise.resolve({
+          response: { data: '' },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+
+        const handleJoinTeamClick = await screen.findByText(
+          'handleJoinTeamClick'
+        );
+        const handleLeaveTeamClick = await screen.findByText(
+          'handleLeaveTeamClick'
+        );
+
+        expect(handleJoinTeamClick).toBeInTheDocument();
+        expect(handleJoinTeamClick).toBeInTheDocument();
+
+        userEvent.click(handleJoinTeamClick);
+        userEvent.click(handleLeaveTeamClick);
+      });
+    });
+
+    it('should render component if createTeam api has no data', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (createTeam as jest.Mock).mockImplementation(() =>
+        Promise.resolve({
+          response: { data: '' },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+
+        const createNewTeam = await screen.findByText('createNewTeam');
+
+        expect(createNewTeam).toBeInTheDocument();
+
+        userEvent.click(createNewTeam);
+      });
+    });
+
+    it('should render component if createTeam api fails', async () => {
+      PARAMS_VALUE.teamAndUser = MOCK_TEAM;
+      (getUsers as jest.Mock).mockImplementation(() =>
+        Promise.reject({
+          response: { data: { message: 'Error!' } },
+        })
+      );
+      await act(async () => {
+        render(<TeamsAndUsersPageComponent />);
+
+        const PageContainerV1 = await screen.findByTestId('PageContainerV1');
+        const teamsAndUsersComponent = await screen.findByTestId(
+          'teamsAndUsers-component'
+        );
+
+        expect(PageContainerV1).toBeInTheDocument();
+        expect(teamsAndUsersComponent).toBeInTheDocument();
+
+        const teamUserPaginHandler = await screen.findByText(
+          'teamUserPaginHandler'
+        );
+
+        expect(teamUserPaginHandler).toBeInTheDocument();
+
+        userEvent.click(teamUserPaginHandler);
+      });
+    });
+  });
+});