fix: move syncFieldWithNewRow to Helpers to make the feature directly…

… testable
kevinchappell · Jul 5, 2024 · d37b0a1 · d37b0a1
1 parent eae8a5f
commit d37b0a1
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 29 deletions.
diff --git a/src/js/form-builder.js b/src/js/form-builder.js
@@ -1397,7 +1397,7 @@ function FormBuilder(opts, element, $) {
             colWrapper.appendTo(rowWrapperNode)
 
             setupSortableRowWrapper(rowWrapperNode)
-            syncFieldWithNewRow(colWrapper.attr('id'))
+            h.syncFieldWithNewRow(colWrapper[0], colWrapper.closest(rowWrapperClassSelector)[0])
           }
         }
 
@@ -1443,10 +1443,11 @@ function FormBuilder(opts, element, $) {
       stop: (event, ui) => {
         $stage.removeClass('__preventColButtons')
         $stage.children(tmpRowPlaceholderClassSelector).removeClass('hoverDropStyleInverse')
+        checkRowCleanup()
         autoSizeRowColumns(ui.item.closest(rowWrapperClassSelector), true)
       },
       update: (event, ui) => {
-        syncFieldWithNewRow(ui.item.attr('id'))
+        h.syncFieldWithNewRow(ui.item, $(ui.item).closest(rowWrapperClassSelector)[0])
       },
     })
 
@@ -1934,7 +1935,7 @@ function FormBuilder(opts, element, $) {
 
     setupSortableRowWrapper(rowWrapper)
     ResetAllInvisibleRowPlaceholders()
-    syncFieldWithNewRow($clone.attr('id'))
+    h.syncFieldWithNewRow($clone[0], $clone.closest(rowWrapperClassSelector)[0])
   }
 
   // Delete field
@@ -2139,32 +2140,6 @@ function FormBuilder(opts, element, $) {
     })
   }
 
-  /**
-   * Updates the field's className to include the current wrapping row, removing the previous row if defined
-   * @param fieldID
-   */
-  function syncFieldWithNewRow(fieldID) {
-    if (fieldID) {
-      const inputClassElement = $(`#className-${fieldID.replace('-cont', '')}`)
-      const currentClassName = inputClassElement.val().trim()
-      if (currentClassName) {
-        let currentClasses = currentClassName.split(' ')
-        const oldRow = h.getRowClass(currentClassName)
-        const wrapperRow = h.getRowClass(inputClassElement.closest(rowWrapperClassSelector).attr('class'))
-        if (oldRow !== wrapperRow) {
-          if (oldRow) {
-            currentClasses = currentClasses.filter(function(obj) {
-              return obj !== oldRow
-            })
-          }
-          currentClasses.push(wrapperRow)
-          inputClassElement.val(currentClasses.join(' '))
-        }
-        checkRowCleanup()
-      }
-    }
-  }
-
   //When mouse moves away a certain distance, cancel grid mode
   $(document).mousemove(e => {
     if (

diff --git a/src/js/helpers.js b/src/js/helpers.js
@@ -1462,4 +1462,32 @@ export default class Helpers {
       inputClassElement.val(this.changeBootstrapClass(inputClassElement.val(), newValue))
     }
   }
+
+  /**
+   * Updates the field's className to include the current wrapping row, removing the previous row if defined
+   * @param {HTMLElement} field
+   * @param {HTMLElement} wrapperRow
+   */
+   syncFieldWithNewRow(field, wrapperRow) {
+    if (field) {
+      const inputClassElement = $(field).find('.fld-className')
+      const currentClassName = inputClassElement.val().trim()
+      if (currentClassName) {
+        let currentClasses = currentClassName.split(' ')
+        const oldRow = this.getRowClass(currentClassName)
+        const newRow = this.getRowClass(wrapperRow?.className ?? '')
+        if (oldRow !== newRow) {
+          if (oldRow) {
+            currentClasses = currentClasses.filter(function(obj) {
+              return obj !== oldRow
+            })
+          }
+          if (newRow) {
+            currentClasses.push(newRow)
+          }
+          inputClassElement.val(currentClasses.join(' '))
+        }
+      }
+    }
+  }
 }
diff --git a/tests/bootstrap.test.js b/tests/bootstrap.test.js
@@ -70,4 +70,52 @@ describe('Test Boostrap Helper functions', () => {
     expect(helper.changeBootstrapClass('col-md-5 row-1 random-class row col', 7)).toBe('col-md-7 row-1 random-class row col')
   })
 
+  test('syncFieldWithNewRow swaps existing with new', () => {
+    const field = $('<div>')
+    const input = $('<input>', {class: 'fld-className', value: 'prefix-class form-control row-1 col-md-12 suffix-class'})
+    field.append(input)
+    const newRow = $('<div>', {class: 'row-2'})
+
+    expect(input.val()).toEqual('prefix-class form-control row-1 col-md-12 suffix-class')
+    helper.syncFieldWithNewRow(field[0], newRow[0])
+
+    expect(input.val()).toEqual('prefix-class form-control col-md-12 suffix-class row-2')
+  })
+
+  test('syncFieldWithNewRow unsets row class when no new row', () => {
+    const field = $('<div>')
+    const input = $('<input>', {class: 'fld-className', value: 'prefix-class form-control row-1 col-md-12 suffix-class'})
+    field.append(input)
+    const newRow = $('<div>', {})
+
+    expect(input.val()).toEqual('prefix-class form-control row-1 col-md-12 suffix-class')
+    helper.syncFieldWithNewRow(field[0], newRow[0])
+
+    expect(input.val()).toEqual('prefix-class form-control col-md-12 suffix-class')
+  })
+
+  test('syncFieldWithNewRow sets new row when no previous row', () => {
+    const field = $('<div>')
+    const input = $('<input>', {class: 'fld-className', value: 'prefix-class form-control col-md-12 suffix-class'})
+    field.append(input)
+    const newRow = $('<div>', {class: 'row-2'})
+
+    expect(input.val()).toEqual('prefix-class form-control col-md-12 suffix-class')
+    helper.syncFieldWithNewRow(field[0], newRow[0])
+
+    expect(input.val()).toEqual('prefix-class form-control col-md-12 suffix-class row-2')
+  })
+
+  test('syncFieldWithNewRow no change if same row id', () => {
+    const field = $('<div>')
+    const input = $('<input>', {class: 'fld-className', value: 'prefix-class form-control row-2 col-md-12 suffix-class'})
+    field.append(input)
+    const newRow = $('<div>', {class: 'row-2'})
+
+    expect(input.val()).toEqual('prefix-class form-control row-2 col-md-12 suffix-class')
+    helper.syncFieldWithNewRow(field[0], newRow[0])
+
+    expect(input.val()).toEqual('prefix-class form-control row-2 col-md-12 suffix-class')
+  })
+
 })