OpenFrontIO/tests/client/GameStatsModal.test.ts

import {
  afterAll,
  afterEach,
  beforeAll,
  beforeEach,
  describe,
  expect,
  it,
  vi,
} from "vitest";

vi.mock("../../src/client/Utils", () => ({
  translateText: vi.fn((key: string) => key),
}));

vi.mock("../../src/client/components/baseComponents/stats/GameInfoView", () => {
  class FakeGameInfoView extends HTMLElement {}
  if (!customElements.get("game-info-view")) {
    customElements.define("game-info-view", FakeGameInfoView);
  }
  return { GameInfoView: FakeGameInfoView };
});

import { GameStatsModal } from "../../src/client/GameStatsModal";
import { modalRouter } from "../../src/client/ModalRouter";
import { initNavigation } from "../../src/client/Navigation";

type ModalShell = HTMLElement & { updateComplete: Promise<boolean> };

describe("public game stats route", () => {
  let modal: GameStatsModal;
  let playPage: HTMLElement;

  beforeAll(() => {
    playPage = document.createElement("div");
    playPage.id = "page-play";
    document.body.appendChild(playPage);
    initNavigation();
  });

  afterAll(() => {
    playPage.remove();
  });

  beforeEach(async () => {
    history.replaceState(null, "", "/");
    modalRouter.register("stats", {
      tag: "game-stats-modal",
      pageId: "page-stats",
    });
    if (!customElements.get("game-stats-modal")) {
      customElements.define("game-stats-modal", GameStatsModal);
    }

    modal = document.createElement("game-stats-modal") as GameStatsModal;
    modal.id = "page-stats";
    modal.setAttribute("inline", "");
    modal.className = "hidden page-content";
    document.body.appendChild(modal);
    await modal.updateComplete;
  });

  afterEach(() => {
    window.showPage?.("page-play");
    modal.remove();
    history.replaceState(null, "", "/");
  });

  it("opens a shared gameID without mounting the authenticated account", async () => {
    history.replaceState(null, "", "/#modal=stats&gameID=public-game");

    expect(modalRouter.routeFromHash()).toBe(true);

    await vi.waitFor(async () => {
      await modal.updateComplete;
      const shell = modal.querySelector("o-modal") as ModalShell | null;
      await shell?.updateComplete;
      const statsView = modal.querySelector("game-info-view") as
        | (HTMLElement & { gameId: string | null })
        | null;
      expect(modal.isOpen()).toBe(true);
      expect(statsView?.gameId).toBe("public-game");
    });

    expect(document.querySelector("account-modal")).toBeNull();
    expect(window.location.hash).toBe("#modal=stats&gameID=public-game");

    const backButton = modal.querySelector(
      '[slot="header"] button',
    ) as HTMLButtonElement;
    backButton.click();

    expect(modal.isOpen()).toBe(false);
    expect(window.location.hash).toBe("");
  });
});