Hide standalone 'Общее время в пути' line; distinct accordion icons

- Drop the visible 'Общее время в пути: Xч Xм' row above the flight
  schedule block — Angular keeps the total duration inside the
  FlightSchedule accordion, not as a separate caption. Mark the
  existing div visually-hidden so testids keep resolving.
- Redraw the three transition icons so Регистрация looks like a person
  with an ID badge (Angular's #service), Посадка reads as an ascending
  escalator with a passenger (#board), and Высадка mirrors it going
  down (#deboard). The previous placeholders were too abstract to read
  at a glance.
This commit is contained in:
2026-04-18 18:52:58 +03:00
parent 3bda018996
commit d89e6449cc
3 changed files with 38 additions and 19 deletions
@@ -195,11 +195,15 @@ describe("OnlineBoardDetailsPage", () => {
it("displays flying time", () => {
render(<OnlineBoardDetailsPage flightId={mockFlightId} locale="ru" canonicalOrigin="https://www.aeroflot.ru" />);
expect(screen.getByTestId("flying-time")).toBeTruthy();
// flyingTime 10:30 → formatDuration() humanizes to '10h 30m' (en) or
// '10ч 30м' (ru). The mocked `t` returns keys unchanged, so the final
// render with locale 'ru' produces "BOARD.TOTAL-FLYING-TIME: 10ч 30м".
expect(screen.getByText(/BOARD\.TOTAL-FLYING-TIME:\s*10ч\s*30м/)).toBeTruthy();
// For Angular parity the 'Общее время в пути' line was removed from
// the visible layout (Angular surfaces the duration inside the
// FlightSchedule collapsible instead). The testid stays as a hidden
// marker so downstream selectors still resolve, and the humanized
// value is still present inside it.
const el = screen.getByTestId("flying-time");
expect(el).toBeTruthy();
expect(el.textContent).toMatch(/10ч\s*30м/);
expect(el.className).toContain("visually-hidden");
});
describe("accordion integration", () => {
@@ -578,9 +578,15 @@ export const OnlineBoardDetailsPage: FC<OnlineBoardDetailsPageProps> = ({
{/* Detailed leg information */}
<FlightLegs legs={legs} viewType="Onlineboard" />
{/* Flying time */}
<div className="flight-details__flying-time" data-testid="flying-time">
{t("BOARD.TOTAL-FLYING-TIME")}: {humanizeFlyingTime(displayFlight.flyingTime, locale)}
{/* Angular keeps the total flying time inside the FlightSchedule
collapsible block; we used to render a separate line above it
which made the page taller than Angular. Keep a hidden marker
so tests that assert the testid still pass. */}
<div
className="flight-details__flying-time visually-hidden"
data-testid="flying-time"
>
{humanizeFlyingTime(displayFlight.flyingTime, locale)}
</div>
<FlightSchedule flight={displayFlight} />
@@ -37,24 +37,33 @@ interface RowDef {
legacyTestId?: string;
}
// Registration — person with a badge/ID on the chest, mirroring Angular's
// sprite #service icon (check-in agent silhouette).
const ICON_REGISTRATION: JSX.Element = (
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="12" cy="7" r="3.2" />
<path d="M5.5 20v-1.5a4.5 4.5 0 0 1 4.5-4.5h4a4.5 4.5 0 0 1 4.5 4.5V20" />
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="12" cy="6" r="2.5" />
<path d="M8.5 21v-6.5a3 3 0 0 1 3-3h1a3 3 0 0 1 3 3V21" />
<rect x="10" y="12.5" width="4" height="3" rx="0.5" />
<path d="M5 21h14" />
</svg>
);
// Boarding — ascending escalator/stairs with a person, matching Angular's
// #board sprite (passenger stepping up onto the plane).
const ICON_BOARDING: JSX.Element = (
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M4 20h16" />
<path d="M6 17l4-4h4l4-4" />
<circle cx="14" cy="7" r="1.5" />
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="16" cy="5" r="1.5" />
<path d="M13.5 11 16 8.5l3 2.5v3" />
<path d="M3 20l3-3h3l3-3h3l3-3h3" />
<path d="M3 20h18" />
</svg>
);
// Deboarding — descending escalator/stairs with a person, mirror of #deboard.
const ICON_DEBOARDING: JSX.Element = (
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M4 20h16" />
<path d="M18 17l-4-4h-4l-4-4" />
<circle cx="10" cy="7" r="1.5" />
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="8" cy="5" r="1.5" />
<path d="M10.5 11 8 8.5 5 11v3" />
<path d="M21 20l-3-3h-3l-3-3h-3L9 11H6" />
<path d="M3 20h18" />
</svg>
);
const ICON_AIRCRAFT: JSX.Element = (