feat: add webview with ability to change settings in runtime #9
Conversation
DudaGod
force-pushed
the
TESTPLANE-242.settings_side_bar
branch
2 times, most recently
from
96e1157
to
896b544
Compare
| @@ -0,0 +1,51 @@ | |||
| body { | |||
There was a problem hiding this comment.
This is css file for new webview in sidebar
| @@ -0,0 +1,44 @@ | |||
| // This script will be run within the webview itself | |||
There was a problem hiding this comment.
This is js file for new webview in sidebar (in which render setting elements: devtools and repl)
| // It cannot access the main VS Code APIs directly. | ||
| (function () { | ||
| // eslint-disable-next-line no-undef | ||
| const vscode = acquireVsCodeApi(); |
There was a problem hiding this comment.
This solution found in vscode example - https://github.com/microsoft/vscode-extension-samples/tree/main/webview-view-sample
| listenSettingsCheckbox(); | ||
|
|
||
| // eslint-disable-next-line no-undef | ||
| window.addEventListener("message", event => { |
There was a problem hiding this comment.
From vscode extension I send event to webview. Here I listen this event and modify checkboxes
| // eslint-disable-next-line no-undef | ||
| for (const checkbox of document.querySelectorAll(".section_type_settings input[type=checkbox]")) { | ||
| checkbox.addEventListener("change", function (event) { | ||
| vscode.postMessage({ |
There was a problem hiding this comment.
When checkbox is clicked I send event to vscode in order to use it when run tests
| @@ -30,10 +30,19 @@ export class TestingSideBar { | |||
| } | |||
|
|
|||
| async runAllTests(): Promise<void> { | |||
| // in order to show test explorer actions | |||
| await this._sidebarView.elem.moveTo(); | |||
There was a problem hiding this comment.
In some cases button Run tests can be hidden. So I move mouse to sidebar.
|
|
||
| describe("Settings view", () => { | ||
| describe("devtools", () => { | ||
| it("should fail if option is not enabled", async () => { |
There was a problem hiding this comment.
In samples/settings-view option devtools is not specified. So this test should fail because grid is not run.
| const outputText = await outputView.getText(); | ||
|
|
||
| expect(outputText).toEqual( | ||
| expect.arrayContaining([expect.stringContaining("ECONNREFUSED 127.0.0.1:4444")]), |
There was a problem hiding this comment.
Check that in logs exists log with this message (grid url is not available)
| await sidebar.waitTestsRead(); | ||
|
|
||
| const webview = await vscodePO.getWebviewByTitle("Testplane"); | ||
| await webview.open(); |
There was a problem hiding this comment.
should switch execution context to webview in order to be able to click on devtools checkbox
| const webview = await vscodePO.getWebviewByTitle("Testplane"); | ||
| await webview.open(); | ||
| await browser.$("[settingname=devtools]").click(); | ||
| await webview.close(); |
There was a problem hiding this comment.
switch execution context back
DudaGod
force-pushed
the
TESTPLANE-242.settings_side_bar
branch
15 times, most recently
from
4f659b7
to
0eb024c
Compare
DudaGod
force-pushed
the
TESTPLANE-242.settings_side_bar
branch
from
0eb024c
to
6e07ae8
Compare
What is done
Add webview to sidebar in order to change some settings (support
replanddevtoolsright now) in runtime. Options are displayed as checkboxes and by default they are disabled. If user click on checkbox then the result is stored in a special workspace storage. For another workspace it will be clear.These settings take precedence over the values in the config. Moreover checkboxes do not respond to a change in the config. For example if user set
devtools: truefor chrome anddevtools: falsefor firefox then this will not affect the value of the checkboxes. It is possible to support this, but then I need to display checkboxes for each browser and with a large number of browsers, it will turn into a mess.How it looks like: