Sending childrenFingerprints data to server on Ajax call

weaverryan · weaverryan · commit 6b7fcd20041c · 2022-11-01T13:16:12.000-04:00
diff --git a/src/LiveComponent/assets/src/Backend.ts b/src/LiveComponent/assets/src/Backend.ts
@@ -1,7 +1,7 @@
 import BackendRequest from './BackendRequest';
 
 export interface BackendInterface {
-    makeRequest(data: any, actions: BackendAction[], updatedModels: string[]): BackendRequest;
+    makeRequest(data: any, actions: BackendAction[], updatedModels: string[], childrenFingerprints: any): BackendRequest;
 }
 
 export interface BackendAction {
@@ -11,14 +11,14 @@ export interface BackendAction {
 
 export default class implements BackendInterface {
     private url: string;
-    private csrfToken: string|null;
+    private readonly csrfToken: string|null;
 
     constructor(url: string, csrfToken: string|null = null) {
         this.url = url;
         this.csrfToken = csrfToken;
     }
 
-    makeRequest(data: any, actions: BackendAction[], updatedModels: string[]): BackendRequest {
+    makeRequest(data: any, actions: BackendAction[], updatedModels: string[], childrenFingerprints: any): BackendRequest {
         const splitUrl = this.url.split('?');
         let [url] = splitUrl
         const [, queryString] = splitUrl;
@@ -29,8 +29,9 @@ export default class implements BackendInterface {
             'Accept': 'application/vnd.live-component+html',
         };
 
-        if (actions.length === 0 && this.willDataFitInUrl(JSON.stringify(data), params)) {
+        if (actions.length === 0 && this.willDataFitInUrl(JSON.stringify(data), params, JSON.stringify(childrenFingerprints))) {
             params.set('data', JSON.stringify(data));
+            params.set('childrenFingerprints', JSON.stringify(childrenFingerprints));
             updatedModels.forEach((model) => {
                 params.append('updatedModels[]', model);
             });
@@ -39,7 +40,12 @@ export default class implements BackendInterface {
             fetchOptions.method = 'POST';
             fetchOptions.headers['Content-Type'] = 'application/json';
             const requestData: any = { data };
-            requestData.updatedModels = updatedModels;
+            if (updatedModels) {
+                requestData.updatedModels = updatedModels;
+            }
+            if (childrenFingerprints) {
+                requestData.childrenFingerprints = childrenFingerprints;
+            }
 
             if (actions.length > 0) {
                 // one or more ACTIONs
@@ -70,8 +76,8 @@ export default class implements BackendInterface {
         );
     }
 
-    private willDataFitInUrl(dataJson: string, params: URLSearchParams) {
-        const urlEncodedJsonData = new URLSearchParams(dataJson).toString();
+    private willDataFitInUrl(dataJson: string, params: URLSearchParams, childrenFingerprintsJson: string) {
+        const urlEncodedJsonData = new URLSearchParams(dataJson + childrenFingerprintsJson).toString();
 
         // if the URL gets remotely close to 2000 chars, it may not fit
         return (urlEncodedJsonData + params.toString()).length < 1500;
diff --git a/src/LiveComponent/assets/src/Component/index.ts b/src/LiveComponent/assets/src/Component/index.ts
@@ -193,7 +193,8 @@ export default class Component {
         this.backendRequest = this.backend.makeRequest(
             this.valueStore.all(),
             this.pendingActions,
-            this.valueStore.updatedModels
+            this.valueStore.updatedModels,
+            this.getChildrenFingerprints()
         );
         this.hooks.triggerHook('loading.state:started', this.element, this.backendRequest);
 
@@ -371,6 +372,20 @@ export default class Component {
         });
         modal.focus();
     }
+
+    private getChildrenFingerprints(): any {
+        const fingerprints: any = {};
+
+        this.children.forEach((child) => {
+            if (!child.id) {
+                throw new Error('missing id');
+            }
+
+            fingerprints[child.id] = child.fingerprint;
+        });
+
+        return fingerprints;
+    }
 }
 
 /**
diff --git a/src/LiveComponent/assets/test/controller/child.test.ts b/src/LiveComponent/assets/test/controller/child.test.ts
@@ -11,7 +11,7 @@
 
 import { createTest, initComponent, shutdownTest } from '../tools';
 import {getByTestId, waitFor} from '@testing-library/dom';
-import Component from "../../src/Component";
+import Component from '../../src/Component';
 
 describe('LiveController parent -> child component tests', () => {
     afterEach(() => {
@@ -25,7 +25,7 @@ describe('LiveController parent -> child component tests', () => {
 
         const test = await createTest({}, (data: any) => `
             <div ${initComponent(data)}>
-                ${childTemplate({food: 'pizza'})}
+                ${childTemplate({})}
             </div>
         `);
 
@@ -66,4 +66,24 @@ describe('LiveController parent -> child component tests', () => {
         expect(parentComponent.getChildren().get('the-child-id')).toEqual(childComponent);
         expect(childComponent.getParent()).toEqual(parentComponent);
     });
+
+    it('sends a map of child fingerprints on re-render', async () => {
+        const test = await createTest({}, (data: any) => `
+            <div ${initComponent(data)}>
+                <div ${initComponent({}, {id: 'the-child-id1', fingerprint: 'child-fingerprint1'})}>Child1</div>
+                <div ${initComponent({}, {id: 'the-child-id2', fingerprint: 'child-fingerprint2'})}>Child2</div>
+            </div>
+        `);
+
+        test.expectsAjaxCall('get')
+            .expectSentData(test.initialData)
+            .expectChildFingerprints({
+                'the-child-id1': 'child-fingerprint1',
+                'the-child-id2': 'child-fingerprint2'
+            })
+            .init();
+
+        test.component.render();
+        await waitFor(() => expect(test.element).toHaveAttribute('busy'));
+    });
 });
diff --git a/src/LiveComponent/assets/test/tools.ts b/src/LiveComponent/assets/test/tools.ts
@@ -38,7 +38,7 @@ export function shutdownTest() {
         requestInfo.push(`  HEADERS: ${JSON.stringify(unmatchedFetchError.headers)}`);
         requestInfo.push(`  DATA: ${unmatchedFetchError.method === 'GET' ? urlParams.get('data') : unmatchedFetchError.body}`);
 
-        console.log(`UNMATCHED request was made with the following info:`, "\n", requestInfo.join("\n"));
+        console.log('UNMATCHED request was made with the following info:', '\n', requestInfo.join('\n'));
     });
     unmatchedFetchErrors = [];
 
@@ -118,6 +118,7 @@ class MockedAjaxCall {
     private expectedSentData?: any;
     private expectedActions: Array<{ name: string, args: any }> = [];
     private expectedHeaders: any = {};
+    private expectedChildFingerprints: any = null;
     private changeDataCallback?: (data: any) => void;
     private template?: (data: any) => string
     options: any = {};
@@ -142,6 +143,14 @@ class MockedAjaxCall {
         return this;
     }
 
+    expectChildFingerprints = (fingerprints: any): MockedAjaxCall => {
+        this.checkInitialization('expectSentData');
+
+        this.expectedChildFingerprints = fingerprints;
+
+        return this;
+    }
+
     /**
      * Call if the "server" will change the data before it re-renders
      */
@@ -245,15 +254,20 @@ class MockedAjaxCall {
         } else {
             requestInfo.push(`  DATA: ${JSON.stringify(this.getRequestBody())}`);
         }
+
+        if (this.expectedChildFingerprints) {
+            requestInfo.push(`  CHILD FINGERPRINTS: ${JSON.stringify(this.expectedChildFingerprints)}`)
+        }
+
         if (this.expectedActions.length === 1) {
             requestInfo.push(`  Expected URL to contain action /${this.expectedActions[0].name}`)
         }
 
-        return requestInfo.join("\n");
+        return requestInfo.join('\n');
     }
 
     // https://www.wheresrhys.co.uk/fetch-mock/#api-mockingmock_matcher
-    private getMockMatcher(forError = false): any {
+    private getMockMatcher(createMatchForShowingError = false): any {
         if (!this.expectedSentData) {
             throw new Error('expectedSentData not set yet');
         }
@@ -265,15 +279,23 @@ class MockedAjaxCall {
         }
 
         if (this.method === 'GET') {
-            const params = new URLSearchParams({
+            const paramsData: any = {
                 data: JSON.stringify(this.expectedSentData)
-            });
-            if (forError) {
+            };
+            if (this.expectedChildFingerprints) {
+                paramsData.childrenFingerprints = JSON.stringify(this.expectedChildFingerprints);
+            }
+            const params = new URLSearchParams(paramsData);
+            if (createMatchForShowingError) {
                 // simplified version for error reporting
                 matcherObject.url = `?${params.toString()}`;
             } else {
                 matcherObject.functionMatcher = (url: string) => {
-                    return url.includes(`?${params.toString()}`);
+                    const actualUrl = new URL(url);
+                    const actualParams = new URLSearchParams(actualUrl.search);
+                    actualParams.delete('updatedModels');
+
+                    return actualParams.toString() === params.toString();
                 };
             }
         } else {
@@ -289,7 +311,7 @@ class MockedAjaxCall {
             if (this.expectedActions.length === 1) {
                 matcherObject.url = `end:/${this.expectedActions[0].name}`;
             } else if (this.expectedActions.length > 1) {
-                matcherObject.url = `end:/_batch`;
+                matcherObject.url = 'end:/_batch';
             }
         }
 
@@ -308,6 +330,10 @@ class MockedAjaxCall {
             data: this.expectedSentData
         };
 
+        if (this.expectedChildFingerprints) {
+            body.childrenFingerprints = this.expectedChildFingerprints;
+        }
+
         if (this.expectedActions.length === 1) {
             body.args = this.expectedActions[0].args;
         } else if (this.expectedActions.length > 1) {
