Introduce getArrayValue with unit tests

Author: Lustmored

src/LiveComponent/assets/src/get_array_value.ts

@@ -0,0 +1,39 @@
+/**
+ * Resolve multiple value data from changed HTML element.
+ *
+ * @param element       Current HTML element
+ * @param value         Resolved value of a single HTML element (.value or [data-value])
+ * @param currentValue  Current data value
+ */
+export function getArrayValue(
+    element: HTMLElement,
+    value: string|null,
+    currentValue: any
+): Array<string>|null {
+    // Enforce returned value is an array
+    if (!(currentValue instanceof Array)) {
+        currentValue = [];
+    }
+
+    if (element instanceof HTMLInputElement && element.type === 'checkbox') {
+        const index = currentValue.indexOf(value);
+
+        if (element.checked) {
+            // Add value to an array if it's not in it already
+            if (index === -1) {
+                currentValue.push(value);
+            }
+        } else {
+            // Remove value from an array
+            if (index > -1) {
+                currentValue.splice(index, 1);
+            }
+        }
+    } else if (element instanceof HTMLSelectElement) {
+        // Select elements with `multiple` option require mapping chosen options to their values
+        currentValue = Array.from(element.selectedOptions).map(el => el.value);
+    }
+
+    // When no values are selected for collection no data should be sent over the wire
+    return currentValue.length ? currentValue : null;
+}

src/LiveComponent/assets/src/live_controller.ts

@@ -6,6 +6,7 @@ import {setDeepData, doesDeepPropertyExist, normalizeModelName, parseDeepData} f
 import { haveRenderedValuesChanged } from './have_rendered_values_changed';
 import { normalizeAttributesForComparison } from './normalize_attributes_for_comparison';
 import { cloneHTMLElement } from './clone_html_element';
+import {getArrayValue} from "./get_array_value";
 
 interface ElementLoadingDirectives {
     element: HTMLElement,
@@ -199,28 +200,22 @@ export default class extends Controller {
             throw new Error(`The update() method could not be called for "${clonedElement.outerHTML}": the element must either have a "data-model" or "name" attribute set to the model name.`);
         }
 
-        if (element instanceof HTMLInputElement && element.type === 'checkbox' && !element.checked) {
-            value = null;
-        }
-
         // HTML form elements with name ending with [] require array as data
         // we need to handle addition and removal of values from it to send
         // back only required data
         if (/\[]$/.test(model)) {
+            // Get current value from data
             const {currentLevelData, finalKey} = parseDeepData(this.dataValue, normalizeModelName(model))
-
             const currentValue = currentLevelData[finalKey];
-            if (currentValue instanceof Array) {
-                if (null === value) {
-                    const index = currentValue.indexOf(this._getValueFromElement(element));
-                    if (index > -1) {
-                        currentValue.splice(index, 1);
-                    }
-                } else {
-                    currentValue.push(value);
-                }
-            }
-            value = currentValue;
+
+            value = getArrayValue(element, value, currentValue);
+        } else if (
+            element instanceof HTMLInputElement
+            && element.type === 'checkbox'
+            && !element.checked
+        ) {
+            // Unchecked checkboxes in a single value scenarios should map to `null`
+            value = null;
         }
 
         this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null, {});

src/LiveComponent/assets/test/get_array_value.test.ts

@@ -0,0 +1,54 @@
+import {getArrayValue} from "../src/get_array_value";
+
+
+describe('getArrayValue', () => {
+    it('Correctly adds data from checkbox', () => {
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.checked = true;
+
+        expect(getArrayValue(input, 'foo', null))
+            .toEqual(['foo']);
+        expect(getArrayValue(input, 'foo', []))
+            .toEqual(['foo']);
+        expect(getArrayValue(input, 'foo', ['bar']))
+            .toEqual(['bar', 'foo']);
+    })
+
+    it('Correctly removes data from checkbox', () => {
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.checked = false;
+
+        expect(getArrayValue(input, 'foo', null))
+            .toEqual(null);
+        expect(getArrayValue(input, 'foo', ['foo']))
+            .toEqual(null);
+        expect(getArrayValue(input, 'foo', ['bar']))
+            .toEqual(['bar']);
+        expect(getArrayValue(input, 'foo', ['foo', 'bar']))
+            .toEqual(['bar']);
+    })
+
+    it('Correctly sets data from select multiple', () => {
+        const select = document.createElement('select');
+        select.multiple = true;
+        const fooOption = document.createElement('option');
+        fooOption.value = 'foo';
+        select.add(fooOption);
+        const barOption = document.createElement('option');
+        barOption.value = 'bar';
+        select.add(barOption);
+
+        expect(getArrayValue(select, '', null))
+            .toEqual(null);
+
+        fooOption.selected = true;
+        expect(getArrayValue(select, '', null))
+            .toEqual(['foo']);
+
+        barOption.selected = true;
+        expect(getArrayValue(select, '', null))
+            .toEqual(['foo', 'bar']);
+    })
+});