Clients -> Roles Tab: Adds Role Tests (#2174)

cypress/integration/clients_test.spec.ts

@@ -17,17 +17,22 @@ import {
 import RoleMappingTab from "../support/pages/admin_console/manage/RoleMappingTab";
 import KeysTab from "../support/pages/admin_console/manage/clients/KeysTab";
 import ClientScopesTab from "../support/pages/admin_console/manage/clients/ClientScopesTab";
+import CreateRealmRolePage from "../support/pages/admin_console/manage/realm_roles/CreateRealmRolePage";
+import AssociatedRolesPage from "../support/pages/admin_console/manage/realm_roles/AssociatedRolesPage";
+import ClientRolesTab from "../support/pages/admin_console/manage/clients/ClientRolesTab";
 
 let itemId = "client_crud";
 const loginPage = new LoginPage();
+const associatedRolesPage = new AssociatedRolesPage();
 const masthead = new Masthead();
 const sidebarPage = new SidebarPage();
 const listingPage = new ListingPage();
 const createClientPage = new CreateClientPage();
 const modalUtils = new ModalUtils();
+const createRealmRolePage = new CreateRealmRolePage();
 
 describe("Clients test", () => {
-  describe("Client details - Client scopes subtab", () => {
+  describe.skip("Client details - Client scopes subtab", () => {
     const clientScopesTab = new ClientScopesTab();
     const clientId = "client-scopes-subtab-test";
     const clientScopeName = "client-scope-test";
@@ -85,23 +90,23 @@ describe("Clients test", () => {
       await adminClient.deleteClientScope(clientScopeNameOptionalType);
     });
 
-    it("should list client scopes", () => {
+    it("Should list client scopes", () => {
       listingPage.itemsGreaterThan(1).itemExist(clientScopeName + 0);
     });
 
-    it("should search existing client scope by name", () => {
+    it("Should search existing client scope by name", () => {
       listingPage
         .searchItem(clientScopeName + 0, false)
         .itemExist(clientScopeName + 0)
         .itemsEqualTo(2);
     });
 
-    it("should search non-existent client scope by name", () => {
+    it("Should search non-existent client scope by name", () => {
       const itemName = "non-existent-item";
       listingPage.searchItem(itemName, false).checkTableExists(false);
     });
 
-    it("should search existing client scope by assigned type", () => {
+    it("Should search existing client scope by assigned type", () => {
       listingPage
         .selectFilter(Filter.AssignedType)
         .selectSecondaryFilterAssignedType(FilterAssignedType.Default)
@@ -115,7 +120,7 @@ describe("Clients test", () => {
         .itemExist(FilterAssignedType.Optional);
     });
 
-    /*it("should empty search", () => {
+    /*it("Should empty search", () => {
 
     });*/
 
@@ -125,7 +130,7 @@ describe("Clients test", () => {
     ];
     newItemsWithExpectedAssignedTypes.forEach(($type) => {
       const [itemName, assignedType] = $type;
-      it(`should add client scope ${itemName} with ${assignedType} assigned type`, () => {
+      it(`Should add client scope ${itemName} with ${assignedType} assigned type`, () => {
         listingPage.clickPrimaryButton();
         modalUtils.checkModalTitle("Add client scopes to " + clientId);
         listingPage.clickItemCheckbox(itemName);
@@ -144,7 +149,7 @@ describe("Clients test", () => {
     ];
     expectedItemAssignedTypes.forEach(($assignedType) => {
       const itemName = clientScopeName + 0;
-      it(`should change item ${itemName} AssignedType to ${$assignedType} from search bar`, () => {
+      it(`Should change item ${itemName} AssignedType to ${$assignedType} from search bar`, () => {
         listingPage
           .searchItem(itemName, false)
           .clickItemCheckbox(itemName)
@@ -154,23 +159,23 @@ describe("Clients test", () => {
       });
     });
 
-    it("should show items on next page are more than 11", () => {
+    it("Should show items on next page are more than 11", () => {
       listingPage.showNextPageTableItems().itemsGreaterThan(1);
     });
 
-    it("should remove client scope from item bar", () => {
+    it("Should remove client scope from item bar", () => {
       const itemName = clientScopeName + 0;
       listingPage.searchItem(itemName, false).removeItem(itemName);
       masthead.checkNotificationMessage(msgScopeMappingRemoved);
       listingPage.searchItem(itemName, false).checkTableExists(false);
     });
 
-    /*it("should remove client scope from search bar", () => {
+    /*it("Should remove client scope from search bar", () => {
       //covered by next test
     });*/
 
     // TODO: https://github.com/keycloak/keycloak-admin-ui/issues/1854
-    it("should remove multiple client scopes from search bar", () => {
+    it("Should remove multiple client scopes from search bar", () => {
       const itemName1 = clientScopeName + 1;
       const itemName2 = clientScopeName + 2;
       listingPage
@@ -191,7 +196,7 @@ describe("Clients test", () => {
     });
 
     //TODO: https://github.com/keycloak/keycloak-admin-ui/issues/1874
-    /* it("should show initial items after filtering", () => { 
+    /* it("Should show initial items after filtering", () => { 
       listingPage
         .selectFilter(Filter.AssignedType)
         .selectFilterAssignedType(FilterAssignedType.Optional)
@@ -201,7 +206,7 @@ describe("Clients test", () => {
     });*/
   });
 
-  describe("Client creation", () => {
+  describe.skip("Client creation", () => {
     before(() => {
       keycloakBefore();
       loginPage.logIn();
@@ -350,6 +355,198 @@ describe("Clients test", () => {
     });
   });
 
+  describe("Roles tab test", () => {
+    const rolesTab = new ClientRolesTab();
+    let client: string;
+
+    before(() => {
+      keycloakBefore();
+      loginPage.logIn();
+      sidebarPage.goToClients();
+
+      client = "client_" + (Math.random() + 1).toString(36).substring(7);
+
+      listingPage.goToCreateItem();
+
+      createClientPage
+        .selectClientType("openid-connect")
+        .fillClientData(client)
+        .continue()
+        .save();
+      masthead.checkNotificationMessage("Client created successfully", true);
+    });
+
+    beforeEach(() => {
+      keycloakBefore();
+      loginPage.logIn();
+      sidebarPage.goToClients();
+      listingPage.searchItem(client).goToItemDetails(client);
+      rolesTab.goToRolesTab();
+    });
+
+    after(() => {
+      adminClient.deleteClient(client);
+    });
+
+    it("Should fail to create client role with empty name", () => {
+      rolesTab.goToCreateRoleFromEmptyState();
+      createRealmRolePage.fillRealmRoleData("").save();
+      createRealmRolePage.checkRealmRoleNameRequiredMessage();
+    });
+
+    it("Should create client role", () => {
+      rolesTab.goToCreateRoleFromEmptyState();
+      createRealmRolePage.fillRealmRoleData(itemId).save();
+      masthead.checkNotificationMessage("Role created", true);
+    });
+
+    it("Should update client role description", () => {
+      listingPage.searchItem(itemId, false).goToItemDetails(itemId);
+      const updateDescription = "updated description";
+      createRealmRolePage.updateDescription(updateDescription).save();
+      masthead.checkNotificationMessage("The role has been saved", true);
+      createRealmRolePage.checkDescription(updateDescription);
+    });
+
+    it("Should add attribute to client role", () => {
+      cy.intercept("/admin/realms/master/roles-by-id/*").as("load");
+      listingPage.goToItemDetails(itemId);
+      rolesTab.goToAttributesTab();
+      cy.wait(["@load", "@load"]);
+      rolesTab.addAttribute();
+
+      masthead.checkNotificationMessage("The role has been saved", true);
+    });
+
+    it("Should delete attribute from client role", () => {
+      cy.intercept("/admin/realms/master/roles-by-id/*").as("load");
+      listingPage.goToItemDetails(itemId);
+      rolesTab.goToAttributesTab();
+      cy.wait(["@load", "@load"]);
+      rolesTab.deleteAttribute();
+      masthead.checkNotificationMessage("The role has been saved", true);
+    });
+
+    it("Should create client role to be deleted", () => {
+      rolesTab.goToCreateRoleFromToolbar();
+      createRealmRolePage.fillRealmRoleData("client_role_to_be_deleted").save();
+      masthead.checkNotificationMessage("Role created", true);
+    });
+
+    it("Should fail to create duplicate client role", () => {
+      rolesTab.goToCreateRoleFromToolbar();
+      createRealmRolePage.fillRealmRoleData(itemId).save();
+      masthead.checkNotificationMessage(
+        `Could not create role: Role with name ${itemId} already exists`,
+        true
+      );
+    });
+
+    it("Should search existing client role", () => {
+      listingPage.searchItem(itemId, false).itemExist(itemId);
+    });
+
+    it("Should search non-existing role test", () => {
+      listingPage.searchItem("role_DNE", false);
+      cy.findByTestId(listingPage.emptyState).should("exist");
+    });
+
+    it("roles empty search test", () => {
+      listingPage.searchItem("", false);
+      cy.get("table:visible");
+    });
+
+    it("Add associated roles test", () => {
+      listingPage.searchItem(itemId, false).goToItemDetails(itemId);
+
+      // Add associated realm role
+      associatedRolesPage.addAssociatedRealmRole("create-realm");
+      masthead.checkNotificationMessage(
+        "Associated roles have been added",
+        true
+      );
+
+      // Add associated client role
+      associatedRolesPage.addAssociatedClientRole("create-client");
+      masthead.checkNotificationMessage(
+        "Associated roles have been added",
+        true
+      );
+
+      rolesTab.goToAssociatedRolesTab();
+
+      // Add associated client role
+      associatedRolesPage.addAssociatedClientRole("manage-consent");
+      masthead.checkNotificationMessage(
+        "Associated roles have been added",
+        true
+      );
+    });
+
+    it("Should hide inherited roles test", () => {
+      listingPage.searchItem(itemId, false).goToItemDetails(itemId);
+      rolesTab.goToAssociatedRolesTab();
+      rolesTab.hideInheritedRoles();
+    });
+
+    it("Should delete associated roles test", () => {
+      listingPage.searchItem(itemId, false).goToItemDetails(itemId);
+      rolesTab.goToAssociatedRolesTab();
+      listingPage.removeItem("create-realm");
+      sidebarPage.waitForPageLoad();
+      modalUtils.checkModalTitle("Remove associated role?").confirmModal();
+      sidebarPage.waitForPageLoad();
+
+      masthead.checkNotificationMessage(
+        "Associated roles have been removed",
+        true
+      );
+
+      listingPage.removeItem("manage-consent");
+      sidebarPage.waitForPageLoad();
+      modalUtils.checkModalTitle("Remove associated role?").confirmModal();
+    });
+
+    it("Should delete associated role from search bar test", () => {
+      listingPage.searchItem(itemId, false).goToItemDetails(itemId);
+      sidebarPage.waitForPageLoad();
+      rolesTab.goToAssociatedRolesTab();
+
+      cy.get('td[data-label="Role name"]')
+        .contains("create-client")
+        .parent()
+        .within(() => {
+          cy.get("input").click();
+        });
+
+      associatedRolesPage.removeAssociatedRoles();
+
+      sidebarPage.waitForPageLoad();
+      modalUtils.checkModalTitle("Remove associated roles?").confirmModal();
+      sidebarPage.waitForPageLoad();
+
+      masthead.checkNotificationMessage(
+        "Associated roles have been removed",
+        true
+      );
+    });
+
+    it("Should delete client role test", () => {
+      listingPage.deleteItem(itemId);
+      sidebarPage.waitForPageLoad();
+      modalUtils.checkModalTitle("Delete role?").confirmModal();
+    });
+
+    it("Should delete client role from role details test", () => {
+      listingPage
+        .searchItem("client_role_to_be_deleted", false)
+        .goToItemDetails("client_role_to_be_deleted");
+      createRealmRolePage.clickActionMenu("Delete this role");
+      modalUtils.confirmModal();
+      masthead.checkNotificationMessage("The role has been deleted", true);
+    });
+  });
+
   describe("Advanced tab test", () => {
     const advancedTab = new AdvancedTab();
     let client: string;

cypress/integration/realm_roles_test.spec.ts

@@ -99,11 +99,11 @@ describe("Realm roles test", () => {
     masthead.checkNotificationMessage("Role created", true);
 
     // Add associated realm role
-    associatedRolesPage.addAssociatedRealmRole();
+    associatedRolesPage.addAssociatedRealmRole("create-realm");
     masthead.checkNotificationMessage("Associated roles have been added", true);
 
     // Add associated client role
-    associatedRolesPage.addAssociatedClientRole();
+    associatedRolesPage.addAssociatedClientRole("manage-account");
     masthead.checkNotificationMessage("Associated roles have been added", true);
   });
 

cypress/support/pages/admin_console/ListingPage.ts

@@ -121,7 +121,7 @@ export default class ListingPage {
       .contains(itemName)
       .parentsUntil("tbody")
       .find(this.itemRowDrpDwn)
-      .click();
+      .click({ force: true });
     return this;
   }
 
@@ -211,6 +211,13 @@ export default class ListingPage {
     return this;
   }
 
+  removeItem(itemName: string) {
+    this.clickRowDetails(itemName);
+    this.clickDetailMenu("Remove");
+
+    return this;
+  }
+
   deleteItemFromSearchBar(itemName: string) {
     this.markItemRow(itemName);
     cy.findByTestId(this.deleteUserButton).click();
@@ -225,13 +232,6 @@ export default class ListingPage {
     return this;
   }
 
-  removeItem(itemName: string) {
-    this.clickRowDetails(itemName);
-    this.clickDetailMenu("Remove");
-
-    return this;
-  }
-
   itemsEqualTo(amount: number) {
     cy.get(this.tableRowItem).its("length").should("be.eq", amount);
 

cypress/support/pages/admin_console/manage/clients/ClientRolesTab.ts

@@ -0,0 +1,80 @@
+export default class ClientRolesTab {
+  private createRoleBtn = "create-role";
+  private createRoleEmptyStateBtn = "no-roles-for-this-client-empty-action";
+  private actionsDropdown = `[aria-label="Actions"]`;
+  private hideInheritedRolesChkBox = "#kc-hide-inherited-roles-checkbox";
+
+  private rolesTab = "rolesTab";
+  private associatedRolesTab = ".kc-associated-roles-tab > button";
+  private attributesTab = ".kc-attributes-tab > button";
+  private attributeKeyInput = "attribute-key-input";
+  private attributeValueInput = "attribute-value-input";
+  private addAttributeButton = "attribute-add-row";
+  private removeFirstAttributeButton = "#minus-button-0";
+  private saveAttributesButton = "save-attributes";
+
+  goToRolesTab() {
+    cy.findByTestId(this.rolesTab).click();
+    return this;
+  }
+
+  goToAssociatedRolesTab() {
+    cy.get(this.associatedRolesTab).click();
+    return this;
+  }
+
+  goToAttributesTab() {
+    cy.get(this.attributesTab).click();
+    return this;
+  }
+
+  goToCreateRoleFromToolbar() {
+    cy.findByTestId(this.createRoleBtn).click();
+    return this;
+  }
+
+  goToCreateRoleFromEmptyState() {
+    cy.findByTestId(this.createRoleEmptyStateBtn).click();
+    return this;
+  }
+
+  fillClientRoleData() {
+    cy.findByTestId(this.createRoleBtn).click();
+    return this;
+  }
+
+  saveAttribute() {
+    cy.findByTestId(this.saveAttributesButton).click();
+    return this;
+  }
+
+  addAttribute() {
+    cy.findByTestId(this.attributeKeyInput).type("crud_attribute_key");
+
+    cy.findByTestId(this.attributeValueInput).type("crud_attribute_value");
+
+    cy.findByTestId(this.addAttributeButton).click();
+
+    this.saveAttribute();
+
+    cy.get("table")
+      .should("have.class", "kc-attributes__table")
+      .get("tbody")
+      .children()
+      .should("have.length", 2);
+
+    return this;
+  }
+
+  deleteAttribute() {
+    cy.get(this.removeFirstAttributeButton).click();
+    this.saveAttribute();
+    cy.findByTestId(this.attributeKeyInput).should("have.value", "");
+    cy.findByTestId(this.attributeValueInput).should("have.value", "");
+  }
+
+  hideInheritedRoles() {
+    cy.get(this.hideInheritedRolesChkBox).check();
+    return this;
+  }
+}

cypress/support/pages/admin_console/manage/realm_roles/AssociatedRolesPage.ts

@@ -8,14 +8,19 @@ export default class AssociatedRolesPage {
   private filterTypeDropdown = "filter-type-dropdown";
   private filterTypeDropdownItem = "filter-type-dropdown-item";
   private usersPage = "users-page";
+  private removeRolesButton = "removeRoles";
 
-  addAssociatedRealmRole() {
+  addAssociatedRealmRole(roleName: string) {
     cy.findByTestId(this.actionDropdown).last().click();
 
     cy.findByTestId(this.addRolesDropdownItem).click();
 
-    cy.get(this.checkbox).eq(2).check();
+    cy.get('[data-testid="addAssociatedRole"] td[data-label="Role name"]')
-
+      .contains(roleName)
+      .parent()
+      .within(() => {
+        cy.get("input").click();
+      });
     cy.findByTestId(this.addAssociatedRolesModalButton).contains("Add").click();
 
     cy.url().should("include", "/associated-roles");
@@ -28,7 +33,7 @@ export default class AssociatedRolesPage {
     return this;
   }
 
-  addAssociatedClientRole() {
+  addAssociatedClientRole(roleName: string) {
     cy.findByTestId(this.addRoleToolbarButton).click();
 
     cy.findByTestId(this.filterTypeDropdown).click();
@@ -38,7 +43,7 @@ export default class AssociatedRolesPage {
     cy.findByTestId(".pf-c-spinner__tail-ball").should("not.exist");
 
     cy.get('[data-testid="addAssociatedRole"] td[data-label="Role name"]')
-      .contains("manage-account")
+      .contains(roleName)
       .parent()
       .within(() => {
         cy.get("input").click();
@@ -49,4 +54,9 @@ export default class AssociatedRolesPage {
     cy.contains("Users in role").click();
     cy.findByTestId(this.usersPage).should("exist");
   }
+
+  removeAssociatedRoles() {
+    cy.findByTestId(this.removeRolesButton).click();
+    return this;
+  }
 }

src/realm-roles/AssociatedRolesTab.tsx

@@ -271,6 +271,7 @@ export const AssociatedRolesTab = ({
                 variant="link"
                 isDisabled={selectedRows.length === 0}
                 key="remove-role-button"
+                data-testid="removeRoles"
                 onClick={() => {
                   toggleDeleteAssociatedRolesDialog();
                 }}

src/realm-roles/RealmRoleTabs.tsx

@@ -365,6 +365,7 @@ export default function RealmRoleTabs() {
             {role.composite && (
               <Tab
                 eventKey="associated-roles"
+                className="kc-associated-roles-tab"
                 title={<TabTitleText>{t("associatedRolesText")}</TabTitleText>}
               >
                 <AssociatedRolesTab parentRole={role} refresh={refresh} />

src/realm-roles/RolesList.tsx

@@ -128,7 +128,11 @@ export const RolesList = ({
         ariaLabelKey="roles:roleList"
         searchPlaceholderKey="roles:searchFor"
         isPaginated={paginated}
-        toolbarItem={<Button onClick={goToCreate}>{t("createRole")}</Button>}
+        toolbarItem={
+          <Button data-testid="create-role" onClick={goToCreate}>
+            {t("createRole")}
+          </Button>
+        }
         actions={[
           {
             title: t("common:delete"),