feat(tests, components): enhance Cypress commands and UI elements for improved testing and accessibility

- Added new Cypress commands for mocking admin-related API interactions, including list, create, update, delete, and change status functionalities.
- Introduced data-cy attributes across various components (e.g., Breadcrumbs, Forms, Tables) to improve testability and accessibility.
- Updated existing components to support new data-cy attributes for better integration with Cypress tests.

cypress/support/admin-fixtures.ts

@@ -0,0 +1,30 @@
+export type AdminRecord = {
+  id: string;
+  full_name: string;
+  email: string;
+  username: string;
+  status: "active" | "inactive";
+  role?: string;
+};
+
+export const ADMIN_COLUMNS = [
+  "row",
+  "full name",
+  "email",
+  "username",
+  "status",
+  "actions",
+];
+
+export const makeAdmin = (
+  overrides: Partial<AdminRecord> = {},
+  index = 1,
+): AdminRecord => ({
+  id: `507f1f77bcf86cd7994390${(10 + index).toString().padStart(2, "0")}`,
+  full_name: `E2E Admin ${index}`,
+  email: `e2e-admin-${index}@example.com`,
+  username: `e2e-admin-${index}`,
+  status: "active",
+  role: "admin",
+  ...overrides,
+});

cypress/support/commands.ts

@@ -6,6 +6,16 @@ const AUTH_COOKIE_KEYS = {
   user: "TENDER_PANEL_user",
 } as const;
 
+const createAdminUser = (overrides: Partial<Record<string, any>> = {}) => ({
+  id: "507f1f77bcf86cd799439012",
+  full_name: "E2E Admin One",
+  username: "e2e-admin-one",
+  email: "e2e-admin-one@example.com",
+  role: "admin",
+  status: "active",
+  ...overrides,
+});
+
 Cypress.Commands.add("loginAsAdmin", () => {
   cy.session(
     "admin-session",
@@ -35,3 +45,103 @@ Cypress.Commands.add("loginAsAdmin", () => {
     },
   );
 });
+
+Cypress.Commands.add("getByCy", (value: string) => cy.get(`[data-cy="${value}"]`));
+
+Cypress.Commands.add("setAuthCookies", (userOverrides = {}) => {
+  cy.setCookie(AUTH_COOKIE_KEYS.accessToken, "e2e-access-token");
+  cy.setCookie(AUTH_COOKIE_KEYS.refreshToken, "e2e-refresh-token");
+  cy.setCookie(
+    AUTH_COOKIE_KEYS.user,
+    encodeURIComponent(
+      JSON.stringify(
+        createAdminUser({
+          id: "507f1f77bcf86cd799439011",
+          ...userOverrides,
+        }),
+      ),
+    ),
+  );
+});
+
+Cypress.Commands.add("mockAdminsList", (options = {}) => {
+  const users = options.users ?? [createAdminUser()];
+  const offset = options.offset ?? 0;
+  const limit = options.limit ?? 10;
+  const total = options.total ?? users.length;
+  const statusCode = options.statusCode ?? 200;
+  const delay = options.delay ?? 0;
+  const query = options.query;
+
+  cy.intercept(
+    {
+      method: "GET",
+      url: "**/api/proxy/users**",
+      query,
+    },
+    (req) => {
+      req.reply({
+        delay,
+        statusCode,
+        body: {
+          success: statusCode < 400,
+          message: statusCode < 400 ? "ok" : "failed",
+          data: { users },
+          meta: { offset, limit, total },
+        },
+      });
+    },
+  ).as(options.alias ?? "getAdmins");
+});
+
+Cypress.Commands.add("mockCreateAdmin", (options = {}) => {
+  const statusCode = options.statusCode ?? 201;
+  cy.intercept("POST", "**/api/proxy/users", {
+    statusCode,
+    body: options.body ?? {
+      success: statusCode < 400,
+      message: options.message ?? "Admin created successfully",
+      data: {},
+    },
+    delay: options.delay ?? 0,
+  }).as(options.alias ?? "createAdmin");
+});
+
+Cypress.Commands.add("mockUpdateAdmin", (id: string, options = {}) => {
+  const statusCode = options.statusCode ?? 200;
+  cy.intercept("PUT", `**/api/proxy/users/${id}`, {
+    statusCode,
+    body: options.body ?? {
+      success: statusCode < 400,
+      message: options.message ?? "Admin updated successfully",
+      data: {},
+    },
+    delay: options.delay ?? 0,
+  }).as(options.alias ?? "updateAdmin");
+});
+
+Cypress.Commands.add("mockDeleteAdmin", (id: string, options = {}) => {
+  const statusCode = options.statusCode ?? 200;
+  cy.intercept("DELETE", `**/api/proxy/users/${id}`, {
+    statusCode,
+    body: options.body ?? {
+      success: statusCode < 400,
+      message: options.message ?? "Admin deleted successfully",
+      data: {},
+    },
+    delay: options.delay ?? 0,
+  }).as(options.alias ?? "deleteAdmin");
+});
+
+Cypress.Commands.add("mockChangeAdminStatus", (id: string, options = {}) => {
+  const statusCode = options.statusCode ?? 200;
+  cy.intercept("PUT", `**/api/proxy/users/${id}/status`, {
+    statusCode,
+    body: options.body ?? {
+      success: statusCode < 400,
+      message: options.message ?? "Status changed successfully",
+      data: {},
+    },
+    delay: options.delay ?? 0,
+  }).as(options.alias ?? "changeAdminStatus");
+});

cypress/support/index.d.ts

@@ -2,8 +2,37 @@
 
 declare global {
   namespace Cypress {
+    interface AdminListMockOptions {
+      users?: Record<string, any>[];
+      offset?: number;
+      limit?: number;
+      total?: number;
+      statusCode?: number;
+      delay?: number;
+      alias?: string;
+      query?: Record<string, string | number>;
+    }
+
+    interface MutationMockOptions {
+      statusCode?: number;
+      delay?: number;
+      alias?: string;
+      message?: string;
+      body?: Record<string, any>;
+    }
+
     interface Chainable {
       loginAsAdmin(): Chainable<void>;
+      getByCy(value: string): Chainable<JQuery<HTMLElement>>;
+      setAuthCookies(userOverrides?: Partial<Record<string, any>>): Chainable<void>;
+      mockAdminsList(options?: AdminListMockOptions): Chainable<void>;
+      mockCreateAdmin(options?: MutationMockOptions): Chainable<void>;
+      mockUpdateAdmin(id: string, options?: MutationMockOptions): Chainable<void>;
+      mockDeleteAdmin(id: string, options?: MutationMockOptions): Chainable<void>;
+      mockChangeAdminStatus(
+        id: string,
+        options?: MutationMockOptions,
+      ): Chainable<void>;
     }
   }
 }