jsf.js_next_gen 4.0.0-RC.34 → 4.0.0-RC.36

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "jsf.js_next_gen",
-  "version": "4.0.0-RC.34",
+  "version": "4.0.0-RC.36",
   "description": "A next generation typescript reimplementation of jsf.js",
   "main": "dist/window/faces.js",
   "scripts": {
     "doc": "npx typedoc --tsconfig src/main/typescript/tsconfig-typedoc.json",
-    "test": "env TS_NODE_PROJECT=./src/main/typescript/tsconfig.json mocha",
-    "coverage": "env TS_NODE_PROJECT=./src/test/typescript/tsconfig.json nyc --reporter=html --reporter=text mocha",
+    "test": "cross-env TS_NODE_PROJECT=./src/main/typescript/tsconfig.json mocha",
+    "coverage": "cross-env TS_NODE_PROJECT=./src/main/typescript/tsconfig.json nyc --reporter=html --reporter=text mocha",
     "build-production": "webpack --mode production --env FILE_NAME=jsf  && ts-node ./remap.ts --production",
     "build-development": "webpack --mode development --env FILE_NAME=jsf-development  && ts-node ./remap.ts --development",
     "build": "npm run doc && npm run build-development && npm run build-production",
@@ -23,17 +23,18 @@
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@types/chai": "^4.3.4",
     "@types/mocha": "^10.0.1",
-    "@types/node": "^18.13.0",
+    "@types/node": "^18.14.2",
     "@types/sinon": "^10.0.13",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "chai": "^4.3.7",
     "compression-webpack-plugin": "^10.0.0",
+    "cross-env": "^7.0.3",
     "html-webpack-plugin": "^5.5.0",
     "http-server": "^14.1.1",
     "jsdom": "^21.1.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^10.2.0",
-    "npm-check-updates": "^16.6.5",
+    "npm-check-updates": "^16.7.10",
     "nyc": "^15.1.0",
     "replace-in-file": "^6.3.5",
     "rxjs": "^7.8.0",
@@ -41,13 +42,13 @@
     "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
-    "typedoc": "^0.23.24",
+    "typedoc": "^0.23.26",
     "typescript": "^4.9.5",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "mona-dish": "^0.24.10"
+    "mona-dish": "^0.26.0"
   }
 }

package/src/main/typescript/@types/definitions/index.d.ts

