Skip to content

Commit 593c01a

Browse files
weaverryanweaverryan
committed
moving child test into a separate file
1 parent e239983 commit 593c01a

File tree

2 files changed

+107
-51
lines changed

2 files changed

+107
-51
lines changed

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/*
2+
* This file is part of the Symfony package.
3+
*
4+
* (c) Fabien Potencier <[email protected]>
5+
*
6+
* For the full copyright and license information, please view the LICENSE
7+
* file that was distributed with this source code.
8+
*/
9+
10+
'use strict';
11+
12+
import { clearDOM } from '@symfony/stimulus-testing';
13+
import { startStimulus } from '../tools';
14+
import { createEvent, fireEvent, getByLabelText, getByText, waitFor } from '@testing-library/dom';
15+
import userEvent from '@testing-library/user-event';
16+
import fetchMock from 'fetch-mock-jest';
17+
18+
describe('LiveController parent -> child component tests', () => {
19+
const parentTemplate = (data) => {
20+
return `
21+
<div
22+
data-controller="live"
23+
data-live-url-value="http://localhost/_components/parent"
24+
>
25+
<span>Title: ${data.title}</span>
26+
<span>Description in Parent: ${data.description}</span>
27+
28+
<button
29+
data-action="live#$render"
30+
>Parent Re-render</button>
31+
32+
${childTemplate({ description: data.description })}
33+
</div>
34+
`
35+
}
36+
37+
const childTemplate = (data) => `
38+
<div
39+
data-controller="live"
40+
data-live-url-value="http://localhost/_components/my_component"
41+
>
42+
<!-- form field not mapped with data-model -->
43+
<label>
44+
Description:
45+
<input
46+
value="${data.description}"
47+
data-model="description"
48+
data-action="live#update"
49+
>
50+
</label>
51+
52+
<div>Description in child: ${data.description}</div>
53+
54+
<button
55+
data-action="live#$render"
56+
>Child Re-render</button>
57+
</div>
58+
`;
59+
60+
const startStimulusForParentChild = async (html, data, childData) => {
61+
const testData = await startStimulus(
62+
parentTemplate(data),
63+
data
64+
);
65+
66+
// setup the values on the child element
67+
testData.element.querySelector('[data-controller="live"]').dataset.liveDataValue = JSON.stringify(childData);
68+
69+
return testData;
70+
}
71+
72+
afterEach(() => {
73+
clearDOM();
74+
fetchMock.reset();
75+
});
76+
77+
it('renders parent component without affecting child component', async () => {
78+
const data = { title: 'Parent component', description: 'i love components' };
79+
const { element } = await startStimulusForParentChild(
80+
parentTemplate(data),
81+
data,
82+
{ description: data.description }
83+
);
84+
85+
// on child re-render, use a new description
86+
fetchMock.get('http://localhost/_components/my_component?description=i+love+components', {
87+
html: childTemplate({ description: 'i love popcorn' }),
88+
data: { description: 'i love popcorn' }
89+
});
90+
91+
// reload the child template
92+
getByText(element, 'Child Re-render').click();
93+
await waitFor(() => expect(element).toHaveTextContent('Description in child: i love popcorn'));
94+
95+
// on parent re-render, render the child template differently
96+
fetchMock.get('http://localhost/_components/parent?title=Parent+component&description=i+love+components', {
97+
html: parentTemplate({ title: 'Changed parent', description: 'changed child description' }),
98+
data: { title: 'Changed parent', description: 'changed child description' }
99+
});
100+
getByText(element, 'Parent Re-render').click();
101+
await waitFor(() => expect(element).toHaveTextContent('Title: Changed parent'));
102+
103+
// the child component should *not* have updated
104+
expect(element).toHaveTextContent('Description in child: i love popcorn');
105+
});
106+
});

‎src/LiveComponent/assets/test/controller/render.test.js

Lines changed: 1 addition & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -106,56 +106,6 @@ describe('LiveController rendering Tests', () => {
106106
expect(document.activeElement.name).toEqual('comments');
107107
});
108108

109-
it('avoids updating a child component', async () => {
110-
const parentTemplate = (data, childData) => {
111-
return `
112-
<div
113-
data-controller="live"
114-
data-live-url-value="http://localhost/_components/parent"
115-
>
116-
Title: ${data.title}
117-
118-
<button
119-
data-action="live#$render"
120-
>Parent Re-render</button>
121-
122-
${template(childData)}
123-
</div>
124-
`
125-
}
126-
127-
const data = { title: 'Parent component' };
128-
const childData = { name: 'Ryan' };
129-
const { element } = await startStimulus(
130-
// render the parent and child component
131-
parentTemplate(data, childData),
132-
data
133-
);
134-
// setup the values on the child element
135-
element.querySelector('[data-controller="live"]').dataset.liveDataValue = JSON.stringify(childData);
136-
137-
// child re-render: render with new name & an error class
138-
fetchMock.get('http://localhost/_components/my_component?name=Ryan', {
139-
html: template({ name: 'Kevin', hasError: true }),
140-
data: { name: 'Kevin', hasError: true }
141-
});
142-
143-
// reload the child template
144-
getByText(element, 'Reload').click();
145-
await waitFor(() => expect(element).toHaveTextContent('Name: Kevin'));
146-
147-
// reload the parent template
148-
fetchMock.get('http://localhost/_components/parent?title=Parent+component', {
149-
html: parentTemplate({ title: 'Changed parent' }, { name: 'changed name'}),
150-
data: { title: 'Changed parent'}
151-
});
152-
getByText(element, 'Parent Re-render').click();
153-
await waitFor(() => expect(element).toHaveTextContent('Title: Changed parent'));
154-
155-
// the child component should *not* have updated
156-
expect(element).toHaveTextContent('Name: Kevin');
157-
});
158-
159109
it('cancels a re-render if the page is navigating away', async () => {
160110
const data = { name: 'Ryan' };
161111
const { element, controller } = await startStimulus(
@@ -174,7 +124,7 @@ describe('LiveController rendering Tests', () => {
174124
// imitate navigating away
175125
fireEvent(window, createEvent('beforeunload', window));
176126

177-
// wait for the fetch to fonish
127+
// wait for the fetch to finish
178128
await fetchMock.flush();
179129

180130
// the re-render should not have happened

0 commit comments

Comments
 (0)