don't block command when storing snapshots

packages/test-runner-commands/src/snapshotPlugin.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { TestRunnerPlugin } from '@web/test-runner-core';
+import { ServerStartParams } from '@web/dev-server-core';
 import path from 'path';
 import fs from 'fs';
 import { promisify } from 'util';
@@ -46,6 +47,7 @@ function getSnapshotPath(testFile: string) {
 
 class SnapshotStore {
   private snapshots = new Map<string, string>();
+  private sessionToSnapshotPath = new Map<string, string>();
   private readOperations = new Map<string, { promise: Promise<void>; resolve: () => void }>();
 
   async get(testFilePath: string): Promise<string> {
@@ -56,17 +58,17 @@ class SnapshotStore {
       await this.readOperations.get(snapshotPath)?.promise;
     }
 
-    if (this.snapshots.has(testFilePath)) {
+    const cachedContent = this.snapshots.get(snapshotPath);
+    if (cachedContent) {
       // return from cache
-      return this.snapshots.get(testFilePath)!;
+      return cachedContent;
     }
 
     const promiseObj = { resolve: () => {}, promise: Promise.resolve() };
     promiseObj.promise = new Promise<void>(resolve => {
       promiseObj.resolve = resolve;
     });
     this.readOperations.set(testFilePath, promiseObj);
-
     // store in cache
     const content = (await fileExists(snapshotPath))
       ? await readFile(snapshotPath, 'utf-8')
@@ -79,7 +81,12 @@ class SnapshotStore {
     return content;
   }
 
-  async saveSnapshot(testFilePath: string, name: string, updatedSnapshot: string) {
+  async saveSnapshot(
+    sessionId: string,
+    testFilePath: string,
+    name: string,
+    updatedSnapshot: string,
+  ) {
     const snapshotPath = getSnapshotPath(testFilePath);
     const nameStr = JSON.stringify(name);
     const startMarker = `snapshots[${nameStr}]`;
@@ -88,7 +95,7 @@ class SnapshotStore {
       ? `${startMarker} = \n\`${updatedSnapshot}\`;\n${endMarker}`
       : '';
 
-    const content = await this.get(snapshotPath);
+    const content = await this.get(testFilePath);
     let updatedContent: string;
 
     const startIndex = content.indexOf(startMarker);
@@ -107,8 +114,24 @@ class SnapshotStore {
       // add new snapshot
       updatedContent = `${content}${replacement}`;
     }
+    if (updatedContent === content) {
+      // snapshot did not actually change, avoid marking snapshot as dirty
+      return;
+    }
 
+    this.sessionToSnapshotPath.set(sessionId, snapshotPath);
     this.snapshots.set(snapshotPath, updatedContent);
+  }
+
+  getSnapshotPathForSession(sessionId: string) {
+    return this.sessionToSnapshotPath.get(sessionId);
+  }
+
+  async writeSnapshot(snapshotPath: string) {
+    const updatedContent = this.snapshots.get(snapshotPath);
+    if (!updatedContent) {
+      throw new Error('Unexpected error while writing snapshots, could not find snapshot content.');
+    }
     if (updatedContent.includes('/* end snapshot')) {
       // update or create snapshot
       const fileDir = path.dirname(snapshotPath);
@@ -130,10 +153,35 @@ export interface SnapshotPluginConfig {
 export function snapshotPlugin(config?: SnapshotPluginConfig): TestRunnerPlugin {
   const updateSnapshots = config && config.updateSnapshots;
   const snapshots = new SnapshotStore();
+  const writePromises = new Set<Promise<void>>();
 
   return {
     name: 'file-commands',
 
+    serverStart({ webSockets }: ServerStartParams) {
+      webSockets!.on('message', async ({ data }) => {
+        const { type, sessionId } = data;
+        if (type === 'wtr-session-finished') {
+          if (typeof sessionId !== 'string') {
+            throw new Error('Missing session id in wtr-session-finished event');
+          }
+          const snapshotPath = snapshots.getSnapshotPathForSession(sessionId);
+          if (!snapshotPath) {
+            return;
+          }
+          const writePromise = snapshots.writeSnapshot(snapshotPath);
+          writePromises.add(writePromise);
+          await writePromise;
+          writePromises.delete(writePromise);
+        }
+      });
+    },
+
+    async serverStop() {
+      // ensure all write operations are finished
+      await Promise.all([...writePromises]);
+    },
+
     async executeCommand({ command, payload, session }) {
       if (command === 'get-snapshot-config') {
         return { updateSnapshots };
@@ -149,7 +197,7 @@ export function snapshotPlugin(config?: SnapshotPluginConfig): TestRunnerPlugin
           throw new Error('Invalid save snapshot payload');
         }
 
-        await snapshots.saveSnapshot(session.testFile, payload.name, payload.content);
+        await snapshots.saveSnapshot(session.id, session.testFile, payload.name, payload.content);
         return true;
       }
     },

packages/test-runner-commands/test/snapshot/__snapshots__/browser-test.snap.js

@@ -1,5 +1,4 @@
 /* @web/test-runner snapshot v1 */
-
 export const snapshots = {};
 
 snapshots['persistent-a'] = `this is snapshot A`;

packages/test-runner-core/src/runner/TestRunner.ts

@@ -156,9 +156,12 @@ export class TestRunner extends EventEmitter<EventMap> {
 
     this.stopped = true;
     await this.scheduler.stop();
-    this.server.stop().catch(error => {
+
+    const stopActions = [];
+    const stopServerAction = this.server.stop().catch(error => {
       console.error(error);
     });
+    stopActions.push(stopServerAction);
 
     if (this.config.watch) {
       // we only need to stop the browsers in watch mode, in non-watch
@@ -173,8 +176,8 @@ export class TestRunner extends EventEmitter<EventMap> {
           );
         }
       }
-      await Promise.all(stopActions);
     }
+    await Promise.all(stopActions);
     this.emit('stopped', this.passed);
   }
 

packages/test-runner/demo/test/__snapshots__/pass-snapshot-1.test.snap.js

@@ -0,0 +1,15 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["snapshot-a"] = 
+`some snapshot A1`;
+/* end snapshot snapshot-a */
+
+snapshots["snapshot-b"] = 
+`some snapshot B1`;
+/* end snapshot snapshot-b */
+
+snapshots["snapshot-c"] = 
+`some snapshot C1`;
+/* end snapshot snapshot-c */
+

packages/test-runner/demo/test/__snapshots__/pass-snapshot-2.test.snap.js

@@ -0,0 +1,15 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["snapshot-a"] = 
+`some snapshot A2`;
+/* end snapshot snapshot-a */
+
+snapshots["snapshot-b"] = 
+`some snapshot B2`;
+/* end snapshot snapshot-b */
+
+snapshots["snapshot-c"] = 
+`some snapshot C2`;
+/* end snapshot snapshot-c */
+

packages/test-runner/demo/test/__snapshots__/pass-snapshot-3.test.snap.js

@@ -0,0 +1,15 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["snapshot-a"] = 
+`some snapshot A3`;
+/* end snapshot snapshot-a */
+
+snapshots["snapshot-b"] = 
+`some snapshot B3`;
+/* end snapshot snapshot-b */
+
+snapshots["snapshot-c"] = 
+`some snapshot C3`;
+/* end snapshot snapshot-c */
+

packages/test-runner/demo/test/__snapshots__/pass-snapshot-4.test.snap.js

@@ -0,0 +1,15 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["snapshot-a"] = 
+`some snapshot A4`;
+/* end snapshot snapshot-a */
+
+snapshots["snapshot-b"] = 
+`some snapshot B4`;
+/* end snapshot snapshot-b */
+
+snapshots["snapshot-c"] = 
+`some snapshot C4`;
+/* end snapshot snapshot-c */
+

packages/test-runner/demo/test/__snapshots__/pass-snapshot-5.test.snap.js

@@ -0,0 +1,15 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["snapshot-a"] = 
+`some snapshot A5`;
+/* end snapshot snapshot-a */
+
+snapshots["snapshot-b"] = 
+`some snapshot B5`;
+/* end snapshot snapshot-b */
+
+snapshots["snapshot-c"] = 
+`some snapshot C5`;
+/* end snapshot snapshot-c */
+

packages/test-runner/demo/test/pass-snapshot-1.test.js

@@ -0,0 +1,13 @@
+import { compareSnapshot, removeSnapshot } from '@web/test-runner-commands';
+
+it('can test snapshot A', async () => {
+  await compareSnapshot({ name: 'snapshot-a', content: 'some snapshot A1' });
+});
+
+it('can test snapshot B', async () => {
+  await compareSnapshot({ name: 'snapshot-b', content: 'some snapshot B1' });
+});
+
+it('can test snapshot C', async () => {
+  await compareSnapshot({ name: 'snapshot-c', content: 'some snapshot C1' });
+});

packages/test-runner/demo/test/pass-snapshot.test.js → packages/test-runner/demo/test/pass-snapshot-2.test.js

@@ -1,13 +1,13 @@
 import { compareSnapshot } from '@web/test-runner-commands';
 
 it('can test snapshot A', async () => {
-  await compareSnapshot({ name: 'snapshot-a', content: 'some snapshot A' });
+  await compareSnapshot({ name: 'snapshot-a', content: 'some snapshot A2' });
 });
 
 it('can test snapshot B', async () => {
-  await compareSnapshot({ name: 'snapshot-b', content: 'some snapshot B' });
+  await compareSnapshot({ name: 'snapshot-b', content: 'some snapshot B2' });
 });
 
 it('can test snapshot C', async () => {
-  await compareSnapshot({ name: 'snapshot-c', content: 'some snapshot B' });
+  await compareSnapshot({ name: 'snapshot-c', content: 'some snapshot C2' });
 });

packages/test-runner/demo/test/pass-snapshot-3.test.js

@@ -0,0 +1,13 @@
+import { compareSnapshot } from '@web/test-runner-commands';
+
+it('can test snapshot A', async () => {
+  await compareSnapshot({ name: 'snapshot-a', content: 'some snapshot A3' });
+});
+
+it('can test snapshot B', async () => {
+  await compareSnapshot({ name: 'snapshot-b', content: 'some snapshot B3' });
+});
+
+it('can test snapshot C', async () => {
+  await compareSnapshot({ name: 'snapshot-c', content: 'some snapshot C3' });
+});

packages/test-runner/demo/test/pass-snapshot-4.test.js

@@ -0,0 +1,13 @@
+import { compareSnapshot } from '@web/test-runner-commands';
+
+it('can test snapshot A', async () => {
+  await compareSnapshot({ name: 'snapshot-a', content: 'some snapshot A4' });
+});
+
+it('can test snapshot B', async () => {
+  await compareSnapshot({ name: 'snapshot-b', content: 'some snapshot B4' });
+});
+
+it('can test snapshot C', async () => {
+  await compareSnapshot({ name: 'snapshot-c', content: 'some snapshot C4' });
+});

packages/test-runner/demo/test/pass-snapshot-5.test.js

@@ -0,0 +1,13 @@
+import { compareSnapshot } from '@web/test-runner-commands';
+
+it('can test snapshot A', async () => {
+  await compareSnapshot({ name: 'snapshot-a', content: 'some snapshot A5' });
+});
+
+it('can test snapshot B', async () => {
+  await compareSnapshot({ name: 'snapshot-b', content: 'some snapshot B5' });
+});
+
+it('can test snapshot C', async () => {
+  await compareSnapshot({ name: 'snapshot-c', content: 'some snapshot C5' });
+});