Add DeboardingPanel component for flight details accordion

2026-04-16 22:29:03 +03:00
parent 064b7c68ee
commit c9cfc5907c
2 changed files with 134 additions and 0 deletions
@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DeboardingPanel } from "./DeboardingPanel.js";
+import type { IFlightTransitionItem, IFlightLegArrivalStation } from "../../types.js";
+
+vi.mock("@/i18n/provider.js", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+const baseItem: IFlightTransitionItem = {
+  start: {
+    dayChange: { value: 0, title: "" },
+    local: "13:00",
+    localTime: "13:00",
+    tzOffset: 3,
+    utc: "10:00",
+  },
+  end: {
+    dayChange: { value: 0, title: "" },
+    local: "13:30",
+    localTime: "13:30",
+    tzOffset: 3,
+    utc: "10:30",
+  },
+  status: "InProgress",
+  isActual: true,
+};
+
+const arrival: IFlightLegArrivalStation = {
+  scheduled: { airport: "SVO", airportCode: "SVO", city: "Moscow", cityCode: "MOW", countryCode: "RU" },
+  latest: { airport: "SVO", airportCode: "SVO", city: "Moscow", cityCode: "MOW", countryCode: "RU" },
+  dispatch: "Terminal D",
+  gate: "B23",
+  terminal: "D",
+  bagBelt: "5",
+  times: {
+    scheduledArrival: { dayChange: { value: 0, title: "" }, local: "", localTime: "", tzOffset: 0, utc: "" },
+  },
+};
+
+describe("DeboardingPanel", () => {
+  it("renders transition times and status", () => {
+    render(<DeboardingPanel item={baseItem} arrival={arrival} />);
+    expect(screen.getByText("13:00")).toBeTruthy();
+    expect(screen.getByText("DETAILS.STATUS_IN_PROGRESS")).toBeTruthy();
+  });
+
+  it("renders terminal, gate, baggage belt from arrival", () => {
+    render(<DeboardingPanel item={baseItem} arrival={arrival} />);
+    expect(screen.getByText("D")).toBeTruthy();
+    expect(screen.getByText("5")).toBeTruthy();
+  });
+
+  it("omits terminal row when arrival has no terminal", () => {
+    const noTerminal = { ...arrival, terminal: undefined };
+    render(<DeboardingPanel item={baseItem} arrival={noTerminal} />);
+    expect(screen.queryByText("DETAILS.TERMINAL")).toBeNull();
+  });
+
+  it("omits bag belt row when arrival has no bagBelt", () => {
+    const noBelt = { ...arrival, bagBelt: undefined };
+    render(<DeboardingPanel item={baseItem} arrival={noBelt} />);
+    expect(screen.queryByText("DETAILS.BAG_BELT")).toBeNull();
+  });
+
+  it("has data-testid", () => {
+    render(<DeboardingPanel item={baseItem} arrival={arrival} />);
+    expect(screen.getByTestId("deboarding-panel")).toBeTruthy();
+  });
+});
@@ -0,0 +1,63 @@
+import type { FC } from "react";
+import { useTranslation } from "@/i18n/provider.js";
+import type {
+  IFlightTransitionItem,
+  IFlightLegArrivalStation,
+  FlightTransitionStatus,
+} from "../../types.js";
+import "./panels.scss";
+
+const STATUS_KEYS: Record<FlightTransitionStatus, string> = {
+  Finished: "DETAILS.STATUS_FINISHED",
+  Expected: "DETAILS.STATUS_EXPECTED",
+  InProgress: "DETAILS.STATUS_IN_PROGRESS",
+  Specified: "DETAILS.STATUS_SPECIFIED",
+  Scheduled: "DETAILS.STATUS_SCHEDULED",
+};
+
+export interface DeboardingPanelProps {
+  item: IFlightTransitionItem;
+  arrival: IFlightLegArrivalStation;
+}
+
+export const DeboardingPanel: FC<DeboardingPanelProps> = ({ item, arrival }) => {
+  const { t } = useTranslation();
+  const hasEnd = Boolean(item.end?.local);
+
+  return (
+    <div className="details-panel" data-testid="deboarding-panel">
+      <div className="details-panel__row">
+        <span className="details-panel__label">{t("DETAILS.STATUS")}</span>
+        <span className="details-panel__status">{t(STATUS_KEYS[item.status])}</span>
+      </div>
+      <div className="details-panel__row">
+        <span className="details-panel__label">{t("DETAILS.SCHEDULED")}</span>
+        <span className="details-panel__value">{item.start.local}</span>
+      </div>
+      {hasEnd && (
+        <div className="details-panel__row">
+          <span className="details-panel__label">{t("DETAILS.ACTUAL")}</span>
+          <span className="details-panel__value">{item.end.local}</span>
+        </div>
+      )}
+      {arrival.terminal && (
+        <div className="details-panel__row">
+          <span className="details-panel__label">{t("DETAILS.TERMINAL")}</span>
+          <span className="details-panel__value">{arrival.terminal}</span>
+        </div>
+      )}
+      {arrival.gate && (
+        <div className="details-panel__row">
+          <span className="details-panel__label">{t("DETAILS.GATE")}</span>
+          <span className="details-panel__value">{arrival.gate}</span>
+        </div>
+      )}
+      {arrival.bagBelt && (
+        <div className="details-panel__row">
+          <span className="details-panel__label">{t("DETAILS.BAG_BELT")}</span>
+          <span className="details-panel__value">{arrival.bagBelt}</span>
+        </div>
+      )}
+    </div>
+  );
+};