Realm-settings -> User Profile -> Create/Edit Attribute tests (#2410)

* added tests for creating new attribute

* added more tests

* removed temporary skips

* added more tests

* added more tests

* fixed typo

* fixed focus bug

Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

cypress/integration/realm_settings_user_profile_tab.spec.ts

@@ -1,5 +1,6 @@
 import ListingPage from "../support/pages/admin_console/ListingPage";
 import UserProfile from "../support/pages/admin_console/manage/realm_settings/UserProfile";
+import Masthead from "../support/pages/admin_console/Masthead";
 import SidebarPage from "../support/pages/admin_console/SidebarPage";
 import LoginPage from "../support/pages/LoginPage";
 import adminClient from "../support/util/AdminClient";
@@ -11,6 +12,7 @@ const sidebarPage = new SidebarPage();
 const userProfileTab = new UserProfile();
 const listingPage = new ListingPage();
 const modalUtils = new ModalUtils();
+const masthead = new Masthead();
 
 // Selectors
 const getUserProfileTab = () => userProfileTab.goToTab();
@@ -22,6 +24,7 @@ const clickCreateAttributeButton = () =>
 
 describe("User profile tabs", () => {
   const realmName = "Realm_" + (Math.random() + 1).toString(36).substring(7);
+  const attributeName = "Test";
 
   before(() =>
     adminClient.createRealm(realmName, {
@@ -45,6 +48,52 @@ describe("User profile tabs", () => {
       clickCreateAttributeButton();
       cy.get("p").should("have.text", "Create a new attribute");
     });
+
+    it("Completes new attribute form and performs cancel", () => {
+      getUserProfileTab();
+      getAttributesTab();
+      clickCreateAttributeButton();
+      userProfileTab
+        .createAttribute(attributeName, "Test display name")
+        .cancelAttributeCreation()
+        .checkElementNotInList(attributeName);
+    });
+
+    it("Completes new attribute form and performs submit", () => {
+      getUserProfileTab();
+      getAttributesTab();
+      clickCreateAttributeButton();
+      userProfileTab
+        .createAttribute(attributeName, "Display name")
+        .saveAttributeCreation();
+      masthead.checkNotificationMessage(
+        "Success! User Profile configuration has been saved."
+      );
+    });
+
+    it("Modifies existing attribute and performs save", () => {
+      getUserProfileTab();
+      getAttributesTab();
+      userProfileTab
+        .selectElementInList(attributeName)
+        .editAttribute("Edited display name")
+        .saveAttributeCreation();
+      masthead.checkNotificationMessage(
+        "Success! User Profile configuration has been saved."
+      );
+    });
+
+    it("Adds and removes validator to/from existing attribute and performs save", () => {
+      getUserProfileTab();
+      getAttributesTab();
+      userProfileTab.selectElementInList(attributeName).cancelAddingValidator();
+      userProfileTab.addValidator();
+      cy.get('tbody [data-label="Validator name"]').contains("email");
+
+      userProfileTab.cancelRemovingValidator();
+      userProfileTab.removeValidator();
+      cy.get('tbody [class="kc-emptyValidators"]').contains("No validators.");
+    });
   });
 
   describe("Attribute groups sub tab tests", () => {

cypress/support/pages/admin_console/manage/realm_settings/UserProfile.ts

@@ -7,6 +7,26 @@ export default class UserProfile {
   private actionsDrpDwn = "actions-dropdown";
   private deleteDrpDwnOption = "deleteDropdownAttributeItem";
   private editDrpDwnOption = "editDropdownAttributeItem";
+  private cancelNewAttribute = "attribute-cancel";
+  private newAttributeNameInput = "attribute-name";
+  private newAttributeDisplayNameInput = "attribute-display-name";
+  private newAttributeEnabledWhen = 'input[name="enabledWhen"]';
+  private newAttributeCheckboxes = 'input[type="checkbox"]';
+  private newAttributeRequiredFor = 'input[name="roles"]';
+  private newAttributeRequiredWhen = 'input[name="requiredWhen"]';
+  private newAttributeEmptyValidators = 'tbody [class="kc-emptyValidators"]';
+  private newAttributeAnnotationKey = 'input[name="annotations[0].key"]';
+  private newAttributeAnnotationValue = 'input[name="annotations[0].value"]';
+  private validatorRolesList = 'tbody [data-label="Role name"]';
+  private validatorsList = 'tbody [data-label="name"]';
+  private saveNewAttributeBtn = "attribute-create";
+  private addValidatorBtn = "addValidator";
+  private saveValidatorBtn = "save-validator-role-button";
+  private removeValidatorBtn = "deleteValidator";
+  private deleteValidatorBtn = "confirm";
+  private cancelAddingValidatorBtn = "cancel-validator-role-button";
+  private cancelRemovingValidatorBtn = "cancel";
+  private validatorDialogCloseBtn = 'button[aria-label="Close"]';
 
   goToTab() {
     cy.findByTestId(this.userProfileTab).click();
@@ -47,4 +67,71 @@ export default class UserProfile {
     cy.findByTestId(this.editDrpDwnOption).click();
     return this;
   }
+
+  cancelAttributeCreation() {
+    cy.findByTestId(this.cancelNewAttribute).click();
+    return this;
+  }
+
+  createAttribute(name: string, displayName: string) {
+    cy.findByTestId(this.newAttributeNameInput).type(name);
+    cy.findByTestId(this.newAttributeDisplayNameInput).type(displayName);
+    return this;
+  }
+
+  checkElementNotInList(name: string) {
+    cy.get(this.validatorsList).should("not.contain.text", name);
+    return this;
+  }
+
+  saveAttributeCreation() {
+    cy.findByTestId(this.saveNewAttributeBtn).click();
+    return this;
+  }
+
+  selectElementInList(name: string) {
+    cy.get(this.validatorsList).contains(name).click();
+    return this;
+  }
+
+  editAttribute(displayName: string) {
+    cy.findByTestId(this.newAttributeDisplayNameInput)
+      .click()
+      .clear()
+      .type(displayName);
+    cy.get(this.newAttributeEnabledWhen).first().check();
+    cy.get(this.newAttributeCheckboxes).check({ force: true });
+    cy.get(this.newAttributeRequiredFor).first().check({ force: true });
+    cy.get(this.newAttributeRequiredWhen).first().check();
+    cy.get(this.newAttributeEmptyValidators).contains("No validators.");
+    cy.get(this.newAttributeAnnotationKey).type("test");
+    cy.get(this.newAttributeAnnotationValue).type("123");
+    return this;
+  }
+
+  addValidator() {
+    cy.get(this.validatorRolesList).contains("email").click();
+    cy.findByTestId(this.saveValidatorBtn).click();
+    cy.get(this.validatorDialogCloseBtn).click();
+    return this;
+  }
+
+  removeValidator() {
+    cy.findByTestId(this.removeValidatorBtn).click();
+    cy.findByTestId(this.deleteValidatorBtn).click();
+    return this;
+  }
+
+  cancelAddingValidator() {
+    cy.findByTestId(this.addValidatorBtn).click();
+    cy.get(this.validatorRolesList).contains("email").click();
+    cy.findByTestId(this.cancelAddingValidatorBtn).click();
+    return this;
+  }
+
+  cancelRemovingValidator() {
+    cy.findByTestId(this.removeValidatorBtn).click();
+    cy.findByTestId(this.cancelRemovingValidatorBtn).click();
+    return this;
+  }
 }

src/components/attribute-input/AttributeInput.tsx

@@ -30,7 +30,7 @@ export const AttributeInput = ({ name }: AttributeInputProps) => {
 
   useEffect(() => {
     if (!fields.length) {
-      append({ key: "", value: "" });
+      append({ key: "", value: "" }, false);
     }
   }, [fields]);
 

src/realm-settings/user-profile/attribute/AddValidatorRoleDialog.tsx

@@ -46,7 +46,12 @@ export const AddValidatorRoleDialog = ({
         >
           {t("common:save")}
         </Button>,
-        <Button key="cancel" variant="link" onClick={toggleDialog}>
+        <Button
+          key="cancel"
+          data-testid="cancel-validator-role-button"
+          variant="link"
+          onClick={toggleDialog}
+        >
           {t("common:cancel")}
         </Button>,
       ]}