fixed realm role test (#962)

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

@@ -1,43 +1,30 @@
 export default class AssociatedRolesPage {
-  actionDropdown: string;
-  addRolesDropdownItem: string;
-  addRoleToolbarButton: string;
-  checkbox: string;
-  addAssociatedRolesModalButton: string;
-  compositeRoleBadge: string;
-  filterTypeDropdown: string;
-  filterTypeDropdownItem: string;
-  usersPage: string;
-
-  constructor() {
-    this.actionDropdown = "[data-testid=action-dropdown]";
-    this.addRolesDropdownItem = "[data-testid=add-roles]";
-    this.addRoleToolbarButton = "[data-testid=add-role-button]";
-    this.checkbox = "[type=checkbox]";
-    this.addAssociatedRolesModalButton =
-      "[data-testid=add-associated-roles-button]";
-    this.compositeRoleBadge = "[data-testid=composite-role-badge]";
-    this.filterTypeDropdown = "[data-testid=filter-type-dropdown]";
-    this.filterTypeDropdownItem = "[data-testid=filter-type-dropdown-item]";
-    this.usersPage = "[data-testid=users-page]";
-  }
+  private actionDropdown = "action-dropdown";
+  private addRolesDropdownItem = "add-roles";
+  private addRoleToolbarButton = "add-role-button";
+  private checkbox = "[type=checkbox]";
+  private addAssociatedRolesModalButton = "add-associated-roles-button";
+  private compositeRoleBadge = "composite-role-badge";
+  private filterTypeDropdown = "filter-type-dropdown";
+  private filterTypeDropdownItem = "filter-type-dropdown-item";
+  private usersPage = "users-page";
 
   addAssociatedRealmRole() {
-    cy.get(this.actionDropdown).last().click();
+    cy.getId(this.actionDropdown).last().click();
 
     const load = "/auth/admin/realms/master/clients";
     cy.intercept(load).as("load");
 
-    cy.get(this.addRolesDropdownItem).click();
+    cy.getId(this.addRolesDropdownItem).click();
 
     cy.wait(["@load"]);
     cy.get(this.checkbox).eq(2).check();
 
-    cy.get(this.addAssociatedRolesModalButton).contains("Add").click();
+    cy.getId(this.addAssociatedRolesModalButton).contains("Add").click();
 
     cy.url().should("include", "/AssociatedRoles");
 
-    cy.get(this.compositeRoleBadge).should("contain.text", "Composite");
+    cy.getId(this.compositeRoleBadge).should("contain.text", "Composite");
 
     cy.wait(["@load"]);
 
@@ -45,20 +32,23 @@ export default class AssociatedRolesPage {
   }
 
   addAssociatedClientRole() {
-    cy.get(this.addRoleToolbarButton).click();
+    cy.getId(this.addRoleToolbarButton).click();
 
-    cy.get(this.filterTypeDropdown).click();
+    cy.getId(this.filterTypeDropdown).click();
 
-    cy.get(this.filterTypeDropdownItem).click();
+    cy.getId(this.filterTypeDropdownItem).click();
 
-    cy.get(".pf-c-spinner__tail-ball").should("not.exist");
+    cy.getId(".pf-c-spinner__tail-ball").should("not.exist");
 
-    cy.get(this.checkbox).eq(12).check({ force: true });
+    cy.get('[data-testid="addAssociatedRole"] td[data-label="Role name"]')
+      .contains("manage-account")
+      .parent()
+      .within(() => {
+        cy.get("input").click();
+      });
 
-    cy.get(this.addAssociatedRolesModalButton).contains("Add").click();
+    cy.getId(this.addAssociatedRolesModalButton).contains("Add").click();
 
-    cy.get(".pf-c-spinner__tail-ball").should("not.exist");
-
-    cy.contains("Users in role").click().get(this.usersPage).should("exist");
+    cy.contains("Users in role").click().getId(this.usersPage).should("exist");
   }
 }

src/realm-roles/AssociatedRolesModal.tsx

@@ -157,6 +157,7 @@ export const AssociatedRolesModal = (props: AssociatedRolesModalProps) => {
 
   return (
     <Modal
+      data-testid="addAssociatedRole"
       title={t("roles:associatedRolesModalTitle", { name })}
       isOpen={props.open}
       onClose={props.toggleDialog}

src/realm-roles/RealmRoleTabs.tsx

@@ -316,6 +316,7 @@ export const RealmRoleTabs = () => {
         titleKey={role?.name || t("createRole")}
         badges={[
           {
+            id: "composite-role-badge",
             text: additionalRoles.length > 0 ? t("composite") : "",
             readonly: true,
           },