test: add comprehensive tests for hx-chunked-mode=swap

Add 6 new tests covering the swap mode functionality:
- Default append mode accumulates all chunks
- Swap mode only swaps new incremental content
- Duplicate progress events are ignored (same length)
- Swap mode prevents final htmx:beforeSwap event
- Append mode allows final swap (no prevention)
- Non-chunked responses always allow final swap

Tests verify:
- _chunkedMode is set correctly from hx-chunked-mode attribute
- _chunkedLastLen tracks response length for incremental extraction
- Only new content (response.slice(lastLen)) is swapped in swap mode
- Full response is swapped in append mode (default)
- beforeSwap event shouldSwap flag is modified correctly

All 13 tests pass (7 core + 6 swap mode tests)

Author: douglasduteil

index.test.ts

@@ -232,4 +232,206 @@ describe("chunked-transfer extension", () => {
       expect(target.innerHTML).toBe("<div>transformed</div><p>content</p>");
     });
   });
+
+  describe("hx-chunked-mode=swap", () => {
+    test("default mode (append) - accumulates all chunks", () => {
+      const element = document.createElement("div");
+      // No hx-chunked-mode attribute = defaults to append
+
+      const mockXhr = {
+        getResponseHeader: (header: string) => {
+          if (header === "Transfer-Encoding") return "chunked";
+          return null;
+        },
+        response: "",
+        onprogress: null as any,
+        _chunkedMode: undefined,
+        _chunkedLastLen: 0,
+      };
+
+      const event = {
+        target: element,
+        detail: { xhr: mockXhr },
+      };
+
+      registeredExtension.onEvent("htmx:beforeRequest", event);
+
+      // Verify mode was set to append
+      expect(mockXhr._chunkedMode).toBe("append");
+
+      // Simulate progressive chunks - full response each time
+      mockXhr.response = "<p>Loading...</p>";
+      mockXhr.onprogress!();
+      expect(target.innerHTML).toBe("<p>Loading...</p>");
+
+      mockXhr.response = "<p>Loading...</p><p>50%</p>";
+      mockXhr.onprogress!();
+      expect(target.innerHTML).toBe("<p>Loading...</p><p>50%</p>");
+
+      mockXhr.response = "<p>Loading...</p><p>50%</p><p>Done!</p>";
+      mockXhr.onprogress!();
+      expect(target.innerHTML).toBe("<p>Loading...</p><p>50%</p><p>Done!</p>");
+    });
+
+    test("swap mode - only swaps new content (incremental)", () => {
+      const element = document.createElement("div");
+      element.setAttribute("hx-chunked-mode", "swap");
+
+      const mockXhr = {
+        getResponseHeader: (header: string) => {
+          if (header === "Transfer-Encoding") return "chunked";
+          return null;
+        },
+        response: "",
+        onprogress: null as any,
+        _chunkedMode: undefined,
+        _chunkedLastLen: 0,
+      };
+
+      const event = {
+        target: element,
+        detail: { xhr: mockXhr },
+      };
+
+      registeredExtension.onEvent("htmx:beforeRequest", event);
+
+      // Verify mode was set to swap
+      expect(mockXhr._chunkedMode).toBe("swap");
+
+      // First chunk - everything is new
+      mockXhr.response = "<p>Loading...</p>";
+      mockXhr.onprogress!();
+      expect(target.innerHTML).toBe("<p>Loading...</p>");
+      expect(mockXhr._chunkedLastLen).toBe(mockXhr.response.length);
+
+      // Second chunk - only new content swapped
+      mockXhr.response = "<p>Loading...</p><p>50%</p>";
+      mockXhr.onprogress!();
+      expect(target.innerHTML).toBe("<p>50%</p>"); // Only the NEW part
+      expect(mockXhr._chunkedLastLen).toBe(mockXhr.response.length);
+
+      // Third chunk - only newest content swapped
+      mockXhr.response = "<p>Loading...</p><p>50%</p><p>Done!</p>";
+      mockXhr.onprogress!();
+      expect(target.innerHTML).toBe("<p>Done!</p>"); // Only the NEWEST part
+      expect(mockXhr._chunkedLastLen).toBe(mockXhr.response.length);
+    });
+
+    test("swap mode - ignores duplicate progress events (same length)", () => {
+      const element = document.createElement("div");
+      element.setAttribute("hx-chunked-mode", "swap");
+
+      const mockXhr = {
+        getResponseHeader: (header: string) => {
+          if (header === "Transfer-Encoding") return "chunked";
+          return null;
+        },
+        response: "<p>Content</p>",
+        onprogress: null as any,
+        _chunkedMode: undefined,
+        _chunkedLastLen: 0,
+      };
+
+      const event = {
+        target: element,
+        detail: { xhr: mockXhr },
+      };
+
+      registeredExtension.onEvent("htmx:beforeRequest", event);
+
+      // First progress event
+      mockXhr.onprogress!();
+      expect(target.innerHTML).toBe("<p>Content</p>");
+      const firstHtml = target.innerHTML;
+
+      // Duplicate progress event - same response length
+      mockXhr.onprogress!();
+      // Should not swap again (innerHTML unchanged)
+      expect(target.innerHTML).toBe(firstHtml);
+    });
+
+    test("swap mode - prevents final htmx:beforeSwap", () => {
+      const element = document.createElement("div");
+      element.setAttribute("hx-chunked-mode", "swap");
+
+      const mockXhr = {
+        getResponseHeader: (header: string) => {
+          if (header === "Transfer-Encoding") return "chunked";
+          return null;
+        },
+        response: "<p>Final</p>",
+        _chunkedMode: "swap",
+      };
+
+      const beforeSwapEvent = {
+        target: element,
+        detail: {
+          xhr: mockXhr,
+          shouldSwap: true, // Initially true
+        },
+      };
+
+      // Trigger beforeSwap event
+      registeredExtension.onEvent("htmx:beforeSwap", beforeSwapEvent);
+
+      // Verify shouldSwap was set to false
+      expect(beforeSwapEvent.detail.shouldSwap).toBe(false);
+    });
+
+    test("append mode - allows final htmx:beforeSwap", () => {
+      const element = document.createElement("div");
+      // Default append mode
+
+      const mockXhr = {
+        getResponseHeader: (header: string) => {
+          if (header === "Transfer-Encoding") return "chunked";
+          return null;
+        },
+        response: "<p>Final</p>",
+        _chunkedMode: "append",
+      };
+
+      const beforeSwapEvent = {
+        target: element,
+        detail: {
+          xhr: mockXhr,
+          shouldSwap: true,
+        },
+      };
+
+      // Trigger beforeSwap event
+      registeredExtension.onEvent("htmx:beforeSwap", beforeSwapEvent);
+
+      // Verify shouldSwap is still true (not prevented)
+      expect(beforeSwapEvent.detail.shouldSwap).toBe(true);
+    });
+
+    test("swap mode - non-chunked responses allow final swap", () => {
+      const element = document.createElement("div");
+      element.setAttribute("hx-chunked-mode", "swap");
+
+      const mockXhr = {
+        getResponseHeader: (header: string) => {
+          // NOT chunked
+          return null;
+        },
+        response: "<p>Final</p>",
+        _chunkedMode: "swap",
+      };
+
+      const beforeSwapEvent = {
+        target: element,
+        detail: {
+          xhr: mockXhr,
+          shouldSwap: true,
+        },
+      };
+
+      // Trigger beforeSwap event
+      registeredExtension.onEvent("htmx:beforeSwap", beforeSwapEvent);
+
+      // Non-chunked responses should NOT be prevented
+      expect(beforeSwapEvent.detail.shouldSwap).toBe(true);
+    });
+  });
 });