Merge pull request #300 from jia1022/hide-leetcode-line-unless-toggled

Hide LeetCode names in interviews by default

Author: jserv

tests/browser/hide-examples.test.js

@@ -13,6 +13,7 @@ import {
   launchChromium,
   startStaticServer,
 } from "./source.js";
+import { SHOW_SOURCES_KEY } from "../../web/lib.js";
 
 let browser = null;
 let server = null;
@@ -79,6 +80,54 @@ test("the worked examples can be hidden, and stay hidden on the next visit", asy
   }
 });
 
+test("the interview hides the published problem name when the toggle is off", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+  const page = await browser.newPage();
+  try {
+    await page.goto(`${base}/interview.html?problem=chargeback-pair-match`, {
+      waitUntil: "domcontentloaded",
+    });
+    await page.evaluate(
+      (key) => localStorage.setItem(key, "0"),
+      SHOW_SOURCES_KEY,
+    );
+    await page.reload({ waitUntil: "domcontentloaded" });
+    await page
+      .locator("#problem-panel .problem-detail")
+      .waitFor({ state: "attached" });
+    assert.doesNotMatch(
+      await page.locator("#problem-panel").textContent(),
+      /LeetCode:/,
+    );
+  } finally {
+    await page.close();
+  }
+});
+
+test("the interview shows the published problem name when the toggle is on", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+  const page = await browser.newPage();
+  try {
+    await page.goto(`${base}/interview.html?problem=chargeback-pair-match`, {
+      waitUntil: "domcontentloaded",
+    });
+    await page.evaluate(
+      (key) => localStorage.setItem(key, "1"),
+      SHOW_SOURCES_KEY,
+    );
+    await page.reload({ waitUntil: "domcontentloaded" });
+    await page
+      .locator("#problem-panel .problem-detail")
+      .waitFor({ state: "attached" });
+    assert.match(
+      await page.locator("#problem-panel").textContent(),
+      /LeetCode: Two Sum/,
+    );
+  } finally {
+    await page.close();
+  }
+});
+
 // The Add a case placeholder is the judge's first input, a worked case in its
 // own right, so hiding the examples has to hide it too.
 test("hiding the examples also hides the Add a case placeholder", async (t) => {

tests/browser/render.test.js

@@ -1105,17 +1105,20 @@ test("report markup marks a no-hire and an empty editor", () => {
 });
 
 test("problem markup escapes every field a problem carries", () => {
-  const body = problemMarkup({
-    source: "<script>t</script>",
-    brief: ["<script>s</script>"],
-    examples: [
-      {
-        input: "<script>i</script>",
-        output: "<script>o</script>",
-        explanation: "<script>x</script>",
-      },
-    ],
-  });
+  const body = problemMarkup(
+    {
+      source: "<script>t</script>",
+      brief: ["<script>s</script>"],
+      examples: [
+        {
+          input: "<script>i</script>",
+          output: "<script>o</script>",
+          explanation: "<script>x</script>",
+        },
+      ],
+    },
+    { showSources: true },
+  );
 
   assert.doesNotMatch(
     body,
@@ -1143,19 +1146,39 @@ test("problem markup shows the scenario and leaves the limits to be asked for",
 });
 
 test("problem markup names the published title once, small, and only when it has one", () => {
-  const body = problemMarkup({
-    source: "Two Sum",
-    brief: ["Match the disputed charge."],
-    examples: [{ input: "a", output: "b" }],
-  });
+  const body = problemMarkup(
+    {
+      source: "Two Sum",
+      brief: ["Match the disputed charge."],
+      examples: [{ input: "a", output: "b" }],
+    },
+    { showSources: true },
+  );
   assert.equal(body.match(/Two Sum/g).length, 1);
   assert.match(body, /<p class="problem-source">LeetCode: Two Sum<\/p>/);
 
-  const unnamed = problemMarkup({
+  const unnamed = problemMarkup(
+    {
+      brief: ["one"],
+      examples: [{ input: "a", output: "b" }],
+    },
+    { showSources: true },
+  );
+  assert.doesNotMatch(unnamed, /problem-source|LeetCode|undefined/);
+});
+
+test("problem markup hides published titles by default", () => {
+  const problem = {
+    source: "Two Sum",
     brief: ["one"],
     examples: [{ input: "a", output: "b" }],
-  });
-  assert.doesNotMatch(unnamed, /problem-source|LeetCode|undefined/);
+  };
+
+  assert.doesNotMatch(problemMarkup(problem), /LeetCode:/);
+  assert.match(
+    problemMarkup(problem, { showSources: true }),
+    /LeetCode: Two Sum/,
+  );
 });
 
 test("problem markup omits the explanation line rather than printing undefined", () => {

web/app.js

@@ -1,4 +1,10 @@
-import { FRAMEWORKS, codingLoop, interviewMode, languageLabel } from "./lib.js";
+import {
+  FRAMEWORKS,
+  SHOW_SOURCES_KEY,
+  codingLoop,
+  interviewMode,
+  languageLabel,
+} from "./lib.js";
 import {
   clearReportHistory,
   deleteReport,
@@ -156,13 +162,8 @@ for (const card of cards) mark(card.button, false);
 // The published names are off unless the candidate turns them on, and the
 // choice is theirs to keep between visits. A convenience, so storage that
 // throws (a private window, blocked site data) just means off.
-const SHOW_SOURCES_KEY = "codetrial.showProblemSources";
 const showSources = document.querySelector("#show-sources");
-try {
-  showSources.checked = localStorage.getItem(SHOW_SOURCES_KEY) === "1";
-} catch {
-  /* off */
-}
+showSources.checked = readStored(SHOW_SOURCES_KEY) === "1";
 // The published names are not in the page: they arrive with the map, fetched
 // the first time the candidate turns them on.
 const applySources = async () => {
@@ -185,11 +186,7 @@ const applySources = async () => {
 };
 showSources.addEventListener("change", () => {
   void applySources();
-  try {
-    localStorage.setItem(SHOW_SOURCES_KEY, showSources.checked ? "1" : "0");
-  } catch {
-    /* the page still shows what was chosen */
-  }
+  writeStored(SHOW_SOURCES_KEY, showSources.checked ? "1" : "0");
 });
 void applySources();
 const levels = [...document.querySelectorAll('[name="difficulty"]')];

web/interview.js

@@ -76,6 +76,7 @@ import {
   roomInterviewer,
   sanitizeReport,
   sessionReport,
+  SHOW_SOURCES_KEY,
   testPayload,
   timeWarningPayload,
   topics,
@@ -2036,6 +2037,7 @@ function renderProblem() {
   recordStage();
   nodes.problemPanel.innerHTML = problemMarkup(problem, {
     examples: !nodes.hideExamples.checked,
+    showSources: readStored(SHOW_SOURCES_KEY) === "1",
   });
 }
 

web/lib.js

@@ -9,6 +9,8 @@ const HTML_ESCAPES = {
   "'": "'",
 };
 
+export const SHOW_SOURCES_KEY = "codetrial.showProblemSources";
+
 export function escapeHtml(value) {
   return String(value).replace(/[&<>"']/g, (char) => HTML_ESCAPES[char]);
 }

web/render.js

@@ -205,10 +205,15 @@ function sourceEventMarkup(event) {
 // No constraints section and no source statement: the page carries the scenario
 // the interview poses, and the limits and edge-case policies are what the
 // candidate asks Jim for, the way they would ask a person. The published title
-// is named once, small, so the problem can be found again after the interview.
+// is left out unless showSources is set, the lobby's "Show the LeetCode
+// problem" choice; then it is named once, small, so the problem can be found
+// again after the interview.
 // The worked examples can be left out, so the Example step starts from cases
 // the candidate proposes instead of ones already on screen.
-export function problemMarkup(problem, { examples = true } = {}) {
+export function problemMarkup(
+  problem,
+  { examples = true, showSources = false } = {},
+) {
   const example = (example, index) => `
           <section>
             <h2>Example ${index + 1}</h2>
@@ -224,7 +229,7 @@ export function problemMarkup(problem, { examples = true } = {}) {
   return `
     <div class="problem-detail">
       <p class="interview-kicker">Interview exercise</p>
-      ${problem.source ? `<p class="problem-source">LeetCode: ${escapeHtml(problem.source)}</p>` : ""}
+      ${showSources && problem.source ? `<p class="problem-source">LeetCode: ${escapeHtml(problem.source)}</p>` : ""}
       ${problem.requestedPage ? `<p class="muted small">The link asked for an exercise this bank does not have, so this is the default exercise.</p>` : ""}
       ${problem.brief.map((text) => `<p>${escapeHtml(text)}</p>`).join("")}
       ${