Resolve snapshot file path in karma server

This CL fixes snapshot testings when run from a Chromium checkout.

Instead of resolving the URL to the snapshot file from the unit test,
use a new endpoint on the karma server to get the snapshot from path
relative to the source root.

The previous way (using import.meta.url) did not work in Chromium
checkouts because for some reason the snapshot files were not being
copied to the gen folder.

Also removed the "copy to gen folder" BUILD step, as it is no longer
needed.

Fixed: 444157747
Change-Id: I1aad455dc54c239f2a81616f84768cf00ee36b0c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6936941
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/models/ai_assistance/BUILD.gn

@@ -105,11 +105,3 @@ ts_library("unittests") {
     "../trace:bundle",
   ]
 }
-
-copy_to_gen("snapshots") {
-  sources = [
-    "AiHistoryStorage.snapshot.txt",
-    "data_formatters/PerformanceInsightFormatter.snapshot.txt",
-    "data_formatters/PerformanceTraceFormatter.snapshot.txt",
-  ]
-}

front_end/panels/ai_assistance/BUILD.gn

@@ -104,7 +104,3 @@ ts_library("unittests") {
     "../../ui/legacy:bundle",
   ]
 }
-
-copy_to_gen("snapshots") {
-  sources = [ "AiAssistancePanel.snapshot.txt" ]
-}

front_end/testing/BUILD.gn

@@ -89,7 +89,3 @@ ts_library("testing") {
     "../ui/visual_logging:testing",
   ]
 }
-
-copy_to_gen("snapshots") {
-  sources = [ "SnapshotTester.snapshot.txt" ]
-}

front_end/testing/README.md

@@ -110,14 +110,6 @@ after(async () => {
 });
 ```
 
-Then add the `.snapshot.txt` file to the appropriate BUILD.gn:
-
-```
-copy_to_gen("snapshots") {
-  sources = [ "myfile.snapshot.txt" ]
-}
-```
-
 Then inside a test, call `snapshotTester.assert(this, output)`. For an example, see SnapshotTester.test.ts.
 
 To update snapshots, run `npm run test -- --on-diff=update ...`

front_end/testing/SnapshotTester.ts

@@ -31,25 +31,30 @@ function assertSnapshotContent(actual: string, expected: string): void {
 export class SnapshotTester {
   static #updateMode: boolean|null = null;
 
-  #snapshotUrl: string;
+  #snapshotPath: string;
   #expected = new Map<string, string>();
   #actual = new Map<string, string>();
   #anyFailures = false;
   #newTests = false;
 
   constructor(meta: ImportMeta) {
-    this.#snapshotUrl = meta.url.replace('.test.js', '.snapshot.txt').split('?')[0];
+    // out/Default/gen/third_party/devtools-frontend/src/front_end/testing/SnapshotTester.test.js?8ee4f2b123e221040a4aa075a28d0e5b41d3d3ed
+    // ->
+    // front_end/testing/SnapshotTester.snapshot.txt
+    this.#snapshotPath =
+        meta.url.substring(meta.url.lastIndexOf('front_end')).replace('.test.js', '.snapshot.txt').split('?')[0];
   }
 
   async load() {
     if (SnapshotTester.#updateMode === null) {
       SnapshotTester.#updateMode = await this.#checkIfUpdateMode();
     }
 
-    const url = new URL(this.#snapshotUrl, import.meta.url);
+    const url = new URL('/snapshot', import.meta.url);
+    url.searchParams.set('snapshotPath', this.#snapshotPath);
     const response = await fetch(url);
     if (response.status === 404) {
-      console.warn(`Snapshot file not found: ${url.href}. Will create it for you.`);
+      console.warn(`Snapshot file not found: ${this.#snapshotPath}. Will create it for you.`);
       return;
     }
     if (response.status !== 200) {
@@ -85,15 +90,18 @@ export class SnapshotTester {
           title}), must run \`npm run test -- --on-diff=update ...\` to accept it.`);
     }
 
-    if (!SnapshotTester.#updateMode && actual !== expected) {
+    const isDifferent = actual !== expected;
+    if (isDifferent) {
       this.#anyFailures = true;
-      assertSnapshotContent(actual, expected);
+      if (!SnapshotTester.#updateMode) {
+        assertSnapshotContent(actual, expected);
+      }
     }
   }
 
   async #postUpdate(): Promise<void> {
     const url = new URL('/update-snapshot', import.meta.url);
-    url.searchParams.set('snapshotUrl', this.#snapshotUrl);
+    url.searchParams.set('snapshotPath', this.#snapshotPath);
     const content = this.#serializeSnapshotFileContent();
     const response = await fetch(url, {method: 'POST', body: content});
     if (response.status !== 200) {

test/unit/karma.conf.ts

@@ -282,14 +282,31 @@ function snapshotTesterFactory() {
       return;
     }
 
+    if (req.url.startsWith('/snapshot')) {
+      const parsedUrl = url.parse(req.url, true);
+      if (typeof parsedUrl.query.snapshotPath !== 'string') {
+        throw new Error('invalid snapshotPath');
+      }
+
+      const snapshotPath = path.join(SOURCE_ROOT, parsedUrl.query.snapshotPath);
+      if (!fs.existsSync(snapshotPath)) {
+        res.writeHead(404);
+        return;
+      }
+
+      const snapshot = fs.readFileSync(snapshotPath, 'utf-8');
+      res.writeHead(200);
+      res.end(snapshot);
+      return;
+    }
+
     if (req.url.startsWith('/update-snapshot')) {
       const parsedUrl = url.parse(req.url, true);
-      if (typeof parsedUrl.query.snapshotUrl !== 'string') {
-        throw new Error('invalid snapshotUrl');
+      if (typeof parsedUrl.query.snapshotPath !== 'string') {
+        throw new Error('invalid snapshotPath');
       }
 
-      const snapshotUrl = parsedUrl.query.snapshotUrl;
-      const snapshotPath = path.join(SOURCE_ROOT, url.parse(snapshotUrl, false).pathname?.split('gen')[1] ?? '');
+      const snapshotPath = path.join(SOURCE_ROOT, parsedUrl.query.snapshotPath);
 
       let body = '';
       req.on('data', (chunk: any) => {