@@ -50,10 +50,10 @@ declare global {
      *     <li> errorData.status : the error status message</li>
      *     <li> errorData.serverErrorName : the server error name in case of a server error</li>
      *     <li> errorData.serverErrorMessage : the server error message in case of a server error</li>
-     *     <li> errorData.source  : the issuing source element which triggered the requestInternal </li>
-     *     <li> eventData.responseCode: the response code (aka http requestInternal response code, 401 etc...) </li>
-     *     <li> eventData.responseText: the requestInternal response text </li>
-     *     <li> eventData.responseXML: the requestInternal response xml </li>
+     *     <li> errorData.source  : the issuing source element which triggered the request </li>
+     *     <li> eventData.responseCode: the response code (aka http request response code, 401 etc...) </li>
+     *     <li> eventData.responseText: the response text </li>
+     *     <li> eventData.responseXML: the response xml </li>
      * </ul>
      */
     interface IErrorData {
@@ -78,7 +78,7 @@ declare global {
     }
 
     interface Ajax {
-        request(element: Element, event?: Event, options?: Context): void;
+        request(element: Element, event?: Event, options?: Options): void;
         response(request: XMLHttpRequest, context?: Context): void;
     }
 

package/src/main/typescript/api/_api.ts

@@ -99,7 +99,7 @@ export module faces {
         return Implementation.getClientWindow(rootNode);
     }
 
-    //private helper functions
+    // private helper functions
     function getSeparatorChar(): string {
         const sep = '#{facesContext.namingContainerSeparatorChar}';
         //We now enable standalone mode, the separator char was not mapped we make a fallback to 2.3 behavior
@@ -117,19 +117,19 @@ export module faces {
         /**
          * this function has to send the ajax requests
          *
-         * following requestInternal conditions must be met:
+         * following request conditions must be met:
          * <ul>
-         *  <li> the requestInternal must be sent asynchronously! </li>
-         *  <li> the requestInternal must be a POST!!! requestInternal </li>
-         *  <li> the requestInternal url must be the form action attribute </li>
-         *  <li> all requests must be queued with a client side requestInternal queue to ensure the requestInternal ordering!</li>
+         *  <li> the request must be sent asynchronously! </li>
+         *  <li> the request must be a POST!!! request </li>
+         *  <li> the request url must be the form action attribute </li>
+         *  <li> all requests must be queued with a client side request queue to ensure the request ordering!</li>
          * </ul>
          *
          * @param {String|Node} element: any dom element no matter being it html or jsf, from which the event is emitted
          * @param {EVENT} event: any javascript event supported by that object
          * @param {Map} options : map of options being pushed into the ajax cycle
          */
-        export function request(element: Element, event?: Event, options?: Context): void {
+        export function request(element: Element, event?: Event, options?: Options): void {
             Implementation.request(element, event, options)
         }
 
@@ -138,7 +138,6 @@ export module faces {
          * @param request the request object having triggered this response
          * @param context the request context
          *
-         * TODO add info on what can be in the context
          */
         export function response(request: XMLHttpRequest, context?: Context): void {
             Implementation.response(request, context);
@@ -153,13 +152,13 @@ export module faces {
          *     <li> errorData.status : the error status message</li>
          *     <li> errorData.serverErrorName : the server error name in case of a server error</li>
          *     <li> errorData.serverErrorMessage : the server error message in case of a server error</li>
-         *     <li> errorData.source  : the issuing source element which triggered the requestInternal </li>
-         *     <li> eventData.responseCode: the response code (aka http requestInternal response code, 401 etc...) </li>
-         *     <li> eventData.responseText: the requestInternal response text </li>
-         *     <li> eventData.responseXML: the requestInternal response xml </li>
+         *     <li> errorData.source  : the issuing source element which triggered the request </li>
+         *     <li> eventData.responseCode: the response code (aka http request response code, 401 etc...) </li>
+         *     <li> eventData.responseText: the request response text </li>
+         *     <li> eventData.responseXML: the request response xml </li>
          * </ul>
          *
-         * @param errorListener error handler must be of the format <i>function errorListener(&lt;errorData&gt;)</i>
+         * @param errorFunc error handler must be of the format <i>function errorListener(&lt;errorData&gt;)</i>
          */
         export function addOnError(errorFunc: (data: ErrorData) => void): void {
             Implementation.addOnError(<any>errorFunc);
@@ -169,7 +168,7 @@ export module faces {
          * Adds a global event listener to the ajax event queue. The event listener must be a function
          * of following format: <i>function eventListener(&lt;eventData&gt;)</i>
          *
-         * @param eventListener event must be of the format <i>function eventListener(&lt;eventData&gt;)</i>
+         * @param eventFunc event must be of the format <i>function eventListener(&lt;eventData&gt;)</i>
          */
         export function addOnEvent(eventFunc: (data: EventData) => void): void {
             Implementation.addOnEvent(<any>eventFunc);
@@ -184,12 +183,12 @@ export module faces {
          * if any of the code returns false, the execution
          * is terminated prematurely skipping the rest of the code!
          *
-         * @param {DomNode} source, the callee object
+         * @param {HTMLElement | String} source, the callee object
          * @param {Event} event, the event object of the callee event triggering this function
          * @param funcs ... arbitrary array of functions or strings
          * @returns true if the chain has succeeded false otherwise
          */
-        export function chain(source, event, ...funcs: Array<Function | string>): boolean {
+        export function chain(source: HTMLElement | string, event: Event | null, ...funcs: Array<Function | string>): boolean {
             return Implementation.chain(source, event, ...(funcs as EvalFuncs));
         }
     }
@@ -220,7 +219,7 @@ export module faces {
 
         /**
          * Open the web socket on the given channel.
-         * @param  channel The name of the web socket channel.
+         * @param  socketClientId The name of the web socket channel.
          * @throws  Error is thrown, if the channel is unknown.
          */
         export function open(socketClientId: string): void {
@@ -229,7 +228,7 @@ export module faces {
 
         /**
          * Close the web socket on the given channel.
-         * @param  channel The name of the web socket channel.
+         * @param  socketClientId The id of the web socket client.
          * @throws  Error is thrown, if the channel is unknown.
          */
         export function close(socketClientId: string): void {
@@ -249,8 +248,8 @@ export module myfaces {
      * @param event the event
      * @param eventName event name for java.jakarta.faces.behavior.evemnt
      * @param execute execute list as passed down in faces.ajax.request
-     * @param render
-     * @param options
+     * @param render the render list as string
+     * @param options the options which need to be mered in
      */
     export function ab(source: Element, event: Event, eventName: string, execute: string, render: string, options: Options = {}): void {
         if (eventName) {
@@ -267,6 +266,42 @@ export module myfaces {
         (window?.faces ?? window.jsf).ajax.request(source, event, options);
     }
 
+
+    const onReadyChain: Array<() => void> = [];
+    let readyStateListener = null;
+    // noinspection JSUnusedGlobalSymbols
+    /**
+     * Helper function in the myfaces namespace to handle document ready properly for the load case
+     * the ajax case, does not need proper treatment, since it is deferred anyway.
+     * Used by command script as helper function!
+     *
+     * @param executionFunc the function to be executed upon ready
+     */
+    export function onOnDomReady(executionFunc: () => void) {
+        if(document.readyState !== "complete") {
+            onReadyChain.push(executionFunc);
+            if(!readyStateListener) {
+                readyStateListener = () => {
+                    window.removeEventListener("DOMContentLoaded", readyStateListener);
+                    readyStateListener = null;
+                    try {
+                        onReadyChain.forEach(func => func());
+                    } finally {
+                        //done we clear now the ready chain
+                        onReadyChain.length = 0;
+                    }
+                };
+                window.addEventListener("DOMContentLoaded", readyStateListener);
+            }
+        } else {
+            if(readyStateListener) {
+                readyStateListener();
+            }
+            executionFunc();
+        }
+
+    }
+
     /**
      * legacy oam functions
      */

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

@@ -20,7 +20,6 @@ import {XhrRequest} from "./xhrCore/XhrRequest";
 import {AsynchronousQueue} from "./util/AsyncQueue";
 import {AssocArrayCollector, Config, DQ, Lang, LazyStream, Optional, Stream} from "mona-dish";
 import {Assertions} from "./util/Assertions";
-import {XhrFormData} from "./xhrCore/XhrFormData";
 import {ExtConfig, ExtDomQuery} from "./util/ExtDomQuery";
 import {ErrorData} from "./xhrCore/ErrorData";
 import {EventData} from "./xhrCore/EventData";
@@ -113,11 +112,15 @@ export module Implementation {
  a) Monad like structures for querying because this keeps the code denser and adds abstractions
  that always was the strong point of jquery and it still is better in this regard than what ecmascript provides
 
- b) Streams and lazystreams like java has, a pull like construct, ecmascript does not have anything like Lazystreams.
+ b) Streams and lazy streams like java has, a pull stream construct, ecmascript does not have anything like it.
+ (it has array filters and maps, but ES2015 does not support flatMap)
  Another option would have been rxjs but that would have introduced a code dependency and probably more code. We might
- move to RXJS if the need arises however. But for now I would rather stick with my small self grown library which works
+ move to RXJS if the need arises, however. But for now I would rather stick with my small self grown library which works
  quite well and where I can patch quickly (I have used it in several industrial projects, so it works well
  and is heavily fortified by unit tests (140 testcases as time of writing this))
+ The long term plan is to eliminate the Stream usage as soon as we can move up to ES2019 (adding the missing
+ functions as shims, is a no go, because we are a library, and absolutey do not Shim anything which can leak
+ into the global namespace!)
 
  c) A neutral json like configuration which allows assignments of arbitrary values with reduce code which then can be
  transformed into different data representations
@@ -189,7 +192,7 @@ export module Implementation {
     /**
      * @return the project stage also emitted by the server:
      * it cannot be cached and must be delivered over the server
-     * The value for it comes from the requestInternal parameter of the faces.js script called "stage".
+     * The value for it comes from the request parameter of the faces.js script called "stage".
      */
     export function getProjectStage(): string | null {
         return resolveGlobalConfig()?.projectStage ??
@@ -215,7 +218,7 @@ export module Implementation {
      * @param event
      * @param funcs
      */
-    export function chain(source: any, event: Event, ...funcs: EvalFuncs): boolean {
+    export function chain(source: HTMLElement | string, event: Event | null, ...funcs: EvalFuncs): boolean {
         // we can use our lazy stream each functionality to run our chain here..
         // by passing a boolean as return value into the onElem call
         // we can stop early at the first false, just like the spec requests
@@ -500,7 +503,7 @@ export module Implementation {
          * or non-existent. If they exist all of them must be the same
          */
 
-        let formWindowId: Optional<string> = searchRoot.stream.map<string>(getValue).reduce(differenceCheck, INIT);
+        let formWindowId: Optional<string> = searchRoot.stream.map(getValue).reduce(differenceCheck, INIT);
 
 
         //if the resulting window id is set on altered then we have an unresolvable problem

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

@@ -1,5 +1,5 @@
 import {ArrayCollector, Config, DomQuery, DQ, LazyStream, Stream} from "mona-dish";
-import {ExtConfig, ExtDomQuery} from "./ExtDomQuery";
+import {ExtDomQuery} from "./ExtDomQuery";
 import {$faces, EMPTY_STR} from "../core/Const";
 
 /*
@@ -59,35 +59,46 @@ export function decodeEncodedValues(encoded: string): Stream<string[]> {
 }
 
 
+/**
+ * gets all the input files and their corresponding file objects
+ * @param dataSource
+ */
 export function resolveFiles(dataSource: DQ): Stream<[string, File]> {
+
+    const expandFilesArr = ([key, files]) => Stream.of(...files).map(file => [key, file]);
+    const remapFileInput = fileInput => [fileInput.name.value || fileInput.id.value, fileInput.filesFromElem(0)];
     return dataSource
         .querySelectorAllDeep("input[type='file']")
         .stream
-        .map(fileInput => [fileInput.name.value || fileInput.id.value, fileInput.filesFromElem(0)])
-        .flatMap(([key, files]) => {
-            return Stream.of(...files).map(file => [key, file])
-        });
+        .map(remapFileInput)
+        .flatMap(expandFilesArr);
 }
 
 
-export function fixKeyWithoutVal(keyVal: any[]) {
-    return keyVal.length < 3 ? [keyVal?.[0] ?? [], keyVal?.[1] ?? []] : keyVal;
+export function fixEmmptyParameters(keyVal: any[]): [string, any] {
+    return (keyVal.length < 3 ? [keyVal?.[0] ?? [], keyVal?.[1] ?? []] : keyVal) as [string, any];
 }
 
 /**
- * gets all the inputs under the form parentItem
- * as stream
+ * returns the decoded viewState from parentItem
  * @param parentItem
  */
-export function getFormInputsAsStream(parentItem: DomQuery): Stream<string[] | [string, File]> {
-    //encoded String
+function resolveViewState(parentItem: DomQuery): Stream<string[] | [string, File]> {
     const 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
-    const standardInputs: Stream<string[] | [string, File]> = decodeEncodedValues(viewStateStr);
+    return decodeEncodedValues(viewStateStr);
+}
+
+/**
+ * gets all the inputs under the form parentItem
+ * as stream
+ * @param parentItem
+ */
+export function getFormInputsAsStream(parentItem: DomQuery): Stream<string[] | [string, File]> {
+    const standardInputs = resolveViewState(parentItem);
     const fileInputs = resolveFiles(parentItem);
-    const allInputs = standardInputs.concat(fileInputs as any)
-    return allInputs;
+    return  standardInputs.concat(fileInputs as any)
 }

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

@@ -13,14 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {ArrayCollector, Config, DQ, FormDataCollector, Stream} from "mona-dish";
-import {$faces, $nsp, EMPTY_STR, IDENT_ALL, IDENT_FORM, IDENT_NONE, P_VIEWSTATE} from "../core/Const";
-import {ExtConfig} from "../util/ExtDomQuery";
+import {Config, DQ, FormDataCollector, Stream} from "mona-dish";
+import {$nsp, EMPTY_STR, IDENT_NONE, P_VIEWSTATE} from "../core/Const";
+
 import {
-    decodeEncodedValues,
     encodeFormData,
-    resolveFiles,
-    fixKeyWithoutVal, getFormInputsAsStream
+    fixEmmptyParameters, getFormInputsAsStream
 } from "../util/FileUtils";
 
 
@@ -28,7 +26,6 @@ type ParamsMapper<V, K> = (key: V, item: K) => [V, K];
 const defaultParamsMapper: ParamsMapper<string, any> = (key, item) => [key, item];
 
 
-
 /**
  * A unified form data class
  * which builds upon our configuration.
@@ -80,20 +77,20 @@ export class XhrFormData extends Config {
     toFormData(): FormData {
         /*
          * expands key: [item1, item2]
-         * to: [{key: item1}, {key, item2}]
+         * to: [{key: key,  value: item1}, {key: key, value: item2}]
          */
         let expandAssocArray = ([key, item]) =>
-            Stream.of(...(item as Array<any>)).map(item => {
-                return {key, item};
+            Stream.of(...(item as Array<any>)).map(value => {
+                return {key, value};
             });
 
         /*
          * remaps the incoming {key, value} tuples
          * to naming container prefixed keys and values
          */
-        let remapForNamingContainer = ({key, item}) => {
+        let remapForNamingContainer = ({key, value}) => {
             key = this.remapKeyForNamingContainer(key);
-            return {key, item}
+            return {key, value}
         };
 
         /*
@@ -149,10 +146,13 @@ export class XhrFormData extends Config {
     private encodeSubmittableFields(parentItem: DQ, partialIds ?: string[]) {
 
         const formInputs = getFormInputsAsStream(parentItem);
+        const mergeIntoThis = ([key, value]) => this.append(key).value = value;
+        const namingContainerRemap = ([key, value]) => this.paramsMapper(key as string, value);
+
         formInputs
-            .map(fixKeyWithoutVal)
-            .map(([key, value]) => this.paramsMapper(key as string, value))
-            .each(([key, value]) => this.append(key).value = value);
+            .map(fixEmmptyParameters)
+            .map(namingContainerRemap)
+            .each(mergeIntoThis);
     }
 
     private remapKeyForNamingContainer(key: string): string {

package/src/main/typescript/test/frameworkBase/_ext/monadish/DomQueryTest.spec.ts

@@ -376,7 +376,7 @@ describe('DOMQuery tests', function () {
         expect(length2 == 8).to.be.true;
 
         let count = DomQuery.byId("embed1").elements
-            .stream.map<number>(item => item.disabled ? 1 : 0)
+            .stream.map(item => item.disabled ? 1 : 0)
             .reduce((val1, val2) => val1 + val2, 0);
         expect(count.value).to.eq(1);
 
@@ -385,12 +385,12 @@ describe('DOMQuery tests', function () {
             .each(item => item.disabled = false);
 
         count = DomQuery.byId("embed1").elements
-            .stream.map<number>(item => item.disabled ? 1 : 0)
+            .stream.map(item => item.disabled ? 1 : 0)
             .reduce((val1, val2) => val1 + val2, 0);
         expect(count.value).to.eq(0);
 
         count = DomQuery.byId("embed1").elements
-            .stream.map<number>(item => item.attr("checked").isPresent() ? 1 : 0)
+            .stream.map(item => item.attr("checked").isPresent() ? 1 : 0)
             .reduce((val1, val2) => val1 + val2, 0);
         expect(count.value).to.eq(1);
 

package/src/main/typescript/test/frameworkBase/_ext/shared/StandardInits.ts

@@ -111,6 +111,38 @@ export module StandardInits {
 </html>`;
 
 
+    /**
+     * a page based on Tobago for a file upload
+     */
+    const HTML_TOBAGO_FILE_FORM = `<!DOCTYPE html>
+<html lang='de'>
+ <head>
+  <meta charset='UTF-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+  <title>Test</title>
+ </head>
+ <body>
+  <tobago-page locale='de' class='container-fluid' id='page' focus-on-error='true' wait-overlay-delay-full='1000' wait-overlay-delay-ajax='1000'>
+   <form action='/content/100-upload/File_Upload.xhtml' id='page::form' method='post' enctype='multipart/form-data' accept-charset='UTF-8' data-tobago-context-path=''>
+    <input type='hidden' name='javax.faces.source' id='javax.faces.source' disabled='disabled'>
+    <tobago-focus id='page::lastFocusId'>
+     <input type='hidden' name='page::lastFocusId' id='page::lastFocusId::field'>
+    </tobago-focus>
+    <input type='hidden' name='org.apache.myfaces.tobago.webapp.Secret' id='org.apache.myfaces.tobago.webapp.Secret' value='secretValue'>
+    <tobago-file id='page:fileAjax' class='tobago-auto-spacing'>
+     <div class='input-group'>
+      <input type='file' tabindex='-1' id='page:fileAjax::field' class='form-control' name='page:fileAjax'>
+      <tobago-behavior event='change' client-id='page:fileAjax' field-id='page:fileAjax::field' execute='page:fileAjax'></tobago-behavior>
+      <label class='input-group-text' for='page:fileAjax::field'><span><i class='bi-folder2-open'></i></span></label>
+     </div>
+    </tobago-file>
+    <div class='tobago-page-menuStore'>
+    </div>
+    <span id='page::jsf-state-container'><input type='hidden' name='javax.faces.ViewState' id='j_id__v_0:javax.faces.ViewState:1' value='viewStateValue' autocomplete='off'><input type='hidden' name='javax.faces.RenderKitId' value='tobago'><input type='hidden' id='j_id__v_0:javax.faces.ClientWindow:1' name='javax.faces.ClientWindow' value='clientWindowValue'></span>
+   </form>
+  </tobago-page>
+ </body>
+</html>`;
 
     /**
      * a page simulating basically a simple faces form
@@ -350,6 +382,9 @@ export module StandardInits {
     export function defaultFileForm(withJsf = true): Promise<() => void> {
         return init(HTML_FILE_FORM_DEFAULT, withJsf);
     }
+    export function tobagoFileForm(withJsf = true): Promise<() => void> {
+        return init(HTML_TOBAGO_FILE_FORM, withJsf);
+    }
     export function defaultFileForm_23(withJsf = true): Promise<() => void> {
         return init(HTML_FILE_FORM_DEFAULT.replace(/jakarta/gi, "javax"), withJsf, false);
     }

package/src/main/typescript/test/impl/ImplTest_23.spec.ts

@@ -120,10 +120,6 @@ describe('javax.ajax.request test suite', () => {
         expect(!!called["func5"]).to.be.false;
 
     });
-
-
-
-
 });
 
 

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

@@ -0,0 +1,109 @@
+/*! Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, it} from "mocha";
+import * as sinon from "sinon";
+import {expect} from "chai";
+import {StandardInits} from "../frameworkBase/_ext/shared/StandardInits";
+import {DomQuery} from "mona-dish";
+import {Implementation} from "../../impl/AjaxImpl";
+import defaultFileForm = StandardInits.tobagoFileForm;
+
+declare var faces: any;
+
+/**
+ * specialized tests testing the xhr core behavior when it hits the xmlHttpRequest object
+ */
+describe('Tests on the xhr core when it starts to call the request', function () {
+  beforeEach(async function () {
+
+    let waitForResult = defaultFileForm();
+    return waitForResult.then((close) => {
+
+      this.xhr = sinon.useFakeXMLHttpRequest();
+      this.requests = [];
+
+      this.respond = (response: string): XMLHttpRequest => {
+        let xhrReq = this.requests.shift();
+        xhrReq.responsetype = "text/xml";
+        xhrReq.respond(200, {'Content-Type': 'text/xml'}, response);
+        return xhrReq;
+      };
+
+      this.xhr.onCreate = (xhr) => {
+        this.requests.push(xhr);
+      };
+      (<any>global).XMLHttpRequest = this.xhr;
+      window.XMLHttpRequest = this.xhr;
+
+      this.closeIt = () => {
+        (<any>global).XMLHttpRequest = window.XMLHttpRequest = this.xhr.restore();
+        Implementation.reset();
+        close();
+      }
+    });
+
+  });
+  afterEach(function () {
+    this.closeIt();
+  });
+
+  it('tobago file upload', function (done) {
+    let send = sinon.spy(XMLHttpRequest.prototype, "send");
+
+    const POST = "POST";
+
+    try {
+      let fileUploadField = DomQuery.byId("page:fileAjax::field");
+      let actionElement = DomQuery.byId("page:fileAjax");
+
+      fileUploadField.addEventListener("change", (event: Event) => {
+        faces.ajax.request(
+            actionElement,
+            event,
+            {
+              "javax.faces.behavior.event": "change",
+              execute: 'page:fileAjax',
+              render: null
+            });
+      }).dispatchEvent(new Event("change"));
+
+      expect(this.requests.length).to.eq(1);
+      let request = this.requests[0];
+      expect(request.method).to.eq(POST);
+      expect(request.async).to.be.true;
+      expect(send.called).to.be.true;
+      expect(send.callCount).to.eq(1);
+      expect(request.requestBody instanceof FormData).to.be.true;
+
+      let formData: FormData = request.requestBody;
+      expect(formData.get("page::lastFocusId")).to.eq("");
+      expect(formData.get("org.apache.myfaces.tobago.webapp.Secret")).to.eq("secretValue");
+      expect(formData.get("javax.faces.ViewState")).to.eq("viewStateValue");
+      expect(formData.get("javax.faces.RenderKitId")).to.eq("tobago");
+      expect(formData.get("javax.faces.ClientWindow")).to.eq("clientWindowValue");
+      expect(formData.get("javax.faces.behavior.event")).to.eq("change");
+      expect(formData.get("jakarta.faces.partial.event")).to.eq("change");
+      expect(formData.get("jakarta.faces.source")).to.eq("page:fileAjax");
+      expect(formData.get("jakarta.faces.partial.ajax")).to.eq("true");
+      expect(formData.get("page::form")).to.eq("page::form");
+      expect(formData.get("jakarta.faces.partial.execute")).to.eq("page:fileAjax");
+
+    } finally {
+      send.restore();
+    }
+    done();
+  });
+});