refactor: update DayDetail component and tests for clarity and functionality
Some checks failed
CI / lint-and-test (push) Failing after 28s
Some checks failed
CI / lint-and-test (push) Failing after 28s
- Revised unit tests for DayDetailContent to reflect changes in duty entry display, ensuring only time and name are shown without contact links. - Updated styling in DayDetail component to enhance visual consistency with background color adjustments. - Removed unused ContactLinks component from DayDetailContent to streamline the code and improve readability.
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
/**
|
/**
|
||||||
* Unit tests for DayDetailContent: sorts duties by start_at, includes contact info.
|
* Unit tests for DayDetailContent: sorts duties by start_at; duty entries show time and name only (no contact links).
|
||||||
* Ported from webapp/js/dayDetail.test.js buildDayDetailContent.
|
* Ported from webapp/js/dayDetail.test.js buildDayDetailContent.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -54,7 +54,7 @@ describe("DayDetailContent", () => {
|
|||||||
expect(ivanovPos).toBeLessThan(petrovPos);
|
expect(ivanovPos).toBeLessThan(petrovPos);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("includes contact info (phone, username) for duty entries when present", () => {
|
it("shows duty time and name on one line and does not show contact links", () => {
|
||||||
const dateKey = "2025-03-01";
|
const dateKey = "2025-03-01";
|
||||||
const duties = [
|
const duties = [
|
||||||
duty("Alice", "2025-03-01T09:00:00Z", "2025-03-01T17:00:00Z", {
|
duty("Alice", "2025-03-01T09:00:00Z", "2025-03-01T17:00:00Z", {
|
||||||
@@ -70,8 +70,8 @@ describe("DayDetailContent", () => {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
expect(screen.getByText("Alice")).toBeInTheDocument();
|
expect(screen.getByText("Alice")).toBeInTheDocument();
|
||||||
expect(document.querySelector('a[href^="tel:"]')).toBeInTheDocument();
|
expect(document.querySelector('a[href^="tel:"]')).toBeNull();
|
||||||
expect(document.querySelector('a[href*="t.me"]')).toBeInTheDocument();
|
expect(document.querySelector('a[href*="t.me"]')).toBeNull();
|
||||||
expect(screen.getByText(/alice_dev/)).toBeInTheDocument();
|
expect(screen.queryByText(/alice_dev/)).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -204,7 +204,7 @@ export const DayDetail = React.forwardRef<DayDetailHandle, DayDetailProps>(
|
|||||||
<SheetContent
|
<SheetContent
|
||||||
side="bottom"
|
side="bottom"
|
||||||
className={cn(
|
className={cn(
|
||||||
"rounded-t-2xl pt-3 pb-[calc(24px+env(safe-area-inset-bottom,0px))] max-h-[70vh]",
|
"rounded-t-2xl pt-3 pb-[calc(24px+env(safe-area-inset-bottom,0px))] max-h-[70vh] bg-[var(--surface)]",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
showCloseButton={false}
|
showCloseButton={false}
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ import { useMemo } from "react";
|
|||||||
import { useTranslation } from "@/i18n/use-translation";
|
import { useTranslation } from "@/i18n/use-translation";
|
||||||
import { localDateString, dateKeyToDDMM } from "@/lib/date-utils";
|
import { localDateString, dateKeyToDDMM } from "@/lib/date-utils";
|
||||||
import { getDutyMarkerRows } from "@/lib/duty-marker-rows";
|
import { getDutyMarkerRows } from "@/lib/duty-marker-rows";
|
||||||
import { ContactLinks } from "@/components/contact";
|
|
||||||
import type { DutyWithUser } from "@/types";
|
import type { DutyWithUser } from "@/types";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
@@ -113,20 +112,13 @@ export function DayDetailContent({
|
|||||||
>
|
>
|
||||||
{t("event_type.duty")}
|
{t("event_type.duty")}
|
||||||
</h3>
|
</h3>
|
||||||
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-2.5 [&_li]:flex [&_li]:flex-col [&_li]:gap-1">
|
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-1">
|
||||||
{dutyRows.map((r) => (
|
{dutyRows.map((r) => (
|
||||||
<li key={r.id}>
|
<li key={r.id}>
|
||||||
{r.timePrefix && (
|
{r.timePrefix && (
|
||||||
<span className="text-muted-foreground">{r.timePrefix} — </span>
|
<span className="text-muted-foreground">{r.timePrefix} — </span>
|
||||||
)}
|
)}
|
||||||
<span className="font-semibold">{r.fullName}</span>
|
<span className="font-semibold">{r.fullName}</span>
|
||||||
<ContactLinks
|
|
||||||
phone={r.phone}
|
|
||||||
username={r.username}
|
|
||||||
layout="inline"
|
|
||||||
showLabels={true}
|
|
||||||
className="text-[0.85rem] mt-0.5"
|
|
||||||
/>
|
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
Reference in New Issue
Block a user