feat: support jquery 4 (DevExpress#29830)

Co-authored-by: Mikhail Preyskurantov <[email protected]>

Author: VasilyStrelyaev

apps/demos/Demos/Autocomplete/Overview/jQuery/index.js

@@ -94,7 +94,7 @@ $(() => {
   });
 
   function updateEmployeeInfo() {
-    let result = $.trim(`${firstName || ''} ${lastName || ''}`);
+    let result = `${firstName || ''} ${lastName || ''}`.trim();
 
     result += (result && position) ? (`, ${position}`) : position || '';
     result += (result && state) ? (`, ${state}`) : state || '';

apps/demos/Demos/Charts/SignalRService/jQuery/index.js

@@ -1,4 +1,12 @@
 $(() => {
+  $.type = $.type || function (obj) {
+    if (obj == null) {
+      return obj + '';
+    }
+
+    return typeof obj;
+  };
+
   const hubConnection = new signalR.HubConnectionBuilder()
     .withUrl('https://js.devexpress.com/Demos/NetCore/stockTickDataHub', {
       skipNegotiation: true,

apps/demos/Demos/DataGrid/CollaborativeEditing/jQuery/index.js

@@ -1,4 +1,12 @@
 $(() => {
+  $.type = $.type || function (obj) {
+    if (obj == null) {
+      return obj + '';
+    }
+
+    return typeof obj;
+  };
+
   const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore/';
   const url = `${BASE_PATH}api/DataGridCollaborativeEditing/`;
   const groupId = new DevExpress.data.Guid().toString();

apps/demos/Demos/DataGrid/SignalRService/jQuery/index.js

@@ -1,4 +1,12 @@
 $(() => {
+  $.type = $.type || function (obj) {
+    if (obj == null) {
+      return obj + '';
+    }
+
+    return typeof obj;
+  };
+
   const connection = new signalR.HubConnectionBuilder()
     .withUrl('https://js.devexpress.com/Demos/NetCore/liveUpdateSignalRHub', {
       skipNegotiation: true,

apps/demos/Demos/Scheduler/SignalRService/jQuery/index.js

@@ -1,4 +1,12 @@
 $(() => {
+  $.type = $.type || function (obj) {
+    if (obj == null) {
+      return obj + '';
+    }
+
+    return typeof obj;
+  };
+
   const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore/';
   const url = `${BASE_PATH}api/SchedulerSignalR`;
   const createScheduler = function (index) {

e2e/testcafe-devextreme/tests/common/draggable.ts

@@ -9,21 +9,21 @@ fixture.disablePageReloads`Draggable`
 const init = ClientFunction(() => {
   $('<div>', {
     id: 'scrollview',
-    width: 400,
-    height: 400,
+    width: '400px',
+    height: '400px',
   })
     .css({
       position: 'absolute',
       top: 0,
-      padding: 20,
+      padding: '20px',
       background: '#f18787',
     })
     .appendTo('#container');
 
   $('<div>', {
     id: 'scrollview-content',
-    height: 500,
-    width: 500,
+    height: '500px',
+    width: '500px',
   }).appendTo('#scrollview');
 
   $('<div>', {

e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts

@@ -445,7 +445,7 @@ test('Header container should have padding-right if grid has max-height and scro
     .ok(compareResults.errorMessages());
 }).before(async () => {
   await ClientFunction(() => {
-    $('#container').css('max-height', 200);
+    $('#container').css('max-height', '200px');
   })();
 
   return createWidget('dxDataGrid', {
@@ -752,7 +752,7 @@ test('New row should be rendered at the top when grid is scrolled in virtual scr
     return items;
   };
   await ClientFunction(() => {
-    $('#container').css('max-height', 440);
+    $('#container').css('max-height', '440px');
   })();
   await createWidget('dxDataGrid', {
     dataSource: generateData(),
@@ -1119,8 +1119,8 @@ safeSizeTest('The page should not be changed when hiding/showing the grid view a
     (window as any).testLoadCount = 0;
 
     $('body').css({
-      minHeight: 100,
-      minWidth: 100,
+      minHeight: '100px',
+      minWidth: '100px',
     });
   })();
 

e2e/testcafe-devextreme/tests/editors/checkBox/common.ts

@@ -95,7 +95,7 @@ test('Checkbox appearance', async (t) => {
     `${INVALID_STATE_CLASS} ${FOCUSED_STATE_CLASS}`,
   ] as string[]) {
     await ClientFunction(() => {
-      $('#container').append($('<div>').text(`State: ${state}`).css('fontSize', 10));
+      $('#container').append($('<div>').text(`State: ${state}`).css('fontSize', '10px'));
     }, {
       dependencies: {
         state,

e2e/testcafe-devextreme/tests/editors/overlays/resizeObserverIntegration.ts

@@ -45,7 +45,7 @@ test('Popup should be centered regarding the container even if content dimension
 }).before(async () => createWidget('dxPopup', {
   width: 'auto',
   height: 'auto',
-  contentTemplate: () => $('<div>').attr({ id: 'content' }).css({ width: 100, height: 100 }),
+  contentTemplate: () => $('<div>').attr({ id: 'content' }).css({ width: '100px', height: '100px' }),
 }, undefined, { disableFxAnimation: false }));
 
 test('Popup should be centered regarding the container even if popup dimension option is changed during animation', async (t) => {
@@ -84,7 +84,7 @@ test('Popup should be centered regarding the container even if popup dimension o
 }).before(async () => createWidget('dxPopup', {
   width: 'auto',
   height: 'auto',
-  contentTemplate: () => $('<div>').attr({ id: 'content' }).css({ width: 100, height: 100 }),
+  contentTemplate: () => $('<div>').attr({ id: 'content' }).css({ width: '100px', height: '100px' }),
 }, undefined, { disableFxAnimation: false }));
 
 test('Popup should be centered regarding the container even if content dimension is changed', async (t) => {
@@ -123,7 +123,7 @@ test('Popup should be centered regarding the container even if content dimension
 }).before(async () => createWidget('dxPopup', {
   width: 'auto',
   height: 'auto',
-  contentTemplate: () => $('<div>').attr({ id: 'content' }).css({ width: 100, height: 100 }),
+  contentTemplate: () => $('<div>').attr({ id: 'content' }).css({ width: '100px', height: '100px' }),
   animation: null,
 }, undefined, { disableFxAnimation: false }));
 
@@ -225,7 +225,7 @@ test('Showing and shown events should be raised only once even after resize duri
 }).before(async () => createWidget('dxPopup', {
   width: 'auto',
   height: 'auto',
-  contentTemplate: () => $('<div>').attr({ id: 'content' }).css({ width: 100, height: 100 }),
+  contentTemplate: () => $('<div>').attr({ id: 'content' }).css({ width: '100px', height: '100px' }),
 }, undefined, { disableFxAnimation: false })).after(async () => {
   await ClientFunction(() => {
     delete (window as any).shownCallCount;

e2e/testcafe-devextreme/tests/navigation/drawer/drawer.helpers.ts

@@ -25,7 +25,7 @@ export function createDrawer({
       opened: true,
       height: 400,
       template: () => {
-        const $result = $('<div>').width(200).css('background-color', 'aqua').css('height', '100%');
+        const $result = $('<div>').width('200px').css('background-color', 'aqua').css('height', '100%');
         if (createDrawerContent) {
           createDrawerContent($result);
         }