Add tests around handling rapid typing.

Author: adamghill

django_unicorn/static/js/component.js

@@ -7,6 +7,7 @@ import {
   addDbEventListener,
   addModelEventListener,
 } from "./eventListeners.js";
+import morphdom from "./morphdom/2.6.1/morphdom.js";
 
 /**
  * Encapsulate component.
@@ -30,6 +31,7 @@ export class Component {
     this.document = args.document || document;
     this.walker = args.walker || walk;
     this.window = args.window || window;
+    this.morphdom = args.morphdom || morphdom;
 
     this.root = undefined;
     this.modelEls = [];
@@ -353,9 +355,9 @@ export class Component {
 
     this.modelEls.forEach((element) => {
       if (
+        forceModelUpdates ||
         !lastTriggeringElement ||
-        !lastTriggeringElement.isSame(element) ||
-        forceModelUpdates
+        !lastTriggeringElement.isSame(element)
       ) {
         this.setValue(element);
       }

django_unicorn/static/js/messageSender.js

@@ -1,5 +1,4 @@
 import { getCsrfToken, hasValue, isFunction } from "./utils.js";
-import morphdom from "./morphdom/2.6.1/morphdom.js";
 import { MORPHDOM_OPTIONS } from "./morphdom/2.6.1/options.js";
 
 /**
@@ -117,7 +116,7 @@ export function send(component, callback) {
         component.startPolling();
       }
 
-      morphdom(component.root, rerenderedComponent, MORPHDOM_OPTIONS);
+      component.morphdom(component.root, rerenderedComponent, MORPHDOM_OPTIONS);
 
       // Refresh the checksum based on the new data
       component.refreshChecksum();

tests/js/component/messageSender.test.js

@@ -126,3 +126,42 @@ test.cb("call_method hash", (t) => {
     t.end();
   });
 });
+
+test.cb("call_method forceModelUpdate is true", (t) => {
+  const html = `
+<input type="hidden" name="csrfmiddlewaretoken" value="asdf">
+<div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+    <input unicorn:model='name'></input>
+    <button unicorn:click='test()'><span id="clicker">Click</span></button>
+</div>
+  `;
+
+  const component = getComponent(html);
+
+  t.is(component.attachedEventTypes.length, 1);
+  t.is(component.actionEvents.click.length, 1);
+
+  component.actionEvents.click[0].element.el.click();
+
+  t.is(component.actionQueue.length, 1);
+
+  // mock the fetch
+  const res = {
+    id: "aQzrrRoG",
+    dom: "blob",
+    data: {
+      name: "World",
+    },
+    errors: {},
+    redirect: {},
+    return: {},
+  };
+  global.fetch = fetchMock.sandbox().mock().post("/test/text-inputs", res);
+
+  send(component, (a, forceModelUpdates, err) => {
+    t.not(err);
+    t.true(forceModelUpdates);
+    fetchMock.reset();
+    t.end();
+  });
+});

tests/js/component/setModelValues.test.js

@@ -0,0 +1,107 @@
+import test from "ava";
+import { getComponent } from "../utils.js";
+
+test("setModelValues setValue called", (t) => {
+  t.plan(4);
+
+  const html = `
+  <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+    <input u:model='name'></input>
+  </div>`;
+  const component = getComponent(html);
+
+  t.is(component.modelEls.length, 1);
+
+  let setValueCalled = false;
+  let elementSet = null;
+
+  component.setValue = (element) => {
+    t.pass();
+    setValueCalled = true;
+    elementSet = element;
+  };
+
+  const triggeringElements = [];
+  const forceModelUpdates = false;
+  component.setModelValues(triggeringElements, forceModelUpdates);
+
+  t.true(setValueCalled);
+  t.is(elementSet, component.modelEls[0]);
+});
+
+test("setModelValues triggeringElement setValue not called", (t) => {
+  t.plan(3);
+
+  const html = `
+    <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+      <input u:model='name'></input>
+    </div>`;
+  const component = getComponent(html);
+
+  t.is(component.modelEls.length, 1);
+
+  let setValueCalled = false;
+  let elementSet = null;
+
+  component.setValue = (element) => {
+    t.pass();
+    setValueCalled = true;
+    elementSet = element;
+  };
+
+  const triggeringElements = [component.modelEls[0]];
+  const forceModelUpdates = false;
+  component.setModelValues(triggeringElements, forceModelUpdates);
+
+  t.false(setValueCalled);
+  t.is(elementSet, null);
+});
+
+test("setModelValues triggeringElement forceModelUpdates setValue called", (t) => {
+  t.plan(4);
+
+  const html = `
+      <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+        <input u:model='name'></input>
+      </div>`;
+  const component = getComponent(html);
+
+  t.is(component.modelEls.length, 1);
+
+  let setValueCalled = false;
+  let elementSet = null;
+
+  component.setValue = (element) => {
+    t.pass();
+    setValueCalled = true;
+    elementSet = element;
+  };
+
+  const triggeringElements = [component.modelEls[0]];
+  const forceModelUpdates = true;
+  component.setModelValues(triggeringElements, forceModelUpdates);
+
+  t.true(setValueCalled);
+  t.is(elementSet, component.modelEls[0]);
+});
+
+test("setModelValues multiple models setValue called once", (t) => {
+  t.plan(2);
+
+  const html = `
+        <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+          <input u:model='name'></input>
+          <input u:model='blob'></input>
+        </div>`;
+  const component = getComponent(html);
+
+  t.is(component.modelEls.length, 2);
+
+  component.setValue = (_) => {
+    t.pass();
+  };
+
+  const triggeringElements = [component.modelEls[0]];
+  const forceModelUpdates = false;
+  component.setModelValues(triggeringElements, forceModelUpdates);
+});

tests/js/utils.js

@@ -56,6 +56,10 @@ export function walkDOM(el, callback) {
   } while ((el = el.nextSibling));
 }
 
+function morphdom(initial, merge, options) {
+  return initial;
+}
+
 /**
  * Gets a constructed `Component` based on the passed-in HTML fragement.
  * @param {String} html THe HTML fragment for the component.
@@ -103,6 +107,7 @@ export function getComponent(html, id, name, data) {
     document,
     messageUrl: "test",
     walker: walkDOM,
+    morphdom,
     window: {
       document: { title: "" },
       history: mockHistory,