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.
This commit is contained in:
AmirReza Jamali
@@ -0,0 +1,37 @@
|
||||
/// <reference types="cypress" />
|
||||
export {};
|
||||
|
||||
Cypress.env("AUTO_LOGIN", false);
|
||||
|
||||
describe("admins management - authentication and route protection", () => {
|
||||
after(() => {
|
||||
Cypress.env("AUTO_LOGIN", true);
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
cy.clearCookies();
|
||||
cy.clearLocalStorage();
|
||||
});
|
||||
|
||||
it("redirects unauthorized users to login page", () => {
|
||||
cy.visit("/admins");
|
||||
cy.location("pathname").should("eq", "/auth/sign-in");
|
||||
});
|
||||
|
||||
it("handles expired token by redirecting to login after refresh failure", () => {
|
||||
cy.setAuthCookies();
|
||||
cy.intercept("GET", "**/api/proxy/users**", {
|
||||
statusCode: 401,
|
||||
body: { error: { message: "Token expired" } },
|
||||
}).as("getAdmins401");
|
||||
cy.intercept("POST", "**/api/proxy/profile/refresh-token", {
|
||||
statusCode: 401,
|
||||
body: { error: { message: "Refresh token expired" } },
|
||||
}).as("refresh401");
|
||||
|
||||
cy.visit("/admins");
|
||||
cy.wait("@getAdmins401");
|
||||
cy.wait("@refresh401");
|
||||
cy.location("pathname").should("eq", "/auth/sign-in");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,168 @@
|
||||
/// <reference types="cypress" />
|
||||
import { makeAdmin } from "../../support/admin-fixtures";
|
||||
|
||||
describe("admins management - create, edit, delete, status", () => {
|
||||
beforeEach(() => {
|
||||
cy.setAuthCookies();
|
||||
cy.mockAdminsList({ users: [makeAdmin()] });
|
||||
});
|
||||
|
||||
it("validates create form required fields and invalid email", () => {
|
||||
cy.visit("/admins/create");
|
||||
cy.getByCy("admin-form-submit-button").click();
|
||||
|
||||
cy.contains("This field is required").should("be.visible");
|
||||
cy.getByCy("admin-form-email-input").type("invalid-email");
|
||||
cy.getByCy("admin-form-submit-button").click();
|
||||
cy.contains("Email address is invalid").should("be.visible");
|
||||
});
|
||||
|
||||
it("handles duplicate username response on create", () => {
|
||||
cy.mockCreateAdmin({
|
||||
statusCode: 409,
|
||||
body: { error: { message: "Username already exists" } },
|
||||
alias: "createAdminConflict",
|
||||
});
|
||||
|
||||
cy.visit("/admins/create");
|
||||
cy.getByCy("admin-form-full-name-input").type("Create Admin Name");
|
||||
cy.getByCy("admin-form-username-input").type("existinguser");
|
||||
cy.getByCy("admin-form-email-input").type("existing-user@example.com");
|
||||
cy.getByCy("admin-form-password-input").type("Secret123!");
|
||||
cy.getByCy("admin-form-submit-button").click();
|
||||
|
||||
cy.wait("@createAdminConflict");
|
||||
cy.contains("Username already exists").should("be.visible");
|
||||
cy.location("pathname").should("eq", "/admins/create");
|
||||
});
|
||||
|
||||
it("creates admin successfully and shows new row + success toast", () => {
|
||||
cy.mockCreateAdmin({ alias: "createAdminSuccess" });
|
||||
cy.mockAdminsList({
|
||||
alias: "getAdminsAfterCreate",
|
||||
users: [makeAdmin({}, 1), makeAdmin({ id: "507f1f77bcf86cd799439077", full_name: "New Admin" }, 7)],
|
||||
});
|
||||
|
||||
cy.visit("/admins/create");
|
||||
cy.getByCy("admin-form-full-name-input").type("New Admin");
|
||||
cy.getByCy("admin-form-username-input").type("newadmin");
|
||||
cy.getByCy("admin-form-email-input").type("newadmin@example.com");
|
||||
cy.getByCy("admin-form-password-input").type("Secret123!");
|
||||
cy.getByCy("admin-form-submit-button").click();
|
||||
|
||||
cy.wait("@createAdminSuccess");
|
||||
cy.location("pathname").should("eq", "/admins");
|
||||
cy.wait("@getAdminsAfterCreate");
|
||||
cy.contains("New Admin").should("be.visible");
|
||||
cy.contains(/success|created/i).should("be.visible");
|
||||
});
|
||||
|
||||
it("opens edit form prefilled and updates admin successfully", () => {
|
||||
const admin = makeAdmin(
|
||||
{
|
||||
id: "507f1f77bcf86cd799439055",
|
||||
full_name: "Old Name",
|
||||
username: "oldnameadmin",
|
||||
},
|
||||
5,
|
||||
);
|
||||
cy.mockAdminsList({ users: [admin] });
|
||||
cy.intercept("GET", `**/api/proxy/users/${admin.id}`, {
|
||||
statusCode: 200,
|
||||
body: { success: true, message: "ok", data: admin },
|
||||
}).as("getAdminDetails");
|
||||
cy.mockUpdateAdmin(admin.id, { alias: "updateAdminSuccess" });
|
||||
|
||||
cy.visit("/admins");
|
||||
cy.contains("Old Name").should("be.visible");
|
||||
cy.getByCy(`admins-row-edit-${admin.id}`).click();
|
||||
cy.wait("@getAdminDetails");
|
||||
cy.location("pathname").should("eq", `/admins/edit/${admin.id}`);
|
||||
cy.getByCy("admin-form-full-name-input").should("have.value", "Old Name");
|
||||
|
||||
cy.getByCy("admin-form-full-name-input").clear().type("Updated Name");
|
||||
cy.mockAdminsList({
|
||||
alias: "getAdminsAfterUpdate",
|
||||
users: [makeAdmin({ ...admin, full_name: "Updated Name" }, 5)],
|
||||
});
|
||||
cy.getByCy("admin-form-submit-button").click();
|
||||
|
||||
cy.wait("@updateAdminSuccess");
|
||||
cy.location("pathname").should("eq", "/admins");
|
||||
cy.wait("@getAdminsAfterUpdate");
|
||||
cy.contains("Updated Name").should("be.visible");
|
||||
});
|
||||
|
||||
it("shows delete confirmation and supports cancel + confirm", () => {
|
||||
const admin = makeAdmin({ id: "507f1f77bcf86cd799439066", full_name: "Delete Me" }, 6);
|
||||
cy.mockAdminsList({ users: [admin] });
|
||||
|
||||
cy.visit("/admins");
|
||||
cy.wait("@getAdmins");
|
||||
cy.getByCy(`admins-row-delete-${admin.id}`).click();
|
||||
cy.getByCy("confirmation-modal").should("be.visible");
|
||||
cy.getByCy("confirmation-modal-cancel").click();
|
||||
cy.getByCy("confirmation-modal").should("not.exist");
|
||||
|
||||
cy.mockDeleteAdmin(admin.id, { alias: "deleteAdminSuccess" });
|
||||
cy.mockAdminsList({ alias: "getAdminsAfterDelete", users: [] });
|
||||
cy.getByCy(`admins-row-delete-${admin.id}`).click();
|
||||
cy.getByCy("confirmation-modal-confirm").click();
|
||||
|
||||
cy.wait("@deleteAdminSuccess");
|
||||
cy.wait("@getAdminsAfterDelete");
|
||||
cy.getByCy("empty-list-message").should("be.visible");
|
||||
});
|
||||
|
||||
it("changes admin status and persists after refresh", () => {
|
||||
const admin = makeAdmin({ id: "507f1f77bcf86cd799439088", status: "inactive" }, 8);
|
||||
cy.mockAdminsList({ users: [admin] });
|
||||
|
||||
cy.visit("/admins");
|
||||
cy.wait("@getAdmins");
|
||||
cy.getByCy(`admins-row-manage-status-${admin.id}`).click();
|
||||
cy.getByCy("modal-content").should("be.visible");
|
||||
cy.getByCy("admins-change-status-select").select("active");
|
||||
|
||||
cy.mockChangeAdminStatus(admin.id, { alias: "statusUpdated" });
|
||||
cy.mockAdminsList({
|
||||
alias: "getAdminsAfterStatusChange",
|
||||
users: [makeAdmin({ ...admin, status: "active" }, 8)],
|
||||
});
|
||||
|
||||
cy.getByCy("modal-confirm-button").click();
|
||||
cy.wait("@statusUpdated");
|
||||
cy.wait("@getAdminsAfterStatusChange");
|
||||
cy.getByCy(`admins-table-row-${admin.id}`).within(() => {
|
||||
cy.getByCy("admins-row-status").should("contain", "active");
|
||||
});
|
||||
|
||||
cy.reload();
|
||||
cy.wait("@getAdminsAfterStatusChange");
|
||||
cy.getByCy(`admins-table-row-${admin.id}`).within(() => {
|
||||
cy.getByCy("admins-row-status").should("contain", "active");
|
||||
});
|
||||
});
|
||||
|
||||
it("prevents duplicate create submission while request is pending", () => {
|
||||
cy.intercept("POST", "**/api/proxy/users", (req) => {
|
||||
req.reply({
|
||||
delay: 1400,
|
||||
statusCode: 201,
|
||||
body: { success: true, message: "created", data: {} },
|
||||
});
|
||||
}).as("slowCreateAdmin");
|
||||
|
||||
cy.visit("/admins/create");
|
||||
cy.getByCy("admin-form-full-name-input").type("Slow Admin");
|
||||
cy.getByCy("admin-form-username-input").type("slowadmin");
|
||||
cy.getByCy("admin-form-email-input").type("slowadmin@example.com");
|
||||
cy.getByCy("admin-form-password-input").type("Secret123!");
|
||||
cy.getByCy("admin-form-submit-button").click();
|
||||
cy.getByCy("admin-form-submit-button").should("be.disabled");
|
||||
cy.getByCy("admin-form-submit-button").find("div.animate-spin").should("exist");
|
||||
|
||||
cy.wait("@slowCreateAdmin");
|
||||
cy.get("@slowCreateAdmin.all").should("have.length", 1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
/// <reference types="cypress" />
|
||||
import { makeAdmin } from "../../support/admin-fixtures";
|
||||
|
||||
describe("admins management - filters", () => {
|
||||
beforeEach(() => {
|
||||
cy.setAuthCookies();
|
||||
});
|
||||
|
||||
it("opens filter modal and filters by search term", () => {
|
||||
const defaultUsers = [
|
||||
makeAdmin({ full_name: "John Doe", username: "johndoe", email: "john@example.com" }, 1),
|
||||
];
|
||||
const filteredUsers = [
|
||||
makeAdmin({ full_name: "Ali Reza", username: "alireza", email: "ali@example.com" }, 2),
|
||||
];
|
||||
cy.intercept("GET", "**/api/proxy/users**", (req) => {
|
||||
const isFiltered = req.query.search === "Ali";
|
||||
req.alias = isFiltered ? "getAdminsFilteredBySearch" : "getAdminsDefault";
|
||||
const users = isFiltered ? filteredUsers : defaultUsers;
|
||||
req.reply({
|
||||
statusCode: 200,
|
||||
body: {
|
||||
success: true,
|
||||
message: "ok",
|
||||
data: { users },
|
||||
meta: { offset: 0, limit: 10, total: users.length },
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
cy.visit("/admins");
|
||||
cy.wait("@getAdminsDefault");
|
||||
cy.contains("John Doe").should("be.visible");
|
||||
cy.getByCy("admins-filter-button").click();
|
||||
cy.getByCy("admins-filter-form").should("be.visible");
|
||||
cy.getByCy("admins-filter-search-input").type("Ali");
|
||||
cy.getByCy("admins-filter-submit-button").click();
|
||||
|
||||
cy.wait("@getAdminsFilteredBySearch");
|
||||
cy.contains("Ali Reza").should("be.visible");
|
||||
cy.contains("John Doe").should("not.exist");
|
||||
});
|
||||
|
||||
it("filters by status and clear resets results", () => {
|
||||
const allUsers = [
|
||||
makeAdmin({ status: "active", full_name: "Active Admin" }, 1),
|
||||
makeAdmin({ status: "inactive", full_name: "Inactive Admin" }, 2),
|
||||
];
|
||||
const inactiveUsers = [makeAdmin({ status: "inactive", full_name: "Inactive Admin" }, 3)];
|
||||
cy.intercept("GET", "**/api/proxy/users**", (req) => {
|
||||
const isInactiveFilter = req.query.status === "inactive";
|
||||
req.alias = isInactiveFilter
|
||||
? "getAdminsFilteredByStatus"
|
||||
: "getAdminsDefaultByStatus";
|
||||
req.reply({
|
||||
statusCode: 200,
|
||||
body: {
|
||||
success: true,
|
||||
message: "ok",
|
||||
data: { users: isInactiveFilter ? inactiveUsers : allUsers },
|
||||
meta: { offset: 0, limit: 10, total: isInactiveFilter ? 1 : 2 },
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
cy.visit("/admins");
|
||||
cy.wait("@getAdminsDefaultByStatus");
|
||||
cy.getByCy("admins-filter-button").click();
|
||||
cy.getByCy("admins-filter-status-select").select("inactive");
|
||||
cy.getByCy("admins-filter-submit-button").click();
|
||||
|
||||
cy.wait("@getAdminsFilteredByStatus");
|
||||
cy.location("search").should("contain", "status=inactive");
|
||||
cy.contains("Inactive Admin").should("be.visible");
|
||||
cy.contains("Active Admin").should("not.exist");
|
||||
|
||||
cy.getByCy("admins-filter-button").click();
|
||||
cy.getByCy("admins-filter-status-select-clear").click();
|
||||
cy.getByCy("admins-filter-submit-button").click();
|
||||
cy.wait("@getAdminsDefaultByStatus");
|
||||
cy.location("search").should("not.contain", "status=inactive");
|
||||
cy.contains("Active Admin").should("be.visible");
|
||||
});
|
||||
});
|
||||
@@ -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");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user