IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Sandbox: Add additional e2e tests for panel editor (#75447)

Browse Source 
* Sandbox: Add e2e test to validate panel editors reaching out of their render space

* remove props
This commit is contained in:
Esteban Beltran 2023-09-27 11:34:23 +02:00 committed by GitHub
parent 0ed649b108
commit 5983bcec86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
e2e/custom-plugins/frontend-sandbox-panel-test/module.js
View File

@ -4,6 +4,21 @@
* This file doesn't require any compilation
*/
define(['react', '@grafana/data'], function (React, grafanaData) {
// This would be a custom editor component
function Editor() {
const onChangeInternal = (event) => {
const outsideEl =
event.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
.parentElement.parentElement;
outsideEl.dataset.sandboxTest = 'panel-editor';
};
return React.createElement('input', {
type: 'text',
onChange: onChangeInternal,
'data-testid': 'panel-editor-custom-editor-input',
});
}
const HelloWorld = () => {
const createIframe = () => {
// direct iframe creation
@ -121,5 +136,15 @@ define(['react', '@grafana/data'], function (React, grafanaData) {
const plugin = new grafanaData.PanelPlugin(HelloWorld);
plugin.setPanelOptions((builder) => {
builder.addCustomEditor({
id: 'buttons',
path: 'buttons',
name: 'Button Configuration',
defaultValue: [{ text: '', datasource: '', query: '' }],
editor: (props) => React.createElement(Editor, { onChange: props.onChange }),
});
});
return { plugin };
});

30
e2e/panels-suite/frontend-sandbox-panel.spec.ts
View File

@ -46,6 +46,19 @@ describe('Panel sandbox', () => {
cy.get('[data-sandbox-test="true"]').should('exist');
});
it('Reaches out of the panel editor', () => {
e2e.flows.openDashboard({
uid: DASHBOARD_ID,
queryParams: {
'__feature.pluginsFrontendSandbox': false,
editPanel: 1,
},
});
cy.get('[data-testid="panel-editor-custom-editor-input"]').type('x');
cy.get('[data-sandbox-test="panel-editor"]').should('exist');
});
});
describe('Sandbox enabled', () => {
@ -64,6 +77,7 @@ describe('Panel sandbox', () => {
it('Does not add iframes to body', () => {
// this button adds 3 iframes to the body
cy.get('[data-testid="button-create-iframes"]').click();
cy.wait(100); // small delay to prevent false positives from too fast tests
const iframeIds = [
'createElementIframe',
@ -85,9 +99,23 @@ describe('Panel sandbox', () => {
it('Does not reaches out of panel div', () => {
// this button reaches out of the panel div and modifies the element dataset
cy.get('[data-testid="button-reach-out"]').click();
cy.wait(100); // small delay to prevent false positives from too fast tests
cy.get('[data-sandbox-test="true"]').should('not.exist');
});
it('Does not Reaches out of the panel editor', () => {
e2e.flows.openDashboard({
uid: DASHBOARD_ID,
queryParams: {
'__feature.pluginsFrontendSandbox': false,
editPanel: 1,
},
});
cy.get('[data-testid="panel-editor-custom-editor-input"]').type('x');
cy.wait(100); // small delay to prevent false positives from too fast tests
cy.get('[data-sandbox-test="panel-editor"]').should('not.exist');
});
});
afterEach(() => {