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.
2026-04-25 13:25:23 +03:30
parent 2a4f3e7e4b
commit eab516c7f3
24 changed files with 814 additions and 23 deletions
@@ -0,0 +1,140 @@
+/// <reference types="cypress" />
+import { ADMIN_COLUMNS, makeAdmin } from "../../support/admin-fixtures";
+
+describe("admins management - list and resilience", () => {
+  beforeEach(() => {
+    cy.setAuthCookies();
+  });
+
+  it("renders admins page, breadcrumb, actions, and rows from API", () => {
+    const admins = [makeAdmin({}, 1), makeAdmin({ status: "inactive" }, 2)];
+    cy.mockAdminsList({ users: admins });
+
+    cy.visit("/admins");
+    cy.wait("@getAdmins");
+
+    cy.getByCy("breadcrumb-link-dashboard").should("be.visible");
+    cy.getByCy("breadcrumb-current-admins").should("contain", "Admins");
+    cy.getByCy("admins-create-button").should("be.visible");
+    cy.getByCy("admins-filter-button").should("be.visible");
+    cy.getByCy("admins-table").should("be.visible");
+    cy.get('[data-cy^="admins-table-row-"]').should("have.length", admins.length);
+  });
+
+  it("shows all expected table headers and backend row data", () => {
+    const admin = makeAdmin({
+      full_name: "John Carter",
+      email: "john.carter@example.com",
+      username: "jcarter",
+      status: "active",
+    });
+    cy.mockAdminsList({ users: [admin] });
+
+    cy.visit("/admins");
+    cy.wait("@getAdmins");
+
+    ADMIN_COLUMNS.forEach((column, index) => {
+      cy.getByCy(`admins-table-header-${index}`).should("contain", column);
+    });
+
+    cy.getByCy(`admins-table-row-${admin.id}`).within(() => {
+      cy.getByCy("admins-row-full-name").should("contain", admin.full_name);
+      cy.getByCy("admins-row-email").should("contain", admin.email);
+      cy.getByCy("admins-row-username").should("contain", admin.username);
+      cy.getByCy("admins-row-status").should("contain", "active");
+    });
+  });
+
+  it("shows empty state when API returns no admins", () => {
+    cy.mockAdminsList({ users: [], total: 0 });
+
+    cy.visit("/admins");
+    cy.wait("@getAdmins");
+
+    cy.getByCy("empty-list-message").should("contain", "No admins were found");
+    cy.get('[data-cy^="admins-table-row-"]').should("have.length", 0);
+  });
+
+  it("shows loading skeleton while list request is in flight", () => {
+    cy.mockAdminsList({ delay: 1500, users: [makeAdmin()] });
+
+    cy.visit("/admins");
+    cy.getByCy("table-skeleton").should("be.visible");
+    cy.wait("@getAdmins");
+    cy.getByCy("table-skeleton").should("not.exist");
+  });
+
+  it("handles API 500 and displays an error toast", () => {
+    cy.intercept("GET", "**/api/proxy/users**", {
+      statusCode: 500,
+      body: { error: { message: "Internal server error" } },
+    }).as("getAdmins500");
+
+    cy.visit("/admins");
+    cy.wait("@getAdmins500");
+    cy.contains("Internal server error").should("be.visible");
+  });
+
+  it("handles forbidden request with proper feedback", () => {
+    cy.intercept("GET", "**/api/proxy/users**", {
+      statusCode: 403,
+      body: { error: { message: "Forbidden" } },
+    }).as("getAdmins403");
+
+    cy.visit("/admins");
+    cy.wait("@getAdmins403");
+    cy.contains("Forbidden").should("be.visible");
+  });
+
+  it("handles network failure without UI crash", () => {
+    cy.intercept("GET", "**/api/proxy/users**", { forceNetworkError: true }).as(
+      "getAdminsNetworkError",
+    );
+
+    cy.visit("/admins");
+    cy.wait("@getAdminsNetworkError");
+    cy.getByCy("admins-page").should("be.visible");
+    cy.contains(/network|fetch|request/i).should("be.visible");
+  });
+
+  it("supports responsive usability on mobile viewport", () => {
+    cy.viewport("iphone-x");
+    cy.mockAdminsList({ users: [makeAdmin()] });
+
+    cy.visit("/admins");
+    cy.wait("@getAdmins");
+
+    cy.getByCy("admins-filter-button").should("be.visible");
+    cy.getByCy("admins-create-button").should("be.visible");
+    cy.getByCy("admins-table").should("be.visible");
+  });
+
+  it("validates pagination request behavior when pagination controls exist", () => {
+    cy.mockAdminsList({ users: Array.from({ length: 10 }).map((_, i) => makeAdmin({}, i + 1)) });
+
+    cy.visit("/admins");
+    cy.wait("@getAdmins");
+
+    cy.get("body").then(($body) => {
+      if ($body.find('[data-cy="pagination-next"]').length > 0) {
+        cy.intercept(
+          { method: "GET", url: "**/api/proxy/users**", query: { offset: "10" } },
+          {
+            statusCode: 200,
+            body: {
+              success: true,
+              message: "ok",
+              data: {
+                users: [makeAdmin({ id: "507f1f77bcf86cd799439099", full_name: "Page 2 Admin" })],
+              },
+              meta: { offset: 10, limit: 10, total: 11 },
+            },
+          },
+        ).as("getAdminsPage2");
+
+        cy.getByCy("pagination-next").click();
+        cy.wait("@getAdminsPage2");
+      }
+    });
+  });
+});