Set timeout for all SnapshotTester tests.

First attempt was reverted (https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7100799).

This one actually sets the timeout correctly by creating the
SnapshotTester directly in the `describe` closure, rather than in the
`before` (which is too late to modify the timeout).

Also moved the `before` and `after` hooks into the SnapshotTester ctor.

Bug: 449129415
Change-Id: I4dc0e918a67b9b24219c48d648cbfde3e593f0ff
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7102919
Auto-Submit: Connor Clark <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: Connor Clark

front_end/core/sdk/RehydratingConnection.test.ts

@@ -193,21 +193,17 @@ describe('RehydratingSession', () => {
   });
 });
 
-describeWithEnvironment('RehydratingConnection emittance', () => {
-  let snapshotTester: SnapshotTester;
+describeWithEnvironment('RehydratingConnection emittance', function() {
+  const snapshotTester = new SnapshotTester(this, import.meta);
 
   before(async () => {
-    snapshotTester = new SnapshotTester(import.meta);
-    await snapshotTester.load();
-
     // Create fake popup opener as rehydrating connection needs it.
     window.opener = {
       postMessage: sinon.stub(),
     };
   });
 
   after(async () => {
-    await snapshotTester.finish();
     delete window.opener;
   });
 

front_end/models/ai_assistance/AiHistoryStorage.test.ts

@@ -546,16 +546,8 @@ describe('AiHistoryStorage', () => {
     });
   });
 
-  describe('getConversationMarkdown', () => {
-    let snapshotTester: SnapshotTester;
-    before(async () => {
-      snapshotTester = new SnapshotTester(import.meta);
-      await snapshotTester.load();
-    });
-
-    after(async () => {
-      await snapshotTester.finish();
-    });
+  describe('getConversationMarkdown', function() {
+    const snapshotTester = new SnapshotTester(this, import.meta);
 
     it('should generate markdown from a conversation', function() {
       const fakeTime = new Date('2024-01-01T00:00:00.000Z');

front_end/models/ai_assistance/agents/StylingAgent.test.ts

@@ -17,7 +17,9 @@ import * as AiAssistance from '../ai_assistance.js';
 
 const {StylingAgent, AiAgent} = AiAssistance;
 
-describeWithEnvironment('StylingAgent', () => {
+describeWithEnvironment('StylingAgent', function() {
+  const snapshotTester = new SnapshotTester(this, import.meta);
+
   function mockHostConfig(
       modelId?: string, temperature?: number, userTier?: string,
       executionMode?: Root.Runtime.HostConfigFreestylerExecutionMode, multimodal?: boolean) {
@@ -60,16 +62,6 @@ describeWithEnvironment('StylingAgent', () => {
     element.backendNodeId.returns(99 as unknown as ReturnType<SDK.DOMModel.DOMNode['backendNodeId']>);
   });
 
-  let snapshotTester: SnapshotTester;
-  before(async () => {
-    snapshotTester = new SnapshotTester(import.meta);
-    await snapshotTester.load();
-  });
-
-  after(async () => {
-    await snapshotTester.finish();
-  });
-
   describe('describeElement', () => {
     it('should describe an element with no children, siblings, or parent', async function() {
       element.simpleSelector.returns('div#myElement');

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.test.ts

@@ -12,17 +12,7 @@ import type * as Trace from '../../trace/trace.js';
 import {AIContext, PerformanceInsightFormatter} from '../ai_assistance.js';
 
 describeWithLocale('PerformanceInsightFormatter', function() {
-  this.timeout(20000);
-
-  let snapshotTester: SnapshotTester;
-  before(async () => {
-    snapshotTester = new SnapshotTester(import.meta);
-    await snapshotTester.load();
-  });
-
-  after(async () => {
-    await snapshotTester.finish();
-  });
+  const snapshotTester = new SnapshotTester(this, import.meta);
 
   setupRuntimeHooks();
   setupSettingsHooks();

front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.test.ts

@@ -23,17 +23,7 @@ async function createFormatter(context: Mocha.Context|Mocha.Suite|null, name: st
 }
 
 describeWithLocale('PerformanceTraceFormatter', function() {
-  this.timeout(20000);
-
-  let snapshotTester: SnapshotTester;
-  before(async () => {
-    snapshotTester = new SnapshotTester(import.meta);
-    await snapshotTester.load();
-  });
-
-  after(async () => {
-    await snapshotTester.finish();
-  });
+  const snapshotTester = new SnapshotTester(this, import.meta);
 
   setupRuntimeHooks();
   setupSettingsHooks();

front_end/models/ai_assistance/performance/AICallTree.test.ts

@@ -11,16 +11,8 @@ import {AICallTree} from '../ai_assistance.js';
 
 const NODE_NAME_INDEX = 2;
 
-describeWithEnvironment('AICallTree', () => {
-  let snapshotTester: SnapshotTester;
-  before(async () => {
-    snapshotTester = new SnapshotTester(import.meta);
-    await snapshotTester.load();
-  });
-
-  after(async () => {
-    await snapshotTester.finish();
-  });
+describeWithEnvironment('AICallTree', function() {
+  const snapshotTester = new SnapshotTester(this, import.meta);
 
   it('will not build a tree from non-main-thread events', async function() {
     const parsedTrace = await TraceLoader.traceEngine(this, 'cls-single-frame.json.gz');

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -1738,16 +1738,8 @@ describeWithMockConnection('AI Assistance Panel', () => {
     });
   });
 
-  describe('getResponseMarkdown', () => {
-    let snapshotTester: SnapshotTester;
-    before(async () => {
-      snapshotTester = new SnapshotTester(import.meta);
-      await snapshotTester.load();
-    });
-
-    after(async () => {
-      await snapshotTester.finish();
-    });
+  describe('getResponseMarkdown', function() {
+    const snapshotTester = new SnapshotTester(this, import.meta);
 
     it('should generate correct markdown from a message object', function() {
       const message: AiAssistancePanel.ModelChatMessage = {

front_end/testing/README.md

@@ -96,18 +96,10 @@ For Karma unit tests, you can add regression tests for string output (similar to
 
 Results for all snapshots for a test file `MyFile.test.ts` are written to `MyFile.snapshot.txt`.
 
-To add snapshot tests to a new test file, add a before and after hook to the describe test suite:
+To add snapshot tests to a new test file, add this within the `describe` test suite:
 
 ```
-let snapshotTester: SnapshotTester;
-before(async () => {
-  snapshotTester = new SnapshotTester(import.meta);
-  await snapshotTester.load();
-});
-
-after(async () => {
-  await snapshotTester.finish();
-});
+const snapshotTester = new SnapshotTester(this, import.meta);
 ```
 
 Then inside a test, call `snapshotTester.assert(this, output)`. For an example, see SnapshotTester.test.ts.

front_end/testing/SnapshotTester.test.ts

@@ -4,17 +4,8 @@
 
 import {SnapshotTester} from './SnapshotTester.js';
 
-// Started failing and blocking CfT rolls since 143.0.7447.0
-describe.skip('[crbug.com/449129415]: SnapshotTester', () => {
-  let snapshotTester: SnapshotTester;
-  before(async () => {
-    snapshotTester = new SnapshotTester(import.meta);
-    await snapshotTester.load();
-  });
-
-  after(async () => {
-    await snapshotTester.finish();
-  });
+describe('SnapshotTester', function() {
+  const snapshotTester = new SnapshotTester(this, import.meta);
 
   it('example snapshot', function() {
     snapshotTester.assert(this, 'hello world');

front_end/testing/SnapshotTester.ts

@@ -37,7 +37,21 @@ class BaseSnapshotTester {
   #anyFailures = false;
   #newTests = false;
 
-  constructor(meta: ImportMeta) {
+  constructor(context: Mocha.Suite, meta: ImportMeta) {
+    if (context.timeout() > 0) {
+      // The first usage of SnapshotTester in a test seems to take an extraordinary
+      // amount of time, so let's bump the timeout for all snapshot tests.
+      context.timeout(Math.max(context.timeout(), 45000));
+    }
+
+    context.beforeAll(async () => {
+      await this.load();
+    });
+
+    context.afterAll(async () => {
+      await this.finish();
+    });
+
     // out/Default/gen/third_party/devtools-frontend/src/front_end/testing/SnapshotTester.test.js?8ee4f2b123e221040a4aa075a28d0e5b41d3d3ed
     // ->
     // front_end/testing/SnapshotTester.snapshot.txt