import { execFileSync } from "node:child_process";
import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("GitHub and GitLab images still render and expand in a PR gallery", WEB, async ({t3, app, screen, browser}) => {
  await browser.setViewport({width:1440,height:1100});
  const project=await t3.project("Attachment demo");
  execFileSync("git",["remote","add","origin",process.env.AZURE_PROOF_REMOTE!],{cwd:project});
  const thread=await t3.thread({project,title:"Attachment preview",messages:["Show the demo"]});
  await t3.open(thread);
  await t3.open("/pull-requests");
  await screen.getByText("Repro attachments",{exact:true}).first().tap();
  await screen.getByRole("button","Preview GitHub image").scrollIntoView();
  await browser.locator('img[alt="GitLab image"]').scrollIntoView();
  await expect.poll(() => browser.evaluate(() => ["GitHub image","GitLab image"].every(alt => [...document.querySelectorAll("img")].some(img => img.alt===alt && img.complete && img.naturalWidth>0)))).toBe(true);
  await expect.poll(() => browser.evaluate(() => [...document.querySelectorAll("video")].every(video => video.readyState>=2 || video.error!==null)), {timeout:30000}).toBe(true);
  await app.screenshot("github-gitlab-inline");
  await screen.getByRole("button","Preview GitHub image").tap();
  await expect.poll(() => browser.evaluate(() => [...document.querySelectorAll('[role="dialog"] img')].some(img => (img as HTMLImageElement).complete && (img as HTMLImageElement).naturalWidth>0))).toBe(true);
  await app.screenshot("github-expanded-gallery");
  await screen.getByRole("button","Next media").tap();
  await expect.poll(() => browser.evaluate(() => [...document.querySelectorAll('[role="dialog"] img')].some(img => (img as HTMLImageElement).alt==="GitLab image" && (img as HTMLImageElement).complete && (img as HTMLImageElement).naturalWidth>0))).toBe(true);
  await app.screenshot("gitlab-expanded-gallery");
  await screen.getByRole("button","Previous media").tap();
  await expect.poll(() => browser.evaluate(() => [...document.querySelectorAll('[role="dialog"] img')].some(img => (img as HTMLImageElement).alt==="GitHub image" && (img as HTMLImageElement).complete && (img as HTMLImageElement).naturalWidth>0))).toBe(true);
});