Live_RC/tests/browser_event_manager_tabs.js

import assert from "node:assert/strict";

// Regression coverage for splitting Event Manager's race-mode page into tabs (Setup /
// Format / Live / Schedule). Two things previously would have silently broken here and
// need real DOM coverage rather than a unit test:
//   1. The pre-existing "quick jump" step cards and race-summary warning links point at
//      element ids that now live inside a hidden tab panel - MANAGE_TAB_TARGETS has to
//      switch tabs first, or scrollIntoView lands on something invisible.
//   2. Opening a session's grid editor (Open Grid button, in the always-visible session
//      table above the tabs) jumps the user straight to the Live tab, since that's where
//      the grid editor itself renders.
export async function runEventManagerTabsSmoke({ evaluate, navigate, savedState, waitFor, base }) {
  const click = (id) => evaluate(`document.getElementById(${JSON.stringify(id)}).click()`);
  const patchState = async (patch) => {
    const current = await savedState();
    Object.assign(current, patch);
    const response = await fetch(base + "/api/state", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(current) });
    assert.equal(response.ok, true);
  };

  const classId = "emt_class";
  const driverA = { id: "emt_driver_a", name: "EMT Driver A", classId, transponder: "7820001" };
  const driverB = { id: "emt_driver_b", name: "EMT Driver B", classId, transponder: "7820002" };
  const raceEvent = {
    id: "emt_event", name: "EMT Event", classId, mode: "race",
    raceConfig: { participantsConfigured: true, driverIds: [driverA.id, driverB.id], teams: [] },
  };
  const qualifyingSession = { id: "emt_quali", eventId: raceEvent.id, name: "EMT Qualification", type: "qualification", startMode: "position", durationMin: 5, status: "ready" };
  const seeded = await savedState();
  await patchState({
    drivers: [...seeded.drivers, driverA, driverB],
    events: [...seeded.events, raceEvent],
    sessions: [...seeded.sessions, qualifyingSession],
  });

  const activeTab = () => evaluate(`document.querySelector(".manage-tab.active")?.dataset.manageTab`);
  const panelVisibility = () => evaluate(`
    Object.fromEntries(Array.from(document.querySelectorAll("[data-manage-panel]"))
      .map((panel) => [panel.dataset.managePanel, !panel.hidden]))
  `);

  await navigate("race_setup", "raceWizardStepForm");
  await click("event-manage-" + raceEvent.id);
  await waitFor(async () => await evaluate(`Boolean(document.querySelector(".manage-tabs"))`), "manage tabs rendered for a race-mode event");

  assert.equal(await activeTab(), "setup", "Setup is the default manage tab");
  let visible = await panelVisibility();
  assert.equal(visible.setup, true);
  assert.equal(visible.format, false);
  assert.equal(visible.live, false);
  assert.equal(visible.schedule, false);
  console.log("PASS event manager defaults to the Setup tab with only that panel visible");

  for (const tab of ["format", "live", "schedule", "setup"]) {
    await evaluate(`document.querySelector('[data-manage-tab="${tab}"]').click()`);
    assert.equal(await activeTab(), tab, `clicking the ${tab} manage tab activates it`);
    visible = await panelVisibility();
    for (const [panelId, isVisible] of Object.entries(visible)) {
      assert.equal(isVisible, panelId === tab, `after switching to ${tab}, panel ${panelId} should be ${panelId === tab ? "visible" : "hidden"}`);
    }
  }
  console.log("PASS clicking each manage tab shows only its own panel and hides the rest");

  // Still on "setup" from the loop above. The step cards above the tabs are always visible
  // and point at ids inside specific tab panels - clicking one must switch tabs first, not
  // just scroll uselessly behind a still-hidden panel.
  assert.equal(await activeTab(), "setup");
  await evaluate(`document.querySelector('[data-target="manage-generation"]').click()`);
  assert.equal(await activeTab(), "format", "the step card for session generation jumps into the Format tab, which is where manage-generation actually lives");

  await evaluate(`document.querySelector('[data-manage-tab="setup"]').click()`);
  await evaluate(`document.querySelector('[data-target="manage-live-results"]').click()`);
  assert.equal(await activeTab(), "live", "the step card for live results jumps into the Live tab");
  console.log("PASS quick-jump step cards switch to the tab their target lives in before scrolling");

  // Open Grid (in the always-visible session table above the tabs) is a separate jump path
  // with its own hard-coded activeManageTab = "live" assignment - cover it independently.
  await evaluate(`document.querySelector('[data-manage-tab="schedule"]').click()`);
  assert.equal(await activeTab(), "schedule");
  await click("session-grid-" + qualifyingSession.id);
  await waitFor(async () => (await activeTab()) === "live", "opening a session's grid switches to the Live tab");
  visible = await panelVisibility();
  assert.equal(visible.live, true);
  assert.equal(visible.schedule, false);
  console.log("PASS opening a session's grid editor switches to the Live tab");
}