learning-website-nextjs1-8  Exercise 3: The Copy Button as a Client Component, Tested for Real
=================================================================================================

1,923 pages (about 43% of the site; none on the languages site) have a code block with a Copy button written as
<button class="copy-btn" onclick="copyCodeBlock(this)">. The page body is inserted as HTML text, so a <script> inside it would never
define the function (Chapter 4). It is defined once, for the whole site, by a small client component in the layout.

Save as packages/ui/src/CopyCode.tsx:

"use client";

import { useEffect } from "react";

declare global {
  interface Window {
    /** The function every code block's Copy button calls: onclick="copyCodeBlock(this)". */
    copyCodeBlock?: (button: HTMLElement) => void;
  }
}

const LABEL_MS = 1500;

/**
 * Copy the code block that comes right AFTER the button, and say what happened on the button itself.
 *
 * The modern clipboard only works on HTTPS (or localhost). Anywhere else the old way (a hidden text box and the "copy"
 * command) is used instead of failing without a word, and if that fails too the button says "Copy failed".
 */
export function copyCodeBlock(button: HTMLElement): void {
  const block = button.nextElementSibling as HTMLElement | null;
  const code = block?.innerText ?? "";
  const show = (message: string) => {
    const original = button.dataset["label"] ?? button.textContent ?? "";
    button.dataset["label"] = original;
    button.textContent = message;
    setTimeout(() => { button.textContent = original; }, LABEL_MS);
  };
  if (!block) return show("Copy failed");

  const fallback = () => {
    const box = document.createElement("textarea");
    box.value = code;
    box.setAttribute("readonly", "");
    box.style.position = "fixed";
    box.style.opacity = "0";
    document.body.appendChild(box);
    box.select();
    let ok = false;
    try { ok = document.execCommand("copy"); } catch { ok = false; }
    document.body.removeChild(box);
    show(ok ? "Copied!" : "Copy failed");
  };

  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(code).then(() => show("Copied!"), fallback);
  } else {
    fallback();
  }
}

/**
 * Makes copyCodeBlock available to the pages. A lesson's HTML contains onclick="copyCodeBlock(this)", and the page body is
 * inserted as text, so a <script> inside it would never define the function. It is defined here, once, for the whole site.
 */
export function CopyCode() {
  useEffect(() => {
    window.copyCodeBlock = copyCodeBlock;
    return () => { delete window.copyCodeBlock; };
  }, []);
  return null;
}

