Add visual tests on locked row count and rows drag&drop (#8098)

* Add visual tests on locked row count and rows drag&drop

* Add dragging test on Angular

* FIx the knockout rendering

* Fix visual & markup tests

src/question_matrixdropdownrendered.ts

@@ -553,6 +553,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     const cell = new QuestionMatrixDropdownRenderedCell();
     const lockedRows = (<QuestionMatrixDynamicModel>this.matrix).lockedRowCount;
     cell.isDragHandlerCell = lockedRows < 1 || rowIndex >= lockedRows;
+    cell.isEmpty = !cell.isDragHandlerCell;
     cell.className = this.getActionsCellClassName(cell);
     cell.row = this.matrix.visibleRows[rowIndex];
     return cell;

tests/question_matrixdynamictests.ts

@@ -9270,4 +9270,8 @@ QUnit.test("lockedRowCount property", function (assert) {
   assert.equal(table.rows[3].cells[0].isDragHandlerCell, false, "isDragHandlerCell, row#2");
   assert.equal(table.rows[5].cells[0].isDragHandlerCell, true, "isDragHandlerCell, row#3");
   assert.equal(table.rows[7].cells[0].isDragHandlerCell, true, "isDragHandlerCell, row#4");
+  assert.equal(table.rows[1].cells[0].isEmpty, true, "isEmpty, row#1");
+  assert.equal(table.rows[3].cells[0].isEmpty, true, "isEmpty, row#2");
+  assert.equal(table.rows[5].cells[0].isEmpty, false, "isEmpty, row#3");
+  assert.equal(table.rows[7].cells[0].isEmpty, false, "isEmpty, row#4");
 });

visualRegressionTests/tests/defaultV2/matrixdynamic.ts

@@ -223,7 +223,7 @@ frameworks.forEach(framework => {
   test("Check Matrixdynamic with allowRowsDragAndDrop", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       //todo
-      if (framework === "vue" || framework === "angular") {
+      if (framework === "vue") {
         return;
       }
       await t.resizeWindow(1280, 1100);
@@ -234,6 +234,24 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("matrixdynamic-allowRowsDragAndDrop.png", matrixdynamicRoot, t, comparer);
     });
   });
+  test("Check Matrixdynamic with allowRowsDragAndDrop & lockedRowCount=1", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      //todo
+      if (framework === "vue") {
+        return;
+      }
+      await t.resizeWindow(1280, 1100);
+      await initSurvey(framework, { elements: [{ type: "matrixdynamic", name: "question1", allowRowsDragAndDrop: true, defaultValue: [{ col1: "Row1 value" }, { col1: "Row2 value" }, { col1: "Row3 value" }], columns: [{ "name": "col1", "title": "Column 1", "cellType": "text" }] }] });
+      await ClientFunction(() => { (window as any).survey.getAllQuestions()[0].lockedRowCount = 1; })();
+
+      const matrixdynamicRoot = Selector(".sd-question");
+      await resetFocusToBody();
+      await takeElementScreenshot("matrixdynamic-allowRowsDragAndDrop-lockedRowCount.png", matrixdynamicRoot, t, comparer);
+
+      await ClientFunction(() => { (window as any).survey.getAllQuestions()[0].allowRowsDragAndDrop = false; })();
+      await takeElementScreenshot("matrixdynamic-lockedRowCount.png", matrixdynamicRoot, t, comparer);
+    });
+  });
 
   test("Check matrixdropdown with showInMultipleColumns", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {