diff --git a/.github/actions/run-qunit-tests/action.yml b/.github/actions/run-qunit-tests/action.yml index 332b79db76e9..fdfa2863c32a 100644 --- a/.github/actions/run-qunit-tests/action.yml +++ b/.github/actions/run-qunit-tests/action.yml @@ -22,9 +22,6 @@ inputs: timezone: description: "Timezone for the test environment" default: "" - isPerformance: - description: "Indicates if performance testing should be conducted" - default: "false" headless: description: "Specifies if the browser should run in headless mode" default: "true" @@ -131,7 +128,6 @@ runs: MOBILE_UA: ${{ inputs.userAgent }} SHADOW_DOM: ${{ inputs.useShadowDom }} TZ: ${{ inputs.timezone }} - PERF: ${{ inputs.isPerformance }} NO_HEADLESS: ${{ inputs.headless == 'false' && 'true' || 'false' }} NO_CSP: ${{ inputs.useCsp == 'false' && 'true' || 'false' }} NORENOVATION: "false" diff --git a/.github/workflows/qunit_tests-additional-renovation.yml b/.github/workflows/qunit_tests-additional-renovation.yml index 4ba4ea42a7bd..b0f9d150dd70 100644 --- a/.github/workflows/qunit_tests-additional-renovation.yml +++ b/.github/workflows/qunit_tests-additional-renovation.yml @@ -108,29 +108,6 @@ jobs: useJQuery: 'false' useCsp: 'true' -# TODO Chrome133: skipped during chrome update -# We should run performance tests with non headless chrome -# It fails in headless mode - -# qunit-tests-performance: -# needs: build -# runs-on: devextreme-shr2 -# name: Performance -# timeout-minutes: 25 -# steps: -# - name: Get sources -# uses: actions/checkout@v4 -# -# - name: Run QUnit tests -# uses: ./.github/actions/run-qunit-tests -# with: -# name: 'Performance' -# browser: 'chrome' -# isPerformance: 'true' -# useJQuery: 'true' -# headless: 'true' -# useCsp: 'false' - qunit-tests-mobile-and-shadow-dom: needs: build runs-on: devextreme-shr2 @@ -274,7 +251,6 @@ jobs: needs: [ build, qunit-tests-timezones, - # qunit-tests-performance, qunit-tests-mobile-and-shadow-dom, qunit-tests-firefox, qunit-tests-no-csp diff --git a/packages/devextreme/docker-ci.sh b/packages/devextreme/docker-ci.sh index 80768d1f04cc..ce03cebfb865 100755 --- a/packages/devextreme/docker-ci.sh +++ b/packages/devextreme/docker-ci.sh @@ -30,7 +30,6 @@ function run_test_impl { [ -n "$MOBILE_UA" ] && url="$url&deviceMode=true" [ "$JQUERY" == "false" ] && url="$url&nojquery=true" [ "$SHADOW_DOM" == "true" ] && url="$url&shadowDom=true" - [ "$PERF" == "true" ] && url="$url&include=DevExpress.performance&workerInWindow=true" [ "$NORENOVATION" == "true" ] && url="$url&norenovation=true" [ "$NO_CSP" == "true" ] && url="$url&nocsp=true" @@ -131,17 +130,6 @@ function run_test_impl { ) fi - if [ "$PERF" == "true" ]; then - echo "Performance tests" - chrome_args+=( - --disable-popup-blocking - --enable-impl-side-painting - --enable-skia-benchmarking - --disable-web-security - --remote-allow-origins=* - ) - fi - if [ -n "$MOBILE_UA" ]; then local user_agent diff --git a/packages/devextreme/testing/helpers/qunitPerformanceExtension.js b/packages/devextreme/testing/helpers/qunitPerformanceExtension.js deleted file mode 100644 index 95c1c1ae5314..000000000000 --- a/packages/devextreme/testing/helpers/qunitPerformanceExtension.js +++ /dev/null @@ -1,224 +0,0 @@ -/* eslint-disable no-console */ - -(function(root, factory) { - const useJQuery = !QUnit.urlParams['nojquery']; - if(typeof define === 'function' && define.amd) { - define(function(require, exports, module) { - factory(useJQuery ? require('jquery') : undefined, require('core/utils/size')); - }); - } else { - factory(useJQuery ? root.jQuery : undefined, DevExpress.require('core/utils/size')); - } -}(this, function($, sizeUtils) { - function ChromeRemote() { - const that = this; - that.callbacks = {}; - that.eventHandlers = {}; - that.nextCommandId = 1; - - loadJSON('http://localhost:9223/json', function(data) { - [...data].forEach(function(item) { - const div = document.createElement('div'); - div.innerHTML = item.title; - const title = div.innerText; - // TODO: Try to find another way (item.title.indexOf(document.title) !== -1)) - if(item.webSocketDebuggerUrl && (title.indexOf(document.title) !== -1 || title.indexOf(window.location.href) !== -1)) { - that.connect(item.webSocketDebuggerUrl); - } - }); - }, function() { - that.connect('ws://localhost:8222/devtools/page/2155'); - }); - } - - function loadJSON(path, onSuccess, onError) { - fetch(path, { method: 'GET' }) - .then(x => x.json()) - .then(x=> onSuccess(x)) - .catch(err => onError(err)); - } - - ChromeRemote.prototype.on = function(eventName, callback) { - if(!this.eventHandlers[eventName]) { - this.eventHandlers[eventName] = []; - } - this.eventHandlers[eventName].push(callback); - }; - ChromeRemote.prototype.off = function(eventName, callback) { - if(!this.eventHandlers[eventName]) { - return; - } - const index = this.eventHandlers[eventName].indexOf(callback); - if(index > -1) { - this.eventHandlers[eventName].splice(index, 1); - } - }; - ChromeRemote.prototype.trigger = function(eventName, args) { - const eventRoute = this.eventHandlers[eventName]; - if(!eventRoute) { return; } - eventRoute.forEach(x => { - x(eventName, ...args); - }); - }; - - ChromeRemote.prototype.connect = function(url) { - if(this.ws) return; - - const that = this; - this.ws = new WebSocket(url); - - this.ws['onopen'] = function() { - that.onConnect(); - }; - - this.ws['onmessage'] = function(e) { - const data = e.data; - const message = JSON.parse(data); - - if(message.id) { - const callback = that.callbacks[message.id]; - - if(message.result) { - callback(false, message.result); - } else if(message.error) { - callback(true, message.error); - } - - delete that.callbacks[message.id]; - } else if(message.method) { - that.trigger(message.method, [message.params]); - } - }; - - this.ws.onerror = function(err) { - that.trigger('error'); - }; - }; - - ChromeRemote.prototype.send = function(method, params, callback) { - const id = this.nextCommandId++; - if(typeof params === 'function') { - callback = params; - params = undefined; - } - const message = { 'id': id, 'method': method, 'params': params }; - this.ws.send(JSON.stringify(message)); - - this.callbacks[id] = callback || function() {}; - }; - - const chrome = new ChromeRemote(); - let chromeRemoteIsReady = false; - let documentIsLoaded = document.readyState === 'complete'; - - chrome.onConnect = function() { - chromeRemoteIsReady = true; - }; - - - document.addEventListener('DOMContentLoaded', () => { - documentIsLoaded = true; - }); - - QUnit.performanceTest = function(name, callback) { - return QUnit.test.apply(this, arguments); - }; - - QUnit.assert.measureStyleRecalculation = function(measureFunction, standardMeasure, debug) { - const that = this; - const done = this.async(); - - window.waitFor(function() { - return chromeRemoteIsReady && documentIsLoaded; - }).done(function() { - that.styleRecalculations = []; - let updateLayout; - - const collectData = function(e, params) { - const val = params.value; - const len = val.length; - - for(let i = 0; i < len; i++) { - const task = val[i]; - - if(task.name === 'ScheduleStyleRecalculation') { - const stackTrace = task.args.data.stackTrace || []; - const excludedRestyles = stackTrace.filter( - (trace) => (trace.url.indexOf('chrome-devtools') === 0 || trace.functionName === 'readThemeMarker') - ); - - if(!excludedRestyles.length && stackTrace.length) { - updateLayout = { - restyleStackTrace: stackTrace - }; - that.styleRecalculations.push(updateLayout); - } else { - updateLayout = null; - } - } - - if(updateLayout && task.name === 'UpdateLayoutTree') { - if(task.ph === 'B') { - updateLayout.time = task.ts; - updateLayout.layoutStack = task.args.beginData.stackTrace || []; - } else if(task.ph === 'E') { - updateLayout.elementCount = task.args.elementCount; - updateLayout.time = task.ts - updateLayout.time; - } - } - } - }; - - const collectEndData = function() { - chrome.off('Tracing.dataCollected', collectData); - chrome.off('Tracing.tracingComplete', collectEndData); - - const recalculationsStackString = JSON.stringify(JSON.stringify(that.styleRecalculations, null, 2)); - const assertResult = (typeof standardMeasure === 'function') ? standardMeasure(that.styleRecalculations.length) : standardMeasure === that.styleRecalculations.length; - const resultMessage = 'Took ' + that.styleRecalculations.length + ' style recalculations'; - const expectedMessage = 'Expected ' + standardMeasure + ' style recalculations'; - const assertMessage = 'Performance test (Expected ' + standardMeasure + ' style recalculations, took ' + that.styleRecalculations.length + ' style recalculations)' + '\r\n' + recalculationsStackString; - - if(debug) { - const time = 0; - for(let i = 0; i < that.styleRecalculations.length; i++) { - console.log(that.styleRecalculations[i]); - } - - console.log('TIME: ' + time); - } - - that.pushResult({ - result: assertResult, - actual: resultMessage, - expected: expectedMessage, - message: assertMessage - }); - done(); - }; - - if(!$) { - [...document.querySelectorAll('body')].forEach(x => sizeUtils.getOuterWidth(x, true)); - } else { - $('body').outerWidth(true); - } - - chrome.on('Tracing.dataCollected', collectData); - chrome.on('Tracing.tracingComplete', collectEndData); - - const categories = [ - 'disabled-by-default-devtools.timeline', - 'disabled-by-default-devtools.timeline.invalidationTracking', - 'disabled-by-default-devtools.timeline.stack' - ]; - chrome.send('Tracing.start', { categories: categories.join(',') }, function(isError) { - measureFunction(); - if(isError) { - collectEndData(); - } else { - chrome.send('Tracing.end', {}); - } - }); - }); - }; -})); diff --git a/packages/devextreme/testing/helpers/widgetsIterator.js b/packages/devextreme/testing/helpers/widgetsIterator.js deleted file mode 100644 index b8f8a922fa88..000000000000 --- a/packages/devextreme/testing/helpers/widgetsIterator.js +++ /dev/null @@ -1,25 +0,0 @@ -define(function(require) { - const $ = require('jquery'); - const typeUtils = require('core/utils/type'); - - return function(namespace, parent, excluded) { - excluded = excluded || []; - - return function(callback) { - $.each(namespace, function(componentName, componentClass) { - const isWidget = $.fn[componentName] && namespace[componentName].subclassOf(parent); - - if(!isWidget) { - return; - } - - if(typeUtils.isFunction(excluded) ? !excluded(componentName) : $.inArray(componentName, excluded) > -1) { - return; - } - - callback(componentName, componentClass); - }); - }; - - }; -}); diff --git a/packages/devextreme/testing/tests/DevExpress.performance/ChromeRemoteDebugger.bat b/packages/devextreme/testing/tests/DevExpress.performance/ChromeRemoteDebugger.bat deleted file mode 100644 index cf18a2fe71cb..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/ChromeRemoteDebugger.bat +++ /dev/null @@ -1,25 +0,0 @@ -@echo off -netsh interface portproxy delete v4tov4 listenport=9223 listenaddress=0.0.0.0 -start /b cmd /c call "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9223 --user-data-dir=c:\my\data --disk-cache-dir=null --overscroll-history-navigation=0 --disable-web-security --remote-allow-origins=* -–allow-file-access-from-files "http://localhost:20090/run/DevExpress.performance/dataGridRecaclulations.tests.js?notimers=true&nocsp=true" -timeout 5 -netsh interface portproxy add v4tov4 listenport=9223 connectaddress=127.0.0.1 connectport=9223 listenaddress=0.0.0.0 -cls -echo ============================================ -echo Chrome started with following configuration: -echo ============================================ -echo * No-Caching -echo * Developer Profile -echo * Disabled TouchHistory -echo * Disabled Web-Security -echo * Allowed XHR Localfile Access -echo * Forwarded Remote-Debug Port -echo ============================================ -ipconfig | findstr "IPv4" -echo Remote-Debug Port: 9223 -echo ============================================ -echo Dont close Chrome manually -echo Press any Button to terminate Chrome Network Debug Session -echo ============================================ -pause -netsh interface portproxy delete v4tov4 listenport=9223 listenaddress=0.0.0.0 -taskkill /F /IM Chrome.exe /T diff --git a/packages/devextreme/testing/tests/DevExpress.performance/__meta.json b/packages/devextreme/testing/tests/DevExpress.performance/__meta.json deleted file mode 100644 index e941ae6f1284..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/__meta.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "constellation": "perf", - "explicit": true, - "runOnDevices": false -} \ No newline at end of file diff --git a/packages/devextreme/testing/tests/DevExpress.performance/_readme.txt b/packages/devextreme/testing/tests/DevExpress.performance/_readme.txt deleted file mode 100644 index a3b528ffff4e..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/_readme.txt +++ /dev/null @@ -1,17 +0,0 @@ -0) You can use ChromeRemoteDebugger.bat instead of point 1). Please close all Chrome instances before run. - -1) Launch Google Chrome with the remote debugging port - 9223 and disable web-security ---disable-web-security --remote-debugging-port=9223 --disable-popup-blocking --user-data-dir=SPECIFY_USER_DATA_DIR_HERE --remote-allow-origins=* -(Don't forget to replace the SPECIFY_USER_DATA_DIR_HERE with a valid dir path, it will be different for Win and Linux) - -(https://www.chromium.org/developers/how-tos/run-chromium-with-flags) - -Open localhost:9223 to check the result. This shows a list of opened browser tabs. - -2) Enable Cross Domain Request. You can use the Cors-Toggle extension for this: -https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf - -3) Run tests with disabled "No jQuery" checkbox - -Note: -We recommend using Canary for running these tests. diff --git a/packages/devextreme/testing/tests/DevExpress.performance/collectionStyleRecalculations.tests.js b/packages/devextreme/testing/tests/DevExpress.performance/collectionStyleRecalculations.tests.js deleted file mode 100644 index 94694310b29c..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/collectionStyleRecalculations.tests.js +++ /dev/null @@ -1,66 +0,0 @@ -require('../../helpers/qunitPerformanceExtension.js'); - -require('generic_light.css!'); - -const $ = require('jquery'); -const resizeCallbacks = require('core/utils/resize_callbacks'); -const themes = require('ui/themes'); - -themes.setDefaultTimeout(0); - -require('ui/accordion'); -require('ui/tabs'); - -QUnit.testStart(function() { - return new Promise(function(resolve) { - $('#qunit-fixture').html('
'); - themes.initialized(resolve); - }); - -}); - -QUnit.performanceTest('dxTabs should force minimum relayout count on creation', function(assert) { - const measureFunction = function() { - $('#element').dxTabs({ - items: [1, 2, 3], - scrollingEnabled: false - }); - }; - - assert.measureStyleRecalculation(measureFunction, 3); -}); - -QUnit.performanceTest('dxTabs without scrolling should not force relayout on dxshown event', function(assert) { - $('#element').dxTabs({ - items: [1, 2, 3], - scrollingEnabled: false - }); - - const measureFunction = function() { - resizeCallbacks.fire(); - }; - - assert.measureStyleRecalculation(measureFunction, 2); -}); - -QUnit.performanceTest('Accordion should force minimum relayout count on creation', function(assert) { - const measureFunction = function() { - $('#element').dxAccordion({ - items: [1, 2, 3, 4, 5, 6, 7] - }); - }; - - assert.measureStyleRecalculation(measureFunction, 9); -}); - -QUnit.performanceTest('Accordion should force minimum relayout count on selection change', function(assert) { - const $element = $('#element').dxAccordion({ - items: [1, 2, 3, 4, 5, 6, 7] - }); - - const measureFunction = function() { - $element.dxAccordion('option', 'selectedIndex', 1); - }; - - assert.measureStyleRecalculation(measureFunction, (value) => value < 6); -}); diff --git a/packages/devextreme/testing/tests/DevExpress.performance/dataGridRecaclulations.tests.js b/packages/devextreme/testing/tests/DevExpress.performance/dataGridRecaclulations.tests.js deleted file mode 100644 index 644f9fbf0447..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/dataGridRecaclulations.tests.js +++ /dev/null @@ -1,169 +0,0 @@ -const $ = require('jquery'); - -require('../../helpers/qunitPerformanceExtension.js'); -require('../../content/orders.js'); - -require('generic_light.css!'); - -const DataGrid = require('ui/data_grid'); - -const createDataGridMeasureFunction = function(options) { - return function() { - const clock = sinon.useFakeTimers(); - $('#container').dxDataGrid(options); - clock.tick(100); - clock.restore(); - }; -}; - -QUnit.testStart(function() { - $('
').appendTo('#qunit-fixture'); -}); - -QUnit.performanceTest('render without data', function(assert) { - const measureFunction = createDataGridMeasureFunction({ - }); - - assert.measureStyleRecalculation(measureFunction, DataGrid.IS_RENOVATED_WIDGET ? 12 : 11); -}); - -QUnit.performanceTest('render with data', function(assert) { - const measureFunction = createDataGridMeasureFunction({ - dataSource: window.orders - }); - assert.measureStyleRecalculation(measureFunction, DataGrid.IS_RENOVATED_WIDGET ? 7 : 6, true); -}); - -QUnit.performanceTest('render with columnAutoWidth', function(assert) { - const measureFunction = createDataGridMeasureFunction({ - dataSource: window.orders, - columnAutoWidth: true - }); - - assert.measureStyleRecalculation(measureFunction, 14); -}); - -QUnit.performanceTest('render with columnFixing', function(assert) { - const measureFunction = createDataGridMeasureFunction({ - dataSource: window.orders, - columnAutoWidth: true, - columnFixing: { - legacyMode: true - }, - customizeColumns: function(columns) { - columns[0].fixed = true; - } - }); - - assert.measureStyleRecalculation(measureFunction, 15); -}); - -QUnit.performanceTest('render with virtual scrolling', function(assert) { - const measureFunction = createDataGridMeasureFunction({ - height: 300, - dataSource: window.orders, - scrolling: { mode: 'virtual' } - }); - - assert.measureStyleRecalculation(measureFunction, 14); -}); - -QUnit.performanceTest('updateDimensions', function(assert) { - createDataGridMeasureFunction({ - dataSource: window.orders - })(); - - const measureFunction = createDataGridMeasureFunction('updateDimensions'); - - assert.measureStyleRecalculation(measureFunction, 0); -}); - -QUnit.performanceTest('updateDimensions with columnAutoWidth', function(assert) { - createDataGridMeasureFunction({ - dataSource: window.orders, - columnAutoWidth: true - })(); - - const measureFunction = createDataGridMeasureFunction('updateDimensions'); - - assert.measureStyleRecalculation(measureFunction, 2); -}); - -QUnit.performanceTest('updateDimensions with columnFixing', function(assert) { - createDataGridMeasureFunction({ - dataSource: window.orders, - columnAutoWidth: true, - columnFixing: { - legacyMode: true - }, - customizeColumns: function(columns) { - columns[0].fixed = true; - } - })(); - - const measureFunction = createDataGridMeasureFunction('updateDimensions'); - - assert.measureStyleRecalculation(measureFunction, 3); -}); - -QUnit.performanceTest('updateDimensions with virtual scrolling', function(assert) { - createDataGridMeasureFunction({ - height: 300, - dataSource: window.orders, - scrolling: { mode: 'virtual' } - })(); - - const measureFunction = createDataGridMeasureFunction('updateDimensions'); - - assert.measureStyleRecalculation(measureFunction, 1); -}); - -QUnit.performanceTest('refresh', function(assert) { - createDataGridMeasureFunction({ - dataSource: window.orders - })(); - - const measureFunction = createDataGridMeasureFunction('refresh'); - - assert.measureStyleRecalculation(measureFunction, 2); -}); - -QUnit.performanceTest('refresh with columnAutoWidth', function(assert) { - createDataGridMeasureFunction({ - dataSource: window.orders, - columnAutoWidth: true - })(); - - const measureFunction = createDataGridMeasureFunction('refresh'); - - assert.measureStyleRecalculation(measureFunction, 5); -}); - -QUnit.performanceTest('refresh with columnFixing', function(assert) { - createDataGridMeasureFunction({ - dataSource: window.orders, - columnAutoWidth: true, - columnFixing: { - legacyMode: true - }, - customizeColumns: function(columns) { - columns[0].fixed = true; - } - })(); - - const measureFunction = createDataGridMeasureFunction('refresh'); - - assert.measureStyleRecalculation(measureFunction, 6); -}); - -QUnit.performanceTest('refresh with virtual scrolling', function(assert) { - createDataGridMeasureFunction({ - height: 300, - dataSource: window.orders, - scrolling: { mode: 'virtual' } - })(); - - const measureFunction = createDataGridMeasureFunction('refresh'); - - assert.measureStyleRecalculation(measureFunction, 1); -}); diff --git a/packages/devextreme/testing/tests/DevExpress.performance/overlaysStyleRecalculations.tests.js b/packages/devextreme/testing/tests/DevExpress.performance/overlaysStyleRecalculations.tests.js deleted file mode 100644 index 27278b49c314..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/overlaysStyleRecalculations.tests.js +++ /dev/null @@ -1,129 +0,0 @@ -require('../../helpers/qunitPerformanceExtension.js'); -require('ui/overlay/ui.overlay'); -require('ui/popup'); - -require('generic_light.css!'); - -const $ = require('jquery'); -const positionUtils = require('common/core/animation/position'); - -positionUtils.calculateScrollbarWidth(); - -QUnit.testStart(function() { - const markup = '\ -
\ -
item1
\ -
item2
\ -
item3
\ -
item4
\ -
item5
\ -
item6
\ -
item7
\ -
item8
\ -
item9
\ -
item10
\ -
'; - - $('#qunit-fixture').html(markup); -}); - -QUnit.performanceTest('dxOverlay should not force relayout on creation', function(assert) { - const measureFunction = function() { - $('#element').dxOverlay({}); - }; - - assert.measureStyleRecalculation(measureFunction, 1); -}); - -[true, false].forEach(shading => { - QUnit.performanceTest(`dxOverlay with shading=${shading} should be rendered with minimum count of relayouts`, function(assert) { - const measureFunction = function() { - $('#element').dxOverlay({ - shading, - visible: true, - animation: null, - useResizeObserver: false - }); - }; - - assert.measureStyleRecalculation(measureFunction, 11); - }); - - QUnit.performanceTest(`showing dxOverlay with shading=${shading} should be with minimum count of relayouts`, function(assert) { - const overlay = $('#element').dxOverlay({ - shading, - visible: false, - animation: null, - useResizeObserver: false - }).dxOverlay('instance'); - - const measureFunction = function() { - overlay.show(); - }; - - assert.measureStyleRecalculation(measureFunction, 9); - }); - - - QUnit.performanceTest(`dxPopup with shading=${shading} should be rendered with minimum count of relayouts`, function(assert) { - const measureFunction = function() { - $('#element').dxPopup({ - shading, - visible: true, - animation: null, - useResizeObserver: false - }); - }; - - assert.measureStyleRecalculation(measureFunction, shading ? 18 : 17); - }); - - [true, false].forEach(enableBodyScroll => { - QUnit.performanceTest(`Popup with shading=${shading} & enableBodyScroll=${enableBodyScroll} should be shown with minimum count of relayouts`, function(assert) { - const $additionalElement = $('
').height(2000).appendTo($('body')); - - try { - const popup = $('#element').dxPopup({ - shading, - enableBodyScroll, - visible: false, - animation: null, - useResizeObserver: false - }).dxPopup('instance'); - - const measureFunction = function() { - popup.show(); - }; - - const expectedRecalculationsCount = shading ? 16 : 15; - - assert.measureStyleRecalculation(measureFunction, expectedRecalculationsCount); - } finally { - $additionalElement.remove(); - } - }); - - QUnit.performanceTest(`Popup with shading=${shading} & enableBodyScroll=${enableBodyScroll} should be hidden with minimum count of relayouts`, function(assert) { - - const $additionalElement = $('
').height(2000).appendTo($('body')); - - try { - const popup = $('#element').dxPopup({ - shading, - enableBodyScroll, - visible: true, - animation: null, - useResizeObserver: false - }).dxPopup('instance'); - - const measureFunction = function() { - popup.hide(); - }; - - assert.measureStyleRecalculation(measureFunction, shading || !enableBodyScroll ? 3 : 2); - } finally { - $additionalElement.remove(); - } - }); - }); -}); diff --git a/packages/devextreme/testing/tests/DevExpress.performance/schedulerRecalculations.tests.js b/packages/devextreme/testing/tests/DevExpress.performance/schedulerRecalculations.tests.js deleted file mode 100644 index 3aa57be08a69..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/schedulerRecalculations.tests.js +++ /dev/null @@ -1,260 +0,0 @@ -/* eslint-disable no-console */ - -require('../../helpers/qunitPerformanceExtension.js'); - -require('generic_light.css!'); - -const $ = require('jquery'); -const resizeCallbacks = require('core/utils/resize_callbacks'); -const data = [ - { startDate: new Date(2016, 2, 9, 1), endDate: new Date(2016, 2, 9, 2), text: 'Meeting' }, - { startDate: new Date(2016, 2, 9, 3), endDate: new Date(2016, 2, 9, 4), text: 'Go to a shop' }, - { startDate: new Date(2016, 2, 9, 4, 30), endDate: new Date(2016, 2, 9, 5), text: 'The TV show' }, - { startDate: new Date(2016, 2, 9, 5), endDate: new Date(2016, 2, 9, 5, 30), text: 'Read a book' }, - { startDate: new Date(2016, 2, 9, 9), endDate: new Date(2016, 2, 9, 10), text: 'Play a guitar' } -]; - -require('ui/scheduler'); -require('ui/drop_down_button'); - -QUnit.testStart(function() { - $('#qunit-fixture').html('
'); -}); - -[true, false].forEach((renovateRender) => { - QUnit.performanceTest(`dxScheduler should force minimum relayout count on creation when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - $('#element').dxScheduler({ - showCurrentTimeIndicator: false, - showAllDayPanel: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, 7); - }); - - QUnit.performanceTest(`dxScheduler should force minimum relayout count on creation if showAllDayPanel = true when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - $('#element').dxScheduler({ - showCurrentTimeIndicator: false, - showAllDayPanel: true, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, (x) => x <= 9); - }); - - QUnit.performanceTest(`dxScheduler day view should force minimum relayout count on creation with appointments when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['day'], - currentView: 'day', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - showAllDayPanel: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, 8); - }); - - QUnit.performanceTest(`dxScheduler day view should force minimum relayout count on creation with appointments if showAllDayPanel = true when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['day'], - currentView: 'day', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - showAllDayPanel: true, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, (x) => x <= 10); - }); - - QUnit.performanceTest(`dxScheduler week view should force minimum relayout count on creation with appointments when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['week'], - currentView: 'week', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - showAllDayPanel: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, 9); - }); - - QUnit.performanceTest(`dxScheduler week view should force minimum relayout count on creation with appointments if showAllDayPanel = true when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['week'], - currentView: 'week', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - showAllDayPanel: true, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, (x) => x <= 10); - }); - - QUnit.performanceTest(`dxScheduler workWeek view should force minimum relayout count on creation with appointments when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['workWeek'], - currentView: 'workWeek', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - showAllDayPanel: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, 9); - }); - - QUnit.performanceTest(`dxScheduler workWeek view should force minimum relayout count on creation with appointments if showAllDayPanel = true when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['workWeek'], - currentView: 'workWeek', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - showAllDayPanel: true, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, (x) => x <= 10); - }); - - QUnit.performanceTest(`dxScheduler month view should force minimum relayout count on creation with appointments when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['month'], - currentView: 'month', - currentDate: new Date(2016, 2, 9), - dataSource: data, - height: 900, - showCurrentTimeIndicator: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, 9); - }); - - QUnit.performanceTest(`dxScheduler timelineDay view should force minimum relayout count on creation with appointments when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['timelineDay'], - currentView: 'timelineDay', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, (value) => value <= 18); - }); - - QUnit.performanceTest(`dxScheduler timelineWeek view should force minimum relayout count on creation with appointments when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['timelineWeek'], - currentView: 'timelineWeek', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, (value) => value <= 18); - }); - - QUnit.performanceTest(`dxScheduler timelineWorkWeek view should force minimum relayout count on creation with appointments when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['timelineWorkWeek'], - currentView: 'timelineWorkWeek', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, (value) => value <= 19); - }); - - QUnit.performanceTest(`dxScheduler timelineMonth view should force minimum relayout count on creation with appointments when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['timelineMonth'], - currentView: 'timelineMonth', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, (value) => value <= 19); - }); - - QUnit.performanceTest(`dxScheduler agenda view should force minimum relayout count on creation with appointments when renovateRender is ${renovateRender}`, function(assert) { - const measureFunction = function() { - console.timeStamp('Scheduler'); - $('#element').dxScheduler({ - views: ['agenda'], - currentView: 'agenda', - currentDate: new Date(2016, 2, 9), - dataSource: data, - showCurrentTimeIndicator: false, - renovateRender, - }); - }; - - assert.measureStyleRecalculation(measureFunction, 9); - }); - - QUnit.performanceTest(`dxScheduler should not force relayout on dxshown event when renovateRender is ${renovateRender}`, function(assert) { - $('#element').dxScheduler({ - showCurrentTimeIndicator: false, - renovateRender, - }); - - const measureFunction = function() { - resizeCallbacks.fire(); - }; - - assert.measureStyleRecalculation(measureFunction, 2); - }); -}); diff --git a/packages/devextreme/testing/tests/DevExpress.performance/simpleRecalculations.tests.js b/packages/devextreme/testing/tests/DevExpress.performance/simpleRecalculations.tests.js deleted file mode 100644 index 0a6194613600..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/simpleRecalculations.tests.js +++ /dev/null @@ -1,75 +0,0 @@ -const $ = require('jquery'); - -require('../../helpers/qunitPerformanceExtension.js'); -require('../../helpers/widgetsIterator.js'); - - -QUnit.testStart(function() { - $('#qunit-fixture').addClass('qunit-fixture-visible'); -}); - -QUnit.skip('Animation performance test', function(assert) { - const $div = $('
').appendTo($('body')); - $div.css({ - 'transitionProperty': 'none' - }); - - $div.css('zIndex', 1); - $div.css('left', 0); - $div.css('opacity', 1); - $div.css('transform', 'translate(1000px,0px)'); - - const $div2 = $('
').appendTo($('body')); - $div2.css({ - 'transitionProperty': 'none' - }); - - $div2.css('zIndex', 1); - $div2.css('left', 0); - $div2.css('opacity', 1); - $div2.css('transform', 'translate(1000px,0px)'); - - $div2.css({ - 'transitionProperty': 'all', - 'transitionDelay': 100 + 'ms', - 'transitionDuration': 1000 + 'ms', - 'transitionTimingFunction': 'ease' - }); - - - const measureFunction = function() { - const deferred = $.Deferred(); - $div.on('transitionend', function() { - deferred.resolve(); - }); - - $div.css('transform'); - - $div.css('left', 0); - $div.css('opacity', 1); - $div.css('transform', 'translate(100px,0)'); - - $div2.on('transitionend', function() { - deferred.resolve(); - }); - - $div2.css('transform'); - - $div2.css('left', 0); - $div2.css('opacity', 1); - $div2.css('transform', 'translate(100px,0)'); - - - // $div.css("left", 0); - // $div.css("opacity", 1); - // $div.css("transform", "translate3d(200px,0,0)"); - - // $div.css("left", 0); - // $div.css("opacity", 1); - // $div.css("transform", "translate3d(300px,0,0)"); - - return deferred; - }; - - assert.measureStyleRecalculation(measureFunction, 1); -}); diff --git a/packages/devextreme/testing/tests/DevExpress.performance/translatorRecalculations.tests.js b/packages/devextreme/testing/tests/DevExpress.performance/translatorRecalculations.tests.js deleted file mode 100644 index cab359634bbf..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/translatorRecalculations.tests.js +++ /dev/null @@ -1,25 +0,0 @@ -require('../../helpers/qunitPerformanceExtension.js'); -const $ = require('jquery'); -const translator = require('common/core/animation/translator'); - -QUnit.testStart(function() { - $('#qunit-fixture').html('
'); -}); - -QUnit.performanceTest('translator.move should force minimum relayout count with full coords', function(assert) { - const measureFunction = function() { - translator.move($('#element1'), { top: 20, left: 20 }); - translator.move($('#element2'), { top: 30, left: 20 }); - }; - - assert.measureStyleRecalculation(measureFunction, 1, true); -}); - -QUnit.performanceTest('translator.move should force minimum relayout count with short coords', function(assert) { - const measureFunction = function() { - translator.move($('#element1'), { top: 20 }); - translator.move($('#element2'), { left: 20 }); - }; - - assert.measureStyleRecalculation(measureFunction, 2); -}); diff --git a/packages/devextreme/testing/tests/DevExpress.performance/widgetsRenderStyleRecalculations.tests.js b/packages/devextreme/testing/tests/DevExpress.performance/widgetsRenderStyleRecalculations.tests.js deleted file mode 100644 index e570a1fa02ff..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.performance/widgetsRenderStyleRecalculations.tests.js +++ /dev/null @@ -1,146 +0,0 @@ -require('../../helpers/qunitPerformanceExtension.js'); -require('../../helpers/widgetsIterator.js'); - -require('generic_light.css!'); - -const $ = require('jquery'); -require('ui/switch'); -require('ui/check_box'); -require('ui/slider'); -require('ui/select_box'); -require('ui/range_slider'); -require('ui/color_box'); -require('ui/number_box'); -require('ui/text_box'); -require('ui/text_area'); -require('ui/autocomplete'); -require('ui/calendar'); -require('ui/date_box'); -require('ui/drop_down_box'); -require('ui/lookup'); -require('ui/radio_group'); -require('ui/tag_box'); -require('ui/date_range_box'); - -QUnit.testStart(function() { - $('
').appendTo('#qunit-fixture'); -}); - -const components = [ - { name: 'dxAutocomplete', config: {}, expectedRecalculations: 1 }, - { name: 'dxAutocomplete', config: { labelMode: 'hidden' }, expectedRecalculations: 1 }, - { name: 'dxAutocomplete', config: { labelMode: 'static' }, expectedRecalculations: 1 }, - { name: 'dxAutocomplete', config: { labelMode: 'floating' }, expectedRecalculations: 1 }, - { name: 'dxAutocomplete', config: { labelMode: 'outside' }, expectedRecalculations: 1 }, - { name: 'dxAutocomplete', config: { label: 'Label', labelMode: 'hidden' }, expectedRecalculations: 1 }, - // { name: 'dxAutocomplete', config: { label: 'Label', labelMode: 'static' }, expectedRecalculations: 2 }, - // { name: 'dxAutocomplete', config: { label: 'Label', labelMode: 'floating' }, expectedRecalculations: 2 }, - // { name: 'dxAutocomplete', config: { label: 'Label', labelMode: 'outside' }, expectedRecalculations: 1 }, - - { name: 'dxCalendar', config: {}, expectedRecalculations: 1 }, - { name: 'dxCheckBox', config: {}, expectedRecalculations: 1 }, - - { name: 'dxColorBox', config: {}, expectedRecalculations: 1 }, - { name: 'dxColorBox', config: { labelMode: 'hidden' }, expectedRecalculations: 1 }, - { name: 'dxColorBox', config: { labelMode: 'static' }, expectedRecalculations: 1 }, - { name: 'dxColorBox', config: { labelMode: 'floating' }, expectedRecalculations: 1 }, - { name: 'dxColorBox', config: { labelMode: 'outside' }, expectedRecalculations: 1 }, - - { name: 'dxDateBox', config: {}, expectedRecalculations: 3 }, - { name: 'dxDateBox', config: { labelMode: 'hidden' }, expectedRecalculations: 3 }, - { name: 'dxDateBox', config: { labelMode: 'static' }, expectedRecalculations: 3 }, - { name: 'dxDateBox', config: { labelMode: 'floating' }, expectedRecalculations: 3 }, - { name: 'dxDateBox', config: { labelMode: 'outside' }, expectedRecalculations: 3 }, - - { name: 'dxDropDownBox', config: {}, expectedRecalculations: 1 }, - { name: 'dxDropDownBox', config: { labelMode: 'hidden' }, expectedRecalculations: 1 }, - { name: 'dxDropDownBox', config: { labelMode: 'static' }, expectedRecalculations: 1 }, - { name: 'dxDropDownBox', config: { labelMode: 'floating' }, expectedRecalculations: 1 }, - { name: 'dxDropDownBox', config: { labelMode: 'outside' }, expectedRecalculations: 1 }, - { name: 'dxDropDownBox', config: { label: 'Label', labelMode: 'hidden' }, expectedRecalculations: 1 }, - // { name: 'dxDropDownBox', config: { label: 'Label', labelMode: 'static' }, expectedRecalculations: 2 }, - { name: 'dxDropDownBox', config: { label: 'Label', labelMode: 'floating' }, expectedRecalculations: 2 }, - { name: 'dxDropDownBox', config: { label: 'Label', labelMode: 'outside' }, expectedRecalculations: 1 }, - - { name: 'dxLookup', config: {}, expectedRecalculations: 1 }, - // { name: 'dxLookup', config: { labelMode: 'hidden' }, expectedRecalculations: 1 }, - // { name: 'dxLookup', config: { labelMode: 'static' }, expectedRecalculations: 1 }, - { name: 'dxLookup', config: { labelMode: 'floating' }, expectedRecalculations: 1 }, - { name: 'dxLookup', config: { labelMode: 'outside' }, expectedRecalculations: 1 }, - { name: 'dxLookup', config: { label: 'Label', labelMode: 'hidden' }, expectedRecalculations: 1 }, - { name: 'dxLookup', config: { label: 'Label', labelMode: 'static' }, expectedRecalculations: 2 }, - // { name: 'dxLookup', config: { label: 'Label', labelMode: 'floating' }, expectedRecalculations: 2 }, - // { name: 'dxLookup', config: { label: 'Label', labelMode: 'outside' }, expectedRecalculations: 1 }, - - { name: 'dxNumberBox', config: {}, expectedRecalculations: 1 }, - { name: 'dxNumberBox', config: { labelMode: 'hidden' }, expectedRecalculations: 1 }, - { name: 'dxNumberBox', config: { labelMode: 'static' }, expectedRecalculations: 1 }, - { name: 'dxNumberBox', config: { labelMode: 'floating' }, expectedRecalculations: 1 }, - { name: 'dxNumberBox', config: { labelMode: 'outside' }, expectedRecalculations: 1 }, - { name: 'dxNumberBox', config: { label: 'Label', labelMode: 'hidden' }, expectedRecalculations: 1 }, - // { name: 'dxNumberBox', config: { label: 'Label', labelMode: 'static' }, expectedRecalculations: 2 }, - { name: 'dxNumberBox', config: { label: 'Label', labelMode: 'floating' }, expectedRecalculations: 2 }, - // { name: 'dxNumberBox', config: { label: 'Label', labelMode: 'outside' }, expectedRecalculations: 1 }, - - { name: 'dxRadioGroup', config: {}, expectedRecalculations: 1 }, - { name: 'dxSlider', config: {}, expectedRecalculations: 5 }, - { name: 'dxRangeSlider', config: {}, expectedRecalculations: 5 }, - { name: 'dxSwitch', config: {}, expectedRecalculations: 1 }, - - { name: 'dxSelectBox', config: {}, expectedRecalculations: 1 }, - { name: 'dxSelectBox', config: { labelMode: 'hidden' }, expectedRecalculations: 1 }, - { name: 'dxSelectBox', config: { labelMode: 'static' }, expectedRecalculations: 1 }, - { name: 'dxSelectBox', config: { labelMode: 'floating' }, expectedRecalculations: 1 }, - { name: 'dxSelectBox', config: { labelMode: 'outside' }, expectedRecalculations: 1 }, - { name: 'dxSelectBox', config: { label: 'Label', labelMode: 'hidden' }, expectedRecalculations: 1 }, - // { name: 'dxSelectBox', config: { label: 'Label', labelMode: 'static' }, expectedRecalculations: 2 }, - // { name: 'dxSelectBox', config: { label: 'Label', labelMode: 'floating' }, expectedRecalculations: 2 }, - { name: 'dxSelectBox', config: { label: 'Label', labelMode: 'outside' }, expectedRecalculations: 1 }, - - { name: 'dxTagBox', config: {}, expectedRecalculations: 1 }, - { name: 'dxTagBox', config: { labelMode: 'hidden' }, expectedRecalculations: 1 }, - { name: 'dxTagBox', config: { labelMode: 'static' }, expectedRecalculations: 1 }, - { name: 'dxTagBox', config: { labelMode: 'floating' }, expectedRecalculations: 1 }, - { name: 'dxTagBox', config: { labelMode: 'outside' }, expectedRecalculations: 1 }, - { name: 'dxTagBox', config: { label: 'Label', labelMode: 'hidden' }, expectedRecalculations: 1 }, - // { name: 'dxTagBox', config: { label: 'Label', labelMode: 'static' }, expectedRecalculations: 2 }, - { name: 'dxTagBox', config: { label: 'Label', labelMode: 'floating' }, expectedRecalculations: 2 }, - // { name: 'dxTagBox', config: { label: 'Label', labelMode: 'outside' }, expectedRecalculations: 1 }, - - { name: 'dxTextArea', config: {}, expectedRecalculations: 1 }, - { name: 'dxTextArea', config: { labelMode: 'hidden' }, expectedRecalculations: 1 }, - { name: 'dxTextArea', config: { labelMode: 'static' }, expectedRecalculations: 1 }, - { name: 'dxTextArea', config: { labelMode: 'floating' }, expectedRecalculations: 1 }, - { name: 'dxTextArea', config: { labelMode: 'outside' }, expectedRecalculations: 1 }, - - { name: 'dxTextBox', config: {}, expectedRecalculations: 1 }, - { name: 'dxTextBox', config: { mode: 'search' }, expectedRecalculations: 1 }, - { name: 'dxTextBox', config: { labelMode: 'hidden' }, expectedRecalculations: 1 }, - { name: 'dxTextBox', config: { labelMode: 'static' }, expectedRecalculations: 1 }, - { name: 'dxTextBox', config: { labelMode: 'floating' }, expectedRecalculations: 1 }, - { name: 'dxTextBox', config: { labelMode: 'outside' }, expectedRecalculations: 1 }, - { name: 'dxTextBox', config: { mode: 'search', label: 'Label', labelMode: 'hidden' }, expectedRecalculations: 1 }, - // { name: 'dxTextBox', config: { mode: 'search', label: 'Label', labelMode: 'static' }, expectedRecalculations: 2 }, - // { name: 'dxTextBox', config: { mode: 'search', label: 'Label', labelMode: 'floating' }, expectedRecalculations: 2 }, - // { name: 'dxTextBox', config: { mode: 'search', label: 'Label', labelMode: 'outside' }, expectedRecalculations: 2 }, - - { name: 'dxDateRangeBox', config: {}, expectedRecalculations: 11 }, - { name: 'dxDateRangeBox', config: { startDateLabel: '', endDateLabel: '', labelMode: 'hidden' }, expectedRecalculations: 9 }, - { name: 'dxDateRangeBox', config: { startDateLabel: '', endDateLabel: '', labelMode: 'static' }, expectedRecalculations: 9 }, - { name: 'dxDateRangeBox', config: { startDateLabel: '', endDateLabel: '', labelMode: 'floating' }, expectedRecalculations: 9 }, - { name: 'dxDateRangeBox', config: { startDateLabel: '', endDateLabel: '', labelMode: 'outside' }, expectedRecalculations: 9 }, - { name: 'dxDateRangeBox', config: { startDateLabel: 'StartDate', endDateLabel: 'EndDate', labelMode: 'hidden' }, expectedRecalculations: 9 }, - // { name: 'dxDateRangeBox', config: { startDateLabel: 'StartDate', endDateLabel: 'EndDate', labelMode: 'static' }, expectedRecalculations: 11 }, - { name: 'dxDateRangeBox', config: { startDateLabel: 'StartDate', endDateLabel: 'EndDate', labelMode: 'floating' }, expectedRecalculations: 11 }, - { name: 'dxDateRangeBox', config: { startDateLabel: 'StartDate', endDateLabel: 'EndDate', labelMode: 'outside' }, expectedRecalculations: 9 }, -]; - -components.forEach(({ name, config, expectedRecalculations }) => { - QUnit.performanceTest(`${name} relayouts on creation, config: ${JSON.stringify(config)}`, function(assert) { - const measureFunction = function() { - $('#container')[name](config); - }; - - assert.measureStyleRecalculation(measureFunction, expectedRecalculations); - }); -});