Refactor panels/recorder/components/RecordingListView.ts

Fixed: 407940953
Change-Id: I25ee347e62d70c451b737912becc6846dc45b113
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6818234
Reviewed-by: Wolfgang Beyer <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: OrKoN

front_end/panels/recorder/RecorderController.ts

@@ -1150,18 +1150,20 @@ export class RecorderController extends LitElement {
     const recordings = this.#storage.getRecordings();
     // clang-format off
     return html`
-      <devtools-recording-list-view
-        .recordings=${recordings.map(recording => ({
-          storageName: recording.storageName,
-          name: recording.flow.title,
-        }))}
-        .replayAllowed=${this.#replayAllowed}
+      <devtools-widget
+        .widgetConfig=${UI.Widget.widgetConfig(Components.RecordingListView.RecordingListView, {
+          recordings: recordings.map(recording => ({
+            storageName: recording.storageName,
+            name: recording.flow.title,
+          })),
+          replayAllowed: this.#replayAllowed,
+        })}
         @createrecording=${this.#onCreateNewRecording}
         @deleterecording=${this.#onDeleteRecording}
         @openrecording=${this.#onRecordingSelected}
         @playrecording=${this.#onPlayRecordingByName}
-        >
-      </devtools-recording-list-view>
+      >
+      </devtools-widget>
     `;
     // clang-format on
   }

front_end/panels/recorder/components/RecordingListView.test.ts

@@ -2,74 +2,63 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {dispatchClickEvent, dispatchKeyDownEvent, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {
   describeWithEnvironment,
   setupActionRegistry,
 } from '../../../testing/EnvironmentHelpers.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import {
+  createViewFunctionStub,
+  type ViewFunctionStub,
+} from '../../../testing/ViewFunctionHelpers.js';
 
 import * as Components from './components.js';
 
 describeWithEnvironment('RecordingListView', () => {
   setupActionRegistry();
 
-  it('should open a recording on Enter', async () => {
-    const view = new Components.RecordingListView.RecordingListView();
-    renderElementIntoDOM(view);
-    view.recordings = [{storageName: 'storage-test', name: 'test'}];
-    await RenderCoordinator.done();
-    const recording = view.shadowRoot?.querySelector('.row') as HTMLDivElement;
-    assert.isOk(recording);
-    const eventSent = new Promise<Components.RecordingListView.OpenRecordingEvent>(
-        resolve => {
-          view.addEventListener('openrecording', resolve, {once: true});
-        },
-    );
-    dispatchKeyDownEvent(recording, {key: 'Enter'});
-    const event = await eventSent;
-    assert.strictEqual(event.storageName, 'storage-test');
+  const views: Components.RecordingListView.RecordingListView[] = [];
+
+  afterEach(() => {
+    // Unregister global listeners in willHide to prevent leaks.
+    for (const view of views) {
+      view.willHide();
+    }
   });
 
-  it('should delete a recording', async () => {
-    const view = new Components.RecordingListView.RecordingListView();
-    renderElementIntoDOM(view);
-    view.recordings = [{storageName: 'storage-test', name: 'test'}];
-    await RenderCoordinator.done();
-    const deleteButton = view.shadowRoot?.querySelector(
-                             '.delete-recording-button',
-                             ) as HTMLButtonElement;
-    assert.isOk(deleteButton);
-    const eventSent = new Promise<Components.RecordingListView.DeleteRecordingEvent>(
-        resolve => {
-          view.addEventListener('deleterecording', resolve, {once: true});
-        },
-    );
-    dispatchClickEvent(deleteButton);
-    const event = await eventSent;
-    assert.strictEqual(event.storageName, 'storage-test');
+  async function createView(output?: Components.RecordingListView.ViewOutput): Promise<[
+    ViewFunctionStub<typeof Components.RecordingListView.RecordingListView>,
+    Components.RecordingListView.RecordingListView
+  ]> {
+    const view = createViewFunctionStub(Components.RecordingListView.RecordingListView, output);
+    const component = new Components.RecordingListView.RecordingListView(undefined, view);
+    component.recordings = [{storageName: 'storage-test', name: 'test'}];
+    component.replayAllowed = true;
+    component.wasShown();
+    views.push(component);
+    return [view, component];
+  }
+
+  it('should open a recording on Enter', async () => {
+    const [view, component] = await createView();
+    const dispatchEventSpy = sinon.spy(component.contentElement, 'dispatchEvent');
+
+    view.input.onKeyDown('storage-test', new KeyboardEvent('keydown', {key: 'Enter'}));
+
+    sinon.assert.calledOnce(dispatchEventSpy);
+    const event = dispatchEventSpy.firstCall.args[0];
+    assert.instanceOf(event, Components.RecordingListView.OpenRecordingEvent);
+    assert.strictEqual((event as Components.RecordingListView.OpenRecordingEvent).storageName, 'storage-test');
   });
 
-  it('should not open a recording on Enter on the delete button', async () => {
-    const view = new Components.RecordingListView.RecordingListView();
-    renderElementIntoDOM(view);
-    view.recordings = [{storageName: 'storage-test', name: 'test'}];
-    await RenderCoordinator.done();
-    const deleteButton = view.shadowRoot?.querySelector(
-                             '.delete-recording-button',
-                             ) as HTMLDivElement;
-    assert.isOk(deleteButton);
-    const {resolve: forceResolve, promise: eventSent} =
-        Promise.withResolvers<Components.RecordingListView.OpenRecordingEvent|void>();
+  it('should delete a recording', async () => {
+    const [view, component] = await createView();
+    const dispatchEventSpy = sinon.spy(component.contentElement, 'dispatchEvent');
 
-    view.addEventListener('openrecording', forceResolve, {once: true});
+    view.input.onDeleteClick('storage-test', new MouseEvent('click'));
 
-    dispatchKeyDownEvent(deleteButton, {key: 'Enter', bubbles: true});
-    const maybeEvent = await Promise.race([
-      eventSent,
-      new Promise(resolve => queueMicrotask(() => resolve('timeout'))),
-    ]);
-    assert.strictEqual(maybeEvent, 'timeout');
-    forceResolve();
+    sinon.assert.calledOnce(dispatchEventSpy);
+    const event = dispatchEventSpy.firstCall.args[0];
+    assert.instanceOf(event, Components.RecordingListView.DeleteRecordingEvent);
+    assert.strictEqual((event as Components.RecordingListView.DeleteRecordingEvent).storageName, 'storage-test');
   });
 });