New Cypress Test | Search using username | User Tab (#6478)

* Username search cypress test

* import error

cypress/e2e/users_spec/user_homepage.cy.ts

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+
+import { cy, describe, before, beforeEach, it, afterEach } from "local-cypress";
+import LoginPage from "../../pageobject/Login/LoginPage";
+import { UserPage } from "../../pageobject/Users/UserSearch";
+
+describe("Asset Tab", () => {
+  const userPage = new UserPage();
+  const usernameToTest = "devdoctor";
+  const currentuser = "devdistrictadmin";
+  const loginPage = new LoginPage();
+  before(() => {
+    loginPage.loginAsDisctrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.awaitUrl("/users");
+  });
+
+  it("Search by username", () => {
+    userPage.checkSearchInputVisibility();
+    userPage.typeInSearchInput(usernameToTest);
+    userPage.checkUrlForUsername(usernameToTest);
+    userPage.checkUsernameText(usernameToTest);
+    userPage.checkUsernameBadgeVisibility(true);
+    userPage.clearSearchInput();
+    userPage.checkUsernameBadgeVisibility(false);
+    userPage.typeInSearchInput(usernameToTest);
+    userPage.checkUsernameText(usernameToTest);
+    userPage.clickRemoveIcon();
+    userPage.checkUsernameBadgeVisibility(false);
+    userPage.checkUsernameText(currentuser);
+  });
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+});

cypress/pageobject/Users/UserSearch.ts

@@ -0,0 +1,37 @@
+// UserPage.ts
+export class UserPage {
+  // Element selectors
+  searchByUsernameInput = "#search-by-username";
+  usernameText = "#username";
+  usernameBadge = "[data-testid='Username']";
+  removeIcon = "#removeicon";
+
+  checkSearchInputVisibility() {
+    cy.get(this.searchByUsernameInput).should("be.visible");
+  }
+
+  typeInSearchInput(text: string) {
+    cy.get(this.searchByUsernameInput).click().type(text);
+  }
+
+  clearSearchInput() {
+    cy.get(this.searchByUsernameInput).click().clear();
+  }
+
+  checkUrlForUsername(username: string) {
+    cy.url().should("include", `username=${username}`);
+  }
+
+  checkUsernameText(username: string) {
+    cy.get(this.usernameText).should("have.text", username);
+  }
+
+  checkUsernameBadgeVisibility(shouldBeVisible: boolean) {
+    const assertion = shouldBeVisible ? "be.visible" : "not.be.visible";
+    cy.get(this.usernameBadge).should(assertion);
+  }
+
+  clickRemoveIcon() {
+    cy.get(this.removeIcon).click();
+  }
+}

src/CAREUI/display/FilterBadge.tsx

@@ -18,6 +18,7 @@ const FilterBadge = ({ name, value, onRemove }: FilterBadgeProps) => {
     >
       {`${name}: ${value}`}
       <i
+        id="removeicon"
         className="fas fa-times ml-2 cursor-pointer rounded-full px-1 py-0.5 hover:bg-gray-500"
         onClick={onRemove}
       ></i>

src/Components/Users/ManageUsers.tsx

@@ -543,6 +543,7 @@ export default function ManageUsers() {
         <div className="col-span-2 my-2 flex flex-col justify-between space-y-3 lg:flex-row lg:space-x-4 lg:space-y-0 lg:px-3">
           <div className="w-full">
             <SearchInput
+              id="search-by-username"
               name="username"
               onChange={(e) => updateQuery({ [e.name]: e.value })}
               value={qParams.username}