- Parent component count: ${data.count}
-
- ${childTemplate({childCount: data.count})}
+ const updatedChild = `
+
- `);
+ `;
- // change some content on the child
- (document.getElementById('child-component') as HTMLElement).innerHTML = 'changed child content';
+ const test = await createTest({useOriginalChild: true}, (data: any) => `
+
+ ${data.useOriginalChild ? originalChild : updatedChild}
+
+ `);
- // re-render the parent
test.expectsAjaxCall('get')
.expectSentData(test.initialData)
.serverWillChangeData((data: any) => {
- data.count = 1;
+ data.useOriginalChild = false;
})
.init();
- test.controller.$render();
- await waitFor(() => expect(test.element).toHaveTextContent('Parent component count: 1'));
- // child component reverts to its original text
- // this is because the parent's data changed AND that change affected child's data
- expect(test.element).toHaveTextContent('Child component count: 1');
+ expect(test.element).toHaveTextContent('Original Child Component')
+ test.component.render();
+ // wait for Ajax call
+ await waitFor(() => expect(test.element).toHaveAttribute('busy'));
+ await waitFor(() => expect(test.element).not.toHaveAttribute('busy'));
+ // child component is STILL here: the new rendering was ignored
+ expect(test.element).toHaveTextContent('Original Child Component')
});
- it('updates the parent model when the child model updates', async () => {
+ it('existing child component gets props & triggers re-render', async () => {
const childTemplate = (data: any) => `
-
-
-
- Child Content: ${data.content}
+
+
+ Full Name: ${data.toUppercase ? data.fullName.toUpperCase() : data.fullName}
`;
- const test = await createTest({ post: { content: 'i love'} }, (data: any) => `
-
-
-
- `);
+ // a simpler version of the child is returned from the prent component's re-render
+ const childReturnedFromParentCall = `
+
+ `;
- // request for the child render
+ const test = await createTest({useOriginalChild: true}, (data: any) => `
+
+ Using Original child: ${data.useOriginalChild ? 'yes' : 'no'}
+ ${data.useOriginalChild
+ ? childTemplate({ fullName: 'Ryan', toUppercase: false })
+ : childReturnedFromParentCall
+ }
+
+ `);
+
+ const childComponent = getComponent(getByTestId(test.element, 'child-component'));
+ // just used to mock the Ajax call
+ const childTest = createTestForExistingComponent(childComponent);
+
+ /*
+ * The flow of this test:
+ * A) Original parent & child are rendered
+ * B) We type into a child "model" input, but it has "norender".
+ * So, no Ajax call is made, but the "data" on the child has been updated.
+ * C) We Re-render the parent component
+ * D) On re-render, the child element is empty, but its element has
+ * updated "props" and also a new "fingerprint". This mimics
+ * the condition on the server when the old child fingerprint
+ * that was just sent does not match the new fingerprint, indicating
+ * that data passed "into" the component to create it has changed.
+ * And so, the server returns the new set of props and the new
+ * fingerprint representing that "input" data.
+ * E) Seeing that its props have changed, the child component makes
+ * an Ajax call to re-render itself. But it keeps its modified data.
+ */
+
+ // B) Type into the child
+ // |norender is used on this field
+ userEvent.type(childTest.queryByDataModel('fullName'), ' Weaver');
+
+ // C) Re-render the parent
test.expectsAjaxCall('get')
- .expectSentData({content: 'i love turtles'})
+ .expectSentData(test.initialData)
+ .serverWillChangeData((data: any) => {
+ data.useOriginalChild = false;
+ })
+ .init();
+ test.component.render();
+ // wait for parent Ajax call to start
+ await waitFor(() => expect(test.element).toHaveAttribute('busy'));
+
+ // E) Expect the child to re-render
+ // after the parent Ajax call has finished, but shortly before it's
+ // done processing, the child component should start its own Aja call
+ childTest.expectsAjaxCall('get')
+ // expect the modified firstName data
+ // expect the new prop
+ .expectSentData({ toUppercase: true, fullName: 'Ryan Weaver' })
.willReturn(childTemplate)
.init();
- await userEvent.type(test.queryByDataModel('content'), ' turtles');
- // wait for the render to complete
- await waitFor(() => expect(test.element).toHaveTextContent('Child Content: i love turtles'));
+ // wait for parent Ajax call to finish
+ await waitFor(() => expect(test.element).not.toHaveAttribute('busy'));
+ // sanity check
+ expect(test.element).toHaveTextContent('Using Original child: no')
- // the parent should not re-render
- // TODO: this behavior was originally added, but it's questionabl
- expect(test.element).not.toHaveTextContent('Parent Post Content: i love turtles');
- // but the value DID update on the parent component
- // this is because the name="post[content]" in the child matches the parent model
- expect(test.controller.dataValue.post.content).toEqual('i love turtles');
+ // after the parent re-renders, the child should already have received its new fingerprint
+ expect(childComponent.fingerprint).toEqual('updated fingerprint');
+
+ // wait for child to start and stop loading
+ await waitFor(() => expect(childComponent.element).toHaveAttribute('busy'));
+ await waitFor(() => expect(childComponent.element).not.toHaveAttribute('busy'));
+
+ // child component re-rendered and there are a few important things here
+ // 1) the toUppercase prop was changed after by the parent and that change remains
+ // 2) The " Weaver" change to the "firstName" data was kept, not "run over"
+ expect(childComponent.element).toHaveTextContent('Full Name: RYAN WEAVER')
});
- it('uses data-model-map to map child models to parent models', async () => {
- const childTemplate = (data: any) => `
-
-
-
- Child Content: ${data.value}
-
+ it('existing child gets new props even though the element type differs', async () => {
+ const realChildTemplate = (data: any) => `
+
+ Child prop1: ${data.prop1}
+
+ `;
+ // the empty-ish child element used on re-render
+ const parentReRenderedChildTemplate = (data: any) => `
+
`;
- const test = await createTest({ post: { content: 'i love'} }, (data: any) => `
-
-
- ${childTemplate({value: data.post.content})}
-
-
- `);
+ const test = await createTest({prop1: 'original_prop', useRealChild: true}, (data: any) => `
+
+ Parent Component
+ ${data.useRealChild ? realChildTemplate({data}) : parentReRenderedChildTemplate(data)}
+
+ `);
- // request for the child render
+ const childComponent = getComponent(getByTestId(test.element, 'child-component'));
+ // just used to mock the Ajax call
+ const childTest = createTestForExistingComponent(childComponent);
+
+ // Re-render the parent
test.expectsAjaxCall('get')
- .expectSentData({ value: 'i love dragons' })
- .willReturn(childTemplate)
+ .expectSentData(test.initialData)
+ .serverWillChangeData((data: any) => {
+ // change the child prop
+ data.prop1 = 'updated_prop';
+ // re-render the "fake" component with a different tag
+ data.useRealChild = false;
+ })
+ .init();
+ test.component.render();
+ // wait for parent Ajax call to start
+ await waitFor(() => expect(test.element).toHaveAttribute('busy'));
+
+ // Expect the child to re-render
+ childTest.expectsAjaxCall('get')
+ // expect the new prop
+ .expectSentData({ prop1: 'updated_prop' })
+ .willReturn(realChildTemplate)
.init();
- await userEvent.type(test.queryByDataModel('value'), ' dragons');
- // wait for the render to complete
- await waitFor(() => expect(test.element).toHaveTextContent('Child Content: i love dragons'));
- expect(test.controller.dataValue.post.content).toEqual('i love dragons');
+ // wait for parent Ajax call to finish
+ await waitFor(() => expect(test.element).not.toHaveAttribute('busy'));
+ // wait for child to start and stop loading
+ await waitFor(() => expect(childComponent.element).toHaveAttribute('busy'));
+ await waitFor(() => expect(childComponent.element).not.toHaveAttribute('busy'));
+
+ // child component re-rendered successfully
+ // re-grabbing child-component fresh to prove it's not stale
+ const childElement2 = getByTestId(test.element, 'child-component');
+ expect(childElement2).toHaveTextContent('Child prop1: updated_prop')
+ // it should still be a span, even though the initial re-render was a div
+ expect(childElement2.tagName).toEqual('SPAN');
});
- it('updates child data-original-data on parent re-render', async () => {
- const initialData = { children: [{ name: 'child1' }, { name: 'child2' }, { name: 'child3' }] };
- const test = await createTest(initialData, (data: any) => `
-
- Parent count: ${data.count}
-
-
- ${data.children.map((child: any) => {
- return `
- -
- ${child.name}
-
- `
- })}
-
-
- `);
+ it('replaces old child with new child if the "id" changes', async () => {
+ const originalChildTemplate = `
+
+ Original Child
+
+ `;
+ const reRenderedChildTemplate = `
+
+ New Child
+
+ `;
+
+ const test = await createTest({useOriginalChild: true}, (data: any) => `
+
+ Parent Component
+ ${data.useOriginalChild ? originalChildTemplate : reRenderedChildTemplate}
+
+ `);
+ // Re-render the parent
test.expectsAjaxCall('get')
.expectSentData(test.initialData)
.serverWillChangeData((data: any) => {
- // "remove" child2
- data.children = [{ name: 'child1' }, { name: 'child3' }];
+ // trigger the re-rendered child to be used
+ data.useOriginalChild = false;
})
.init();
+ test.component.render();
+ // wait for parent Ajax call to start/finish
+ await waitFor(() => expect(test.element).toHaveAttribute('busy'));
+ await waitFor(() => expect(test.element).not.toHaveAttribute('busy'));
- test.controller.$render();
+ // no child Ajax call made: we simply use the new child's content
+ expect(test.element).toHaveTextContent('New Child')
+ expect(test.element).not.toHaveTextContent('Original Child')
- await waitFor(() => expect(test.element).not.toHaveTextContent('child2'));
- const secondLi = test.element.querySelectorAll('li').item(1);
- expect(secondLi).not.toBeNull();
- // the 2nd li was just "updated" by the parent component, which
- // would have eliminated its data-original-data attribute. Check
- // that it was re-established to the 3rd child's data.
- // see MutationObserver in live_controller for more details.
- expect(secondLi.dataset.originalData).toEqual(JSON.stringify({name: 'child3'}));
+ expect(test.component.getChildren().size).toEqual(1);
});
- it('notices as children are connected and disconnected', async () => {
+ it('tracks various children correctly, even if position changes', async () => {
+ const childTemplate = (data: any) => `
+
+ Child number: ${data.number} value "${data.value}"
+
+ `;
+ // the empty-ish child element used on re-render
+ const childRenderedFromParentTemplate = (data: any) => `
+
+ `;
+
const test = await createTest({}, (data: any) => `
-
- Parent component
-
- `);
+
+ ${childTemplate({ number: 1, value: 'Original value for child 1' })}
+
Parent Component
+ ${childTemplate({ number: 2, value: 'Original value for child 2' })}
+
+ `);
+
+ // Re-render the parent
+ test.expectsAjaxCall('get')
+ .expectSentData(test.initialData)
+ // return the template in a different order
+ // and render children with an updated value prop
+ .willReturn((data: any) => `
+
+
+ ${childRenderedFromParentTemplate({ number: 2, value: 'New value for child 2' })}
+
+
Parent Component Updated
+
+ -
+ ${childRenderedFromParentTemplate({ number: 1, value: 'New value for child 1' })}
+
+
+
+ `)
+ .init();
+ test.component.render();
+ // wait for parent Ajax call to start
+ await waitFor(() => expect(test.element).toHaveAttribute('busy'));
+
+ const childComponent1 = getComponent(getByTestId(test.element, 'child-component-1'));
+ const childTest1 = createTestForExistingComponent(childComponent1);
+ const childComponent2 = getComponent(getByTestId(test.element, 'child-component-2'));
+ const childTest2 = createTestForExistingComponent(childComponent2);
+
+ // Expect both children to re-render
+ childTest1.expectsAjaxCall('get')
+ // expect the new prop
+ .expectSentData({ number: 1, value: 'New value for child 1' })
+ .willReturn(childTemplate)
+ .init();
+ childTest2.expectsAjaxCall('get')
+ // expect the new prop
+ .expectSentData({ number: 2, value: 'New value for child 2' })
+ .willReturn(childTemplate)
+ .init();
- expect(test.controller.childComponentControllers).toHaveLength(0);
-
- const createChildElement = () => {
- const childElement = htmlToElement(`
child
`);
- childElement.addEventListener('live:connect', (event: any) => {
- event.detail.controller.element.setAttribute('connected', '1');
- });
- childElement.addEventListener('live:disconnect', (event: any) => {
- event.detail.controller.element.setAttribute('connected', '0');
- });
-
- return childElement;
- };
-
- const childElement1 = createChildElement();
- const childElement2 = createChildElement();
- const childElement3 = createChildElement();
-
- test.element.appendChild(childElement1);
- await waitFor(() => expect(childElement1).toHaveAttribute('connected', '1'));
- expect(test.controller.childComponentControllers).toHaveLength(1);
-
- test.element.appendChild(childElement2);
- test.element.appendChild(childElement3);
- await waitFor(() => expect(childElement2).toHaveAttribute('connected', '1'));
- await waitFor(() => expect(childElement3).toHaveAttribute('connected', '1'));
- expect(test.controller.childComponentControllers).toHaveLength(3);
-
- test.element.removeChild(childElement2);
- await waitFor(() => expect(childElement2).toHaveAttribute('connected', '0'));
- expect(test.controller.childComponentControllers).toHaveLength(2);
- test.element.removeChild(childElement1);
- test.element.removeChild(childElement3);
- await waitFor(() => expect(childElement1).toHaveAttribute('connected', '0'));
- await waitFor(() => expect(childElement3).toHaveAttribute('connected', '0'));
- expect(test.controller.childComponentControllers).toHaveLength(0);
+ // wait for parent Ajax call to finish
+ await waitFor(() => expect(test.element).not.toHaveAttribute('busy'));
+ // wait for child to start and stop loading
+ await waitFor(() => expect(childTest1.element).toHaveAttribute('busy'));
+ await waitFor(() => expect(childTest1.element).not.toHaveAttribute('busy'));
+ await waitFor(() => expect(childTest2.element).not.toHaveAttribute('busy'));
+
+ expect(test.element).toHaveTextContent('Child number: 1 value "New value for child 1"');
+ expect(test.element).toHaveTextContent('Child number: 2 value "New value for child 2"');
+ expect(test.element).not.toHaveTextContent('Child number: 1 value "Original value for child 1"');
+ expect(test.element).not.toHaveTextContent('Child number: 2 value "Original value for child 2"');
+ // make sure child 2 is in the correct spot
+ expect(test.element.querySelector('#foo')).toHaveTextContent('Child number: 2 value "New value for child 2"');
+ expect(test.component.getChildren().size).toEqual(2);
});
});
diff --git a/src/LiveComponent/assets/test/controller/csrf.test.ts b/src/LiveComponent/assets/test/controller/csrf.test.ts
index d61c7d99ce2..78480eaa930 100644
--- a/src/LiveComponent/assets/test/controller/csrf.test.ts
+++ b/src/LiveComponent/assets/test/controller/csrf.test.ts
@@ -9,17 +9,17 @@
'use strict';
-import { createTest, initComponent, shutdownTest } from '../tools';
+import { createTest, initComponent, shutdownTests } from '../tools';
import { getByText, waitFor } from '@testing-library/dom';
describe('LiveController CSRF Tests', () => {
afterEach(() => {
- shutdownTest();
+ shutdownTests();
})
it('Sends the CSRF token on an action', async () => {
const test = await createTest({ isSaved: 0 }, (data: any) => `
-
+
${data.isSaved ? 'Saved' : ''}