adding test

Author: weaverryan

src/LiveComponent/assets/src/live_controller.ts

@@ -57,8 +57,8 @@ export default class extends Controller implements LiveController {
 
     /** Actions that are waiting to be executed */
     pendingActions: Array<{ name: string, args: Record<string, string> }> = [];
-    /** Does at least one updated model requier a re-render? */
-    doModelsRequireReRender = false;
+    /** Has anything requested a re-render? */
+    isRerenderRequested = false;
 
     /**
      * Current "timeout" before the pending request should be sent.
@@ -220,7 +220,7 @@ export default class extends Controller implements LiveController {
     }
 
     $render() {
-        this.doModelsRequireReRender = true;
+        this.isRerenderRequested = true;
         this.#startPendingRequest();
     }
 
@@ -383,7 +383,7 @@ export default class extends Controller implements LiveController {
             this.#clearRequestDebounceTimeout();
             this.requestDebounceTimeout = window.setTimeout(() => {
                 this.requestDebounceTimeout = null;
-                this.doModelsRequireReRender = true;
+                this.isRerenderRequested = true;
                 this.#startPendingRequest();
             }, debounce);
         }
@@ -393,7 +393,7 @@ export default class extends Controller implements LiveController {
      * Makes a request to the server with all pending actions/updates, if any.
      */
     #startPendingRequest(): void {
-        if (!this.backendRequest && (this.pendingActions.length > 0 || this.doModelsRequireReRender)) {
+        if (!this.backendRequest && (this.pendingActions.length > 0 || this.isRerenderRequested)) {
             this.#makeRequest();
         }
     }
@@ -406,7 +406,7 @@ export default class extends Controller implements LiveController {
 
         const actions = this.pendingActions;
         this.pendingActions = [];
-        this.doModelsRequireReRender = false;
+        this.isRerenderRequested = false;
         // we're making a request NOW, so no need to make another one after debouncing
         this.#clearRequestDebounceTimeout();
 
@@ -854,8 +854,6 @@ export default class extends Controller implements LiveController {
         }
 
         const timer = setInterval(() => {
-            // TODO "schedule" the poll
-
             callback();
         }, duration);
         this.pollingIntervals.push(timer);

src/LiveComponent/assets/test/controller/poll.test.ts

@@ -11,6 +11,7 @@
 
 import { shutdownTest, createTest, initComponent } from '../tools';
 import { waitFor } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
 
 describe('LiveController polling Tests', () => {
     afterEach(() => {
@@ -111,8 +112,6 @@ describe('LiveController polling Tests', () => {
         });
     });
 
-    // check polling stops after disconnect
-
     it('polling should stop if data-poll is removed', async () => {
         const test = await createTest({ keepPolling: true, renderCount: 0 }, (data: any) => `
             <div ${initComponent(data)} ${data.keepPolling ? 'data-poll="delay(500)|$render"' : ''}>
@@ -186,5 +185,43 @@ describe('LiveController polling Tests', () => {
         });
    });
 
+    it('waits to send the request if request is already happening', async () => {
+        const test = await createTest({ renderCount: 0, name: 'Ryan' }, (data: any) => `
+            <div ${initComponent(data, { debounce: 1 })} data-poll="delay(50)|$render">
+                <input
+                    data-model="name"
+                    value="${data.name}"
+                >
+
+                <span>Name: ${data.name}</span>
+                <span>Render count: ${data.renderCount}</span>
+            </div>
+        `);
+
+        // First request, from typing (debouncing is set to 1ms)
+        test.expectsAjaxCall('get')
+            .expectSentData({ renderCount: 0, name: 'Ryan Weaver'})
+            .serverWillChangeData((data: any) => {
+                data.renderCount = 1;
+            })
+            .delayResponse(100)
+            .init();
+
+        await userEvent.type(test.queryByDataModel('name'), ' Weaver');
+
+        setTimeout(() => {
+            // first poll, should happen after 50 ms, but needs to wait the full 100
+            test.expectsAjaxCall('get')
+                .expectSentData({renderCount: 1, name: 'Ryan Weaver'})
+                .serverWillChangeData((data: any) => {
+                    data.renderCount = 2;
+                })
+                .init();
+        }, 75)
+
+        await waitFor(() => expect(test.element).toHaveTextContent('Render count: 1'));
+        await waitFor(() => expect(test.element).toHaveTextContent('Render count: 2'));
+    });
+
     // TODO: test "batching" of requests between polling and any other re-render request
 });