Add FlightEvents component with route-change and reroute indicators

2026-04-17 01:35:05 +03:00
parent ade7feb715
commit 0efd19ed32
2 changed files with 85 additions and 0 deletions
@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { FlightEvents } from "./FlightEvents.js";
+
+vi.mock("@/i18n/provider.js", () => ({ useTranslation: () => ({ t: (k: string) => k }) }));
+
+describe("FlightEvents", () => {
+  it("renders null when both flags are false", () => {
+    const { container } = render(<FlightEvents changeRoute={false} reroute={false} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders change-route event when changeRoute=true with description", () => {
+    render(<FlightEvents changeRoute reroute={false} showDescription />);
+    expect(screen.getByTestId("flight-event-change-route")).toBeTruthy();
+    expect(screen.getByText("SHARED.ROUTE-CHANGE")).toBeTruthy();
+  });
+
+  it("renders reroute event when reroute=true", () => {
+    render(<FlightEvents changeRoute={false} reroute showDescription />);
+    expect(screen.getByTestId("flight-event-reroute")).toBeTruthy();
+    expect(screen.getByText("SHARED.RETURN")).toBeTruthy();
+  });
+
+  it("renders both events when both flags true", () => {
+    render(<FlightEvents changeRoute reroute showDescription />);
+    expect(screen.getByTestId("flight-event-change-route")).toBeTruthy();
+    expect(screen.getByTestId("flight-event-reroute")).toBeTruthy();
+  });
+
+  it("hides descriptions when showDescription=false", () => {
+    render(<FlightEvents changeRoute reroute />);
+    expect(screen.getByTestId("flight-event-change-route")).toBeTruthy();
+    expect(screen.getByTestId("flight-event-reroute")).toBeTruthy();
+    expect(screen.queryByText("SHARED.ROUTE-CHANGE")).toBeNull();
+    expect(screen.queryByText("SHARED.RETURN")).toBeNull();
+  });
+});
@@ -0,0 +1,46 @@
+import type { FC } from "react";
+import { useTranslation } from "@/i18n/provider.js";
+
+export interface FlightEventsProps {
+  changeRoute: boolean;
+  reroute: boolean;
+  showDescription?: boolean;
+}
+
+export const FlightEvents: FC<FlightEventsProps> = ({ changeRoute, reroute, showDescription }) => {
+  const { t } = useTranslation();
+  if (!changeRoute && !reroute) return null;
+
+  return (
+    <div className="flight-events">
+      {changeRoute && (
+        <div className="flight-events__event" data-testid="flight-event-change-route">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+            <g fill="none" stroke="#f37b09" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12.356 3.497H.5" />
+              <path d="M3.29 6.286.5 3.496 3.29.707" />
+              <path d="M6.864 9.076H18.72" />
+              <path d="m15.93 6.286 2.79 2.79-2.79 2.79" />
+            </g>
+          </svg>
+          {showDescription && (
+            <span className="flight-events__description">{t("SHARED.ROUTE-CHANGE")}</span>
+          )}
+        </div>
+      )}
+      {reroute && (
+        <div className="flight-events__event" data-testid="flight-event-reroute">
+          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="6" viewBox="0 0 13 6">
+            <path
+              d="M6.125.583A6.1 6.1 0 0 0 2.1 2.1L0 0v5.25h5.25L3.138 3.138a4.65 4.65 0 0 1 7.42 2.112l1.382-.455A6.133 6.133 0 0 0 6.125.583Z"
+              fill="#c8102e"
+            />
+          </svg>
+          {showDescription && (
+            <span className="flight-events__description">{t("SHARED.RETURN")}</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};