feat(test-runner-commands): make snapshot file path configurable

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

@@ -36,21 +36,27 @@ function isSaveSnapshotPayload(payload: unknown): payload is SaveSnapshotPayload
   return true;
 }
 
-function getSnapshotPath(testFile: string) {
-  const testDir = path.dirname(testFile);
-  const testFileName = path.basename(testFile);
-  const ext = path.extname(testFileName);
-  const fileWithoutExt = testFileName.substring(0, testFileName.length - ext.length);
-  return path.join(testDir, '__snapshots__', `${fileWithoutExt}.snap.js`);
+function getSnapshotPath(testFile: string, config?: SnapshotPluginConfig) {
+  let snapshotFilename: string;
+
+  if (config?.fileName) {
+    snapshotFilename = config.fileName(testFile);
+  } else {
+    const testDir = path.dirname(testFile);
+    const testFileName = path.basename(testFile);
+    const ext = path.extname(testFileName);
+    const fileWithoutExt = testFileName.substring(0, testFileName.length - ext.length);
+    snapshotFilename = path.join(testDir, '__snapshots__', fileWithoutExt);
+  }
+
+  return `${snapshotFilename}.snap.js`;
 }
 
 class SnapshotStore {
   private snapshots = new Map<string, string>();
   private readOperations = new Map<string, { promise: Promise<void>; resolve: () => void }>();
 
-  async get(testFilePath: string): Promise<string> {
-    const snapshotPath = getSnapshotPath(testFilePath);
-
+  async get(testFilePath: string, snapshotPath: string): Promise<string> {
     if (this.readOperations.has(snapshotPath)) {
       // something else is already reading, wait for it
       await this.readOperations.get(snapshotPath)?.promise;
@@ -79,16 +85,20 @@ class SnapshotStore {
     return content;
   }
 
-  async saveSnapshot(testFilePath: string, name: string, updatedSnapshot: string) {
-    const snapshotPath = getSnapshotPath(testFilePath);
+  async saveSnapshot(
+    testFilePath: string,
+    snapshotPath: string,
+    name: string,
+    updatedSnapshot: string,
+  ) {
     const nameStr = JSON.stringify(name);
     const startMarker = `snapshots[${nameStr}]`;
     const endMarker = `/* end snapshot ${name} */\n\n`;
     const replacement = updatedSnapshot
       ? `${startMarker} = \n\`${updatedSnapshot}\`;\n${endMarker}`
       : '';
 
-    const content = await this.get(snapshotPath);
+    const content = await this.get(testFilePath, snapshotPath);
     let updatedContent: string;
 
     const startIndex = content.indexOf(startMarker);
@@ -125,6 +135,13 @@ class SnapshotStore {
 
 export interface SnapshotPluginConfig {
   updateSnapshots?: boolean;
+
+  /**
+   * Returns the name of the DOM snapshot file. The name is a path
+   * relative to the baseDir. By default points to a __snapshots__
+   * directory next to the original test file.
+   */
+  fileName?: (testFile: string) => string;
 }
 
 export function snapshotPlugin(config?: SnapshotPluginConfig): TestRunnerPlugin {
@@ -140,7 +157,8 @@ export function snapshotPlugin(config?: SnapshotPluginConfig): TestRunnerPlugin
       }
 
       if (command === 'get-snapshots') {
-        const content = await snapshots.get(session.testFile);
+        const snapshotPath = getSnapshotPath(session.testFile, config);
+        const content = await snapshots.get(session.testFile, snapshotPath);
         return { content };
       }
 
@@ -149,7 +167,8 @@ export function snapshotPlugin(config?: SnapshotPluginConfig): TestRunnerPlugin
           throw new Error('Invalid save snapshot payload');
         }
 
-        await snapshots.saveSnapshot(session.testFile, payload.name, payload.content);
+        const snapshotPath = getSnapshotPath(session.testFile, config);
+        await snapshots.saveSnapshot(session.testFile, snapshotPath, payload.name, payload.content);
         return true;
       }
     },

packages/test-runner-commands/test/snapshot/__custom-snapshots__/custom.snap.js

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

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

@@ -28,4 +28,29 @@ describe('snapshotPlugin', function test() {
       plugins: [snapshotPlugin()],
     });
   });
+
+  it('passes snapshot tests with a user defined snapshot path', async () => {
+    const fileName = (testFile: string) =>
+      path.join(path.dirname(testFile), '__custom-snapshots__', 'custom');
+
+    await runTests({
+      files: [path.join(__dirname, 'browser-test.js')],
+      browsers: [
+        playwrightLauncher({ product: 'firefox' }),
+        playwrightLauncher({ product: 'chromium' }),
+        playwrightLauncher({ product: 'webkit' }),
+      ],
+      plugins: [snapshotPlugin({ fileName })],
+    });
+
+    await runTests({
+      files: [path.join(__dirname, 'src', 'nested-test.js')],
+      browsers: [
+        playwrightLauncher({ product: 'firefox' }),
+        playwrightLauncher({ product: 'chromium' }),
+        playwrightLauncher({ product: 'webkit' }),
+      ],
+      plugins: [snapshotPlugin({ fileName })],
+    });
+  });
 });

packages/test-runner-commands/test/snapshot/src/__custom-snapshots__/custom.snap.js

@@ -0,0 +1,9 @@
+/* @web/test-runner snapshot v1 */
+
+export const snapshots = {};
+
+snapshots['persistent-a'] = `this is nested snapshot A`;
+/* end snapshot persistent-a */
+
+snapshots['persistent-b'] = `this is nested snapshot B`;
+/* end snapshot persistent-b */

packages/test-runner/src/config/TestRunnerConfig.ts

@@ -1,10 +1,12 @@
 import { TestFramework, TestRunnerCoreConfig, TestRunnerGroupConfig } from '@web/test-runner-core';
 import { RollupNodeResolveOptions } from '@web/dev-server';
+import { SnapshotPluginConfig } from '@web/test-runner-commands/plugins.js';
 
 export interface TestRunnerConfig extends Omit<TestRunnerCoreConfig, 'testFramework'> {
   groups?: string | string[] | TestRunnerGroupConfig[];
   nodeResolve?: boolean | RollupNodeResolveOptions;
   preserveSymlinks?: boolean;
   esbuildTarget?: string | string[];
   testFramework?: Partial<TestFramework>;
+  snapshotConfig?: SnapshotPluginConfig;
 }

packages/test-runner/src/config/parseConfig.ts

@@ -166,6 +166,15 @@ export async function parseConfig(
     ...finalConfig.coverageConfig,
   };
 
+  const updateSnapshots =
+    cliArgs.updateSnapshots !== undefined
+      ? cliArgs.updateSnapshots
+      : finalConfig.snapshotConfig?.updateSnapshots;
+  finalConfig.snapshotConfig = {
+    ...finalConfig.snapshotConfig,
+    updateSnapshots,
+  };
+
   let groupConfigs = await parseConfigGroups(finalConfig, cliArgs);
   if (groupConfigs.find(g => g.name === 'default')) {
     throw new TestRunnerStartError(
@@ -254,7 +263,7 @@ export async function parseConfig(
     filePlugin(),
     sendKeysPlugin(),
     sendMousePlugin(),
-    snapshotPlugin({ updateSnapshots: !!cliArgs.updateSnapshots }),
+    snapshotPlugin(finalConfig.snapshotConfig),
   );
 
   if (finalConfig.nodeResolve) {