Fix #7564 Add Cypress test for Team Hierarchy Dropdown (#7765)

* Fix #7564 Add Cypress test for Team Hierarchy Dropdown

* Address review comments

openmetadata-ui/src/main/resources/ui/cypress/common/common.js

@@ -813,9 +813,7 @@ export const login = (username, password) => {
 export const addTeam = (TEAM_DETAILS) => {
   interceptURL('GET', '/api/v1/teams*', 'addTeam');
   //Fetching the add button and clicking on it
-  cy.get('button')
+  cy.get('[data-testid="add-team"]')
-    .find('span')
-    .contains('Add Team')
     .should('be.visible')
     .click();
 

openmetadata-ui/src/main/resources/ui/cypress/e2e/Features/TeamsHierarchy.spec.js

@@ -0,0 +1,103 @@
+/*
+ *  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 { addTeam, interceptURL, login, uuid, verifyResponseStatusCode } from '../../common/common';
+import { LOGIN } from '../../constants/constants';
+
+const buTeamName = `bu-${uuid()}`;
+const divTeamName = `div-${uuid()}`;
+const depTeamName = `dep-${uuid()}`;
+const grpTeamName = `grp-${uuid()}`;
+const teamNames = [buTeamName, divTeamName, depTeamName, grpTeamName];
+const getTeam = (teamName) => {
+  return {
+    name: teamName,
+    displayName: teamName,
+    teamType: 'BusinessUnit',
+    description: `Team ${teamName} Description`,
+    ownername: 'admin',
+  }
+};
+
+describe('Add nested teams and test TeamsSelectable', () => {
+  before(() => {
+    cy.clearLocalStorageSnapshot();
+    login(LOGIN.username, LOGIN.password);
+    cy.goToHomePage();
+    cy.saveLocalStorage('localstorage');
+  });
+  beforeEach(() => {
+    cy.log('Restoring local storage snapshot')
+    cy.restoreLocalStorage('localstorage');
+    cy.clickOnLogo();
+    cy.get('[data-testid="appbar-item-settings"]').should('be.visible').click();
+    interceptURL('GET', '/api/v1/users*', 'getTeams');
+    // Clicking on teams
+    cy.get('[data-menu-id*="teams"]')
+      .should('exist')
+      .should('be.visible')
+      .click();
+
+    verifyResponseStatusCode('@getTeams', 200);
+  });
+
+  it('Add teams', () => {
+    interceptURL('GET', '/api/v1/permissions/team/*', 'getPermissions');
+    teamNames.forEach(teamName => {
+      addTeam(getTeam(teamName));
+
+      cy.reload();
+
+      // asserting the added values
+      cy.get('table').find('.ant-table-row').contains(teamName).click();
+    });
+
+    verifyResponseStatusCode('@getPermissions', 200);
+    cy.wait(1000);
+  });
+
+  it('Check hierarchy in Add User page', () => {
+    // Clicking on users
+    cy.get('[data-menu-id*="users"]')
+      .should('exist')
+      .should('be.visible')
+      .click();
+
+    cy.get('[data-testid="add-user"]')
+      .should('be.visible')
+      .click();
+
+    cy.get('.ant-select-selector')
+      .should('exist')
+      .scrollIntoView()
+      .should('be.visible')
+      .click()
+      .type(buTeamName);
+
+    teamNames.forEach(teamName => {
+      cy.get('.ant-tree-select-dropdown')
+        .contains(teamName).should('be.visible');
+    });
+
+    teamNames.forEach(teamName => {
+      cy.get('.ant-select-selector')
+        .should('exist')
+        .scrollIntoView()
+        .should('be.visible')
+        .click()
+        .type(teamName);
+      cy.get('.ant-tree-select-dropdown')
+        .contains(teamName).should('be.visible');
+    });
+  });
+});

openmetadata-ui/src/main/resources/ui/cypress/support/e2e.js

@@ -14,6 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
+import 'cypress-localstorage-commands';
 import './commands';
 
 // Alternatively you can use CommonJS syntax:

openmetadata-ui/src/main/resources/ui/package.json

@@ -169,6 +169,7 @@
     "connect-api-mocker": "^1.10.0",
     "copy-webpack-plugin": "^7.0.0",
     "css-loader": "3.4.2",
+    "cypress-localstorage-commands": "^2.2.1",
     "dotenv": "^16.0.0",
     "eslint": "^6.6.0",
     "eslint-config-prettier": "^6.11.0",

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx

@@ -953,6 +953,7 @@ const TeamDetailsV1 = ({
                     onClick: () => handleAddTeam(true),
                     disabled: !createTeamPermission,
                     heading: 'Team',
+                    datatestid: 'add-team',
                   })
                 ) : (
                   <Row
@@ -977,6 +978,7 @@ const TeamDetailsV1 = ({
                         />
                         <span>Deleted Teams</span>
                         <ButtonAntd
+                          data-testid="add-team"
                           disabled={!createTeamPermission}
                           title={
                             createTeamPermission
@@ -1104,6 +1106,7 @@ const TeamDetailsV1 = ({
           buttons={
             <div className="tw-text-lg tw-text-center">
               <Button
+                data-testid="add-team"
                 disabled={!createTeamPermission}
                 size="small"
                 theme="primary"

openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx

@@ -242,6 +242,7 @@ const UserListV1: FC<UserListV1Props> = ({
           <Tooltip
             title={createPermission ? 'Add User' : NO_PERMISSION_FOR_ACTION}>
             <Button
+              data-testid="add-user"
               disabled={!createPermission}
               type="primary"
               onClick={handleAddNewUser}>

openmetadata-ui/src/main/resources/ui/yarn.lock

@@ -5512,6 +5512,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+cypress-localstorage-commands@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cypress-localstorage-commands/-/cypress-localstorage-commands-2.2.1.tgz#9895d75a3e8059e78d61231c5794dc46e0fc5fdd"
+  integrity sha512-m7IwoM+BMOJj7FzzN4It268c/i/Ur72CQX8JwLICkQ6ZgF1XNJOIKlQ7Rszg45ATLTjVTL1QElKCZECoU8cthQ==
+
 cypress@^10.7.0:
   version "10.7.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.7.0.tgz#2d37f8b9751c6de33ee48639cb7e67a2ce593231"