Cover ProtocolMonitor with tests.

Move some tests from JSONEditor.test.ts to the ProtocolMonitor.test.ts

Bug: 388730998
Change-Id: I0564aab93299a5b05dfb3cbf887e8d353fb404d5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6333531
Commit-Queue: Danil Somsikov <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/protocol_monitor/JSONEditor.test.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Host from '../../core/host/host.js';
-import * as SDK from '../../core/sdk/sdk.js';
 import {
   dispatchClickEvent,
   dispatchKeyDownEvent,
@@ -13,7 +12,6 @@ import {
 } from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {expectCall} from '../../testing/ExpectStubCall.js';
-import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
 import * as Menus from '../../ui/components/menus/menus.js';
 import type * as SuggestionInput from '../../ui/components/suggestion_input/suggestion_input.js';
 
@@ -476,63 +474,6 @@ describeWithEnvironment('JSONEditor', () => {
     });
   });
 
-  describe('Display command written in editor inside input bar', () => {
-    it('should display the command edited inside the CDP editor into the input bar', async () => {
-      const jsonEditor = new ProtocolMonitor.JSONEditor.JSONEditor(document.createElement('div'));
-      jsonEditor.command = 'Test.test';
-      jsonEditor.parameters = [
-        {
-          name: 'test',
-          type: ProtocolMonitor.JSONEditor.ParameterType.STRING,
-          description: 'test',
-          optional: false,
-          value: 'test',
-        },
-      ];
-      const view = createViewFunctionStub(ProtocolMonitor.ProtocolMonitor.ProtocolMonitorImpl, {
-        editorWidget: jsonEditor,
-      });
-      const protocolMonitor = new ProtocolMonitor.ProtocolMonitor.ProtocolMonitorImpl(view);
-      await protocolMonitor.updateComplete;
-      view.input.onSplitChange(new CustomEvent('change', {detail: 'OnlyMain'}));
-      await protocolMonitor.updateComplete;
-
-      assert.deepEqual(view.input.command, '{"command":"Test.test","parameters":{"test":"test"}}');
-    });
-
-    it('should update the selected target inside the input bar', async () => {
-      const jsonEditor = new ProtocolMonitor.JSONEditor.JSONEditor(document.createElement('div'));
-      jsonEditor.targetId = 'value2';
-      sinon.stub(SDK.TargetManager.TargetManager.instance(), 'targets').returns([
-        {id: () => 'value1'} as SDK.Target.Target,
-        {id: () => 'value2'} as SDK.Target.Target,
-      ]);
-      const view =
-          createViewFunctionStub(ProtocolMonitor.ProtocolMonitor.ProtocolMonitorImpl, {editorWidget: jsonEditor});
-      const protocolMonitor = new ProtocolMonitor.ProtocolMonitor.ProtocolMonitorImpl(view);
-      await protocolMonitor.updateComplete;
-      view.input.onSplitChange(new CustomEvent('change', {detail: 'OnlyMain'}));
-      await protocolMonitor.updateComplete;
-
-      assert.deepEqual(view.input.selectedTargetId, 'value2');
-    });
-
-    // Flaky test.
-    it.skip(
-        '[crbug.com/1484534]: should not display the command into the input bar if the command is empty string',
-        async () => {
-          const jsonEditor = new ProtocolMonitor.JSONEditor.JSONEditor(document.createElement('div'));
-          jsonEditor.command = '';
-          const view =
-              createViewFunctionStub(ProtocolMonitor.ProtocolMonitor.ProtocolMonitorImpl, {editorWidget: jsonEditor});
-          const protocolMonitor = new ProtocolMonitor.ProtocolMonitor.ProtocolMonitorImpl(view);
-          await protocolMonitor.updateComplete;
-          view.input.onSplitChange(new CustomEvent('change', {detail: 'OnlyMain'}));
-          await protocolMonitor.updateComplete;
-
-          assert.deepEqual(view.input.command, '');
-        });
-  });
   describe('Descriptions', () => {
     it('should show the popup with the correct description for the description of parameters', async () => {
       const inputParameters = [

front_end/panels/protocol_monitor/ProtocolMonitor.test.ts

@@ -2,9 +2,239 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
+import * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import {findMenuItemWithLabel} from '../../testing/ContextMenuHelpers.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {expectCall} from '../../testing/ExpectStubCall.js';
+import {stubFileManager} from '../../testing/FileManagerHelpers.js';
+import {createViewFunctionStub, type ViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
 import * as ProtocolMonitor from './protocol_monitor.js';
 
-describe('ProtocolMonitor', () => {
+const {InspectorBackend} = ProtocolClient;
+const {ProtocolMonitorImpl} = ProtocolMonitor.ProtocolMonitor;
+type ProtocolMonitorImpl = ProtocolMonitor.ProtocolMonitor.ProtocolMonitorImpl;
+const {JSONEditor} = ProtocolMonitor.JSONEditor;
+type JSONEditor = ProtocolMonitor.JSONEditor.JSONEditor;
+
+let view!: ViewFunctionStub<typeof ProtocolMonitorImpl>;
+let protocolMonitor!: ProtocolMonitorImpl;
+let jsonEditor!: JSONEditor;
+let sendRawMessageStub!: sinon.SinonStub;
+
+describeWithEnvironment('ProtocolMonitor', () => {
+  beforeEach(() => {
+    // sendRawMessageStub = sinon.stub(InspectorBackend.test,'sendRawMessage');
+    sendRawMessageStub = sinon.stub();
+    InspectorBackend.test.sendRawMessage = sendRawMessageStub;
+    jsonEditor = new JSONEditor(document.createElement('div'));
+    view = createViewFunctionStub(ProtocolMonitorImpl, {editorWidget: jsonEditor});
+    protocolMonitor = new ProtocolMonitorImpl(view);
+  });
+
+  it('sends commands', async () => {
+    view.input.onCommandSubmitted(
+        new CustomEvent('submit', {detail: '{"command":"Test.test","parameters":{"test":"test"}}'}));
+    assert.isTrue(sendRawMessageStub.calledOnce);
+    assert.isTrue(sendRawMessageStub.calledOnce);
+    assert.strictEqual(sendRawMessageStub.getCall(0).args[0], 'Test.test');
+    assert.deepEqual(sendRawMessageStub.getCall(0).args[1], {test: 'test'});
+    assert.deepEqual(sendRawMessageStub.getCall(0).args[3], '');
+  });
+
+  it('records commands', async () => {
+    protocolMonitor.wasShown();
+    InspectorBackend.test.onMessageSent?.({domain: 'Test', method: 'Test.test', params: {test: 'test'}, id: 1}, null);
+    assert.deepEqual((await view.nextInput).messages.map(m => ({method: m.method, params: m.params, id: m.id})), [
+      {
+        method: 'Test.test',
+        params: {test: 'test'},
+        id: 1,
+      },
+    ]);
+
+    InspectorBackend.test.onMessageReceived?.(
+        {
+          id: 1,
+          method: 'Test.test',
+          params: {test: 'test'},
+          requestTime: 0,
+          result: {test: 'test'},
+        },
+        null);
+    assert.deepEqual(
+        (await view.nextInput).messages.map(m => ({method: m.method, params: m.params, id: m.id, result: m.result})), [
+          {
+            method: 'Test.test',
+            params: {test: 'test'},
+            id: 1,
+            result: {test: 'test'},
+          },
+        ]);
+  });
+
+  it('only records commands if recording is enabled', async () => {
+    InspectorBackend.test.onMessageSent?.({domain: 'Test', method: 'Test.test', params: {test: 'test'}, id: 1}, null);
+
+    protocolMonitor.wasShown();
+    InspectorBackend.test.onMessageSent?.({domain: 'Test', method: 'Test.test', params: {test: 'test'}, id: 2}, null);
+    assert.deepEqual((await view.nextInput).messages.map(m => ({method: m.method, params: m.params, id: m.id})), [
+      {
+        method: 'Test.test',
+        params: {test: 'test'},
+        id: 2,
+      },
+    ]);
+
+    view.input.onRecord({target: {toggled: false}} as unknown as Event);
+    InspectorBackend.test.onMessageSent?.({domain: 'Test', method: 'Test.test', params: {test: 'test'}, id: 3}, null);
+    view.input.onRecord({target: {toggled: true}} as unknown as Event);
+    InspectorBackend.test.onMessageSent?.({domain: 'Test', method: 'Test.test', params: {test: 'test'}, id: 4}, null);
+    assert.deepEqual((await view.nextInput).messages.map(m => ({method: m.method, params: m.params, id: m.id})), [
+      {
+        method: 'Test.test',
+        params: {test: 'test'},
+        id: 2,
+      },
+      {
+        method: 'Test.test',
+        params: {test: 'test'},
+        id: 4,
+      },
+    ]);
+  });
+
+  it('clears messages', async () => {
+    protocolMonitor.wasShown();
+    InspectorBackend.test.onMessageSent?.({domain: 'Test', method: 'Test.test', params: {test: 'test'}, id: 2}, null);
+    assert.lengthOf((await view.nextInput).messages, 1);
+
+    view.input.onClear();
+    assert.lengthOf((await view.nextInput).messages, 0);
+  });
+
+  it('saves to file', async () => {
+    const fileManager = stubFileManager();
+    const fileManagerCloseCall = expectCall(fileManager.close);
+
+    protocolMonitor.wasShown();
+    InspectorBackend.test.onMessageSent?.({domain: 'Test', method: 'Test.test', params: {test: 'test'}, id: 2}, null);
+
+    const TIMESTAMP = 42;
+    const clock = sinon.useFakeTimers();
+    clock.tick(TIMESTAMP);
+    const FILENAME = 'ProtocolMonitor-' + Platform.DateUtilities.toISO8601Compact(new Date(TIMESTAMP)) + '.json' as
+        Platform.DevToolsPath.RawPathString;
+
+    (await view.nextInput).onSave();
+
+    assert.isTrue(fileManager.save.calledOnce);
+    assert.isTrue(fileManager.save.calledOnceWith(FILENAME, '', true, false));
+    await fileManagerCloseCall;
+    assert.isTrue(fileManager.append.calledOnceWith(FILENAME, sinon.match('"method": "Test.test"')));
+
+    clock.restore();
+  });
+
+  describe('context menu', () => {
+    let menu!: UI.ContextMenu.ContextMenu;
+    let element!: HTMLElement;
+
+    function triggerContextMenu(index: number) {
+      menu = new UI.ContextMenu.ContextMenu(new Event('contextmenu'));
+      element = {dataset: {index: `${index}`}} as unknown as HTMLElement;
+      view.input.onSelect(new CustomEvent('select', {detail: element}));
+      view.input.onContextMenu(new CustomEvent('contextmenu', {detail: {menu, element}}));
+    }
+
+    beforeEach(() => {
+      menu = new UI.ContextMenu.ContextMenu(new Event('contextmenu'));
+      protocolMonitor.wasShown();
+      InspectorBackend.test.onMessageSent?.(
+          {domain: 'Test', method: 'Test.test1', params: {test: 'test'}, id: 2}, null);
+      InspectorBackend.test.onMessageSent?.(
+          {domain: 'Test', method: 'Test.test2', params: {test: 'test'}, id: 2}, null);
+      triggerContextMenu(1);
+    });
+
+    it('priovides edit and resend context menu item', async () => {
+      assert.isFalse(view.input.sidebarVisible);
+
+      let editAndResend = findMenuItemWithLabel(menu.editSection(), 'Edit and resend');
+      assert.exists(editAndResend);
+      menu.invokeHandler(editAndResend.id());
+
+      assert.strictEqual((await view.nextInput).command, '{"command":"Test.test2","parameters":{"test":"test"}}');
+      assert.isTrue(view.input.sidebarVisible);
+
+      const displayCommandStub = sinon.stub(jsonEditor, 'displayCommand');
+
+      triggerContextMenu(0);
+      editAndResend = findMenuItemWithLabel(menu.editSection(), 'Edit and resend');
+      assert.exists(editAndResend);
+      menu.invokeHandler(editAndResend.id());
+
+      assert.isTrue(displayCommandStub.calledOnceWith('Test.test1', {test: 'test'}, ''));
+    });
+
+    it('priovides filter context menu item', async () => {
+      const filter = findMenuItemWithLabel(menu.editSection(), 'Filter');
+      assert.exists(filter);
+      menu.invokeHandler(filter.id());
+
+      assert.strictEqual((await view.nextInput).filter, 'method:Test.test2');
+    });
+
+    it('priovides documentation context menu item', async () => {
+      const documentation = findMenuItemWithLabel(menu.footerSection(), 'Documentation');
+      assert.exists(documentation);
+
+      const openInNewTabStub = sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'openInNewTab');
+      menu.invokeHandler(documentation.id());
+
+      assert.isTrue(
+          openInNewTabStub.calledOnceWith('https://chromedevtools.github.io/devtools-protocol/tot/Test#method-test2'));
+    });
+  });
+
+  describe('Display command written in editor inside input bar', () => {
+    it('should display the command edited inside the CDP editor into the input bar', async () => {
+      jsonEditor.command = 'Test.test';
+      jsonEditor.parameters = [
+        {
+          name: 'test',
+          type: ProtocolMonitor.JSONEditor.ParameterType.STRING,
+          description: 'test',
+          optional: false,
+          value: 'test',
+        },
+      ];
+      view.input.onSplitChange(new CustomEvent('change', {detail: 'OnlyMain'}));
+      assert.deepEqual((await view.nextInput).command, '{"command":"Test.test","parameters":{"test":"test"}}');
+    });
+
+    it('should update the selected target inside the input bar', async () => {
+      jsonEditor.targetId = 'value2';
+      sinon.stub(SDK.TargetManager.TargetManager.instance(), 'targets').returns([
+        {id: () => 'value1'} as SDK.Target.Target,
+        {id: () => 'value2'} as SDK.Target.Target,
+      ]);
+      view.input.onSplitChange(new CustomEvent('change', {detail: 'OnlyMain'}));
+      assert.deepEqual((await view.nextInput).selectedTargetId, 'value2');
+    });
+
+    it('should not display the command into the input bar if the command is empty string', async () => {
+      jsonEditor.command = '';
+      view.input.onSplitChange(new CustomEvent('change', {detail: 'OnlyMain'}));
+
+      assert.deepEqual((await view.nextInput).command, '');
+    });
+  });
+
   describe('parseCommandInput', () => {
     it('parses various JSON formats', async () => {
       const input = {