From 4373ea27f44e471c43d8f6bcbd97d6fde0203b70 Mon Sep 17 00:00:00 2001 From: Georgy K <36447502+Lykoi18@users.noreply.github.com> Date: Mon, 15 May 2023 17:40:00 +0400 Subject: [PATCH] Fix CSP issues in misc tests (#24509) (#24615) --- .../qunit_tests-additional-renovation.yml | 70 ++++---- .../tests/DevExpress.angular/widgets.tests.js | 94 ++++++---- .../tests/DevExpress.animation/fx.tests.js | 76 +++++--- .../DevExpress.aspnet/aspnet_bundled.tests.js | 4 +- .../tests/DevExpress.core/devices.tests.js | 2 + .../tests/DevExpress.core/utils.size.tests.js | 166 +++++++++++++----- .../tests/DevExpress.jquery/bundled.tests.js | 2 +- .../DevExpress.jquery/selectors.tests.js | 76 ++++---- .../localization.globalize.widgets.tests.js | 3 +- .../DevExpress.serverSide/scrollView.tests.js | 6 +- .../DevExpress.serverSide/slider.tests.js | 6 +- .../tests/DevExpress.serverSide/tabs.tests.js | 3 +- .../list.markup.tests.js | 3 +- .../tabs.markup.tests.js | 3 +- .../DevExpress.ui/widget.markup.tests.js | 3 +- .../tests/Memory Leaks/vizWidgets.tests.js | 6 +- 16 files changed, 336 insertions(+), 187 deletions(-) diff --git a/.github/workflows/qunit_tests-additional-renovation.yml b/.github/workflows/qunit_tests-additional-renovation.yml index e290836d61fb..24aedab189dd 100644 --- a/.github/workflows/qunit_tests-additional-renovation.yml +++ b/.github/workflows/qunit_tests-additional-renovation.yml @@ -16,41 +16,41 @@ jobs: timeout-minutes: 15 steps: - - name: Get sources - uses: actions/checkout@v3 - - - name: Use Node.js - uses: actions/setup-node@v3 - with: - node-version: '15' - - - name: Restore npm cache - uses: actions/cache@v3 - with: - path: ./node_modules - key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }} - restore-keys: ${{ runner.os }}-node-modules - - - name: Run npm install - run: npm install --no-audit --no-fund - - - name: Build - env: - DEVEXTREME_TEST_CI: "true" - DOTNET_CLI_TELEMETRY_OPTOUT: "true" - DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "true" - run: npm run build:dev - - - name: Zip artifacts - run: | - 7z a -tzip -mx3 -mmt2 artifacts.zip artifacts scss/bundles testing/tests/Renovation/widgets.json - - - name: Upload build artifacts - uses: actions/upload-artifact@v3 - with: - name: devextreme-artifacts - path: artifacts.zip - retention-days: 1 + - name: Get sources + uses: actions/checkout@v3 + + - name: Use Node.js + uses: actions/setup-node@v3 + with: + node-version: '15' + + - name: Restore npm cache + uses: actions/cache@v3 + with: + path: ./node_modules + key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }} + restore-keys: ${{ runner.os }}-node-modules + + - name: Run npm install + run: npm install --no-audit --no-fund + + - name: Build + env: + DEVEXTREME_TEST_CI: "true" + DOTNET_CLI_TELEMETRY_OPTOUT: "true" + DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "true" + run: npm run build:dev + + - name: Zip artifacts + run: | + 7z a -tzip -mx3 -mmt2 artifacts.zip artifacts scss/bundles testing/tests/Renovation/widgets.json + + - name: Upload build artifacts + uses: actions/upload-artifact@v3 + with: + name: devextreme-artifacts + path: artifacts.zip + retention-days: 1 qunit-tests-timezones: needs: build diff --git a/testing/tests/DevExpress.angular/widgets.tests.js b/testing/tests/DevExpress.angular/widgets.tests.js index d472c146e208..df57a5c8364c 100644 --- a/testing/tests/DevExpress.angular/widgets.tests.js +++ b/testing/tests/DevExpress.angular/widgets.tests.js @@ -80,14 +80,19 @@ QUnit.test('dxPopup', function(assert) { originalPositionSetup($content, position); }; - const $markup = $('\ -
\ -
\ - {{VeryVeryVeryLongField.value1}}\ - {{VeryVeryVeryLongField.value2}}\ -
\ -
\ - '); + const $markup = $(` + +
+ +
+ `); const controller = function($scope) { $scope.VeryVeryVeryLongField = { @@ -118,14 +123,19 @@ QUnit.test('dxPopup', function(assert) { }); QUnit.test('dxPopover', function(assert) { - const $markup = $('\ - testLink\ -
\ -
\ - {{popoverContent}} {{popoverContent}}\ -
\ -
\ - '); + const $markup = $(` + + testLink +
+
+ {{popoverContent}} {{popoverContent}} +
+
+ `); const controller = function($scope) { $scope.popoverOptions = { @@ -702,11 +712,16 @@ QUnit.test('Component can change itself options on init (T446364)', function(ass }); QUnit.test('The hamburger button should be visible on small screen (T377800)', function(assert) { - const $markup = $('\ -
\ -
\ -
' - ); + const $markup = $(` + +
+
+
+ `); const controller = function($scope) { $scope.menu = { @@ -803,13 +818,18 @@ QUnit.test('item height is correct in animation config (T520346)', function(asse const originalAnimate = fx.animate; - const $markup = $( - '
\ -
\ - {{veryVeryVeryLongAlias.Value}} {{veryVeryVeryLongAlias.Value}}\ -
\ -
' - ); + const $markup = $(` + +
+
+ {{veryVeryVeryLongAlias.Value}} {{veryVeryVeryLongAlias.Value}} +
+
+ `); const controller = function($scope) { $scope.accordionOptions = { @@ -843,14 +863,18 @@ QUnit.test('item height is correct in animation config (T520346)', function(asse QUnit.test('title height is correct if the title is customized using ng-class (T444379)', function(assert) { this.clock = sinon.useFakeTimers(); - const $markup = $( - '\ -
\ -
\ -
{{item.Value}}
\ + const $markup = $(` + +
+
+
{{item.Value}}
\ -
' - ); +
+ `); const controller = function($scope) { $scope.accordionOptions = { diff --git a/testing/tests/DevExpress.animation/fx.tests.js b/testing/tests/DevExpress.animation/fx.tests.js index 59b79249ceaf..4124244d370a 100644 --- a/testing/tests/DevExpress.animation/fx.tests.js +++ b/testing/tests/DevExpress.animation/fx.tests.js @@ -9,32 +9,56 @@ const positionUtils = require('animation/position'); QUnit.testStart(function() { const markup = - '\ - \ -
\ -
\ -
\ -
\ -
\ -
\ -
'; + ` + +
+
+
+
+
+
+
`; $('#qunit-fixture').html(markup); }); diff --git a/testing/tests/DevExpress.aspnet/aspnet_bundled.tests.js b/testing/tests/DevExpress.aspnet/aspnet_bundled.tests.js index 77441d508242..bd1c23381073 100644 --- a/testing/tests/DevExpress.aspnet/aspnet_bundled.tests.js +++ b/testing/tests/DevExpress.aspnet/aspnet_bundled.tests.js @@ -14,8 +14,8 @@ SystemJS.config({ define(function(require) { window.DevExpress_ui_widget_errors = require('ui/widget/ui.errors'); - window.ajaxMock = require('/testing/helpers/ajaxMock.js'); + window.ajaxMock = require('../../helpers/ajaxMock.js'); require('bundles/dx.web.js'); require('aspnet.js'); - require('/testing/tests/DevExpress.aspnet/aspnet.tests.js'); + require('./aspnet.tests.js'); }); diff --git a/testing/tests/DevExpress.core/devices.tests.js b/testing/tests/DevExpress.core/devices.tests.js index 29c78f08822c..f2a5c846dd5e 100644 --- a/testing/tests/DevExpress.core/devices.tests.js +++ b/testing/tests/DevExpress.core/devices.tests.js @@ -20,6 +20,8 @@ const userAgents = { win_phone_10: 'Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; NOKIA; Lumia 920) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Mobile Safari/537.36 Edge/12.0', }; +themes.setDefaultTimeout(0); + QUnit.module('devices', { beforeEach: function() { this._savedDevice = devices.current(); diff --git a/testing/tests/DevExpress.core/utils.size.tests.js b/testing/tests/DevExpress.core/utils.size.tests.js index 2d73c2afc080..9869807eb0b3 100644 --- a/testing/tests/DevExpress.core/utils.size.tests.js +++ b/testing/tests/DevExpress.core/utils.size.tests.js @@ -3,11 +3,11 @@ import sizeUtils, { getHeight, getWidth, getInnerHeight, getInnerWidth, getOuter import browser from 'core/utils/browser'; const testStyles = [ - '', - 'width: 40px; height: 50px;', - 'width: 50%; height: 50%;', - 'width: inherit; height: inherit;', - 'width: auto; height: auto;' + {}, + { width: '40px', height: '50px' }, + { width: '50%', height: '50%' }, + { width: 'inherit', height: 'inherit' }, + { width: 'auto', height: 'auto' }, ]; const windowHeight = $(window).height(); @@ -30,9 +30,20 @@ function getScrollbarThickness() { return scrollbarWidth; } +function updateElementStyle(that, style) { + that.$element = $('
') + .css(style) + .appendTo(that.$parent); +} + QUnit.module('get width and height', { beforeEach: function() { - this.$parent = $('
').appendTo('#qunit-fixture'); + this.$parent = $('
') + .css({ + width: '100px', + height: '110px', + }) + .appendTo('#qunit-fixture'); this.$element = $('
'); this.$element.appendTo(this.$parent); }, @@ -51,7 +62,7 @@ QUnit.test('element in parent with fixed size', function(assert) { ]; for(let i = 0; i < testStyles.length; i++) { - this.$element.attr('style', testStyles[i]); + this.$element.css(testStyles[i]); assert.equal(getWidth(this.$element[0]), expected[i].width); assert.equal(getHeight(this.$element[0]), expected[i].height); } @@ -61,25 +72,25 @@ QUnit.test('invisible element in parent with fixed size', function(assert) { const that = this; const testParams = [{ - style: 'display: none;', + style: { display: 'none' }, width: 0, height: 0 }, { - style: 'width: 40px; height: 50px; display: none;', + style: { width: '40px', height: '50px', display: 'none' }, width: 40, height: 50 }, { - style: 'width: inherit; height: inherit; display: none;', + style: { width: 'inherit', height: 'inherit', display: 'none' }, width: 100, height: 110 }, { - style: 'width: auto; height: auto; display: none;', + style: { width: 'auto', height: 'auto', display: 'none' }, width: 0, height: 0 }]; testParams.forEach(function(params) { - that.$element.attr('style', params.style); + that.$element.css(params.style); assert.equal(getWidth(that.$element[0]), params.width); assert.equal(getHeight(that.$element[0]), params.height); }); @@ -98,11 +109,11 @@ QUnit.test('element with padding, marging, border without params', function(asse ]; for(i = 0; i < testStyles.length; i++) { - this.$element.attr('style', testStyles[i] + ' padding: 10px;'); + updateElementStyle(this, { ...testStyles[i], padding: '10px' }); assert.equal(getWidth(this.$element[0]), expected[i].width); assert.equal(getHeight(this.$element[0]), expected[i].height); - this.$element.attr('style', testStyles[i] + ' margin: 10px;'); + updateElementStyle(this, { ...testStyles[i], margin: '10px' }); assert.equal(getWidth(this.$element[0]), expected[i].width); assert.equal(getHeight(this.$element[0]), expected[i].height); } @@ -116,14 +127,14 @@ QUnit.test('element with padding, marging, border without params', function(asse ]; for(i = 0; i < testStyles.length; i++) { - this.$element.attr('style', testStyles[i] + ' border: 2px solid black;'); + updateElementStyle(this, { ...testStyles[i], border: '2px solid black' }); assert.equal(getWidth(this.$element[0]), expected[i].width); assert.equal(getHeight(this.$element[0]), expected[i].height); } }); QUnit.test('element with padding, marging, border with params', function(assert) { - this.$element.attr('style', 'width: 40px; height: 50px; padding: 5px; margin: 10px; border: 2px solid black;'); + this.$element.css({ width: '40px', height: '50px', padding: '5px', margin: '10px', border: '2px solid black' }); assert.equal(getWidth(this.$element[0]), 40); assert.equal(getHeight(this.$element[0]), 50); @@ -152,7 +163,7 @@ QUnit.test('element with box-sizing = border-box', function(assert) { ]; for(i = 0; i < testStyles.length; i++) { - this.$element.attr('style', testStyles[i] + ' box-sizing: border-box;'); + updateElementStyle(this, { ...testStyles[i], 'box-sizing': 'border-box' }); assert.equal(getWidth(this.$element[0]), expected[i].width, `${iteration}.${i}-width`); assert.equal(getHeight(this.$element[0]), expected[i].height, `${iteration}.${i}-height`); } @@ -167,7 +178,7 @@ QUnit.test('element with box-sizing = border-box', function(assert) { ]; for(i = 0; i < testStyles.length; i++) { - this.$element.attr('style', testStyles[i] + ' margin: 10px; box-sizing: border-box;'); + updateElementStyle(this, { ...testStyles[i], margin: '10px', 'box-sizing': 'border-box' }); assert.equal(getWidth(this.$element[0]), expected[i].width, `${iteration}.${i}-width`); assert.equal(getHeight(this.$element[0]), expected[i].height, `${iteration}.${i}-height`); } @@ -182,7 +193,7 @@ QUnit.test('element with box-sizing = border-box', function(assert) { ]; for(i = 0; i < testStyles.length; i++) { - this.$element.attr('style', testStyles[i] + ' padding: 10px; box-sizing: border-box;'); + updateElementStyle(this, { ...testStyles[i], padding: '10px', 'box-sizing': 'border-box' }); assert.equal(getWidth(this.$element[0]), expected[i].width, `${iteration}.${i}-width`); assert.equal(getHeight(this.$element[0]), expected[i].height, `${iteration}.${i}-height`); } @@ -197,25 +208,25 @@ QUnit.test('element with box-sizing = border-box', function(assert) { ]; for(i = 0; i < testStyles.length; i++) { - this.$element.attr('style', testStyles[i] + ' border: 2px solid black; box-sizing: border-box;'); + updateElementStyle(this, { ...testStyles[i], border: '2px solid black', 'box-sizing': 'border-box' }); assert.equal(getWidth(this.$element[0]), expected[i].width, `${iteration}.${i}-width`); assert.equal(getHeight(this.$element[0]), expected[i].height), `${iteration}.${i}-height`; } }); QUnit.test('element with box-sizing = border-box and parent is invisible', function(assert) { - this.$parent.attr('style', 'width: 100px; height: 110px; display: none;'); - this.$element.attr('style', 'width: 100%; height: 100%; box-sizing: border-box;'); + this.$parent.css({ width: '100px', height: '110px', display: 'none' }); + this.$element.css({ width: '100px', height: '100%', 'box-sizing': 'border-box' }); assert.equal(getWidth(this.$element[0]), 100); assert.equal(getHeight(this.$element[0]), 100); - this.$parent.attr('style', 'width: 100px; height: 110px; display: none;'); - this.$element.attr('style', 'width: 100%; height: 100%; padding: 10px; box-sizing: border-box;'); + this.$parent.css({ width: '100px', height: '110px', display: 'none' }); + this.$element.css({ width: '100%', height: '100%', padding: '10px', 'box-sizing': 'border-box' }); assert.equal(getOuterWidth(this.$element[0]), 100); assert.equal(getOuterHeight(this.$element[0]), 100); - this.$parent.attr('style', 'width: 100px; height: 110px; display: none;'); - this.$element.attr('style', 'width: 40px; height: 50px; padding: 10px; box-sizing: border-box;'); + this.$parent.css({ width: '100px', height: '110px', display: 'none' }); + this.$element.css({ width: '40px', height: '50px', padding: '10px', 'box-sizing': 'border-box' }); assert.equal(getWidth(this.$element[0]), 20); assert.equal(getHeight(this.$element[0]), 30); }); @@ -232,15 +243,15 @@ QUnit.test('element is not in a DOM', function(assert) { ]; for(let i = 0; i < testStyles.length; i++) { - this.$freeElement.attr('style', testStyles[i]); + this.$freeElement.css(testStyles[i]); assert.equal(getWidth(this.$freeElement[0]), expected[i].width); assert.equal(getHeight(this.$freeElement[0]), expected[i].height); - this.$freeElement.attr('style', testStyles[i] + ' display: none;'); + this.$freeElement.css({ ...testStyles[i], display: 'none' }); assert.equal(getWidth(this.$freeElement[0]), expected[i].width); assert.equal(getHeight(this.$freeElement[0]), expected[i].height); - this.$freeElement.attr('style', testStyles[i] + ' box-sizing: border-box;'); + this.$freeElement.css({ ...testStyles[i], 'box-sizing': 'border-box' }); assert.equal(getWidth(this.$freeElement[0]), expected[i].width); assert.equal(getHeight(this.$freeElement[0]), expected[i].height); } @@ -253,7 +264,7 @@ QUnit.test('element in parent with fixed size', function(assert) { const $element = $('
').appendTo('#qunit-fixture'); const element = $element.get(0); - $element.attr('style', 'width: 40px; height: 50px; border: 1px solid black; padding: 3px 4px; margin: 5px 6px'); + $element.css({ width: '40px', height: '50px', border: '1px solid black', padding: '3px 4px', margin: '5px 6px' }); const computedStyles = window.getComputedStyle(element); @@ -273,8 +284,13 @@ QUnit.test('element in parent with fixed size', function(assert) { QUnit.module('calculate height', { beforeEach: function() { - this.container = $('
').appendTo('#qunit-fixture').get(0); - this.invisibleElement = $('
').get(0); + this.container = $('
') + .css({ width: '100px', height: '100px', padding: '10px', 'box-sizing': 'border-box', margin: '5px' }) + .appendTo('#qunit-fixture') + .get(0); + this.invisibleElement = $('
') + .css({ width: '50px', height: '50px', display: 'none', padding: '5px' }) + .get(0); $(this.container).append(this.invisibleElement); } }); @@ -331,16 +347,37 @@ QUnit.test('check getVisibleHeight', function(assert) { }); QUnit.test('height for element with transform', function(assert) { - const $root = $('
').appendTo('#qunit-fixture').get(0); - const $child = $('
').appendTo($root).get(0); + const $root = $('
') + .css({ transform: 'scale(1.5)', width: '100px', height: '110px' }) + .appendTo('#qunit-fixture') + .get(0); + const $child = $('
') + .css({ height: '40px', display: 'inline-block' }) + .appendTo($root) + .get(0); const jqHeight = $($child).height(); const dxHeight = getHeight($child); assert.strictEqual(dxHeight, jqHeight, 'getHeight should be equal to $.height'); }); QUnit.test('size helpers should return the same value as jquery. Params: (box-sizing: border-box; overflow: hidden)', function(assert) { - const $target = $('
').appendTo('#qunit-fixture').get(0); - $('
').appendTo($target); + const $target = $('
') + .css({ + height: '40px', + width: '50px', + padding: '3px', + margin: '7px', + border: '9px solid black', + display: 'inline-block', + 'box-sizing': 'border-box', + overflow: 'hidden' + }) + .appendTo('#qunit-fixture') + .get(0); + + $('
') + .css({ width: '100px', height: '100px' }) + .appendTo($target); assert.strictEqual(getHeight($target), 16, 'getHeight'); assert.strictEqual(getWidth($target), 26, 'getWidth'); @@ -356,8 +393,23 @@ QUnit.test('size helpers should return the same value as jquery. Params: (box-si }); QUnit.test('size helpers should return the same value as jquery. Params: (box-sizing: border-box; overflow: auto)', function(assert) { - const $target = $('
').appendTo('#qunit-fixture').get(0); - $('
').appendTo($target); + const $target = $('
') + .css({ + height: '40px', + width: '50px', + padding: '3px', + margin: '7px', + border: '9px solid black', + display: 'inline-block', + 'box-sizing': 'border-box', + overflow: 'auto' + }) + .appendTo('#qunit-fixture') + .get(0); + + $('
') + .css({ width: '100px', height: '100px' }) + .appendTo($target); assert.strictEqual(getHeight($target), 16, 'getHeight'); assert.strictEqual(getWidth($target), 26, 'getWidth'); @@ -374,8 +426,23 @@ QUnit.test('size helpers should return the same value as jquery. Params: (box-si }); QUnit.test('size helpers should return the same value as jquery. Params: (box-sizing: content-box, overflow: hidden)', function(assert) { - const $target = $('
').appendTo('#qunit-fixture').get(0); - $('
').appendTo($target); + const $target = $('
') + .css({ + height: '40px', + width: '50px', + padding: '3px', + margin: '7px', + border: '9px solid black', + display: 'inline-block', + 'box-sizing': 'content-box', + overflow: 'hidden' + }) + .appendTo('#qunit-fixture') + .get(0); + + $('
') + .css({ width: '100px', height: '100px' }) + .appendTo($target); assert.strictEqual(getHeight($target), 40, 'getHeight'); assert.strictEqual(getWidth($target), 50, 'getWidth'); @@ -391,8 +458,23 @@ QUnit.test('size helpers should return the same value as jquery. Params: (box-si }); QUnit.test('height helpers should return the same value as jquery. Params: (box-sizing: content-box, overflow: auto)', function(assert) { - const $target = $('
').appendTo('#qunit-fixture').get(0); - $('
').appendTo($target); + const $target = $('
') + .css({ + height: '40px', + width: '50px', + padding: '3px', + margin: '7px', + border: '9px solid black', + display: 'inline-block', + 'box-sizing': 'content-box', + overflow: 'auto' + }) + .appendTo('#qunit-fixture') + .get(0); + + $('
') + .css({ width: '100px', height: '100px' }) + .appendTo($target); const scrollbarThickness = getScrollbarThickness(); diff --git a/testing/tests/DevExpress.jquery/bundled.tests.js b/testing/tests/DevExpress.jquery/bundled.tests.js index 4d6d6c52860d..0fc86f98a8e9 100644 --- a/testing/tests/DevExpress.jquery/bundled.tests.js +++ b/testing/tests/DevExpress.jquery/bundled.tests.js @@ -5,7 +5,7 @@ define(function(require) { const $ = require('jquery'); - require('/artifacts/js/dx.all.debug.js'); + require('bundles/dx.all.js'); QUnit.module('jquery integration'); diff --git a/testing/tests/DevExpress.jquery/selectors.tests.js b/testing/tests/DevExpress.jquery/selectors.tests.js index 90d55be77184..f4572f22761f 100644 --- a/testing/tests/DevExpress.jquery/selectors.tests.js +++ b/testing/tests/DevExpress.jquery/selectors.tests.js @@ -7,44 +7,44 @@ define(function(require) { QUnit.testStart(function() { const markup = - '
\ - \ - \ - \ - \ - \ - 1\ - 1\ -
\ -
\ - \ -
\ - \ - \ - \ - 1\ -
\ - \ - \ - \ -
\ - \ - \ - \ - \ - \ -
\ - \ - '; + `
+ + + + + + 1 + 1 +
+
+ +
+ + + + 1 +
+ + + +
+ + + +