jsf.js_next_gen 4.1.0-beta.2 → 4.1.0-beta.21

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

@@ -18,17 +18,30 @@ import {describe, it} from "mocha";
 import * as sinon from "sinon";
 import {expect} from "chai";
 import {StandardInits} from "../frameworkBase/_ext/shared/StandardInits";
-import {_Es2019Array, DomQuery, DQ$} from "mona-dish";
+import {_Es2019Array, Config, DomQuery, DQ$} from "mona-dish";
 import {
     COMPLETE, EMPTY_STR,
+    EMPTY_RESPONSE,
+    HTTP_ERROR,
+    MALFORMEDXML,
     P_AJAX,
     P_EXECUTE,
     P_AJAX_SOURCE,
     P_RENDER,
     P_VIEWSTATE,
     P_WINDOW_ID,
-    SUCCESS
+    STATE_EVT_TIMEOUT,
+    SUCCESS,
+    CTX_PARAM_SRC_FRM_ID,
+    CTX_PARAM_REQ_PASS_THR,
+    CTX_PARAM_PPS,
+    IDENT_NONE,
+    REQ_TYPE_GET,
+    SOURCE,
 } from "../../impl/core/Const";
+import {XhrRequest} from "../../impl/xhrCore/XhrRequest";
+import {ExtConfig} from "../../impl/util/ExtDomQuery";
+import {EventData} from "../../impl/xhrCore/EventData";
 const defaultMyFaces = StandardInits.defaultMyFaces;
 const initVirtualElement = StandardInits.initVirtualElement;
 const STD_XML = StandardInits.STD_XML;
@@ -38,6 +51,12 @@ import * as nise from "nise";
 declare var faces: any;
 declare var Implementation: any;
 
+function suppressErrorOutput(): () => void {
+    const oldErr = console.error;
+    console.error = () => {};
+    return () => { console.error = oldErr; };
+}
+
 let issueStdReq = function (element) {
     faces.ajax.request(element, null, {
         execute: "input_1",
@@ -215,6 +234,65 @@ describe('Tests on the xhr core when it starts to call the request', function ()
         done();
     });
 
+    it('jakarta.faces.partial.event must be present in the body when an event is passed', function (done) {
+        let send = sinon.spy(XMLHttpRequest.prototype, "send");
+        try {
+            const element = DomQuery.byId("input_2").getAsElem(0).value;
+            // Simulate a real DOM event — its .type feeds jakarta.faces.partial.event
+            const clickEvent = new Event("click");
+            faces.ajax.request(element, clickEvent, {
+                execute: "input_1",
+                render: "@form"
+            });
+
+            const params: Record<string, string> = {};
+            (send.args[0][0] as string).split("&").forEach(p => {
+                const [k, v] = p.split("=");
+                params[decodeURIComponent(k)] = decodeURIComponent(v ?? "");
+            });
+
+            expect(params["jakarta.faces.partial.event"]).to.eq("click");
+        } finally {
+            send.restore();
+        }
+        done();
+    });
+
+    it('jakarta.faces.partial.event must be absent when no event is passed', function (done) {
+        let send = sinon.spy(XMLHttpRequest.prototype, "send");
+        try {
+            const element = DomQuery.byId("input_2").getAsElem(0).value;
+            // null event → assignIf(false, ...) skips P_EVT assignment
+            issueStdReq(element);
+
+            const body = send.args[0][0] as string;
+            expect(body).not.to.include("jakarta.faces.partial.event");
+        } finally {
+            send.restore();
+        }
+        done();
+    });
+
+    it('jakarta.faces.windowId must NOT appear in the POST body — it is stored in request context only', function (done) {
+        let send = sinon.spy(XMLHttpRequest.prototype, "send");
+        try {
+            const element = DomQuery.byId("input_2").getAsElem(0).value;
+            // windowId resolves from options.windowId; it is assigned to the top-level
+            // requestCtx (not to the pass-through map), so it never reaches the body.
+            faces.ajax.request(element, null, {
+                execute: "input_1",
+                render: "@form",
+                windowId: "test-window-id"
+            });
+
+            const body = send.args[0][0] as string;
+            expect(body).not.to.include("jakarta.faces.windowId");
+        } finally {
+            send.restore();
+        }
+        done();
+    });
+
 });
 
 describe('Tests after core when it hits response', function () {
@@ -835,6 +913,33 @@ describe('Tests after core when it hits response', function () {
         });
     });
 
