import { expect, test } from "@playwright/test";

for (const path of ["/", "/deep/nested/midi/"]) {
  test(`inspects and edits MIDI locally at ${path}`, async ({ page }) => {
    const external: string[] = [];
    page.on("request", (request) => {
      if (!request.url().startsWith("http://127.0.0.1:4212"))
        external.push(request.url());
    });
    await page.goto(path);
    await expect(
      page.getByRole("heading", {
        name: "See, edit and hear the timeline locally.",
      }),
    ).toBeVisible();
    await expect(
      page.getByRole("img", { name: /Piano roll with 3 notes/u }),
    ).toBeVisible();
    await page.getByLabel("Semitones").fill("12");
    await page.getByRole("button", { name: "Apply transpose" }).click();
    await expect(page.getByRole("status")).toContainText("transposed");
    await expect(
      page.getByRole("heading", { name: "Event inspector" }),
    ).toBeVisible();
    expect(external).toEqual([]);
  });
}

test("keeps the installed MIDI application available offline", async ({
  page,
  context,
}) => {
  await page.goto("/");
  await page.evaluate(async () => navigator.serviceWorker.ready);
  await page.reload();
  await context.setOffline(true);
  try {
    await page.reload();
    await expect(
      page.getByRole("heading", {
        name: "See, edit and hear the timeline locally.",
      }),
    ).toBeVisible();
  } finally {
    await context.setOffline(false);
  }
});