add cypress test to create user

cypress/integration/users_test.spec.ts

@@ -1,9 +1,17 @@
 import SidebarPage from "../support/pages/admin_console/SidebarPage";
 import LoginPage from "../support/pages/LoginPage";
+import CreateUserPage from "../support/pages/admin_console/manage/users/CreateUserPage";
+import Masthead from "../support/pages/admin_console/Masthead";
+import ListingPage from "../support/pages/admin_console/ListingPage";
 
 describe("Users test", () => {
   const loginPage = new LoginPage();
   const sidebarPage = new SidebarPage();
+  const createUserPage = new CreateUserPage();
+  const masthead = new Masthead();
+  const listingPage = new ListingPage();
+
+  let itemId = "user_crud";
 
   describe("User creation", () => {
     beforeEach(function () {
@@ -13,10 +21,25 @@ describe("Users test", () => {
     });
 
     it("Go to create User page", () => {
-      cy.get("[data-testid=add-user").click();
+      createUserPage.goToCreateUser();
       cy.url().should("include", "users/add-user");
-      cy.get("[data-testid=cancel-create-user").click();
+
+      // Verify Cancel button works
+      createUserPage.cancel();
       cy.url().should("not.include", "/add-user");
     });
+
+    it("Create user test", function () {
+      itemId += "_" + (Math.random() + 1).toString(36).substring(7);
+ 
+      // Create
+      createUserPage.goToCreateUser();
+      createUserPage.fillRealmRoleData(itemId).save();
+
+      masthead.checkNotificationMessage("The user has been created");
+
+      sidebarPage.goToUsers();
+      listingPage.searchItem(itemId).itemExist(itemId);
+    });
   });
 });

cypress/support/pages/admin_console/manage/users/CreateUserPage.ts

@@ -0,0 +1,41 @@
+export default class CreateUserPage {
+  usernameInput: string;
+  saveBtn: string;
+  cancelBtn: string;
+
+  constructor() {
+    this.usernameInput = "#kc-username";
+
+    this.saveBtn = "[data-testid=create-user]";
+    this.cancelBtn = "[data-testid=cancel-create-user]";
+  }
+
+  //#region General Settings
+  fillRealmRoleData(username: string) {
+    cy.get(this.usernameInput).clear();
+
+    if (username) {
+      cy.get(this.usernameInput).type(username);
+    }
+
+    return this;
+  }
+
+  goToCreateUser() {
+    cy.get("[data-testid=add-user").click();
+
+    return this;
+  }
+
+  save() {
+    cy.get(this.saveBtn).click();
+
+    return this;
+  }
+
+  cancel() {
+    cy.get(this.cancelBtn).click();
+
+    return this;
+  }
+}

src/user/UserForm.tsx

@@ -224,6 +224,7 @@ export const UserForm = ({
       </FormGroup>
       <ActionGroup>
         <Button
+          data-testid="create-user"
           isDisabled={!watchUsernameInput}
           variant="primary"
           type="submit"