+    it("must include a checked checkbox issuing item via appendIssuingItem when not already in form data", () => {
+        // Use a form where name != id so the checkbox is NOT pre-encoded under the issuing item ID
+        const waitForResult = initCheckboxForm();
+        return waitForResult.then(() => {
+            document.body.innerHTML += `
+                <form id="cb-name-id-form">
+                    <input type="checkbox" id="cb-issuing-item" name="cb-group" value="chkval" checked>
+                    <input type="hidden" name="jakarta.faces.ViewState" value="test-viewstate">
+                </form>`;
+
+            const send = sinon.spy(XMLHttpRequest.prototype, "send");
+            try {
+                const element = document.getElementById("cb-issuing-item");
+                faces.ajax.request(element, null, {
+                    execute: "@none",
+                    render: "@none"
+                });
+
+                const body: string = send.args[0][0] as string;
+                // appendIssuingItem must have added the issuing element keyed by its ID
+                expect(body).to.include("cb-issuing-item");
+            } finally {
+                send.restore();
+            }
+        });
+    });
+
     /**
      * https://issues.apache.org/jira/browse/MYFACES-4638
      */
@@ -887,7 +992,9 @@ describe('Tests after core when it hits response', function () {
         // Chrome sets responseXML=null for unparseable XML but still provides responseText,
         // which is the code path added in processRequestErrors for Chrome compatibility.
         // We simulate this by responding with a non-XML content type so responseXML stays null.
+        const restoreErrorOutput = suppressErrorOutput();
         try {
+            let assertionError: any = null;
             let element = DomQuery.byId("input_2").getAsElem(0).value;
             faces.ajax.request(element, null, {
                 execute: "input_1",
@@ -900,9 +1007,8 @@ describe('Tests after core when it hits response', function () {
                     try {
                         expect(error.type).to.eq("error");
                         expect(error.status).to.eq("malformedXML");
-                        done();
                     } catch (e) {
-                        done(e);
+                        assertionError = e;
                     }
                 }
             });
@@ -911,10 +1017,263 @@ describe('Tests after core when it hits response', function () {
             // Content-Type text/plain ensures responseXML is null while responseText is non-empty,
             // matching Chrome's behavior when it encounters unparseable XML
             xhrReq.respond(200, {'Content-Type': 'text/plain'}, "this is not valid xml content");
+            restoreErrorOutput();
+            done(assertionError);
         } catch (e) {
+            restoreErrorOutput();
             done(e);
         }
     });
 
 });
 
+describe('XhrRequest error handling and lifecycle', function () {
+
+    let restoreConsoleError: () => void;
+    beforeEach(function () { restoreConsoleError = suppressErrorOutput(); });
+    afterEach(function () { restoreConsoleError?.(); });
+
+    beforeEach(async function () {
+        let waitForResult = defaultMyFaces();
+        return waitForResult.then((close) => {
+            this.xhr = nise.fakeXhr.useFakeXMLHttpRequest();
+            this.requests = [];
+            this.xhr.onCreate = (xhr: any) => this.requests.push(xhr);
+            (global as any).XMLHttpRequest = this.xhr;
+            window.XMLHttpRequest = this.xhr;
+            this.jsfAjaxResponse = sinon.spy((global as any).faces.ajax, "response");
+
+            this.closeIt = () => {
+                (global as any).XMLHttpRequest = window.XMLHttpRequest = this.xhr.restore();
+                this.jsfAjaxResponse.restore();
+                Implementation.reset();
+                close();
+            };
+        });
+    });
+
+    afterEach(function () {
+        this.closeIt();
+    });
+
+    // ── HTTP error responses ──────────────────────────────────────────────────
+
+    // HTTP status is checked first, so any non-2xx response is reported as httpError
+    // regardless of body content (HTML error pages, valid XML, empty body, etc.)
+
+    it('must call onerror with httpError when a 4xx response has a non-XML body', function (done) {
+        let element = DomQuery.byId("input_2").getAsElem(0).value;
+        faces.ajax.request(element, null, {
+            execute: "input_1",
+            render: "@form",
+            onerror: (error: any) => {
+                try {
+                    expect(error.status).to.eq(HTTP_ERROR);
+                    done();
+                } catch (e) { done(e); }
+            }
+        });
+        this.requests[0].respond(404, {'Content-Type': 'text/html'}, "Not Found");
+    });
+
+    it('must call onerror with httpError when a 5xx response has a valid XML body', function (done) {
+        let element = DomQuery.byId("input_2").getAsElem(0).value;
+        faces.ajax.request(element, null, {
+            execute: "input_1",
+            render: "@form",
+            onerror: (error: any) => {
+                try {
+                    expect(error.status).to.eq(HTTP_ERROR);
+                    done();
+                } catch (e) { done(e); }
+            }
+        });
+        this.requests[0].respond(500, {'Content-Type': 'text/xml'}, STD_XML);
+    });
+
+    // ── Empty / malformed response ────────────────────────────────────────────
+
+    it('must call onerror with emptyResponse status when the response body is empty', function (done) {
+        let element = DomQuery.byId("input_2").getAsElem(0).value;
+        faces.ajax.request(element, null, {
+            execute: "input_1",
+            render: "@form",
+            onerror: (error: any) => {
+                try {
+                    expect(error.status).to.eq(EMPTY_RESPONSE);
+                    done();
+                } catch (e) { done(e); }
+            }
+        });
+        // Empty body: responseXML absent AND responseText empty → EMPTY_RESPONSE branch
+        this.requests[0].respond(200, {'Content-Type': 'text/xml'}, "");
+    });
+
+    it('must call onerror with malformedXML on a text/xml response with an invalid body', function (done) {
+        let element = DomQuery.byId("input_2").getAsElem(0).value;
+        faces.ajax.request(element, null, {
+            execute: "input_1",
+            render: "@form",
+            onerror: (error: any) => {
+                try {
+                    expect(error.status).to.eq(MALFORMEDXML);
+                    done();
+                } catch (e) { done(e); }
+            }
+        });
+        // Depending on the JS engine: JSDOM may produce a parseerror document (Firefox path)
+        // or null responseXML with non-empty responseText (Chrome path).
+        // Both processRequestErrors branches produce the same malformedXML status.
+        this.requests[0].respond(200, {'Content-Type': 'text/xml'}, "<unclosed");
+    });
+
+    // ── Timeout ───────────────────────────────────────────────────────────────
+
+    it('must fire the TIMEOUT_EVENT and then call onerror with httpError on xhr timeout', function (done) {
+        let timeoutEventReceived = false;
+        faces.ajax.addOnEvent((evt: any) => {
+            if (evt.status === STATE_EVT_TIMEOUT) {
+                timeoutEventReceived = true;
+            }
+        });
+
+        let element = DomQuery.byId("input_2").getAsElem(0).value;
+        faces.ajax.request(element, null, {
+            execute: "input_1",
+            render: "@form",
+            onerror: (error: any) => {
+                try {
+                    expect(timeoutEventReceived).to.be.true;
+                    expect(error.status).to.eq(HTTP_ERROR);
+                    done();
+                } catch (e) { done(e); }
+            }
+        });
+
+        // Directly invoke the ontimeout handler registered on the fake XHR by registerXhrCallbacks
+        this.requests[0].ontimeout?.();
+    });
+
+    // ── Abort ─────────────────────────────────────────────────────────────────
+
+    it('must call onerror with httpError when the xhr request is aborted', function (done) {
+        let element = DomQuery.byId("input_2").getAsElem(0).value;
+        faces.ajax.request(element, null, {
+            execute: "input_1",
+            render: "@form",
+            onerror: (error: any) => {
+                try {
+                    expect(error.status).to.eq(HTTP_ERROR);
+                    done();
+                } catch (e) { done(e); }
+            }
+        });
+
+        // Directly invoke the onabort handler registered on the fake XHR by registerXhrCallbacks
+        this.requests[0].onabort?.();
+    });
+
+    // ── Browser-cancelled response guard ──────────────────────────────────────
+
+    it('must treat browser-cancelled xhr errors as cleanup and not call onerror', function (done) {
+        let errorFired = false;
+        let element = DomQuery.byId("input_2").getAsElem(0).value;
+        faces.ajax.request(element, null, {
+            execute: "input_1",
+            render: "@form",
+            onerror: () => { errorFired = true; }
+        });
+
+        const fakeXhr = this.requests[0];
+        // Simulate the observed older browser cancelled-request fingerprint:
+        // status=0, readyState=4, empty responseText, null responseXML
+        Object.defineProperty(fakeXhr, 'status', {value: 0, configurable: true});
+        Object.defineProperty(fakeXhr, 'readyState', {value: 4, configurable: true});
+        Object.defineProperty(fakeXhr, 'responseText', {value: '', configurable: true});
+        Object.defineProperty(fakeXhr, 'responseXML', {value: null, configurable: true});
+
+        fakeXhr.onerror?.({} as Event);
+
+        // isCancelledResponse returns true → reject() called, onerror suppressed
+        setTimeout(() => {
+            expect(errorFired).to.be.false;
+            done();
+        }, 0);
+    });
+});
+
+describe('XhrRequest GET method', function () {
+
+    beforeEach(async function () {
+        return defaultMyFaces().then((close) => {
+            this.xhr = nise.fakeXhr.useFakeXMLHttpRequest();
+            this.requests = [];
+            this.xhr.onCreate = (xhr: any) => this.requests.push(xhr);
+            (global as any).XMLHttpRequest = this.xhr;
+            window.XMLHttpRequest = this.xhr;
+            this.closeIt = () => {
+                (global as any).XMLHttpRequest = window.XMLHttpRequest = this.xhr.restore();
+                close();
+            };
+        });
+    });
+
+    afterEach(function () { this.closeIt(); });
+
+    it('must call send(null) for a GET request', function () {
+        const send = sinon.spy(XMLHttpRequest.prototype, "send");
+        try {
+            const internalCtx = new Config({});
+            internalCtx.assign(CTX_PARAM_SRC_FRM_ID).value = "blarg";
+            internalCtx.assign(CTX_PARAM_PPS).value = false;
+
+            const reqCtx = new ExtConfig({});
+            reqCtx.assign(CTX_PARAM_REQ_PASS_THR, P_EXECUTE).value = IDENT_NONE;
+
+            const request = new XhrRequest(reqCtx, internalCtx, 0, REQ_TYPE_GET);
+            request.start();
+
+            expect(this.requests[0].method).to.eq("GET");
+            expect(send.calledOnce).to.be.true;
+            expect(send.firstCall.args[0]).to.be.null;
+        } finally {
+            send.restore();
+        }
+    });
+});
+
+describe('EventData source resolution fallback', function () {
+
+    beforeEach(async function () {
+        return defaultMyFaces().then((close) => {
+            this.closeIt = close;
+        });
+    });
+
+    afterEach(function () { this.closeIt(); });
+
+    it('must resolve source from context when _source._element is absent', function () {
+        const fakeXhr = { status: 200, responseText: "", responseXML: null } as any;
+        const internalCtx = new Config({});
+
+        const reqCtx = new ExtConfig({});
+        reqCtx.assign(SOURCE).value = "input_2";
+
+        const event = EventData.createFromRequest(fakeXhr, internalCtx, reqCtx, "begin");
+
+        expect(event.source).to.not.be.null;
+        expect(event.source).to.not.be.undefined;
+        expect((event.source as HTMLElement).id).to.eq("input_2");
+    });
+
+    it('must store resolved source in internalContext for subsequent calls', function () {
+        const fakeXhr = { status: 200, responseText: "", responseXML: null } as any;
+        const internalCtx = new Config({});
+        const reqCtx = new ExtConfig({});
+        reqCtx.assign(SOURCE).value = "input_2";
+
+        EventData.createFromRequest(fakeXhr, internalCtx, reqCtx, "begin");
+
+        expect(internalCtx.getIf("_source", "_element").value).to.not.be.null;
+    });
+});

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

@@ -28,6 +28,12 @@ const protocolPage = StandardInits.protocolPage;
 declare var faces: any;
 declare var Implementation: any;
 
+function suppressErrorOutput(): () => void {
+    const oldErr = console.error;
+    console.error = () => {};
+    return () => { console.error = oldErr; };
+}
+
 /**
  * response test
  * the idea is simply to pass in a dom
@@ -395,7 +401,6 @@ describe('Tests of the various aspects of the response protocol functionality',
         done();
     })
 
-    //TODO implement secondary response mockup
     it("must handle complex resource responses properly", function (done) {
         DQ.byId("cmd_complex_resource").click();
         this.respond(XmlResponses.MULTIPLE_RESOURCE_RESPONSE);
@@ -733,8 +738,7 @@ describe('Tests of the various aspects of the response protocol functionality',
     it('must handle a ViewExpired Error correctly, and only once in a listener', function (done) {
 
         document.body.innerHTML = TCK_790_NAV_MARKUP;
-        const oldErr = console.error;
-        console.error = () => {};
+        const restore = suppressErrorOutput();
         try {
             let errorCalled = 0;
             faces.ajax.addOnError((error) => {
@@ -759,11 +763,221 @@ describe('Tests of the various aspects of the response protocol functionality',
 
             expect(errorCalled).to.eq(1);
         } finally {
-            console.error = oldErr;
+            restore();
         }
         done();
 
     });
 
+    // ── redirect ──────────────────────────────────────────────────────────────
+
+    it('must set window.location.href to the url given in a <redirect> response', function () {
+        // global-jsdom copies window properties onto the Node.js global as plain values, so
+        // global.window is a regular writable property. We replace it with a Proxy that
+        // intercepts .location reads and returns a plain stub — giving us a capturable href
+        // without fighting jsdom's non-configurable Location object.
+        const originalWindow = (global as any).window;
+        const mockLocation = { href: 'about:blank' };
+        (global as any).window = new Proxy(originalWindow, {
+            get(target, prop) {
+                if (prop === 'location') return mockLocation;
+                const val = (target as any)[prop];
+                return typeof val === 'function' ? val.bind(target) : val;
+            }
+        });
+        try {
+            faces.ajax.request(document.getElementById("cmd_eval"), null, {execute: "@form", render: "@none"});
+            this.respond(`<?xml version="1.0" encoding="UTF-8"?>
+            <partial-response>
+                <redirect url="http://example.com/redirected"/>
+            </partial-response>`);
+
+            expect(mockLocation.href).to.eq("http://example.com/redirected");
+        } finally {
+            (global as any).window = originalWindow;
+        }
+    });
+
+    it('must not change window.location.href when the redirect url is empty', function () {
+        const originalWindow = (global as any).window;
+        const mockLocation = { href: 'about:blank' };
+        (global as any).window = new Proxy(originalWindow, {
+            get(target, prop) {
+                if (prop === 'location') return mockLocation;
+                const val = (target as any)[prop];
+                return typeof val === 'function' ? val.bind(target) : val;
+            }
+        });
+        try {
+            faces.ajax.request(document.getElementById("cmd_eval"), null, {execute: "@form", render: "@none"});
+            this.respond(`<?xml version="1.0" encoding="UTF-8"?>
+            <partial-response>
+                <redirect url=""/>
+            </partial-response>`);
+
+            expect(mockLocation.href).to.eq('about:blank');
+        } finally {
+            (global as any).window = originalWindow;
+        }
+    });
+
+    // ── attributes tag ────────────────────────────────────────────────────────
+
+    it('must apply attribute changes from an <attributes> response to the target element', function () {
+        faces.ajax.request(document.getElementById("cmd_attributeschange"), null, {execute: "@form", render: "@none"});
+        this.respond(XmlResponses.ATTRIBUTE_CHANGE);
+
+        const target = document.getElementById("attributeChange");
+        // last <attribute name="style"> wins
+        expect(target.getAttribute("style")).to.eq("border:1px solid black;");
+        // onclick is set as a plain attribute string
+        expect(target.getAttribute("onclick")).to.include("evalarea4");
+    });
+
+    // ── error() with responseXML present ──────────────────────────────────────
+
+    it('must attach responseXML to the error data when the server returns a well-formed error response', function (done) {
+        const restore = suppressErrorOutput();
+        try {
+            let capturedError: any = null;
+            faces.ajax.addOnError((error: any) => {
+                capturedError = error;
+            });
+
+            faces.ajax.request(document.getElementById("cmd_eval"), null, {execute: "@form", render: "@none"});
+
+            this.respond(`<?xml version="1.0" encoding="UTF-8"?>
+            <partial-response>
+                <error>
+                    <error-name>com.example.SomeServerException</error-name>
+                    <error-message><![CDATA[Something went wrong on the server.]]></error-message>
+                </error>
+            </partial-response>`);
+
+            expect(capturedError).not.to.be.null;
+            expect(capturedError.errorName).to.eq("com.example.SomeServerException");
+            // responseXML must be present because the response was well-formed XML
+            expect(capturedError.responseXML).not.to.be.null;
+            expect(capturedError.responseXML).not.to.be.undefined;
+        } finally {
+            restore();
+        }
+        done();
+    });
+
+    // ── caret preservation on partial updates (Tobago regression) ─────────────
+
+    it('must keep the caret of a focused input when a partial response re-renders only a different component', function (done) {
+        // Reproduces the Tobago "<tc:in> triggers ajax, renders only <tc:out>" case.
+        // Every keystroke fires an ajax request that re-renders ONLY the output component,
+        // not the focused input. The caret of the input must survive each update so the
+        // next typed digit lands behind the previous one ("123") and not in front ("321").
+        const form = document.getElementById("form1");
+        const input = document.createElement("input");
+        input.setAttribute("type", "text");
+        input.id = "inputAjax";
+        input.setAttribute("name", "inputAjax");
+        form.appendChild(input);
+        const output = document.createElement("span");
+        output.id = "outputAjax";
+        form.appendChild(output);
+
+        (input as HTMLInputElement).focus();
+        (input as HTMLInputElement).setSelectionRange(0, 0);
+
+        // simulates the browser inserting a character at the current caret position
+        const typeChar = (ch: string) => {
+            const el = input as HTMLInputElement;
+            const pos = el.selectionStart ?? el.value.length;
+            el.value = el.value.slice(0, pos) + ch + el.value.slice(pos);
+            el.setSelectionRange(pos + 1, pos + 1);
+        };
+
+        // ajax request that re-renders only the output, followed by the matching partial response
+        const fireAjaxRenderingOnlyOutput = () => {
+            faces.ajax.request(input, null, {execute: "inputAjax", render: "outputAjax"});
+            this.respond(`<?xml version="1.0" encoding="UTF-8"?>
+                <partial-response>
+                    <changes>
+                        <update id="outputAjax"><![CDATA[<span id='outputAjax'>${(input as HTMLInputElement).value}</span>]]></update>
+                    </changes>
+                </partial-response>`);
+        };
+
+        typeChar("1");
+        fireAjaxRenderingOnlyOutput();
+        // the focused input is untouched by the output update -> caret stays behind the "1"
+        expect(document.activeElement?.id).to.eq("inputAjax");
+        expect((input as HTMLInputElement).selectionStart).to.eq(1);
+
+        typeChar("2");
+        fireAjaxRenderingOnlyOutput();
+        expect((input as HTMLInputElement).selectionStart).to.eq(2);
+
+        typeChar("3");
+        fireAjaxRenderingOnlyOutput();
+
+        expect((input as HTMLInputElement).value).to.eq("123");
+        expect((input as HTMLInputElement).selectionStart).to.eq(3);
+        expect(document.getElementById("outputAjax").innerHTML).to.eq("123");
+        done();
+    });
+
+    it('must keep the caret of a focused input when the partial response re-renders the input itself', function (done) {
+        // Same as above, but now the focused input IS part of the re-rendered markup, so the
+        // DOM node gets replaced. The caret must be re-applied to the freshly inserted node
+        // (this is what the getCaretPosition/selectionStart fix guards) so the next typed digit
+        // still lands behind the previous one ("123") and not in front ("321").
+        const form = document.getElementById("form1");
+        const input = document.createElement("input");
+        input.setAttribute("type", "text");
+        input.id = "inputAjax";
+        input.setAttribute("name", "inputAjax");
+        form.appendChild(input);
+
+        (input as HTMLInputElement).focus();
+        (input as HTMLInputElement).setSelectionRange(0, 0);
+
+        // the input node is recreated on every update, so we always re-read the live element
+        const current = () => document.getElementById("inputAjax") as HTMLInputElement;
+
+        const typeChar = (ch: string) => {
+            const el = current();
+            const pos = el.selectionStart ?? el.value.length;
+            el.value = el.value.slice(0, pos) + ch + el.value.slice(pos);
+            el.setSelectionRange(pos + 1, pos + 1);
+        };
+
+        // ajax request that re-renders the input itself, echoing back the typed value
+        const fireAjaxRerenderingInput = () => {
+            const value = current().value;
+            faces.ajax.request(current(), null, {execute: "inputAjax", render: "inputAjax"});
+            this.respond(`<?xml version="1.0" encoding="UTF-8"?>
+                <partial-response>
+                    <changes>
+                        <update id="inputAjax"><![CDATA[<input type='text' id='inputAjax' name='inputAjax' value='${value}'>]]></update>
+                    </changes>
+                </partial-response>`);
+        };
+
+        typeChar("1");
+        fireAjaxRerenderingInput();
+        // the input node was replaced, but it must still be focused with the caret behind the "1"
+        expect(document.activeElement?.id).to.eq("inputAjax");
+        expect(current().value).to.eq("1");
+        expect(current().selectionStart).to.eq(1);
+
+        typeChar("2");
+        fireAjaxRerenderingInput();
+        expect(current().value).to.eq("12");
+        expect(current().selectionStart).to.eq(2);
+
+        typeChar("3");
+        fireAjaxRerenderingInput();
+
+        expect(current().value).to.eq("123");
+        expect(current().selectionStart).to.eq(3);
+        done();
+    });
 
 });