fix: simplify F95 cookie setup and constrain auth dialog layout

frontend/tests/f95-browser.test.mjs

@@ -1,4 +1,5 @@
 import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
 import { createServer } from "node:http";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import { test } from "node:test";
@@ -21,7 +22,9 @@ test("F95 personal cookies: decline, expired session, retry, delete and no paren
     bundle: true, write: false, format: "iife", platform: "browser", logLevel: "silent" });
   let imports = 0, deleted = 0;
   const saved = [];
+  const css = readFileSync(new URL("../src/styles.css", import.meta.url), "utf8");
   const server = createServer(async (req, res) => {
+    if (req.url === "/styles.css") { res.setHeader("Content-Type", "text/css"); res.end(css); return; }
     if (req.url === "/bundle.js") {
       res.setHeader("Content-Type", "application/javascript"); res.end(compiled.outputFiles[0].text); return;
     }
@@ -43,20 +46,44 @@ test("F95 personal cookies: decline, expired session, retry, delete and no paren
         metadata_available: imports !== 5})); return;
     }
     res.setHeader("Content-Type", "text/html");
-    res.end('<!doctype html><main></main><script src="/bundle.js"></script>');
+    res.end('<!doctype html><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/styles.css"><main></main><script src="/bundle.js"></script>');
   });
   await new Promise(resolve => server.listen(0, "127.0.0.1", resolve));
   let browser;
   try {
     browser = await chromium.launch({headless: true, executablePath: process.env.PGAMES_CHROMIUM_EXECUTABLE});
-    const page = await browser.newPage();
+    const page = await browser.newPage({colorScheme: "dark"});
+    page.setDefaultTimeout(10000);
     await page.goto(`http://127.0.0.1:${server.address().port}`);
     await page.getByPlaceholder("https://f95zone.to/threads/…").fill("https://f95zone.to/threads/example.123/");
     await page.getByRole("button", {name: "Подтянуть", exact: true}).click();
     const dialog = page.getByRole("dialog");
     await dialog.waitFor();
     assert.equal(await page.locator("output").textContent(), "Imported title");
-    await dialog.getByRole("button", {name: "Продолжить без авторизации"}).press("Enter");
+    if (process.env.PGAMES_F95_SCREENSHOT_DIR) {
+      await page.setViewportSize({width: 676, height: 743});
+      await page.screenshot({path: `${process.env.PGAMES_F95_SCREENSHOT_DIR}/f95-collapsed.png`});
+    }
+    // Exercise the actual stylesheet, expanded help and the overflow shown in the report.
+    await dialog.getByText("Где взять cookie", {exact: true}).click();
+    await dialog.getByText("Если F95zone блокирует запрос", {exact: true}).click();
+    for (const viewport of [{width: 676, height: 743}, {width: 320, height: 568}]) {
+      await page.setViewportSize(viewport);
+      const layout = await dialog.evaluate(element => {
+        const box = element.getBoundingClientRect();
+        const buttons = [...element.querySelectorAll('.modal-actions button')].map(button => button.getBoundingClientRect());
+        return {insideViewport: box.left >= 0 && box.right <= innerWidth && box.top >= 0 && box.bottom <= innerHeight,
+          noHorizontalOverflow: element.scrollWidth <= element.clientWidth + 1,
+          buttonsInside: buttons.every(button => button.left >= box.left && button.right <= box.right)};
+      });
+      assert.deepEqual(layout, {insideViewport: true, noHorizontalOverflow: true, buttonsInside: true});
+      await dialog.getByRole("button", {name: "Пропустить", exact: true}).scrollIntoViewIfNeeded();
+      if (process.env.PGAMES_F95_SCREENSHOT_DIR) {
+        await page.screenshot({path: `${process.env.PGAMES_F95_SCREENSHOT_DIR}/f95-${viewport.width}.png`});
+      }
+    }
+    await page.setViewportSize({width: 1000, height: 900});
+    await dialog.getByRole("button", {name: "Пропустить", exact: true}).press("Enter");
     await dialog.waitFor({state: "detached"});
     assert.equal(imports, 1);
     assert.equal(saved.length, 0);
@@ -64,17 +91,19 @@ test("F95 personal cookies: decline, expired session, retry, delete and no paren
 
     await page.getByRole("button", {name: "Подтянуть", exact: true}).click();
     await dialog.waitFor();
-    await dialog.getByLabel("Cookie", {exact: true}).fill("xf_user=expired");
+    await dialog.getByLabel("xf_user", {exact: true}).fill("expired");
     await dialog.getByRole("button", {name: "Сохранить и повторить"}).click();
     await page.waitForFunction(() => window.loaded.length === 3);
     assert.equal(await dialog.count(), 1, "expired cookies keep the replacement dialog open");
-    assert.equal(await dialog.getByLabel("Cookie", {exact: true}).inputValue(), "");
-    await dialog.getByLabel("Cookie", {exact: true}).fill("xf_user=fresh; xf_session=example");
+    assert.equal(await dialog.getByLabel("xf_user", {exact: true}).inputValue(), "");
+    await dialog.getByLabel("xf_user", {exact: true}).fill("fresh");
+    await dialog.getByLabel("xf_session (необязательно)").fill("example");
+    await dialog.getByText("Если F95zone блокирует запрос", {exact: true}).click();
     await dialog.getByLabel("User-Agent (необязательно)").fill("Test browser");
-    await dialog.getByLabel("Cookie", {exact: true}).press("Enter");
+    await dialog.getByLabel("xf_user", {exact: true}).press("Enter");
     await dialog.waitFor({state: "detached"});
-    assert.deepEqual(saved, [{cookie: "xf_user=expired", user_agent: ""},
-      {cookie: "xf_user=fresh; xf_session=example", user_agent: "Test browser"}]);
+    assert.deepEqual(saved, [{xf_user: "expired", xf_session: "", cf_clearance: "", user_agent: ""},
+      {xf_user: "fresh", xf_session: "example", cf_clearance: "", user_agent: "Test browser"}]);
     assert.equal(await page.evaluate(() => window.loaded.at(-1).cover_hash), "cover.webp");
     assert.equal(await page.evaluate(() => window.submits), 0);
     assert.equal(await page.evaluate(() => localStorage.length), 0);
@@ -87,7 +116,7 @@ test("F95 personal cookies: decline, expired session, retry, delete and no paren
     await page.getByRole("button", {name: "Подтянуть", exact: true}).click();
     await dialog.waitFor();
     assert.equal(await page.locator("output").textContent(), "Manual title", "login-only response cannot erase manual fields");
-    await dialog.getByLabel("Cookie", {exact: true}).press("Escape");
+    await dialog.getByLabel("xf_user", {exact: true}).press("Escape");
     await dialog.waitFor({state: "detached"});
     assert.equal(imports, 5);
     assert.equal(saved.length, 2);