| // Copyright 2022 The Chromium Authors |
| // 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 { |
| dispatchClickEvent, |
| dispatchKeyDownEvent, |
| dispatchMouseMoveEvent, |
| raf, |
| renderElementIntoDOM |
| } from '../../testing/DOMHelpers.js'; |
| import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js'; |
| import {expectCall} from '../../testing/ExpectStubCall.js'; |
| import type * as SuggestionInput from '../../ui/components/suggestion_input/suggestion_input.js'; |
| |
| import * as ProtocolMonitor from './protocol_monitor.js'; |
| |
| describeWithEnvironment('JSONEditor', () => { |
| const renderJSONEditor = () => { |
| const jsonEditor = new ProtocolMonitor.JSONEditor.JSONEditor(document.createElement('div')); |
| jsonEditor.markAsRoot(); |
| jsonEditor.show(renderElementIntoDOM(document.createElement('main'))); |
| return jsonEditor; |
| }; |
| |
| const populateMetadata = async (jsonEditor: ProtocolMonitor.JSONEditor.JSONEditor) => { |
| const mockDomain = [ |
| { |
| domain: 'Test', |
| metadata: { |
| 'Test.test': { |
| parameters: [{ |
| name: 'test', |
| type: 'string', |
| optional: false, |
| typeRef: 'Test.testRef', |
| }], |
| description: 'Description1.', |
| replyArgs: ['Test1'], |
| }, |
| 'Test.test2': { |
| parameters: [{ |
| optional: true, |
| type: 'array', |
| name: 'test2', |
| typeRef: 'string', |
| }], |
| }, |
| 'Test.test3': { |
| parameters: [{ |
| optional: false, |
| type: 'object', |
| value: [ |
| { |
| optional: true, |
| type: 'string', |
| name: 'param1', |
| }, |
| { |
| optional: true, |
| type: 'string', |
| name: 'param2', |
| }, |
| ], |
| name: 'test3', |
| typeRef: 'string', |
| }], |
| }, |
| 'Test.test4': { |
| parameters: [{ |
| name: 'test', |
| type: 'boolean', |
| optional: false, |
| }], |
| description: 'Description4.', |
| replyArgs: ['Test4'], |
| }, |
| 'Test.test5': { |
| parameters: [ |
| { |
| name: 'test', |
| type: 'string', |
| optional: true, |
| }, |
| { |
| name: 'test2', |
| type: 'string', |
| optional: true, |
| }, |
| ], |
| description: 'Description5.', |
| replyArgs: ['Test5'], |
| }, |
| 'Test.test6': { |
| parameters: [{ |
| name: 'test', |
| type: 'number', |
| optional: true, |
| }], |
| description: 'Description6.', |
| replyArgs: ['Test6'], |
| }, |
| 'Test.test7': { |
| parameters: [{ |
| name: 'test', |
| type: 'boolean', |
| optional: true, |
| }], |
| description: 'Description7.', |
| replyArgs: ['Test7'], |
| }, |
| 'Test.test8': { |
| parameters: [{ |
| name: 'test', |
| type: 'number', |
| optional: false, |
| }], |
| description: 'Description8.', |
| replyArgs: ['Test8'], |
| }, |
| 'Test.test9': { |
| parameters: [ |
| { |
| name: 'traceConfig', |
| type: 'object', |
| optional: false, |
| description: '', |
| typeRef: 'Tracing.TraceConfig', |
| }, |
| ], |
| description: 'Description9.', |
| replyArgs: ['Test9'], |
| }, |
| 'Test.test10': { |
| parameters: [ |
| { |
| name: 'NoTypeRef', |
| type: 'object', |
| optional: true, |
| description: '', |
| typeRef: 'NoTypeRef', |
| }, |
| ], |
| description: 'Description10.', |
| replyArgs: ['Test10'], |
| }, |
| 'Test.test11': { |
| parameters: [{ |
| optional: false, |
| type: 'array', |
| name: 'test11', |
| typeRef: 'Test.arrayTypeRef', |
| }], |
| }, |
| 'Test.test12': { |
| parameters: [{ |
| optional: true, |
| type: 'object', |
| value: [ |
| { |
| optional: false, |
| type: 'string', |
| name: 'param1', |
| }, |
| { |
| optional: false, |
| type: 'number', |
| name: 'param2', |
| }, |
| ], |
| name: 'test12', |
| typeRef: 'Optional.Object', |
| }], |
| }, |
| 'Test.test13': { |
| parameters: [{ |
| name: 'newTest', |
| type: 'string', |
| optional: false, |
| typeRef: 'Test.newTestRef', |
| }], |
| description: 'Description13.', |
| replyArgs: ['Test13'], |
| }, |
| 'Test.test14': { |
| parameters: [ |
| { |
| name: 'NoTypeRef', |
| type: 'object', |
| optional: true, |
| description: '', |
| }, |
| ], |
| description: 'Description14.', |
| replyArgs: ['Test14'], |
| }, |
| }, |
| }, |
| ] as Iterable<ProtocolMonitor.ProtocolMonitor.ProtocolDomain>; |
| |
| const metadataByCommand = ProtocolMonitor.ProtocolMonitor.buildProtocolMetadata(mockDomain); |
| jsonEditor.metadataByCommand = metadataByCommand; |
| await jsonEditor.updateComplete; |
| }; |
| |
| const renderHoveredElement = async (element: Element|null) => { |
| if (element) { |
| const clock = sinon.useFakeTimers(); |
| try { |
| dispatchMouseMoveEvent(element, { |
| bubbles: true, |
| composed: true, |
| }); |
| clock.tick(300); |
| clock.restore(); |
| } finally { |
| clock.restore(); |
| } |
| await raf(); |
| } else { |
| throw new Error('No parameter has been found'); |
| } |
| }; |
| |
| const renderSuggestionBox = async ( |
| command: string, jsonEditor: ProtocolMonitor.JSONEditor.JSONEditor, |
| enumsByName?: Map<string, Record<string, string>>) => { |
| jsonEditor.command = command; |
| if (enumsByName) { |
| jsonEditor.enumsByName = enumsByName; |
| } |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| await jsonEditor.updateComplete; |
| |
| const inputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input'); |
| // inputs[0] corresponds to the devtools-suggestion-input of the command |
| const suggestionInput = inputs[1]; |
| // Reset the value to empty string because for boolean it will be set to false by default and the correct suggestions will not show |
| suggestionInput.value = ''; |
| suggestionInput.focus(); |
| |
| await suggestionInput.updateComplete; |
| const suggestionBox = suggestionInput.renderRoot.querySelector('devtools-suggestion-box'); |
| |
| if (!suggestionBox) { |
| throw new Error('No suggestion box shown'); |
| } |
| const suggestions = Array.from(suggestionBox.renderRoot.querySelectorAll('li')).map(item => { |
| if (!item.textContent) { |
| throw new Error('No text inside suggestion'); |
| } |
| return (item.textContent.replaceAll(/\s/g, '')); |
| }); |
| return suggestions; |
| }; |
| |
| const serializePopupContent = () => { |
| const container = document.body.querySelector<HTMLDivElement>('[data-devtools-glass-pane]'); |
| const hintDetailView = container?.shadowRoot?.querySelector('devtools-css-hint-details-view'); |
| return hintDetailView?.shadowRoot?.querySelector('.hint-popup-wrapper')?.textContent?.replaceAll(/\s/g, ''); |
| }; |
| |
| const renderEditorForCommand = async(command: string, parameters: Record<string, unknown>): Promise<{ |
| inputs: NodeListOf<SuggestionInput.SuggestionInput.SuggestionInput>, |
| displayedCommand: string, |
| jsonEditor: ProtocolMonitor.JSONEditor.JSONEditor, |
| }> => { |
| const typesByName = new Map(); |
| typesByName.set('string', [ |
| {name: 'param1', type: 'string', optional: false, description: 'display a string', typeRef: null}, |
| {name: 'param2', type: 'string', optional: false, description: 'displays another string', typeRef: null}, |
| ]); |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| jsonEditor.typesByName = typesByName; |
| |
| jsonEditor.displayCommand(command, parameters); |
| |
| await jsonEditor.updateComplete; |
| const shadowRoot = jsonEditor.contentElement; |
| const inputs = shadowRoot.querySelectorAll('devtools-suggestion-input'); |
| const displayedCommand = jsonEditor.command; |
| return {inputs, displayedCommand, jsonEditor}; |
| }; |
| |
| const renderParamsWithDefaultValues = async (command: string) => { |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| jsonEditor.command = command; |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| await jsonEditor.updateComplete; |
| |
| const param = jsonEditor.contentElement.querySelector('[data-paramId]'); |
| await renderHoveredElement(param); |
| |
| const setDefaultValueButton = jsonEditor.contentElement.querySelector('devtools-button'); |
| if (!setDefaultValueButton) { |
| throw new Error('No button'); |
| } |
| dispatchClickEvent(setDefaultValueButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| |
| const input = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input'); |
| const paramInput = input[1]; |
| |
| if (!paramInput) { |
| throw new Error('No input shown'); |
| } |
| return paramInput; |
| }; |
| |
| const renderWarningIcon = async (command: string, enumsByName?: Map<string, Record<string, string>>) => { |
| const jsonEditor = renderJSONEditor(); |
| await populateMetadata(jsonEditor); |
| jsonEditor.command = command; |
| if (enumsByName) { |
| jsonEditor.enumsByName = enumsByName; |
| } |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| await jsonEditor.updateComplete; |
| |
| // inputs[0] corresponds to the devtools-suggestion-input of the command |
| const input = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input')[1]; |
| if (!input) { |
| throw new Error('No editable content displayed'); |
| } |
| input.value = 'Not an accepted value'; |
| await jsonEditor.updateComplete; |
| input.focus(); |
| input.blur(); |
| await jsonEditor.updateComplete; |
| const warningIcon = jsonEditor.contentElement.querySelector('devtools-icon'); |
| if (!warningIcon) { |
| throw new Error('No icon displayed'); |
| } |
| return warningIcon; |
| }; |
| |
| describe('Binding input bar', () => { |
| it('should show the command written in the input bar inside the editor when parameters are strings with the correct value', |
| async () => { |
| const cdpCommand = { |
| command: 'Test.test', |
| parameters: { |
| test: 'test', |
| }, |
| }; |
| |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand)); |
| const {inputs} = await renderEditorForCommand(command, parameters); |
| const parameterRecorderInput = inputs[1]; |
| const value = parameterRecorderInput.value; |
| const expectedValue = 'test'; |
| assert.deepEqual(value, expectedValue); |
| }); |
| |
| it('should show the command written in the input bar inside the editor when parameters are arrays with the correct value', |
| async () => { |
| const cdpCommand = { |
| command: 'Test.test2', |
| parameters: { |
| test2: ['test'], |
| }, |
| }; |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand)); |
| const {inputs} = await renderEditorForCommand(command, parameters); |
| const parameterRecorderInput = inputs[1]; |
| const value = parameterRecorderInput.value; |
| const expectedValue = 'test'; |
| assert.deepEqual(value, expectedValue); |
| }); |
| |
| it('should show the command written in the input bar inside the editor when parameters are object with the correct value', |
| async () => { |
| const cdpCommand = { |
| command: 'Test.test3', |
| parameters: { |
| test3: { |
| param1: 'test1', |
| param2: 'test2', |
| }, |
| }, |
| }; |
| |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand)); |
| const {inputs} = await renderEditorForCommand(command, parameters); |
| const parameterRecorderInput = inputs[1]; |
| const value = parameterRecorderInput.value; |
| const expectedValue = 'test1'; |
| assert.deepEqual(value, expectedValue); |
| }); |
| |
| it('should should every parameter of a command as undefined even if some parameters have not been entered inside the input bar', |
| async () => { |
| const cdpCommand = { |
| command: 'Test.test5', |
| parameters: { |
| test: 'test', |
| }, |
| }; |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand)); |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| |
| jsonEditor.displayCommand(command, parameters); |
| |
| await jsonEditor.updateComplete; |
| const shadowRoot = jsonEditor.contentElement; |
| const displayedParameters = shadowRoot.querySelectorAll('.parameter'); |
| // Two parameters (test and test2) should be displayed because in the metadata, Test.test5 accepts two parameters |
| assert.lengthOf(displayedParameters, 2); |
| }); |
| it('does not output parameters if the input is invalid json', async () => { |
| const cdpCommand = '"command": "Test.test", "parameters":'; |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(cdpCommand); |
| |
| const {inputs} = await renderEditorForCommand(command, parameters); |
| |
| assert.deepEqual(inputs.length, Object.keys(parameters).length + 1); |
| }); |
| |
| it('does not output parameters if the parameters field is not an object', async () => { |
| const cdpCommand = '"command": "test", "parameters": 1234'; |
| |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(cdpCommand); |
| |
| const {inputs} = await renderEditorForCommand(command, parameters); |
| |
| assert.deepEqual(inputs.length, Object.keys(parameters).length + 1); |
| }); |
| |
| it('does not output parameters if there is no parameter inserted in the input bar', async () => { |
| const cdpCommand = '"command": "test"'; |
| |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(cdpCommand); |
| |
| const {inputs} = await renderEditorForCommand(command, parameters); |
| |
| assert.deepEqual(inputs.length, Object.keys(parameters).length + 1); |
| }); |
| |
| it('checks that the command input field remains empty when there is no command parameter entered', async () => { |
| const cdpCommand = { |
| parameters: { |
| test: 'test', |
| }, |
| }; |
| |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand)); |
| |
| const {displayedCommand} = await renderEditorForCommand(command, parameters); |
| |
| assert.deepEqual(displayedCommand, ''); |
| }); |
| |
| it('checks that the command input field remains if the command is not supported', async () => { |
| const cdpCommand = 'dummyCommand'; |
| |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand)); |
| const {displayedCommand} = await renderEditorForCommand(command, parameters); |
| |
| assert.deepEqual(displayedCommand, ''); |
| }); |
| }); |
| |
| describe('Descriptions', () => { |
| it('should show the popup with the correct description for the description of parameters', async () => { |
| const inputParameters = [ |
| { |
| type: 'array', |
| optional: false, |
| value: [ |
| {name: '0', value: 'value0', optional: true, type: 'string'}, |
| {name: '1', value: 'value1', optional: true, type: 'string'}, |
| {name: '2', value: 'value2', optional: true, type: 'string'}, |
| ], |
| name: 'arrayParam', |
| typeRef: 'string', |
| description: 'test.', |
| }, |
| ] as ProtocolMonitor.JSONEditor.Parameter[]; |
| const jsonEditor = renderJSONEditor(); |
| |
| jsonEditor.parameters = inputParameters; |
| await jsonEditor.updateComplete; |
| const param = jsonEditor.contentElement.querySelector('[data-paramId]'); |
| |
| await renderHoveredElement(param); |
| const popupContent = serializePopupContent(); |
| const expectedPopupContent = 'test.Type:arrayLearnMore'; |
| assert.deepEqual(popupContent, expectedPopupContent); |
| }); |
| |
| it('should show the popup with the correct description for the description of command', async () => { |
| const cdpCommand = 'Test.test'; |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| jsonEditor.command = cdpCommand; |
| await jsonEditor.updateComplete; |
| |
| const command = jsonEditor.contentElement.querySelector('.command'); |
| await renderHoveredElement(command); |
| |
| const popupContent = serializePopupContent(); |
| |
| const expectedPopupContent = 'Description1.Returns:Test1LearnMore'; |
| assert.deepEqual(popupContent, expectedPopupContent); |
| }); |
| }); |
| |
| describe('Suggestion box', () => { |
| it('should display suggestion box with correct suggestions when the parameter is an enum', async () => { |
| const enumsByName = new Map([ |
| ['Test.testRef', {Test: 'test', Test1: 'test1', Test2: 'test2'}], |
| ]); |
| const command = 'Test.test'; |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| |
| const suggestions = await renderSuggestionBox(command, jsonEditor, enumsByName); |
| assert.deepEqual(suggestions, ['test', 'test1', 'test2']); |
| }); |
| |
| it('should display suggestion box with correct suggestions when the parameter is a boolean', async () => { |
| const command = 'Test.test4'; |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| |
| const suggestions = await renderSuggestionBox(command, jsonEditor); |
| |
| assert.deepEqual(suggestions, ['false', 'true']); |
| }); |
| |
| it('should show the suggestion box for enum parameters nested inside arrays', async () => { |
| const enumsByName = new Map([ |
| ['Test.arrayTypeRef', {Test: 'test', Test1: 'test1', Test2: 'test2'}], |
| ]); |
| const command = 'Test.test11'; |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| jsonEditor.enumsByName = enumsByName; |
| jsonEditor.command = command; |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| |
| await jsonEditor.updateComplete; |
| |
| const param = jsonEditor.contentElement.querySelector('[data-paramId]'); |
| await renderHoveredElement(param); |
| |
| const addParamButton = jsonEditor.contentElement.querySelector('devtools-button[title="Add a parameter"]'); |
| if (!addParamButton) { |
| throw new Error('No button'); |
| } |
| dispatchClickEvent(addParamButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| |
| const inputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input'); |
| // inputs[0] corresponds to the devtools-suggestion-input of the command |
| const suggestionInput = inputs[1]; |
| // Reset the value to empty string because for boolean it will be set to false by default and the correct suggestions will not show |
| suggestionInput.value = ''; |
| suggestionInput.focus(); |
| |
| await suggestionInput.updateComplete; |
| const suggestionBox = suggestionInput.renderRoot.querySelector('devtools-suggestion-box'); |
| |
| if (!suggestionBox) { |
| throw new Error('No suggestion box shown'); |
| } |
| const suggestions = Array.from(suggestionBox.renderRoot.querySelectorAll('li')).map(item => { |
| if (!item.textContent) { |
| throw new Error('No text inside suggestion'); |
| } |
| return (item.textContent.replaceAll(/\s/g, '')); |
| }); |
| |
| assert.deepEqual(suggestions, ['test', 'test1', 'test2']); |
| }); |
| |
| it('should update the values inside the suggestion box when the command changes', async () => { |
| const enumsByName = new Map(); |
| enumsByName.set('Test.testRef', {Test: 'test', Test1: 'test1', Test2: 'test2'}); |
| enumsByName.set('Test.newTestRef', {NewTest: 'newtest', NewTest1: 'newtest1', NewTest2: 'newtest2'}); |
| |
| const command = 'Test.test'; |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| |
| await renderSuggestionBox(command, jsonEditor, enumsByName); |
| |
| const newCommand = 'Test.test13'; |
| |
| const newSuggestions = await renderSuggestionBox(newCommand, jsonEditor, enumsByName); |
| |
| assert.deepEqual(newSuggestions, ['newtest', 'newtest1', 'newtest2']); |
| }); |
| |
| it('should not display suggestion box when the parameter is neither a string or a boolean', async () => { |
| const command = 'Test.test8'; |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| |
| const suggestions = await renderSuggestionBox(command, jsonEditor); |
| |
| assert.deepEqual(suggestions, []); |
| }); |
| }); |
| |
| describe('Display with default values', () => { |
| it('should show <empty_string> inside the placeholder when clicking on plus button for optional string parameter', |
| async () => { |
| const command = 'Test.test5'; |
| |
| const placeholder = (await renderParamsWithDefaultValues(command)).placeholder; |
| |
| const expectedPlaceholder = '<empty_string>'; |
| |
| assert.deepEqual(placeholder, expectedPlaceholder); |
| }); |
| |
| it('should show 0 as a value inside input when clicking on plus button for optional number parameter', async () => { |
| const command = 'Test.test6'; |
| |
| const value = Number((await renderParamsWithDefaultValues(command)).value); |
| |
| const expectedValue = 0; |
| |
| assert.deepEqual(value, expectedValue); |
| }); |
| |
| it('should show false as a value inside input when clicking on plus button for optional boolean parameter', |
| async () => { |
| const command = 'Test.test7'; |
| |
| const value = Boolean((await renderParamsWithDefaultValues(command)).value); |
| |
| const expectedValue = false; |
| |
| assert.deepEqual(value, expectedValue); |
| }); |
| |
| it('should show the keys with default values when clicking of plus button for optional object parameters', |
| async () => { |
| const command = 'Test.test12'; |
| const typesByName = new Map(); |
| typesByName.set('Optional.Object', [ |
| { |
| optional: false, |
| type: 'string', |
| name: 'param1', |
| }, |
| { |
| optional: false, |
| type: 'number', |
| name: 'param2', |
| }, |
| ]); |
| const jsonEditor = renderJSONEditor(); |
| jsonEditor.typesByName = typesByName; |
| await populateMetadata(jsonEditor); |
| jsonEditor.command = command; |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| await jsonEditor.updateComplete; |
| |
| const param = jsonEditor.contentElement.querySelector('[data-paramId]'); |
| await renderHoveredElement(param); |
| |
| const showDefaultValuesButton = |
| jsonEditor.contentElement.querySelector('devtools-button[title="Add a parameter"]'); |
| if (!showDefaultValuesButton) { |
| throw new Error('No button'); |
| } |
| |
| dispatchClickEvent(showDefaultValuesButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| |
| // The -1 is need to not take into account the input for the command |
| const numberOfInputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input').length - 1; |
| |
| assert.deepEqual(numberOfInputs, 2); |
| }); |
| }); |
| |
| describe('Reset to default values', () => { |
| it('should reset the value of keys of object parameter to default value when clicking on clear button', |
| async () => { |
| const cdpCommand = { |
| command: 'Test.test3', |
| parameters: { |
| test3: { |
| param1: 'test1', |
| param2: 'test2', |
| }, |
| }, |
| }; |
| |
| const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand)); |
| const {jsonEditor} = await renderEditorForCommand(command, parameters); |
| |
| const param = jsonEditor.contentElement.querySelector('[data-paramId=\'test3\']'); |
| |
| await renderHoveredElement(param); |
| |
| const setDefaultValueButton = jsonEditor.contentElement.querySelector('devtools-button'); |
| |
| if (!setDefaultValueButton) { |
| throw new Error('No button'); |
| } |
| dispatchClickEvent(setDefaultValueButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| |
| const input = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input'); |
| const values = [input[1].value, input[2].value]; |
| |
| const expectedValues = ['', '']; |
| |
| assert.deepEqual(values, expectedValues); |
| }); |
| |
| it('should reset the value of array parameter to empty array when clicking on clear button', async () => { |
| const inputParameters = [ |
| { |
| type: 'array', |
| optional: false, |
| value: [ |
| {name: '0', value: 'value0', optional: true, type: 'string'}, |
| {name: '1', value: 'value1', optional: true, type: 'string'}, |
| {name: '2', value: 'value2', optional: true, type: 'string'}, |
| ], |
| name: 'arrayParam', |
| typeRef: 'string', |
| }, |
| ]; |
| |
| const jsonEditor = renderJSONEditor(); |
| jsonEditor.parameters = inputParameters as ProtocolMonitor.JSONEditor.Parameter[]; |
| await jsonEditor.updateComplete; |
| |
| const param = jsonEditor.contentElement.querySelector('[data-paramId=\'arrayParam\']'); |
| |
| await renderHoveredElement(param); |
| |
| const setDefaultValueButton = |
| jsonEditor.contentElement.querySelector('devtools-button[title="Reset to default value"]'); |
| |
| if (!setDefaultValueButton) { |
| throw new Error('No button'); |
| } |
| dispatchClickEvent(setDefaultValueButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| |
| const value = jsonEditor.parameters[0].value; |
| |
| assert.deepEqual(value, []); |
| }); |
| |
| it('should reset the value of optional object parameter to undefined after clicking on clear button', async () => { |
| const command = 'Test.test12'; |
| const typesByName = new Map(); |
| typesByName.set('Optional.Object', [ |
| { |
| optional: false, |
| type: 'string', |
| name: 'param1', |
| }, |
| { |
| optional: false, |
| type: 'number', |
| name: 'param2', |
| }, |
| ]); |
| const jsonEditor = renderJSONEditor(); |
| jsonEditor.typesByName = typesByName; |
| await populateMetadata(jsonEditor); |
| jsonEditor.command = command; |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| await jsonEditor.updateComplete; |
| |
| const param = jsonEditor.contentElement.querySelector('[data-paramId]'); |
| await renderHoveredElement(param); |
| |
| const showDefaultValuesButton = |
| jsonEditor.contentElement.querySelector('devtools-button[title="Add a parameter"]'); |
| if (!showDefaultValuesButton) { |
| throw new Error('No button'); |
| } |
| |
| dispatchClickEvent(showDefaultValuesButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| |
| await renderHoveredElement(param); |
| const clearButton = jsonEditor.contentElement.querySelector('devtools-button[title="Reset to default value"]'); |
| |
| if (!clearButton) { |
| throw new Error('No clear button'); |
| } |
| |
| dispatchClickEvent(clearButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| // The -1 is need to not take into account the input for the command |
| const numberOfInputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input').length - 1; |
| |
| assert.deepEqual(numberOfInputs, 0); |
| }); |
| }); |
| |
| describe('Delete and add for array parameters', () => { |
| it('should delete the specified array parameter by clicking the "Delete" button', async () => { |
| const inputParameters = [ |
| { |
| type: 'array', |
| optional: false, |
| value: [ |
| {name: '0', value: 'value0', optional: true, type: 'string'}, |
| {name: '1', value: 'value1', optional: true, type: 'string'}, |
| {name: '2', value: 'value2', optional: true, type: 'string'}, |
| ], |
| name: 'arrayParam', |
| typeRef: 'string', |
| }, |
| |
| ]; |
| |
| const expectedParams = { |
| arrayParam: ['value1', 'value2'], |
| }; |
| |
| const jsonEditor = renderJSONEditor(); |
| jsonEditor.parameters = inputParameters as ProtocolMonitor.JSONEditor.Parameter[]; |
| await jsonEditor.updateComplete; |
| |
| const shadowRoot = jsonEditor.contentElement; |
| |
| const parameterIndex = 0; |
| const deleteButtons = shadowRoot.querySelectorAll('devtools-button[title="Delete parameter"]'); |
| if (deleteButtons.length > parameterIndex) { |
| deleteButtons[parameterIndex].dispatchEvent(new Event('click')); |
| } |
| |
| const resultedParams = jsonEditor.getParameters(); |
| assert.deepEqual(expectedParams, resultedParams); |
| }); |
| |
| it('should add parameters when clicking on "Plus" button for array parameters', async () => { |
| const command = 'Test.test2'; |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| jsonEditor.command = command; |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| await jsonEditor.updateComplete; |
| |
| const param = jsonEditor.contentElement.querySelector('[data-paramId]'); |
| await renderHoveredElement(param); |
| |
| const addParamButton = jsonEditor.contentElement.querySelector('devtools-button[title="Add a parameter"]'); |
| if (!addParamButton) { |
| throw new Error('No button'); |
| } |
| dispatchClickEvent(addParamButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| dispatchClickEvent(addParamButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| |
| // The -1 is need to not take into account the input for the command |
| const numberOfInputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input').length - 1; |
| |
| assert.deepEqual(numberOfInputs, 2); |
| }); |
| }); |
| |
| describe('Send parameters in a correct format', () => { |
| it('should return the parameters in a format understandable by the ProtocolMonitor when sending a command via CTRL + Enter', |
| async () => { |
| const jsonEditor = renderJSONEditor(); |
| |
| const inputParameters = [ |
| { |
| optional: true, |
| type: 'string', |
| value: 'test0', |
| name: 'test0', |
| }, |
| { |
| optional: true, |
| type: 'string', |
| value: 'test1', |
| name: 'test1', |
| }, |
| { |
| optional: false, |
| type: 'string', |
| value: 'test2', |
| name: 'test2', |
| }, |
| { |
| optional: true, |
| type: 'array', |
| value: [ |
| { |
| optional: true, |
| type: 'string', |
| value: 'param1Value', |
| name: 'param1', |
| }, |
| { |
| optional: true, |
| type: 'string', |
| value: 'param2Value', |
| name: 'param2', |
| }, |
| ], |
| name: 'test3', |
| }, |
| { |
| optional: true, |
| type: 'object', |
| value: [ |
| { |
| optional: true, |
| type: 'string', |
| value: 'param1Value', |
| name: 'param1', |
| }, |
| { |
| optional: true, |
| type: 'string', |
| value: 'param2Value', |
| name: 'param2', |
| }, |
| ], |
| name: 'test4', |
| }, |
| ]; |
| |
| const expectedParameters = { |
| test0: 'test0', |
| test1: 'test1', |
| test2: 'test2', |
| test3: ['param1Value', 'param2Value'], |
| test4: { |
| param1: 'param1Value', |
| param2: 'param2Value', |
| }, |
| }; |
| |
| jsonEditor.parameters = inputParameters as ProtocolMonitor.JSONEditor.Parameter[]; |
| await jsonEditor.updateComplete; |
| |
| const promise = jsonEditor.once(ProtocolMonitor.JSONEditor.Events.SUBMIT_EDITOR); |
| |
| dispatchKeyDownEvent( |
| jsonEditor.contentElement.querySelector('.wrapper')!, {key: 'Enter', ctrlKey: true, metaKey: true}); |
| |
| const response = await promise; |
| |
| assert.deepEqual(response.parameters, expectedParameters); |
| }); |
| |
| it('should return the parameters in a format understandable by the ProtocolMonitor when sending a command via the send button', |
| async () => { |
| const jsonEditor = renderJSONEditor(); |
| jsonEditor.command = 'Test.test'; |
| jsonEditor.parameters = [ |
| { |
| name: 'testName', |
| type: ProtocolMonitor.JSONEditor.ParameterType.STRING, |
| description: 'test', |
| optional: false, |
| value: 'testValue', |
| }, |
| ]; |
| await jsonEditor.updateComplete; |
| |
| const toolbar = jsonEditor.contentElement.querySelector('devtools-toolbar'); |
| if (!toolbar) { |
| throw new Error('No toolbar found !'); |
| } |
| |
| const promise = jsonEditor.once(ProtocolMonitor.JSONEditor.Events.SUBMIT_EDITOR); |
| |
| dispatchClickEvent(toolbar.querySelector('devtools-button[title^="Send command"]')!); |
| |
| const response = await promise; |
| |
| const expectedParameters = { |
| testName: 'testValue', |
| }; |
| |
| assert.deepEqual(response.parameters, expectedParameters); |
| }); |
| }); |
| |
| describe('Verify the type of the entered value', () => { |
| it('should show a warning icon if the type of the parameter is number but the entered value is not', async () => { |
| const command = 'Test.test8'; |
| |
| const warningIcon = await renderWarningIcon(command); |
| assert.isNotNull(warningIcon); |
| }); |
| it('should show a warning icon if the type of the parameter is boolean but the entered value is not true or false', |
| async () => { |
| const command = 'Test.test4'; |
| const warningIcon = await renderWarningIcon(command); |
| assert.isNotNull(warningIcon); |
| }); |
| it('should show a warning icon if the type of the parameter is enum but the entered value is not among the accepted values', |
| async () => { |
| const enumsByName = new Map([ |
| ['Test.testRef', {Test: 'test', Test1: 'test1', Test2: 'test2'}], |
| ]); |
| const command = 'Test.test'; |
| const warningIcon = await renderWarningIcon(command, enumsByName); |
| assert.isNotNull(warningIcon); |
| }); |
| }); |
| |
| it('should not display parameters if a command is unknown', async () => { |
| const cdpCommand = 'Unknown'; |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| jsonEditor.command = cdpCommand; |
| await jsonEditor.updateComplete; |
| |
| const inputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input'); |
| const addButtons = jsonEditor.contentElement.querySelectorAll('devtools-button[title="Add a parameter"]'); |
| |
| assert.lengthOf(inputs, 1); |
| assert.lengthOf(addButtons, 0); |
| }); |
| |
| it('checks that the selection of a target works', async () => { |
| const jsonEditor = renderJSONEditor(); |
| await jsonEditor.updateComplete; |
| const targetId = 'target1'; |
| |
| const shadowRoot = jsonEditor.contentElement; |
| const selectElement = shadowRoot.querySelector<HTMLSelectElement>('select'); |
| |
| const option = document.createElement('option'); |
| option.value = targetId; |
| selectElement?.appendChild(option); |
| |
| selectElement!.selectedIndex = 0; |
| selectElement!.dispatchEvent(new Event('change')); |
| |
| const actualId = jsonEditor.targetId; |
| assert.deepEqual(actualId, targetId); |
| }); |
| |
| it('should copy the CDP command to clipboard via copy event', async () => { |
| const jsonEditor = renderJSONEditor(); |
| jsonEditor.command = 'Test.test'; |
| jsonEditor.parameters = [ |
| { |
| name: 'test', |
| type: ProtocolMonitor.JSONEditor.ParameterType.STRING, |
| description: 'test', |
| optional: false, |
| value: 'test', |
| }, |
| ]; |
| await jsonEditor.updateComplete; |
| const copyText = expectCall(sinon.stub( |
| Host.InspectorFrontendHost.InspectorFrontendHostInstance, |
| 'copyText', |
| )); |
| const toolbar = jsonEditor.contentElement.querySelector('devtools-toolbar'); |
| if (!toolbar) { |
| throw new Error('No toolbar found !'); |
| } |
| dispatchClickEvent(toolbar.querySelector('devtools-button[title="Copy command"]')!); |
| const [text] = await copyText; |
| |
| assert.strictEqual(JSON.stringify({command: 'Test.test', parameters: {test: 'test'}}), text); |
| }); |
| |
| it('should display the correct parameters with a command with array nested inside object', async () => { |
| const command = 'Test.test9'; |
| const typesByName = new Map(); |
| // This nested object contains every subtype including array |
| typesByName.set('Tracing.TraceConfig', [ |
| { |
| name: 'recordMode', |
| type: 'string', |
| optional: true, |
| description: 'Controls how the trace buffer stores data.', |
| typeRef: null, |
| }, |
| { |
| name: 'traceBufferSizeInKb', |
| type: 'number', |
| optional: true, |
| description: |
| 'Size of the trace buffer in kilobytes. If not specified or zero is passed, a default value of 200 MB would be used.', |
| typeRef: null, |
| }, |
| { |
| name: 'enableSystrace', |
| type: 'boolean', |
| optional: true, |
| description: 'Turns on system tracing.', |
| typeRef: null, |
| }, |
| { |
| name: 'includedCategories', |
| type: 'array', |
| optional: true, |
| description: 'Included category filters.', |
| typeRef: 'string', |
| }, |
| { |
| name: 'memoryDumpConfig', |
| type: 'object', |
| optional: true, |
| description: 'Configuration for memory dump triggers. Used only when \\"memory-infra\\" category is enabled.', |
| typeRef: |
| 'Tracing.MemoryDumpConfig', // This typeref is on purpose not added to show that this param will be treated as a string parameter |
| }, |
| ]); |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| jsonEditor.typesByName = typesByName; |
| jsonEditor.command = command; |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| await jsonEditor.updateComplete; |
| const shadowRoot = jsonEditor.contentElement; |
| const parameters = shadowRoot.querySelectorAll('.parameter'); |
| // This expected value is equal to 6 because there are 5 different parameters inside typesByName + 1 |
| // for the name of the parameter (traceConfig) |
| assert.lengthOf(parameters, 6); |
| }); |
| |
| it('should return the parameters in a format understandable by the ProtocolMonitor when sending a command with object parameter that has no typeRef found in map', |
| async () => { |
| const command = 'Test.test10'; |
| const typesByName = new Map(); |
| // We set the map typesBynames without the key NoTypeRef |
| typesByName.set('Tracing.TraceConfig', [ |
| { |
| name: 'memoryDumpConfig', |
| type: 'object', |
| optional: true, |
| description: |
| 'Configuration for memory dump triggers. Used only when \\"memory-infra\\" category is enabled.', |
| typeRef: |
| 'Tracing.MemoryDumpConfig', // This typeref is on purpose not added to show that this param will be treated as a string parameter |
| }, |
| ]); |
| |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| jsonEditor.typesByName = typesByName; |
| jsonEditor.command = command; |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| await jsonEditor.updateComplete; |
| const shadowRoot = jsonEditor.contentElement; |
| const parameters = shadowRoot.querySelector('.parameter'); |
| |
| await renderHoveredElement(parameters); |
| |
| const addParamButton = jsonEditor.contentElement.querySelector('devtools-button[title="Add custom property"]'); |
| if (!addParamButton) { |
| throw new Error('No button'); |
| } |
| // We click two times to display two parameters with key/value pairs |
| dispatchClickEvent(addParamButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| dispatchClickEvent(addParamButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| const editors = shadowRoot.querySelectorAll('devtools-suggestion-input'); |
| |
| // Editors[0] refers to the command editor, so we start at index 1 |
| // We populate the key/value pairs |
| editors[1].value = 'testName1'; |
| await jsonEditor.updateComplete; |
| editors[1].focus(); |
| editors[1].blur(); |
| await jsonEditor.updateComplete; |
| |
| editors[2].value = 'testValue1'; |
| await jsonEditor.updateComplete; |
| editors[2].focus(); |
| editors[2].blur(); |
| await jsonEditor.updateComplete; |
| |
| editors[3].value = 'testName2'; |
| await jsonEditor.updateComplete; |
| editors[3].focus(); |
| editors[3].blur(); |
| await jsonEditor.updateComplete; |
| |
| editors[4].value = 'testValue2'; |
| await jsonEditor.updateComplete; |
| editors[4].focus(); |
| editors[4].blur(); |
| await jsonEditor.updateComplete; |
| |
| const promise = jsonEditor.once(ProtocolMonitor.JSONEditor.Events.SUBMIT_EDITOR); |
| |
| // We send the command |
| dispatchKeyDownEvent( |
| jsonEditor.contentElement.querySelector('.wrapper')!, {key: 'Enter', ctrlKey: true, metaKey: true}); |
| |
| const response = await promise; |
| |
| const expectedParameters = { |
| NoTypeRef: { |
| testName1: 'testValue1', |
| testName2: 'testValue2', |
| }, |
| }; |
| |
| assert.deepEqual(response.parameters, expectedParameters); |
| }); |
| |
| it('should show the custom editor for an object param that has no type ref', async () => { |
| const command = 'Test.test14'; |
| const jsonEditor = renderJSONEditor(); |
| |
| await populateMetadata(jsonEditor); |
| jsonEditor.command = command; |
| jsonEditor.populateParametersForCommandWithDefaultValues(); |
| await jsonEditor.updateComplete; |
| const shadowRoot = jsonEditor.contentElement; |
| const parameters = shadowRoot.querySelector('.parameter'); |
| |
| await renderHoveredElement(parameters); |
| |
| const addParamButton = jsonEditor.contentElement.querySelector('devtools-button[title="Add custom property"]'); |
| if (!addParamButton) { |
| throw new Error('No button'); |
| } |
| // We click two times to display two parameters with key/value pairs |
| dispatchClickEvent(addParamButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| dispatchClickEvent(addParamButton, { |
| bubbles: true, |
| composed: true, |
| }); |
| |
| await jsonEditor.updateComplete; |
| // The -1 is need to not take into account the input for the command |
| |
| const numberOfInputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input').length - 1; |
| |
| assert.deepEqual(numberOfInputs, 4); |
| }); |
| |
| describe('Command suggestion filter', () => { |
| it('filters the commands by substring match', async () => { |
| assert(ProtocolMonitor.JSONEditor.suggestionFilter('Test', 'Tes')); |
| assert(ProtocolMonitor.JSONEditor.suggestionFilter('Test', 'est')); |
| assert.isNotOk(ProtocolMonitor.JSONEditor.suggestionFilter('Test', 'dest')); |
| }); |
| }); |
| }); |
