Update the snapshot infra

Author: orta

packages/typescriptlang-org/_tests/backstop_data/bitmaps_reference/backstop_default_TSConfig_Example_0_viewport_0_phone.png

@@ -1,52 +1,37 @@
 {
   "id": "backstop_default",
   "viewports": [
-    {
-      "label": "phone",
-      "width": 320,
-      "height": 480
-    },
-    {
-      "label": "tablet",
-      "width": 1024,
-      "height": 768
-    },
-    {
-      "label": "computer",
-      "width": 1280,
-      "height": 900
-    }
+    { "label": "phone", "width": 320, "height": 480 },
+    { "label": "tablet", "width": 1024, "height": 768 },
+    { "label": "computer", "width": 1280, "height": 900 }
   ],
-  "onBeforeScript": "puppet/onBefore.js",
-  "onReadyScript": "puppet/onReady.js",
   "scenarios": [
     {
       "label": "Index",
-      "url": "file:///Users/ortatherox/dev/typescript/new-website/packages/typescriptlang-org/public/index.html",
+      "url": "file:///Users/orta/dev/typescript/new-typescript-website/packages/typescriptlang-org/public/index.html",
       "misMatchThreshold": 0.1
     },
     {
       "label": "Empty Page",
-      "url": "file:///Users/ortatherox/dev/typescript/new-website/packages/typescriptlang-org/public/empty/index.html",
+      "url": "file:///Users/orta/dev/typescript/new-typescript-website/packages/typescriptlang-org/public/empty/index.html",
       "misMatchThreshold": 0.1
     },
     {
       "label": "Old Handbook Example",
-      "url": "file:///Users/ortatherox/dev/typescript/new-website/packages/typescriptlang-org/public/docs/handbook/functions.html",
+      "url": "file:///Users/orta/dev/typescript/new-typescript-website/packages/typescriptlang-org/public/docs/handbook/functions.html",
       "misMatchThreshold": 0.1,
       "selectors": ["viewport"]
     },
     {
       "label": "Old Handbook Example Dark",
-      "url": "file:///Users/ortatherox/dev/typescript/new-website/packages/typescriptlang-org/public/docs/handbook/functions.html",
+      "url": "file:///Users/orta/dev/typescript/new-typescript-website/packages/typescriptlang-org/public/docs/handbook/functions.html",
       "misMatchThreshold": 0.1,
       "selectors": ["viewport"],
       "onReadyScript": "../../../scripts/backstop/makeDarkMode.js"
     },
-
     {
       "label": "TSConfig Example",
-      "url": "file:///Users/ortatherox/dev/typescript/new-website/packages/typescriptlang-org/public/en/tsconfig/index.html",
+      "url": "file:///Users/orta/dev/typescript/new-typescript-website/packages/typescriptlang-org/public/en/tsconfig/index.html",
       "misMatchThreshold": 0.1,
       "selectors": ["viewport"]
     }
@@ -60,9 +45,7 @@
   },
   "report": ["browser"],
   "engine": "puppeteer",
-  "engineOptions": {
-    "args": ["--no-sandbox"]
-  },
+  "engineOptions": { "args": ["--no-sandbox"] },
   "asyncCaptureLimit": 5,
   "asyncCompareLimit": 50,
   "debug": false,

packages/typescriptlang-org/_tests/backstop_data/bitmaps_reference/backstop_default_TSConfig_Example_0_viewport_1_tablet.png

@@ -9,7 +9,7 @@
     "develop": "gatsby develop",
     "clean": "gatsby clean",
     "bootstrap": "echo 'NOOP'",
-    "update-snapshots": "backstop test; backstop approve",
+    "update-snapshots": "node scripts/updateBackstopJSON.js && backstop test && backstop approve",
     "update-static-assets": "node scripts/downloadPlaygroundAssets.js && node scripts/downloadSearchAssets.js",
     "start": "npm run develop",
     "serve": "gatsby serve",

packages/typescriptlang-org/backstop.json

@@ -1,11 +1,11 @@
 module.exports = async (page, scenario) => {
   console.log("SWITCHING TO DARK for " + scenario.label)
 
-  await page.emulateMediaFeatures([
-    {
-      name: "prefers-color-scheme",
-      value: "dark",
-    },
-  ])
-  await wait()
+  // await page.emulateMediaFeatures([
+  //   {
+  //     name: "prefers-color-scheme",
+  //     value: "dark",
+  //   },
+  // ])
+  // await wait()
 }

packages/typescriptlang-org/package.json

@@ -0,0 +1,26 @@
+// @ts-check
+
+// The backstop JSON file requires setting the right paths for
+// screenshots - this updates them to your computer. A bit lossy
+// for the git history but acceptable given that mainly orta will
+// be running the snapshots.
+
+const { writeFileSync, readFileSync } = require("fs")
+const { join } = require("path")
+const { format } = require("prettier")
+
+const backstopPath = join(__dirname, "..", "backstop.json")
+const backstopJSON = JSON.parse(readFileSync(backstopPath, "utf8"))
+
+// e.g. file:///Users/ortatherox/dev/typescript/new-website/packages/typescriptlang-org/public/index.html
+const newPublicRoot = join(__dirname, "..", "public")
+backstopJSON.scenarios.forEach(scenario => {
+  const fileToCheck = scenario.url.split("/public/")[1]
+  const newFileURL = `file://${newPublicRoot}/${fileToCheck}`
+  scenario.url = newFileURL
+})
+
+writeFileSync(
+  backstopPath,
+  format(JSON.stringify(backstopJSON), { filepath: backstopPath })
+)