Fix CSP issues in widgets tests (1/3) (#24304) (#24646)

DevExpress · May 17, 2023 · 8fbe164 · 8fbe164
1 parent ceaa0da
commit 8fbe164
Show file tree

Hide file tree

Showing 15 changed files with 106 additions and 38 deletions.
diff --git a/testing/helpers/noDiagram.js b/testing/helpers/noDiagram.js
@@ -1,4 +1,4 @@
 if(window.DevExpress) {
     window.DevExpress.diagram = undefined;
 }
-module.exports = undefined;
+module.exports = null;
diff --git a/testing/helpers/noGantt.js b/testing/helpers/noGantt.js
@@ -1,4 +1,4 @@
 if(window.DevExpress) {
     window.DevExpress.Gantt = undefined;
 }
-module.exports = undefined;
+module.exports = null;
diff --git a/testing/helpers/positionFixtures.js b/testing/helpers/positionFixtures.js
@@ -228,7 +228,7 @@
         svg: {
             create: function() {
                 const $container = $(
-                    `<div id="container" style="position:absolute; top:0;">
+                    `<div id="container">
                         <svg viewBox="0 0 500 500">
                             <g id="where">
                                 <rect x="10" y="20" width="30" height="40" fill="red" />
@@ -237,6 +237,11 @@
                     </div>`
                 );
 
+                $container.css({
+                    position: 'absolute',
+                    top: 0
+                });
+
                 $container.appendTo(document.body);
 
                 // NOTE: converts HtmlElement to SvgElement

diff --git a/testing/tests/DevExpress.ui.widgets/accordion.tests.js b/testing/tests/DevExpress.ui.widgets/accordion.tests.js
@@ -24,7 +24,7 @@ QUnit.testStart(function() {
         </div>\
         \
         <div id="html-template-accordion">\
-            <div style="height: 20px" data-options="dxTemplate: { name: \'title\' }" data-bind="text: title"></div>\
+            <div data-options="dxTemplate: { name: \'title\' }" data-bind="text: title"></div>\
         </div>\
         \
         <div id="templated-accordion">\
@@ -34,6 +34,7 @@ QUnit.testStart(function() {
         </div>';
 
     $('#qunit-fixture').html(markup);
+    $('#html-template-accordion > div').css('height', '20px');
 });
 
 const ACCORDION_WRAPPER_CLASS = 'dx-accordion-wrapper';
@@ -476,10 +477,10 @@ QUnit.module('widget options', moduleSetup, () => {
         const $element = $('#html-template-accordion');
         const instance = $element.dxAccordion({
             items: [
-                { title: '', html: '<div style="height: 50px">' },
-                { title: '', html: '<div style="height: 100px">' },
-                { title: '', html: '<div style="height: 50px">' },
-                { title: '', html: '<div style="height: 100px">' }
+                { title: '', template: $('<div>').css('height', '50px') },
+                { title: '', template: $('<div>').css('height', '100px') },
+                { title: '', template: $('<div>').css('height', '50px') },
+                { title: '', template: $('<div>').css('height', '100px') }
             ],
             height: 'auto',
             selectedIndex: 0
@@ -495,10 +496,10 @@ QUnit.module('widget options', moduleSetup, () => {
 
     QUnit.test('height option in static mode', function(assert) {
         const items = [
-            { title: '', html: '<div style="height: 50px">' },
-            { title: '', html: '<div style="height: 100px">' },
-            { title: '', html: '<div style="height: 50px">' },
-            { title: '', html: '<div style="height: 100px">' }
+            { title: '', template: $('<div>').css('height', '50px') },
+            { title: '', template: $('<div>').css('height', '100px') },
+            { title: '', template: $('<div>').css('height', '50px') },
+            { title: '', template: $('<div>').css('height', '100px') }
         ];
         const widgetHeight = 500;
         const $element = $('#html-template-accordion');
@@ -522,10 +523,10 @@ QUnit.module('widget options', moduleSetup, () => {
         const $element = $('#html-template-accordion');
         const instance = $element.dxAccordion({
             items: [
-                { title: '', html: '<div style="height: 50px">' },
-                { title: '', html: '<div style="height: 100px">' },
-                { title: '', html: '<div style="height: 50px">' },
-                { title: '', html: '<div style="height: 100px">' }
+                { title: '', template: $('<div>').css('height', '50px') },
+                { title: '', template: $('<div>').css('height', '100px') },
+                { title: '', template: $('<div>').css('height', '50px') },
+                { title: '', template: $('<div>').css('height', '100px') }
             ],
             height: 'auto',
             selectedIndex: 0,
@@ -540,10 +541,10 @@ QUnit.module('widget options', moduleSetup, () => {
 
     QUnit.test('height option in static mode when widget is multiple', function(assert) {
         const items = [
-            { title: '', html: '<div style="height: 50px">' },
-            { title: '', html: '<div style="height: 100px">' },
-            { title: '', html: '<div style="height: 50px">' },
-            { title: '', html: '<div style="height: 100px">' }
+            { title: '', template: $('<div>').css('height', '50px') },
+            { title: '', template: $('<div>').css('height', '100px') },
+            { title: '', template: $('<div>').css('height', '50px') },
+            { title: '', template: $('<div>').css('height', '100px') }
         ];
         const widgetHeight = 500;
         const $element = $('#html-template-accordion');

diff --git a/testing/tests/DevExpress.ui.widgets/box.markup.tests.js b/testing/tests/DevExpress.ui.widgets/box.markup.tests.js
@@ -27,12 +27,13 @@ QUnit.testStart(function() {
         <div id="boxWithScrollable">\
             <div data-options="dxItem: { ratio: 1 }">\
                 <div id="isScrollable">\
-                    <div style="height: 200px;"></div>\
+                    <div></div>\
                 </div>\
             </div>\
         </div>';
 
     $('#qunit-fixture').html(markup);
+    $('#isScrollable > div').css('height', '200px');
 });
 
 const BOX_CLASS = 'dx-box';

diff --git a/testing/tests/DevExpress.ui.widgets/button.tests.js b/testing/tests/DevExpress.ui.widgets/button.tests.js
@@ -18,13 +18,14 @@ QUnit.testStart(function() {
         '<form id="form">\
         <div id="button"></div>\
         <div id="widget"></div>\
-        <div id="widthRootStyle" style="width: 300px;"></div>\
+        <div id="widthRootStyle"></div>\
         <div id="inkButton"></div>\
             <div data-options="dxTemplate: { name: \'content\' }" data-bind="text: text"></div>\
         </div>\
         </form>';
 
     $('#qunit-fixture').html(markup);
+    $('#widthRootStyle').css('width', '300px');
 
     $('#form').on('submit', function(e) {
         e.preventDefault();

diff --git a/testing/tests/DevExpress.ui.widgets/diagramParts/importDiagram.tests.js b/testing/tests/DevExpress.ui.widgets/diagramParts/importDiagram.tests.js
@@ -1,4 +1,3 @@
-
 SystemJS.config({
     map: {
         'devexpress-diagram': '/testing/helpers/noDiagram.js'

diff --git a/testing/tests/DevExpress.ui.widgets/drawer.markup.tests.js b/testing/tests/DevExpress.ui.widgets/drawer.markup.tests.js
@@ -14,7 +14,7 @@ const OPENED_STATE_CLASS = 'dx-drawer-opened';
 
 QUnit.testStart(() => {
     const markup = '\
-    <style>\
+    <style nonce="qunit-test">\
         .dx-drawer-panel-content {\
             width: 200px;\
         }\

diff --git a/testing/tests/DevExpress.ui.widgets/gantt.markup.tests.js b/testing/tests/DevExpress.ui.widgets/gantt.markup.tests.js
@@ -4,9 +4,10 @@ import 'ui/gantt';
 QUnit.testStart(function() {
     const markup =
         '<div id="widget"></div>\
-        <div id="widthRootStyle" style="width: 300px;"></div>';
+        <div id="widthRootStyle"></div>';
 
     $('#qunit-fixture').html(markup);
+    $('#widthRootStyle').css('width', '300px');
 });
 
 const GANTT_CLASS = 'dx-gantt';

diff --git a/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js b/testing/tests/DevExpress.ui.widgets/loadPanel.tests.js
@@ -10,15 +10,28 @@ import 'ui/load_panel';
 QUnit.testStart(function() {
     const markup =
         '<div id="qunit-fixture" class="dx-viewport">\
-            <div id="target" style="position: absolute; top: 0; left: 0; width: 100px; height: 100px;">\
+            <div id="target">\
                 <div id="container">\
-                    <div id="loadPanel" style="width: 100px; height: 100px;"></div>\
+                    <div id="loadPanel"></div>\
                     <div id="loadPanel2"></div>\
                 </div>\
             </div>\
         </div>';
 
     $('#qunit-fixture').replaceWith(markup);
+
+    $('#target').css({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100px',
+        height: '100px'
+    });
+
+    $('#loadPanel').css({
+        width: '100px',
+        height: '100px'
+    });
 });
 
 const LOADPANEL_CLASS = 'dx-loadpanel';

diff --git a/testing/tests/DevExpress.ui.widgets/popover.tests.js b/testing/tests/DevExpress.ui.widgets/popover.tests.js
@@ -10,7 +10,7 @@ import { getBoundingRect } from 'core/utils/position';
 
 import 'generic_light.css!';
 
-$('<style>.dx-popup-content { padding: 10px; }</style>').appendTo($('head'));
+$('<style nonce="qunit-test">.dx-popup-content { padding: 10px; }</style>').appendTo($('head'));
 
 const POPOVER_CLASS = 'dx-popover';
 const POPOVER_WRAPPER_CLASS = 'dx-popover-wrapper';
@@ -939,7 +939,7 @@ QUnit.module('content positioning', () => {
             const popover = new Popover($popover, {
                 target: $where,
                 visible: true,
-                toolbarItems: [{ toolbar: 'bottom', location: 'center', html: '<div style="height: 30px;"></div>' }],
+                toolbarItems: [{ toolbar: 'bottom', location: 'center', template: $('<div>').css('height', '30px') }],
                 height: 100,
                 position: {
                     my: 'top center',

diff --git a/testing/tests/DevExpress.ui.widgets/popupDrag.tests.js b/testing/tests/DevExpress.ui.widgets/popupDrag.tests.js
@@ -7,14 +7,40 @@ const KEYBOARD_DRAG_STEP = 5;
 
 QUnit.testStart(function() {
     const markup =
-        '<div id="draggableElement" style="width: 100px; height: 100px; position: absolute; top: 300px; left: 300px;">\
-            <div id="handle" style="width: 100%; height: 50px"></div>\
+        '<div id="draggableElement">\
+            <div id="handle"></div>\
         </div>\
-        <div id="container" style="width: 200px; height: 200px;"></div>\
-        <div id="container2" style="width: 300px; height: 350px; position: absolute; top: -1000px; left: -700px"></div>\
+        <div id="container"></div>\
+        <div id="container2"></div>\
         ';
 
     $('#qunit-fixture').html(markup);
+
+    $('#draggableElement').css({
+        width: '100px',
+        height: '100px',
+        position: 'absolute',
+        top: '300px',
+        left: '300px'
+    });
+
+    $('#handle').css({
+        width: '100%',
+        height: '50px'
+    });
+
+    $('#container').css({
+        width: '200px',
+        height: '200px'
+    });
+
+    $('#container2').css({
+        width: '300px',
+        height: '350px',
+        position: 'absolute',
+        top: '-1000px',
+        left: '-700px'
+    });
 });
 
 QUnit.module('overlay_drag', {

diff --git a/testing/tests/DevExpress.ui.widgets/resizable.markup.tests.js b/testing/tests/DevExpress.ui.widgets/resizable.markup.tests.js
@@ -5,8 +5,14 @@ import 'generic_light.css!';
 import 'ui/resizable';
 
 QUnit.testStart(function() {
-    const markup = '<div id="resizable" style="height: 50px; width: 50px; position: absolute"></div>';
+    const markup = '<div id="resizable"></div>';
     $('#qunit-fixture').html(markup);
+
+    $('#resizable').css({
+        height: '50px',
+        width: '50px',
+        position: 'absolute'
+    });
 });
 
 const RESIZABLE_CLASS = 'dx-resizable';

diff --git a/testing/tests/DevExpress.ui.widgets/responsiveBox.tests.js b/testing/tests/DevExpress.ui.widgets/responsiveBox.tests.js
@@ -326,7 +326,7 @@ QUnit.module('layouting', moduleConfig, () => {
             height: 'auto',
             rows: [{ ratio: 1, baseSize: 'auto' }],
             cols: [{ ratio: 1, baseSize: 'auto' }],
-            items: [{ location: { row: 0, col: 0 }, html: '<div style=\'height: 100px;\'></div>' }]
+            items: [{ location: { row: 0, col: 0 }, template: $('<div>').css('height', '100px') }]
         });
 
         assert.equal($responsiveBox.height(), 100, 'height calculated correctly');

diff --git a/testing/tests/DevExpress.ui.widgets/scrollView.tests.js b/testing/tests/DevExpress.ui.widgets/scrollView.tests.js
@@ -71,12 +71,27 @@ const moduleConfig = {
 
 QUnit.testStart(function() {
     const markup = '\
-        <div id="scrollView" style="height: 50px; width: 50px;">\
-            <div class="content1" style="height: 100px; width: 100px;"></div>\
-            <div class="content2" style="height: 100px; width: 100px;"></div>\
+        <div id="scrollView">\
+            <div class="content1"></div>\
+            <div class="content2"></div>\
         </div>';
 
     $('#qunit-fixture').html(markup);
+
+    $('#scrollView').css({
+        height: '50px',
+        width: '50px'
+    });
+
+    $('.content1').css({
+        height: '100px',
+        width: '100px'
+    });
+
+    $('.content2').css({
+        height: '100px',
+        width: '100px'
+    });
 });
 
 QUnit.module('render', moduleConfig, () => {