jsf.js_next_gen 4.0.0-RC.29 → 4.0.0-RC.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsf.js_next_gen",
-  "version": "4.0.0-RC.29",
+  "version": "4.0.0-RC.30",
   "description": "A next generation typescript reimplementation of jsf.js",
   "main": "dist/window/faces.js",
   "scripts": {

package/src/main/typescript/impl/AjaxImpl.ts

@@ -63,6 +63,7 @@ import {
     resolveForm,
     resolveTimeout, resolveViewId, resolveViewRootId, resoveNamingContainerMapper
 } from "./xhrCore/RequestDataResolver";
+import {encodeFormData} from "./util/URLCodec";
 
 /*
  * allowed project stages
@@ -530,11 +531,14 @@ export module Implementation {
             throw new Error(getMessage("ERR_VIEWSTATE"));
         }
 
+        // determine the naming container scenario
         const dummyContext = new Config({});
         assignNamingContainerData(dummyContext, DQ.byId(form))
+        // fetch all non file input form elements
+        let formElements = element.deepElements.encodeFormElement()
 
-        let formData = new XhrFormData(element, resoveNamingContainerMapper(dummyContext));
-        return formData.toString();
+        // encode them! (file inputs are handled differently and are not part of the viewstate)
+        return encodeFormData(formElements, resoveNamingContainerMapper(dummyContext));
     }
 
     /**

package/src/main/typescript/impl/util/URLCodec.ts

@@ -0,0 +1,71 @@
+import {ArrayCollector, Config, LazyStream, Stream} from "mona-dish";
+import {ExtConfig, ExtDomQuery} from "./ExtDomQuery";
+import {EMPTY_STR} from "../core/Const";
+
+/*
+ * various routines for encoding and decoding url parameters
+ * into configs and vice versa
+ */
+
+/**
+ * merges a list of key value entries into a target config
+ * @param target the target receiving the key value entries
+ * @param keyValueEntries a list of key value entries divided by =
+ * @param paramsMapper a key value remapper
+ */
+export function mergeKeyValueEntries(target: Config, keyValueEntries: string[], paramsMapper = (key, value) => [key, value]) {
+
+    function splitToKeyVal(line: string) {
+        return line.split(/=(.*)/gi);
+    }
+
+    function fixKeyWithoutVal(keyVal: string[]) {
+        return keyVal.length < 3 ? [keyVal?.[0] ?? [], keyVal?.[1] ?? []] : keyVal;
+    }
+
+    let toMerge = new ExtConfig({});
+    Stream.of(...keyValueEntries)
+        .map(line => splitToKeyVal(line))
+        //special case of having keys without values
+        .map(keyVal => fixKeyWithoutVal(keyVal))
+        .map(keyVal => paramsMapper(keyVal[0] as string, keyVal[1]))
+        .each(keyVal => {
+            toMerge.append(keyVal[0] as string).value = keyVal?.splice(1)?.join("") ?? "";
+        });
+
+    target.shallowMerge(toMerge);
+}
+
+/**
+ * encodes a given form data into a url encoded string
+ * @param formData the form data config object
+ * @param paramsMapper the params mapper
+ * @param defaultStr a default string if nothing comes out of it
+ */
+export function encodeFormData(formData: Config,
+                               paramsMapper = (inStr, inVal) => [inStr, inVal],
+                               defaultStr = EMPTY_STR): string {
+    if (formData.isAbsent()) {
+        return defaultStr;
+    }
+    let assocValues = formData.value;
+    let entries = LazyStream.of(...Object.keys(assocValues))
+        .filter(key => assocValues.hasOwnProperty(key))
+        .flatMap(key => Stream.of(...assocValues[key]).map(val => paramsMapper(key, val)))
+        //we cannot encode file elements that is handled by multipart requests anyway
+        .filter(([, value]) => !(value instanceof ExtDomQuery.global().File))
+        .map(keyVal => `${encodeURIComponent(keyVal[0])}=${encodeURIComponent(keyVal[1])}`)
+        .collect(new ArrayCollector());
+
+    return entries.join("&")
+}
+
+/**
+ * splits and decodes encoded values into strings containing of key=value
+ * @param encoded encoded string
+ */
+export function decodeEncodedValues(encoded: string): string[] {
+    return decodeURIComponent(encoded).split(/&/gi)
+        .filter(item => !!(item || '')
+            .replace(/\s+/g, ''));
+}

package/src/main/typescript/impl/xhrCore/RequestDataResolver.ts

@@ -108,7 +108,7 @@ export function resolveViewRootId(form: DQ): string {
 export function resoveNamingContainerMapper(internalContext: Config): (key: string, value: any) => [string, any] {
     const isNamedViewRoot = internalContext.getIf(NAMED_VIEWROOT).isPresent();
     if(!isNamedViewRoot) {
-        return;
+        return (key, value) => [key, value];
     }
     const partialId = internalContext.getIf(NAMING_CONTAINER_ID).value;
     const SEP = $faces().separatorchar;

package/src/main/typescript/impl/xhrCore/XhrFormData.ts

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {ArrayCollector, Config, DQ, Lang, LazyStream, Stream} from "mona-dish";
-import {$nsp, EMPTY_STR, IDENT_ALL, IDENT_FORM, P_VIEWSTATE} from "../core/Const";
-import isString = Lang.isString;
-import {ExtConfig, ExtDomQuery} from "../util/ExtDomQuery";
+import {Config, DQ, LazyStream, Stream} from "mona-dish";
+import {$faces, $nsp, EMPTY_STR, IDENT_ALL, IDENT_FORM, P_VIEWSTATE} from "../core/Const";
+import {ExtConfig} from "../util/ExtDomQuery";
+import {decodeEncodedValues, encodeFormData, mergeKeyValueEntries} from "../util/URLCodec";
 
 
 type ParamsMapper<V, K> = (key: V, item: K) => [V, K];
@@ -48,31 +48,22 @@ export class XhrFormData extends Config {
      * data collector from a given form
      *
      * @param dataSource either a form as DomQuery object or an encoded url string
-     * @param viewState the form view state or an external viewState coming in as string
+     * @param paramsMapper a remapper for the params keys and values
      * @param executes the executes id list for the elements to being processed
      * @param partialIds partial ids to collect, to reduce the data sent down
      */
-    constructor(private dataSource: DQ | string, private paramsMapper: ParamsMapper<string, any> = defaultParamsMapper, viewState?: string, executes?: string[], private partialIds?: string[]) {
+    constructor(private dataSource: DQ, private paramsMapper: ParamsMapper<string, any> = defaultParamsMapper, executes?: string[], private partialIds?: string[]) {
         super({});
-        //a call to getViewState before must pass the encoded line
-        //a call from getViewState passes the form element as datasource,
-        //so we have two call points
-        // atm we basically encode twice, to keep the code leaner
-        // this will be later optmized, practically elements
-        // which are already covered by an external viewstate do not need
-        // the encoding a second time, because they are overwritten by the viewstate again
-        if (isString(dataSource)) {
-            this.assignEncodedString(<string>this.dataSource);
-        } else {
-            this.applyFormDataToConfig();
-        }
-        //now assign the external viewstate overrides
-        if ('undefined' != typeof viewState) {
-            this.assignEncodedString(viewState)
-        }
-        if (executes) {
-            this.postInit(...executes);
-        }
+        //encode and append the issuing item if not a partial ids array of ids is passed
+        /*
+         * Spec. 13.3.1
+         * Collect and encode input elements.
+         * Additionally the hidden element jakarta.faces.ViewState
+         * Enhancement partial page submit
+         */
+        this.encodeSubmittableFields(this, this.dataSource, this.partialIds);
+        this.applyViewState(this.dataSource);
+        this.resolveRequestType(executes);
     }
 
     /**
@@ -80,29 +71,28 @@ export class XhrFormData extends Config {
      * @param executes the executable dom nodes which need to be processed into the form data, which we can send
      * in our ajax request
      */
-    postInit(...executes: Array<string>) {
-        let fetchFileInputs = (id: string): DQ => {
-            const INPUT_FILE = "input[type='file']";
+    resolveRequestType(executes?: Array<string>) {
+        if (!executes) {
+            return;
+        }
+        let isMultiPartContainer = (id: string): boolean => {
             if (id == IDENT_ALL) {
-                return DQ.querySelectorAllDeep(INPUT_FILE);
+                let namingContainer = this.remapKeyForNamingContainer("");
+                if (namingContainer.length) {
+                    namingContainer = namingContainer.substring(0, namingContainer.length - 1);
+                    return DQ.byId(namingContainer).isMultipartCandidate();
+                }
+                return DQ.byId(document.body).isMultipartCandidate();
             } else if (id == IDENT_FORM) {
-                return (<DQ>this.dataSource).matchesSelector(INPUT_FILE) ?
-                    (<DQ>this.dataSource) :
-                    (<DQ>this.dataSource).querySelectorAllDeep(INPUT_FILE);
+                return this.dataSource.isMultipartCandidate(true);
             } else {
-                let element = DQ.byId(id, true);
-                return element.matchesSelector(INPUT_FILE) ? element : this.getFileInputs(element);
+                const element = DQ.byId(id, true);
+                return element.isMultipartCandidate();
             }
         };
 
-        let inputExists = (item: DQ) => {
-            return item.isPresent();
-        };
-
-
         this.isMultipartRequest = LazyStream.of(...executes)
-            .map(fetchFileInputs)
-            .filter(inputExists)
+            .filter(isMultiPartContainer)
             .first().isPresent();
     }
 
@@ -112,54 +102,16 @@ export class XhrFormData extends Config {
      * @param form the form holding the view state value
      */
     private applyViewState(form: DQ) {
+        if (this.getIf($nsp(P_VIEWSTATE)).isPresent()) {
+            return;
+        }
         let viewStateElement = form.querySelectorAllDeep(`[name*='${$nsp(P_VIEWSTATE)}'`);
         let viewState = viewStateElement.inputValue;
-        // this.appendIf(viewState.isPresent(), P_VIEWSTATE).value = viewState.value;
         this.appendIf(viewState.isPresent(), this.remapKeyForNamingContainer(viewStateElement.name.value)).value = viewState.value;
     }
 
-    /**
-     * assigns an url encoded string to this xhrFormData object
-     * as key value entry
-     * @param encoded
-     */
-    assignEncodedString(encoded: string) {
-        // this code filters out empty strings as key value pairs
-        let keyValueEntries = decodeURIComponent(encoded).split(/&/gi)
-            .filter(item => !!(item || '')
-                .replace(/\s+/g, ''));
-        this.assignString(keyValueEntries);
-    }
-
-    /**
-     * assign a set of key value pairs passed as array ['key=val1', 'key2=val2']
-     * @param keyValueEntries
-     */
-    assignString(keyValueEntries: string[]) {
-        let toMerge = new ExtConfig({});
-
-        function splitToKeyVal(line: string) {
-            return line.split(/=(.*)/gi);
-        }
-
-        function fixKeyWithoutVal(keyVal: string[]) {
-            return keyVal.length < 3 ? [keyVal?.[0] ?? [], keyVal?.[1] ?? []] : keyVal;
-        }
-
-        Stream.of(...keyValueEntries)
-            .map(line => splitToKeyVal(line))
-            //special case of having keys without values
-            .map(keyVal => fixKeyWithoutVal(keyVal))
-            .map(keyVal => this.paramsMapper(keyVal[0] as string, keyVal[1]))
-            .each(keyVal => {
-                toMerge.append(keyVal[0] as string).value = keyVal?.splice(1)?.join("") ?? "";
-            });
-        //merge with overwrite but no append! (aka no double entries are allowed)
-        this.shallowMerge(toMerge);
-    }
 
     /**
-     * @param paramsMapper ... pre encode the params if needed, default is to map them 1:1
      * @returns a Form data representation, this is needed for file submits
      */
     toFormData(): FormData {
@@ -168,66 +120,15 @@ export class XhrFormData extends Config {
         return ret;
     }
 
-    resolveSubmitIdentifier(elem: HTMLInputElement) {
-        let identifier = elem.name;
-        identifier = ((elem?.name ?? "").replace(/s+/gi, "") == "") ? elem.id : identifier;
-        return identifier;
-    }
-
     /**
      * returns an encoded string representation of our xhr form data
      *
      * @param defaultStr optional default value if nothing is there to encode
      */
-    toString( defaultStr = EMPTY_STR): string {
-        if (this.isAbsent()) {
-            return defaultStr;
-        }
-        let entries = LazyStream.of(...Object.keys(this.value))
-            .filter(key => this.value.hasOwnProperty(key))
-            .flatMap(key => Stream.of(...this.value[key]).map(val => this.paramsMapper(key, val)))
-            //we cannot encode file elements that is handled by multipart requests anyway
-            .filter(([, value]) => !(value instanceof ExtDomQuery.global().File))
-            .map(keyVal => `${encodeURIComponent(keyVal[0])}=${encodeURIComponent(keyVal[1])}`)
-            .collect(new ArrayCollector());
-
-        return entries.join("&")
+    toString(defaultStr = EMPTY_STR): string {
+        return encodeFormData(this, this.paramsMapper, defaultStr);
     }
 
-    /**
-     * helper to fetch all file inputs from as given root element
-     * @param rootElement
-     * @private
-     */
-    private getFileInputs(rootElement: DQ): DQ {
-        const rootFileInputs = rootElement
-            .filter(elem => elem.matchesSelector("input[type='file']"))
-        const childFileInputs = rootElement
-            .querySelectorAll("input[type='file']");
-
-        return rootFileInputs.concat(childFileInputs);
-    }
-
-    /**
-     * encode the given fields and apply the view state
-     * @private
-     */
-    private applyFormDataToConfig() {
-        //encode and append the issuing item if not a partial ids array of ids is passed
-        /*
-         * Spec. 13.3.1
-         * Collect and encode input elements.
-         * Additionally the hidden element jakarta.faces.ViewState
-         * Enhancement partial page submit
-         *
-         */
-        this.encodeSubmittableFields(this, <DQ>this.dataSource, this.partialIds);
-        if (this.getIf($nsp(P_VIEWSTATE)).isPresent()) {
-            return;
-        }
-
-        this.applyViewState(<DQ>this.dataSource);
-    }
 
     /**
      * determines fields to submit
@@ -235,34 +136,16 @@ export class XhrFormData extends Config {
      * @param {Node} parentItem - form element item is nested in
      * @param {Array} partialIds - ids fo PPS
      */
-    private encodeSubmittableFields(targetBuf: Config,
-                                    parentItem: DQ, partialIds ?: string[]) {
-        let toEncode = null;
-        if (this.partialIds && this.partialIds.length) {
-            // in case of our myfaces reduced ppr we
-            // only submit the partials
-            this._value = {};
-            toEncode = new DQ(...this.partialIds);
-
-        } else {
-            if (parentItem.isAbsent()) throw 'NO_PAR_ITEM';
-            toEncode = parentItem;
-        }
-
-        //lets encode the form elements
-        let formElements = toEncode.deepElements.encodeFormElement();
-        const mapped = this.remapKeysForNamingCoontainer(formElements);
-        this.shallowMerge(mapped);
-    }
-
-    private remapKeysForNamingCoontainer(formElements: Config): Config {
-        let ret = new Config({});
-        formElements.stream.map(([key, item]) => this.paramsMapper(key, item))
-            .each( ([key, item]) => {
-                ret.assign(key).value = item;
-            });
-        return ret;
-
+    public encodeSubmittableFields(targetBuf: Config,
+                                   parentItem: DQ, partialIds ?: string[]) {
+        //encoded String
+        let viewStateStr = $faces().getViewState(parentItem.getAsElem(0).value);
+        // we now need to decode it and then merge it into the target buf
+        // which hosts already our overrides (aka do not override what is already there(
+        // after that we need to deal with form elements on a separate level
+        let target = new ExtConfig({});
+        mergeKeyValueEntries(target, decodeEncodedValues(viewStateStr), this.paramsMapper);
+        this.shallowMerge(target);
     }
 
     private remapKeyForNamingContainer(key: string): string {
@@ -271,10 +154,14 @@ export class XhrFormData extends Config {
 
     private appendInputs(ret: any) {
         Stream.ofAssoc(this.value)
-            .flatMap(([key, item]) =>
+            .flatMap(([key, item])  =>
                 Stream.of(...(item as Array<any>)).map(item => {
                     return {key, item};
-                }))
+            }))
+            .map(({key, item}) => {
+                key = this.remapKeyForNamingContainer(key);
+                return {key, item}
+            })
             .each(({key, item}) => ret.append(key, item))
     }
 }

package/src/main/typescript/impl/xhrCore/XhrRequest.ts

@@ -123,9 +123,6 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
         };
 
         try {
-            let formElement = this.sourceForm.getAsElem(0).value;
-            let viewState = $faces().getViewState(formElement);
-
             // encoded we need to decode
             // We generated a base representation of the current form
             // in case someone has overloaded the viewState with additional decorators we merge
@@ -135,7 +132,7 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             // the partialIdsArray arr is almost deprecated legacy code where we allowed to send a separate list of partial
             // ids for reduced load and server processing, this will be removed soon, we can handle the same via execute
             // anyway TODO remove the partial ids array
-            let formData: XhrFormData = new XhrFormData(this.sourceForm, resoveNamingContainerMapper(this.internalContext), viewState, executesArr(), this.partialIdsArray);
+            let formData: XhrFormData = new XhrFormData(this.sourceForm, resoveNamingContainerMapper(this.internalContext), executesArr(), this.partialIdsArray);
 
             this.contentType = formData.isMultipartRequest ? "undefined" : this.contentType;
 
@@ -143,11 +140,13 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             this.requestContext.$nspEnabled = false;
             let requestContext = this.requestContext;
             let requestPassThroughParams = requestContext.getIf(CTX_PARAM_REQ_PASS_THR) as ExtConfig;
+
+            // we are turning off here the jsf, faces remapping because we are now dealing with
+            // pass-through parameters
             requestPassThroughParams.$nspEnabled = false;
             // this is an extension where we allow pass through parameters to be sent down additionally
             // this can be used and is used in the impl to enrich the post request parameters with additional
             // information
-
             try {
                 formData.shallowMerge(requestPassThroughParams, true, true);
             } finally {
@@ -185,11 +184,8 @@ export class XhrRequest implements AsyncRunnable<XMLHttpRequest> {
             // setting, they accept headers automatically
             ignoreErr(() => xhrObject.setRequestHeader(REQ_ACCEPT, STD_ACCEPT));
 
-
-
             this.sendEvent(BEGIN);
             this.sendRequest(formData);
-
         } catch (e) {
             // _onError
             this.handleError(e);

package/src/main/typescript/test/xhrCore/RequestParamsTest.spec.ts

@@ -18,13 +18,20 @@ import {Implementation} from "../../impl/AjaxImpl";
 import {StandardInits} from "../frameworkBase/_ext/shared/StandardInits";
 
 import protocolPage = StandardInits.protocolPage;
-import {DQ} from "mona-dish";
+import {Config, DQ} from "mona-dish";
 import {XhrFormData} from "../../impl/xhrCore/XhrFormData";
 import {expect} from "chai";
 import prefixPage = StandardInits.prefixEmbeddedPage;
 import prefixEmbeddedPage = StandardInits.prefixEmbeddedPage;
 import HTML_PREFIX_EMBEDDED_BODY = StandardInits.HTML_PREFIX_EMBEDDED_BODY;
 import {it} from "mocha";
+import {decodeEncodedValues, mergeKeyValueEntries} from "../../impl/util/URLCodec";
+
+function getFormData(requestBody: string): Config {
+    let ret = new Config({});
+    mergeKeyValueEntries(ret, decodeEncodedValues(requestBody));
+    return ret;
+}
 
 describe("test for proper request param patterns identical to the old implementation", function () {
     const UPDATE_INSERT_2 = {
@@ -85,10 +92,9 @@ describe("test for proper request param patterns identical to the old implementa
         DQ.byId("cmd_update_insert2").click();
 
         let requestBody = this.requests[0].requestBody;
-        let formData = new XhrFormData(requestBody);
+        let formData = getFormData(requestBody);
 
         expect(matches(formData.value, UPDATE_INSERT_2)).to.be.true;
-
     });
 
 
@@ -98,7 +104,7 @@ describe("test for proper request param patterns identical to the old implementa
         DQ.byId("cmd_update_insert2").click();
         let requestBody = this.requests[0].requestBody;
         //We check if the base64 encoded string matches the original
-        let formData = new XhrFormData(requestBody);
+        let formData = getFormData(requestBody);
 
         expect(decodeURIComponent(formData.getIf("jakarta.faces.ViewState").value) == probe).to.be.true;
     });
@@ -110,7 +116,7 @@ describe("test for proper request param patterns identical to the old implementa
         DQ.byId("cmd_update_insert2").click();
         let requestBody = this.requests[0].requestBody;
         //We check if the base64 encoded string matches the original
-        let formData = new XhrFormData(requestBody);
+        let formData = getFormData(requestBody);
 
         expect(decodeURIComponent(formData.getIf("jakarta.faces.ViewState").value) == probe).to.be.true;
     });
@@ -123,7 +129,7 @@ describe("test for proper request param patterns identical to the old implementa
         DQ.byId("cmd_update_insert2").click();
         let requestBody = this.requests[0].requestBody;
         //We check if the base64 encoded string matches the original
-        let formData = new XhrFormData(requestBody);
+        let formData = getFormData(requestBody);
 
         expect(decodeURIComponent(formData.getIf("jakarta.faces.ViewState").value) == probe).to.be.true;
     });

package/src/main/typescript/test/xhrCore/XhrFormDataTest.spec.ts

@@ -19,58 +19,75 @@ import {DQ} from "mona-dish";
 import * as sinon from 'sinon';
 import {XhrFormData} from "../../impl/xhrCore/XhrFormData";
 import {expect} from "chai";
+import {StandardInits} from "../frameworkBase/_ext/shared/StandardInits";
+import defaultMyFaces = StandardInits.defaultMyFaces;
+import {Implementation} from "../../impl/AjaxImpl";
 
 const jsdom = require("jsdom");
 const {JSDOM} = jsdom;
 
 describe('XhrFormData tests', function () {
 
-  beforeEach(function () {
-
-    let dom = new JSDOM(`
-            <!DOCTYPE html>
-        <html lang="en">
-        <head>
-            <meta charset="UTF-8">
-            <title>Title</title>
-            </head>
-            <body>
-                <div id="id_1"></div>
-                <div id="id_2"  booga="blarg"></div>
-                <div id="id_3"></div>
-                <div id="id_4"></div>
-            </body>
-            </html>
-    
-    `, {
-      contentType: "text/html",
-      runScripts: "dangerously"
+    beforeEach(async function () {
+
+        let waitForResult = defaultMyFaces();
+
+        return waitForResult.then((close) => {
+
+            this.xhr = sinon.useFakeXMLHttpRequest();
+            this.requests = [];
+            this.xhr.onCreate = (xhr) => {
+                this.requests.push(xhr);
+            };
+            (<any>global).XMLHttpRequest = this.xhr;
+            window.XMLHttpRequest = this.xhr;
+
+            this.jsfAjaxResponse = sinon.spy((<any>global).faces.ajax, "response");
+
+            this.closeIt = () => {
+                (<any>global).XMLHttpRequest = window.XMLHttpRequest = this.xhr.restore();
+                this.jsfAjaxResponse.restore();
+                Implementation.reset();
+                close();
+            }
+        });
     });
 
-    let window = dom.window;
-
-    (<any>global).window = window;
-    (<any>global).body = window.document.body;
-    (<any>global).document = window.document;
-    (<any>global).navigator = {
-      language: "en-En"
-    };
-
-    this.xhr = sinon.useFakeXMLHttpRequest();
-    this.requests = [];
-    this.xhr.onCreate = (xhr) => {
-      this.requests.push(xhr);
-    };
-    (<any>global).XMLHttpRequest = this.xhr;
-    window.XMLHttpRequest = this.xhr;
-  });
-
-  this.afterEach(function () {
-    (<any>global).XMLHttpRequest = window.XMLHttpRequest = this.xhr.restore();
-  });
-
-  it("must have multiple values for a name", function () {
-    window.document.body.innerHTML = `<form id="page::form">
+    beforeEach(function () {
+
+        let waitForResult = defaultMyFaces();
+
+        return waitForResult.then((close) => {
+            (<any>global).window = window;
+            (<any>global).body = window.document.body;
+            (<any>global).document = window.document;
+            global.body.innerHTML = `
+      <div id="id_1"></div>
+      <div id="id_2" booga="blarg"></div>
+      <div id="id_3"></div>
+      <div id="id_4"></div>
+    `;
+            (<any>global).navigator = {
+                language: "en-En"
+            };
+
+            this.xhr = sinon.useFakeXMLHttpRequest();
+            this.requests = [];
+            this.xhr.onCreate = (xhr) => {
+                this.requests.push(xhr);
+            };
+            (<any>global).XMLHttpRequest = this.xhr;
+            window.XMLHttpRequest = this.xhr;
+
+        });
+
+        this.afterEach(function () {
+            (<any>global).XMLHttpRequest = window.XMLHttpRequest = this.xhr.restore();
+        });
+    });
+
+    it("must have multiple values for a name", function () {
+        window.document.body.innerHTML = `<form id="page::form">
       <tobago-select-many-checkbox id="page:animals">
         <label for="page:animals">Checkbox Group</label>
         <label><input type="checkbox" name="page:animals" id="page:animals::0" value="Cat" checked="checked">Cat</label>
@@ -84,11 +101,11 @@ describe('XhrFormData tests', function () {
       </div>
     </form>`;
 
-    global.debugf2=true;
-    const xhrFormData = new XhrFormData(DQ.byId("page::form"));
-    const formData = xhrFormData.toString();
+        global.debugf2 = true;
+        const xhrFormData = new XhrFormData(DQ.byId("page::form"));
+        const formData = xhrFormData.toString();
 
-    expect(formData).to.contain("animals=Cat");
-    expect(formData).to.contain("animals=Fox");
-  });
+        expect(formData).to.contain("animals=Cat");
+        expect(formData).to.contain("animals=Fox");
+    });
 });

package/src/test/resources/jsf-development.js

@@ -3121,7 +3121,7 @@ var XhrFormData = /** @class */ (function (_super) {
      */
     XhrFormData.prototype.assignEncodedString = function (encoded) {
         var keyValueEntries = decodeURIComponent(encoded).split(/&/gi);
-        this.assignString(keyValueEntries);
+        this.assignKeyValueEntries(keyValueEntries);
     };
     XhrFormData.prototype.assignString = function (keyValueEntries) {
         var toMerge = new mona_dish_1.Config({});