fix `form.elements.length has incorrect value if a form has a file in…

…put` (close #2009) (#2016)

* fix `form.elements.length has incorrect value if a form has a file input` (close #2009)

* fix the childElementCount case

* remove the form

* requested changes: add second input, add for ..of loop testcase

* fix the for...of test case

* requested changes: test simplification

src/client/sandbox/shadow-ui.ts

@@ -694,6 +694,14 @@ export default class ShadowUI extends SandboxBase {
         el[INTERNAL_PROPS.shadowUIElement] = true;
     }
 
+    // GH-2009
+    static markFormAsShadow (form) {
+        ShadowUI._markAsShadowContainer(form);
+        ShadowUI.markAsShadowContainerCollection(form.elements);
+        ShadowUI.markAsShadowContainerCollection(form.children);
+        ShadowUI.markAsShadowContainerCollection(form.childNodes);
+    }
+
     static markElementAndChildrenAsShadow (el) {
         ShadowUI.markElementAsShadow(el);
 

src/client/sandbox/upload/hidden-info.ts

@@ -14,6 +14,8 @@ function createInput (form) {
     nativeMethods.inputValueSetter.call(hiddenInput, '[]');
     nativeMethods.appendChild.call(form, hiddenInput);
 
+    ShadowUI.markFormAsShadow(form);
+
     return hiddenInput;
 }
 

test/client/fixtures/sandbox/upload-test.js

@@ -159,6 +159,64 @@ function getFiles (filesInfo) {
 
 module('hidden info');
 
+test('hidden input should not affect both the length/count value and the elements order (GH-2009)', function () {
+    var form   = document.createElement('form');
+    var input1 = document.createElement('input');
+    var input2 = document.createElement('input');
+
+    input1.id = 'input1';
+    input2.id = 'input2';
+
+    document.body.appendChild(form);
+    form.appendChild(input1);
+
+    var expectedElements = [input1, input2]; // eslint-disable-line no-unused-vars
+
+    // NOTE: We are forced to use this hack because IE11 raises a syntax error if a page contains the 'for..of' loop
+    function getForOfLoopCode (iterableObjString) {
+        return [
+            'var index = 0;',
+            'for (var el of ' + iterableObjString + ') {',
+            '    strictEqual(el, expectedElements[index]);',
+            '    index++;',
+            '}'
+        ].join('\n');
+    }
+
+    function checkLength (expeсted) {
+        strictEqual(form.elements.length, expeсted);
+        strictEqual(form.children.length, expeсted);
+        strictEqual(form.childNodes.length, expeсted);
+        strictEqual(form.childElementCount, expeсted);
+    }
+
+    return uploadSandbox.doUpload(input1, './file.txt')
+        .then(function () {
+            checkLength(1);
+
+            strictEqual(form.firstChild, form.lastChild);
+            strictEqual(form.firstElementChild, form.lastElementChild);
+
+
+            form.appendChild(input2);
+
+            checkLength(2);
+
+            if (!browserUtils.isIE11) {
+                eval(getForOfLoopCode('form.elements'));
+                eval(getForOfLoopCode('form.children'));
+                eval(getForOfLoopCode('form.childNodes'));
+            }
+
+            strictEqual(form.firstChild, input1);
+            strictEqual(form.firstElementChild, input1);
+            strictEqual(form.lastChild, input2);
+            strictEqual(form.lastElementChild, input2);
+
+            form.parentNode.removeChild(form);
+        });
+});
+
 test('get/set upload info', function () {
     var fileInputWithoutForm = $('<input type="file">')[0];
     var fileInputWithForm    = $('<form><input type="file"></form>').children()[0];