Sandbox: Add e2e tests to test global variables access (#76598)

* Sandbox: Add e2e tests to test global variables access

* Trigger drone again

* Add be.visible validation to global object elements

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

@@ -19,7 +19,8 @@ define(['react', '@grafana/data'], function (React, grafanaData) {
     });
   }
 
-  const HelloWorld = () => {
+  const PanelComponent = () => {
+    const [testedGlobals, setTestedGlobals] = React.useState([]);
     const createIframe = () => {
       // direct iframe creation
       const iframe = document.createElement('iframe');
@@ -122,6 +123,41 @@ define(['react', '@grafana/data'], function (React, grafanaData) {
       outsideEl.dataset.sandboxTest = 'true';
     };
 
+    // a function for each global we want to test
+    const globalTests = [
+      function () {
+        try {
+          console.log(window.Prism.languages);
+          return 'Prism';
+        } catch (e) {}
+      },
+      function () {
+        try {
+          console.log(window.jQuery.fn.jquery);
+          console.log(window.$.fn.jquery);
+          return 'jQuery';
+        } catch (e) {}
+      },
+      function () {
+        try {
+          console.log(window.locationSandbox);
+          return 'location';
+        } catch (e) {}
+      },
+    ];
+
+    // it'll assign a variable with one attribute of the Globals
+    // and create a new element with the name of the global.
+    const testGlobals = () => {
+      const results = globalTests.map((test) => test());
+      setTestedGlobals(results);
+    };
+
+    const elements = testedGlobals.map((item) => {
+      const attributes = { 'data-sandbox-global': `${item}` };
+      return React.createElement('div', attributes, item);
+    });
+
     return React.createElement(
       'div',
       { className: 'frontend-sandbox-test' },
@@ -130,11 +166,13 @@ define(['react', '@grafana/data'], function (React, grafanaData) {
         { onClick: createIframe, 'data-testid': 'button-create-iframes' },
         'Create iframes'
       ),
-      React.createElement('button', { onClick: reachOut, 'data-testid': 'button-reach-out' }, 'Reach out')
+      React.createElement('button', { onClick: reachOut, 'data-testid': 'button-reach-out' }, 'Reach out'),
+      React.createElement('button', { onClick: testGlobals, 'data-testid': 'button-test-globals' }, 'Test Globals'),
+      React.createElement('div', null, elements)
     );
   };
 
-  const plugin = new grafanaData.PanelPlugin(HelloWorld);
+  const plugin = new grafanaData.PanelPlugin(PanelComponent);
 
   plugin.setPanelOptions((builder) => {
     builder.addCustomEditor({

e2e/panels-suite/frontend-sandbox-panel.spec.ts

@@ -11,12 +11,10 @@ describe('Panel sandbox', () => {
 
   describe('Sandbox disabled', () => {
     beforeEach(() => {
-      e2e.flows.openDashboard({
-        uid: DASHBOARD_ID,
-        queryParams: {
-          '__feature.pluginsFrontendSandbox': false,
-        },
+      cy.window().then((win) => {
+        win.localStorage.setItem('grafana.featureToggles', 'pluginsFrontendSandbox=0');
       });
+      cy.reload();
     });
 
     it('Add iframes to body', () => {
@@ -51,7 +49,6 @@ describe('Panel sandbox', () => {
       e2e.flows.openDashboard({
         uid: DASHBOARD_ID,
         queryParams: {
-          '__feature.pluginsFrontendSandbox': false,
           editPanel: 1,
         },
       });
@@ -64,15 +61,10 @@ describe('Panel sandbox', () => {
 
   describe('Sandbox enabled', () => {
     beforeEach(() => {
-      e2e.flows.openDashboard({
-        uid: DASHBOARD_ID,
-        queryParams: {
-          '__feature.pluginsFrontendSandbox': true,
-        },
-      });
       cy.window().then((win) => {
         win.localStorage.setItem('grafana.featureToggles', 'pluginsFrontendSandbox=1');
       });
+      cy.reload();
     });
 
     it('Does not add iframes to body', () => {
@@ -108,7 +100,6 @@ describe('Panel sandbox', () => {
       e2e.flows.openDashboard({
         uid: DASHBOARD_ID,
         queryParams: {
-          '__feature.pluginsFrontendSandbox': false,
           editPanel: 1,
         },
       });
@@ -118,6 +109,13 @@ describe('Panel sandbox', () => {
       cy.wait(100); // small delay to prevent false positives from too fast tests
       cy.get('[data-sandbox-test="panel-editor"]').should('not.exist');
     });
+
+    it('Can access specific window global variables', () => {
+      cy.get('[data-testid="button-test-globals"]').click();
+      cy.get('[data-sandbox-global="Prism"]').should('be.visible');
+      cy.get('[data-sandbox-global="jQuery"]').should('be.visible');
+      cy.get('[data-sandbox-global="location"]').should('be.visible');
+    });
   });
 
   afterEach(() => {