Merge remote-tracking branch 'origin/23_2' into ci/build-aspnet-demos

JSDemos/Demos/Form/Validation/Angular/app/app.component.html

@@ -108,7 +108,7 @@
         <dxi-validation-rule
           type="stringLength"
           [min]="2"
-          message="Name must have at least 2 symbols"
+          message="City must have at least 2 symbols"
         >
         </dxi-validation-rule>
         <dxi-validation-rule type="required" message="City is required">

JSDemos/menuMeta.json

@@ -4543,6 +4543,7 @@
             "Equivalents": "Submit",
             "Name": "Validation",
             "Widget": "Form",
+            "Badge": "Updated",
             "MvcAdditionalFiles": [
               "/Views/Form/SuccessValidation.cshtml",
               "/ViewModels/EditorsViewModel.cs",

MVCDemos/Views/Form/Validation.cshtml

@@ -132,12 +132,12 @@
         formInstance = e.component;
     }
 
-	function onOptionChanged(e) {
-		if(e.name === 'isDirty') {
-			const resetButton = formInstance.getButton('Reset');
-			resetButton.option('disabled', !e.value);
-		}
-	}
+    function onOptionChanged(e) {
+        if(e.name === 'isDirty') {
+            const resetButton = formInstance.getButton('Reset');
+            resetButton.option('disabled', !e.value);
+        }
+    }
 
 	function onResetButtonClick(e) {
         formInstance.reset();

NetCoreDemos/Views/Form/Validation.cshtml

@@ -133,12 +133,12 @@
         formInstance = e.component;
     }
 
-	function onOptionChanged(e) {
-		if(e.name === 'isDirty') {
-			const resetButton = formInstance.getButton('Reset');
-			resetButton.option('disabled', !e.value);
-		}
-	}
+    function onOptionChanged(e) {
+        if(e.name === 'isDirty') {
+            const resetButton = formInstance.getButton('Reset');
+            resetButton.option('disabled', !e.value);
+        }
+    }
 
 	function onResetButtonClick(e) {
         formInstance.reset();

testing/widgets/form/Validation.test.js

@@ -0,0 +1,32 @@
+import { Selector as $ } from 'testcafe';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+
+const FIELD_BUTTON_ITEM_CLASS = '.dx-field-button-item';
+const CHECKBOX_CLASS = '.dx-checkbox';
+
+fixture('Form.Validation')
+  .page('http://localhost:8080/')
+  .beforeEach(async (t) => {
+    await t
+      .resizeWindow(900, 1200);
+  });
+
+runManualTest('Form', 'Validation', ['jQuery', 'Vue', 'Angular'], (test) => {
+  test('Validation', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await takeScreenshot('form_validation_summary.png');
+
+    await t.click($(FIELD_BUTTON_ITEM_CLASS).nth(1));
+    await takeScreenshot('form_validation_before_reset.png');
+
+    await t.click(CHECKBOX_CLASS);
+    await t.click($(FIELD_BUTTON_ITEM_CLASS).nth(0));
+    await takeScreenshot('form_validation_after_reset.png');
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
+});

testing/widgets/scheduler/customDragAndDrop.test.js

@@ -0,0 +1,46 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+
+const LIST_SELECTOR = '#list.dx-draggable';
+const LIST_ITEM_SELECTOR = '.dx-card.dx-draggable';
+const DATE_TABLE_CELL_SELECTOR = '.dx-scheduler-date-table .dx-scheduler-date-table-cell';
+const ALL_DAY_PANEL_CELL_SELECTOR = '.dx-scheduler-all-day-table .dx-scheduler-all-day-table-cell';
+const DATE_TABLE_APPOINTMENT_SELECTOR = '.dx-scheduler-date-table-container .dx-scheduler-appointment';
+const ALL_DAY_PANEL_APPOINTMENT_SELECTOR = '.dx-scheduler-all-day-panel .dx-scheduler-appointment';
+
+const DRAG_MOUSE_OPTIONS = { speed: 0.5 };
+
+fixture('Scheduler.CustomDragAndDrop')
+  .page('http://localhost:8080/')
+  .beforeEach(async (t) => {
+    await t
+      .resizeWindow(900, 600);
+  });
+
+[
+  [LIST_ITEM_SELECTOR, DATE_TABLE_CELL_SELECTOR, 'list', 'date-table'],
+  [DATE_TABLE_APPOINTMENT_SELECTOR, LIST_SELECTOR, 'date-table', 'list'],
+  [LIST_ITEM_SELECTOR, ALL_DAY_PANEL_CELL_SELECTOR, 'list', 'all-day-panel'],
+  [ALL_DAY_PANEL_APPOINTMENT_SELECTOR, LIST_SELECTOR, 'all-day-panel', 'list'],
+].forEach(([
+  fromSelector,
+  toSelector,
+  fromName,
+  toName,
+]) => {
+  runManualTest('Scheduler', 'CustomDragAndDrop', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
+    test(`Should drag-and-drop from ${fromName} to ${toName}`, async (t) => {
+      const {
+        takeScreenshot,
+        compareResults,
+      } = createScreenshotsComparer(t);
+
+      await t.dragToElement(fromSelector, toSelector, DRAG_MOUSE_OPTIONS);
+      await takeScreenshot(`scheduler_custom-dnd_${fromName}_${toName}.png`);
+
+      await t
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    });
+  });
+});