standardizing most tests around mockRerender

Author: weaverryan

src/LiveComponent/assets/test/controller/child.test.js

@@ -109,10 +109,7 @@ describe('LiveController parent -> child component tests', () => {
         const { element, controller } = await startStimulus(parentTemplate(data));
 
         // verify the child request contains the correct description & re-render
-        fetchMock.get('http://localhost/_components/child?value=i+love+turtles', {
-            html: childTemplate({ value: 'i love turtles' }),
-            data: { value: 'i love turtles' }
-        });
+        mockRerender({ value: 'i love turtles' }, childTemplate);
 
         // change the description in the child
         const inputElement = getByLabelText(element, 'Content:');
@@ -136,23 +133,18 @@ describe('LiveController parent -> child component tests', () => {
         const inputElement = getByLabelText(element, 'Content:');
         await userEvent.clear(inputElement);
         await userEvent.type(inputElement, 'changed content');
-        fetchMock.get('http://localhost/_components/child?value=changed+content', {
-            html: childTemplate({ value: 'changed content', rows: 5 }),
-            data: { value: 'changed content', rows: 5 }
+        mockRerender({'value': 'changed content'}, childTemplate, (data) => {
+            data.rows = 5;
         });
 
         // reload, which will give us rows=5
         getByText(element, 'Child Re-render').click();
         await waitFor(() => expect(element).toHaveTextContent('Rows in child: 5'));
 
         // simulate an action in the parent component where "errors" changes
-        const newData = {...data};
-        newData.post.title = 'Changed title';
-        newData.post.content = 'changed content';
-        newData.errors = { post: { content: 'the content is not interesting enough' }};
-        fetchMock.get('http://localhost/_components/parent?post%5Btitle%5D=Parent+component&post%5Bcontent%5D=changed+content', {
-            html: parentTemplate(newData),
-            data: newData
+        mockRerender({'post': { title: 'Parent component', content: 'changed content' }}, parentTemplate, (data) => {
+            data.post.title = 'Changed title';
+            data.errors = { post: { content: 'the content is not interesting enough' }};
         });
 
         getByText(element, 'Parent Re-render').click();
@@ -197,7 +189,4 @@ describe('LiveController parent -> child component tests', () => {
 
         expect(controller.dataValue).toEqual({ textareaContent: 'changed content' });
    });
-
-    // TODO - what if a child component re-renders and comes down with
-    // a changed set of data? Should that update the parent's data?
 });

src/LiveComponent/assets/test/controller/model.test.js

@@ -10,7 +10,7 @@
 'use strict';
 
 import { clearDOM } from '@symfony/stimulus-testing';
-import { initLiveComponent, startStimulus } from '../tools';
+import { initLiveComponent, mockRerender, startStimulus } from '../tools';
 import { getByLabelText, waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock-jest';
@@ -114,9 +114,8 @@ describe('LiveController data-model Tests', () => {
         delete inputElement.dataset.model;
         inputElement.setAttribute('name', 'name');
 
-        fetchMock.getOnce('end:?name=Ryan+WEAVER', {
-            html: template({ name: 'Ryan Weaver' }),
-            data: { name: 'Ryan Weaver' }
+        mockRerender({name: 'Ryan WEAVER'}, template, (data) => {
+            data.name = 'Ryan Weaver';
         });
 
         await userEvent.type(inputElement, ' WEAVER');
@@ -137,10 +136,9 @@ describe('LiveController data-model Tests', () => {
         inputElement.setAttribute('name', 'first_name');
 
         // ?name should be what's sent to the server
-        fetchMock.getOnce('end:?name=Ryan+WEAVER', {
-            html: template({ name: 'Ryan Weaver' }),
-            data: { name: 'Ryan Weaver' }
-        });
+        mockRerender({name: 'Ryan WEAVER'}, template, (data) => {
+            data.name = 'Ryan Weaver';
+        })
 
         await userEvent.type(inputElement, ' WEAVER');
 
@@ -172,9 +170,8 @@ describe('LiveController data-model Tests', () => {
         const inputElement = getByLabelText(element, 'First Name:');
 
         const newData = { user: { firstName: 'Ryan Weaver' } };
-        fetchMock.getOnce('end:?user%5BfirstName%5D=Ryan+WEAVER', {
-            html: deeperModelTemplate(newData),
-            data: newData
+        mockRerender({'user': {firstName: 'Ryan WEAVER'}}, deeperModelTemplate, (data) => {
+            data.user.firstName = 'Ryan Weaver';
         });
 
         await userEvent.type(inputElement, ' WEAVER');
@@ -206,9 +203,8 @@ describe('LiveController data-model Tests', () => {
         const data = { firstName: 'Ryan' };
         const { element } = await startStimulus(parentUpdateTemplate(data));
 
-        fetchMock.getOnce('end:?firstName=Ryan+WEAVER', {
-            html: parentUpdateTemplate({ firstName: 'Ryan Weaver' }),
-            data: { firstName: 'Ryan Weaver' }
+        mockRerender({firstName: 'Ryan WEAVER'}, parentUpdateTemplate, (data) => {
+            data.firstName = 'Ryan Weaver';
         });
 
         const inputElement = getByLabelText(element, 'Name:');
@@ -227,9 +223,8 @@ describe('LiveController data-model Tests', () => {
         const data = { name: 'Ryan', validatedFields: ['otherField'] };
         const { element } = await startStimulus(template(data));
 
-        fetchMock.getOnce('end:?name=Ryan+WEAVER&validatedFields%5B0%5D=otherField&validatedFields%5B1%5D=name', {
-            html: template({ name: 'Ryan Weaver' }),
-            data: { name: 'Ryan Weaver' }
+        mockRerender({name: 'Ryan WEAVER', validatedFields: ['otherField', 'name']}, template, (data) => {
+            data.name = 'Ryan Weaver';
         });
 
         const inputElement = getByLabelText(element, 'Name:');
@@ -240,7 +235,4 @@ describe('LiveController data-model Tests', () => {
         // assert all calls were done the correct number of times
         fetchMock.done();
     });
-
-    // TODO - test changing debounce
-    // TODO - test deferred rendering
 });