(CopyCode is placed after {children} in each app's root layout, and exported from @lw/ui.)

How it works: the button copies the code block right AFTER it. If the browser's own clipboard is available (HTTPS or localhost) it is
used; if that refuses or is missing, the old way is used (a hidden text box and the "copy" command); and if that fails too, the button
SAYS "Copy failed" instead of staying silent. After 1.5 seconds it says "Copy" again.

The test bench from Chapter 4 gained a page with a code block and a Copy button (/lab/copy, built only with LW_LAB=1), and a real
headless Chrome is driven through it:

Save as copy-test.mjs:

// Test the Copy button in a real headless Chrome.
//   node copy-test.mjs <languages app url>      (built with LW_LAB=1 and started)
//
// The REAL system clipboard is deliberately never written: that would overwrite whatever you had copied. Instead the browser's
// clipboard call and the old "copy" command are replaced by recorders, so the test sees exactly which text the button asks to copy,
// which route it takes, and what the button says afterwards.
import { spawn } from "node:child_process";
import { mkdtempSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";

const base = process.argv[2] ?? "http://localhost:3001";
const chrome = spawn("C:/Program Files/Google/Chrome/Application/chrome.exe", [
  "--headless=new", "--disable-gpu", "--remote-debugging-port=9337", `--user-data-dir=${mkdtempSync(join(tmpdir(), "lw-chrome-"))}`, "about:blank",
], { stdio: "ignore" });
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
let targets;
for (let i = 0; i < 40; i++) {
  try { targets = await (await fetch("http://127.0.0.1:9337/json")).json(); if (targets.length) break; } catch { /* not up yet */ }
  await sleep(250);
}
const ws = new WebSocket(targets.find((t) => t.type === "page").webSocketDebuggerUrl);
await new Promise((r) => ws.addEventListener("open", r));
let id = 0;
const pending = new Map();
ws.addEventListener("message", (e) => { const m = JSON.parse(e.data); if (m.id && pending.has(m.id)) { pending.get(m.id)(m); pending.delete(m.id); } });
const send = (method, params = {}) => new Promise((r) => { const n = ++id; pending.set(n, r); ws.send(JSON.stringify({ id: n, method, params })); });
const evaluate = async (expression) => (await send("Runtime.evaluate", { expression, returnByValue: true })).result?.result?.value;

const EXPECTED = 'const answer = 42;\nconsole.log("line two", answer);';
const rows = [];
const record = (what, ok, detail) => rows.push([ok ? "PASS" : "FAIL", what, detail]);

async function open(path) { await send("Page.enable"); await send("Page.navigate", { url: base + path }); await sleep(2500); }
const label = () => evaluate('document.getElementById("copy-button").textContent');
const click = () => evaluate('document.getElementById("copy-button").click()');

// instruments: record what is written and what the old copy command sees; each can be told to fail
const install = `window.__written = []; window.__exec = []; window.__execResult = true; window.__clipboardMode = "ok";
  const writer = (text) => { window.__written.push(text); return window.__clipboardMode === "reject" ? Promise.reject(new Error("denied")) : Promise.resolve(); };
  Object.defineProperty(Navigator.prototype, "clipboard", { configurable: true, get() { return window.__clipboardMode === "missing" ? undefined : { writeText: writer }; } });
  document.execCommand = (command) => { const a = document.activeElement; window.__exec.push([command, a && a.value ? a.value.slice(a.selectionStart, a.selectionEnd) : null]); return window.__execResult; };
  true`;

await open("/lab/copy");
record("the page defines copyCodeBlock", (await evaluate("typeof window.copyCodeBlock")) === "function", await evaluate("typeof window.copyCodeBlock"));
record("the button starts as 'Copy'", (await label()) === "Copy", await label());
await evaluate(install);

await click(); await sleep(300);
let written = await evaluate("JSON.stringify(window.__written)");
record("modern clipboard: asked to copy exactly the code block's text", written === JSON.stringify([EXPECTED]), written);
record("modern clipboard: the button says 'Copied!'", (await label()) === "Copied!", await label());
await sleep(1800);
record("the button goes back to 'Copy' after 1.5 s", (await label()) === "Copy", await label());

await evaluate('window.__clipboardMode = "reject"; window.__written = []; true');
await click(); await sleep(400);
const exec = await evaluate("JSON.stringify(window.__exec)");
record("clipboard refuses: the old copy command is used, on the right text", exec === JSON.stringify([["copy", EXPECTED]]), exec);
record("clipboard refuses: the button says 'Copied!'", (await label()) === "Copied!", await label());
await sleep(1800);

await evaluate('window.__clipboardMode = "missing"; window.__exec = []; true');
await click(); await sleep(300);
record("no clipboard at all: the old copy command is used", (await evaluate("window.__exec.length")) === 1, await evaluate("window.__exec.length"));
await sleep(1800);

await evaluate('window.__execResult = false; true');
await click(); await sleep(300);
record("nothing works: the button SAYS 'Copy failed'", (await label()) === "Copy failed", await label());
await sleep(1800);

await evaluate('(() => { const b = document.getElementById("copy-button"); b.nextElementSibling.remove(); true; })()');
await click(); await sleep(300);
record("no code block after the button: 'Copy failed', no crash", (await label()) === "Copy failed", await label());

// arrive by clicking a link (client-side navigation), not by loading the page
await open("/lab");
await evaluate('document.getElementById("to-copy").click()'); await sleep(2000);
record("after a link click the function still exists", (await evaluate("typeof window.copyCodeBlock")) === "function", await evaluate("location.pathname"));
await evaluate(install);
await click(); await sleep(300);
record("after a link click the button copies the right text", (await evaluate("JSON.stringify(window.__written)")) === JSON.stringify([EXPECTED]), await label());

for (const [status, what, detail] of rows) console.log(status, what.padEnd(70), String(detail).slice(0, 70));
console.log(`\n${rows.filter((r) => r[0] === "PASS").length} passed, ${rows.filter((r) => r[0] === "FAIL").length} failed`);
ws.close(); chrome.kill(); process.exit(0);

  node copy-test.mjs http://localhost:3001

  PASS the page defines copyCodeBlock
  PASS the button starts as 'Copy'
  PASS modern clipboard: asked to copy exactly the code block's text           ["const answer = 42;\nconsole.log(\"line two\", answer);"]
  PASS modern clipboard: the button says 'Copied!'
  PASS the button goes back to 'Copy' after 1.5 s
  PASS clipboard refuses: the old copy command is used, on the right text
  PASS clipboard refuses: the button says 'Copied!'
  PASS no clipboard at all: the old copy command is used
  PASS nothing works: the button SAYS 'Copy failed'
  PASS no code block after the button: 'Copy failed', no crash
  PASS after a link click the function still exists
  PASS after a link click the button copies the right text
  12 passed, 0 failed

WHAT THIS TEST DOES NOT DO, ON PURPOSE: it never writes the REAL system clipboard. Doing so would overwrite whatever you had copied. The
browser's clipboard call and the old "copy" command are replaced by recorders, so the test sees which text the button asks to copy, which route
it takes, and what the button says. The final step, pasting the copied text somewhere, has therefore NOT been seen: please click a Copy
button on a real page in a real browser once (it is in website_checks.md).

Can this test fail? All 12 passed first time, so two deliberate breakages, each rebuilt, run and undone:

  the button always claims 'Copied!' (even when nothing worked):    11 passed, 1 failed ("nothing works: the button SAYS 'Copy failed'")
  it copies the element BEFORE the button instead of after:         6 passed, 6 failed

The takeaway: a first-time pass proves little until you have seen the test fail for the right reason.

WHY THIS WORKS AS AN ANSWER
---------------------------
It tests every route the button can take (modern, old, none, nothing) in a real browser, says which step it avoided and why, and has
been seen to fail when the button lies or copies the wrong thing.