Nikolay Tatarinov
50d734e192
- Replaced the loading skeleton with a compact loading placeholder to improve user experience when data is not yet loaded for the month. - Enhanced the rendering logic to ensure the loading state is visually distinct and does not display the skeleton when data is being fetched. - Updated related tests to verify the new loading behavior and ensure accurate feedback during data fetching.
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
/**
|
|
* Unit tests for DutyList: renders timeline, flip card with contacts, duty items.
|
|
* Ported from webapp/js/dutyList.test.js.
|
|
*/
|
|
|
|
import { describe, it, expect, beforeEach } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { DutyList } from "./DutyList";
|
|
import { useAppStore } from "@/store/app-store";
|
|
import { resetAppStore } from "@/test/test-utils";
|
|
import type { DutyWithUser } from "@/types";
|
|
|
|
function duty(
|
|
full_name: string,
|
|
start_at: string,
|
|
end_at: string,
|
|
extra: Partial<DutyWithUser> = {}
|
|
): DutyWithUser {
|
|
return {
|
|
id: 1,
|
|
user_id: 1,
|
|
full_name,
|
|
start_at,
|
|
end_at,
|
|
event_type: "duty",
|
|
phone: null,
|
|
username: null,
|
|
...extra,
|
|
};
|
|
}
|
|
|
|
describe("DutyList", () => {
|
|
beforeEach(() => {
|
|
resetAppStore();
|
|
useAppStore.getState().setCurrentMonth(new Date(2025, 1, 1)); // Feb 2025
|
|
});
|
|
|
|
it("renders no duties message when duties empty and data loaded for month", () => {
|
|
useAppStore.getState().setDuties([]);
|
|
useAppStore.getState().batchUpdate({ dataForMonthKey: "2025-02" });
|
|
render(<DutyList />);
|
|
expect(screen.getByText(/No duties this month/i)).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders compact loading placeholder when data not yet loaded for month (no skeleton)", () => {
|
|
useAppStore.getState().setDuties([]);
|
|
useAppStore.getState().batchUpdate({ dataForMonthKey: null });
|
|
render(<DutyList />);
|
|
expect(screen.queryByText(/No duties this month/i)).not.toBeInTheDocument();
|
|
expect(document.querySelector('[aria-busy="true"]')).toBeInTheDocument();
|
|
expect(document.querySelector('[data-slot="skeleton"]')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("renders duty with full_name and time range", () => {
|
|
useAppStore.getState().setDuties([
|
|
duty("Иванов", "2025-02-25T09:00:00Z", "2025-02-25T18:00:00Z"),
|
|
]);
|
|
useAppStore.getState().setCurrentMonth(new Date(2025, 1, 1));
|
|
useAppStore.getState().batchUpdate({ dataForMonthKey: "2025-02" });
|
|
render(<DutyList />);
|
|
expect(screen.getByText("Иванов")).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders flip card with contact links when phone or username present", () => {
|
|
useAppStore.getState().setDuties([
|
|
duty("Alice", "2025-03-01T09:00:00Z", "2025-03-01T17:00:00Z", {
|
|
phone: "+79991234567",
|
|
username: "alice_dev",
|
|
}),
|
|
]);
|
|
useAppStore.getState().setCurrentMonth(new Date(2025, 2, 1));
|
|
useAppStore.getState().batchUpdate({ dataForMonthKey: "2025-03" });
|
|
render(<DutyList />);
|
|
expect(screen.getAllByText("Alice").length).toBeGreaterThanOrEqual(1);
|
|
expect(document.querySelector('a[href^="tel:"]')).toBeInTheDocument();
|
|
expect(document.querySelector('a[href*="t.me"]')).toBeInTheDocument();
|
|
});
|
|
});
|