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.
|
||||
*/
|
||||
|
||||
@@ -54,7 +54,7 @@ describe("DayDetailContent", () => {
|
||||
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 duties = [
|
||||
duty("Alice", "2025-03-01T09:00:00Z", "2025-03-01T17:00:00Z", {
|
||||
@@ -70,8 +70,8 @@ describe("DayDetailContent", () => {
|
||||
/>
|
||||
);
|
||||
expect(screen.getByText("Alice")).toBeInTheDocument();
|
||||
expect(document.querySelector('a[href^="tel:"]')).toBeInTheDocument();
|
||||
expect(document.querySelector('a[href*="t.me"]')).toBeInTheDocument();
|
||||
expect(screen.getByText(/alice_dev/)).toBeInTheDocument();
|
||||
expect(document.querySelector('a[href^="tel:"]')).toBeNull();
|
||||
expect(document.querySelector('a[href*="t.me"]')).toBeNull();
|
||||
expect(screen.queryByText(/alice_dev/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -204,7 +204,7 @@ export const DayDetail = React.forwardRef<DayDetailHandle, DayDetailProps>(
|
||||
<SheetContent
|
||||
side="bottom"
|
||||
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
|
||||
)}
|
||||
showCloseButton={false}
|
||||
|
||||
@@ -9,7 +9,6 @@ import { useMemo } from "react";
|
||||
import { useTranslation } from "@/i18n/use-translation";
|
||||
import { localDateString, dateKeyToDDMM } from "@/lib/date-utils";
|
||||
import { getDutyMarkerRows } from "@/lib/duty-marker-rows";
|
||||
import { ContactLinks } from "@/components/contact";
|
||||
import type { DutyWithUser } from "@/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
@@ -113,20 +112,13 @@ export function DayDetailContent({
|
||||
>
|
||||
{t("event_type.duty")}
|
||||
</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) => (
|
||||
<li key={r.id}>
|
||||
{r.timePrefix && (
|
||||
<span className="text-muted-foreground">{r.timePrefix} — </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>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user