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:
@@ -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 = (
|
||||
|
||||
Reference in New Issue
Block a user