Skip to content

Commit 705865e

Browse files
kart-utobiu
kart-u
authored and
tobiu
committed
Convert vdom/layout/Cube.mjs Test from Siesta to Playwright #7293 
1 parent 924eaf1 commit 705865e

1 file changed

Lines changed: 197 additions & 0 deletions

File tree

‎test/playwright/unit/vdom/layout/Cube.spec.mjs‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import { test, expect } from '@playwright/test';
2+
import VdomHelper from '../../../../../src/vdom/Helper.mjs';
3+
import Neo from '../../../../../src/Neo.mjs';
4+
import StringFromVnode from '../../../../../src/vdom/util/StringFromVnode.mjs';
5+
6+
// tests are designed for this rendering mode
7+
// Neo.config.useDomApiRenderer = false;
8+
9+
let oldVdom, vdom;
10+
11+
test.describe('vdom/layout/Cube', () => {
12+
test.beforeAll(() => {
13+
Neo.config.useDomApiRenderer = false;
14+
});
15+
16+
test('Wrap Container Items', () => {
17+
oldVdom =
18+
{id: 'neo-container-1', cn: [
19+
{id: 'neo-component-1'},
20+
{id: 'neo-component-2'},
21+
{id: 'neo-component-3'},
22+
{id: 'neo-component-4'},
23+
{id: 'neo-component-5'},
24+
{id: 'neo-component-6'}
25+
]};
26+
27+
let oldVnode = VdomHelper.create({vdom: oldVdom}).vnode;
28+
29+
vdom =
30+
{id: 'neo-container-1', cn: [
31+
{id: 'neo-vnode-1', cn: [
32+
{id: 'neo-vnode-2', cn: [
33+
{id: 'neo-component-1'},
34+
{id: 'neo-component-2'},
35+
{id: 'neo-component-3'},
36+
{id: 'neo-component-4'},
37+
{id: 'neo-component-5'},
38+
{id: 'neo-component-6'}
39+
]}
40+
]}
41+
]};
42+
43+
let {deltas, vnode} = VdomHelper.update({vdom, vnode: oldVnode});
44+
45+
expect(deltas.length).toBe(7);
46+
47+
expect(deltas).toEqual([
48+
{
49+
action : 'insertNode',
50+
index : 0,
51+
outerHTML: '<div id="neo-vnode-1"><div id="neo-vnode-2"></div></div>',
52+
parentId : 'neo-container-1'
53+
},
54+
{action: 'moveNode', id: 'neo-component-1', index: 0, parentId: 'neo-vnode-2'},
55+
{action: 'moveNode', id: 'neo-component-2', index: 1, parentId: 'neo-vnode-2'},
56+
{action: 'moveNode', id: 'neo-component-3', index: 2, parentId: 'neo-vnode-2'},
57+
{action: 'moveNode', id: 'neo-component-4', index: 3, parentId: 'neo-vnode-2'},
58+
{action: 'moveNode', id: 'neo-component-5', index: 4, parentId: 'neo-vnode-2'},
59+
{action: 'moveNode', id: 'neo-component-6', index: 5, parentId: 'neo-vnode-2'}
60+
]);
61+
});
62+
63+
test('Unwrap Container Items', () => {
64+
oldVdom =
65+
{id: 'neo-container-1', cn: [
66+
{id: 'neo-vnode-1', cn: [
67+
{id: 'neo-vnode-2', cn: [
68+
{id: 'neo-component-1'},
69+
{id: 'neo-component-2'},
70+
{id: 'neo-component-3'},
71+
{id: 'neo-component-4'},
72+
{id: 'neo-component-5'},
73+
{id: 'neo-component-6'}
74+
]}
75+
]}
76+
]};
77+
78+
let oldVnode = VdomHelper.create({vdom: oldVdom}).vnode;
79+
80+
vdom =
81+
{id: 'neo-container-1', cn: [
82+
{id: 'neo-component-1'},
83+
{id: 'neo-component-2'},
84+
{id: 'neo-component-3'},
85+
{id: 'neo-component-4'},
86+
{id: 'neo-component-5'},
87+
{id: 'neo-component-6'}
88+
]};
89+
90+
let {deltas, vnode} = VdomHelper.update({vdom, vnode: oldVnode});
91+
92+
expect(deltas.length).toBe(7);
93+
94+
expect(deltas).toEqual([
95+
{action: 'moveNode', id: 'neo-component-1', index: 1, parentId: 'neo-container-1'},
96+
{action: 'moveNode', id: 'neo-component-2', index: 2, parentId: 'neo-container-1'},
97+
{action: 'moveNode', id: 'neo-component-3', index: 3, parentId: 'neo-container-1'},
98+
{action: 'moveNode', id: 'neo-component-4', index: 4, parentId: 'neo-container-1'},
99+
{action: 'moveNode', id: 'neo-component-5', index: 5, parentId: 'neo-container-1'},
100+
{action: 'moveNode', id: 'neo-component-6', index: 6, parentId: 'neo-container-1'},
101+
{action: 'removeNode', id: 'neo-vnode-1'}
102+
]);
103+
});
104+
105+
test('Wrap Container Items & Change Item Attributes', () => {
106+
oldVdom =
107+
{id: 'neo-container-1', cn: [
108+
{id: 'neo-component-1'},
109+
{id: 'neo-component-2'},
110+
{id: 'neo-component-3'},
111+
{id: 'neo-component-4'},
112+
{id: 'neo-component-5'},
113+
{id: 'neo-component-6'}
114+
]};
115+
116+
let oldVnode = VdomHelper.create({vdom: oldVdom}).vnode;
117+
118+
vdom =
119+
{id: 'neo-container-1', cn: [
120+
{id: 'neo-vnode-1', cn: [
121+
{id: 'neo-vnode-2', cn: [
122+
{id: 'neo-component-1'},
123+
{id: 'neo-component-2', style: {backgroundColor: 'red'}},
124+
{id: 'neo-component-3'},
125+
{id: 'neo-component-4', cls: ['custom-cls']},
126+
{id: 'neo-component-5'},
127+
{id: 'neo-component-6'}
128+
]}
129+
]}
130+
]};
131+
132+
let {deltas, vnode} = VdomHelper.update({vdom, vnode: oldVnode});
133+
134+
expect(deltas.length).toBe(9);
135+
136+
expect(deltas).toEqual([
137+
{
138+
action : 'insertNode',
139+
index : 0,
140+
outerHTML: '<div id="neo-vnode-1"><div id="neo-vnode-2"></div></div>',
141+
parentId : 'neo-container-1'
142+
},
143+
{action: 'moveNode', id: 'neo-component-1', index: 0, parentId: 'neo-vnode-2'},
144+
{action: 'moveNode', id: 'neo-component-2', index: 1, parentId: 'neo-vnode-2'},
145+
{ id: 'neo-component-2', style: {backgroundColor: 'red'}},
146+
{action: 'moveNode', id: 'neo-component-3', index: 2, parentId: 'neo-vnode-2'},
147+
{action: 'moveNode', id: 'neo-component-4', index: 3, parentId: 'neo-vnode-2'},
148+
{ id: 'neo-component-4', cls: {add: ['custom-cls']}},
149+
{action: 'moveNode', id: 'neo-component-5', index: 4, parentId: 'neo-vnode-2'},
150+
{action: 'moveNode', id: 'neo-component-6', index: 5, parentId: 'neo-vnode-2'}
151+
]);
152+
});
153+
154+
test('Unwrap Container Items & Change Item Attributes', () => {
155+
oldVdom =
156+
{id: 'neo-container-1', cn: [
157+
{id: 'neo-vnode-1', cn: [
158+
{id: 'neo-vnode-2', cn: [
159+
{id: 'neo-component-1'},
160+
{id: 'neo-component-2', style: {backgroundColor: 'red'}},
161+
{id: 'neo-component-3'},
162+
{id: 'neo-component-4', cls: ['custom-cls']},
163+
{id: 'neo-component-5'},
164+
{id: 'neo-component-6'}
165+
]}
166+
]}
167+
]};
168+
169+
let oldVnode = VdomHelper.create({vdom: oldVdom}).vnode;
170+
171+
vdom =
172+
{id: 'neo-container-1', cn: [
173+
{id: 'neo-component-1'},
174+
{id: 'neo-component-2'},
175+
{id: 'neo-component-3'},
176+
{id: 'neo-component-4'},
177+
{id: 'neo-component-5'},
178+
{id: 'neo-component-6'}
179+
]};
180+
181+
let {deltas, vnode} = VdomHelper.update({vdom, vnode: oldVnode});
182+
183+
expect(deltas.length).toBe(9);
184+
185+
expect(deltas).toEqual([
186+
{action: 'moveNode', id: 'neo-component-1', index: 1, parentId: 'neo-container-1'},
187+
{action: 'moveNode', id: 'neo-component-2', index: 2, parentId: 'neo-container-1'},
188+
{id: 'neo-component-2', style: {backgroundColor: null}},
189+
{action: 'moveNode', id: 'neo-component-3', index: 3, parentId: 'neo-container-1'},
190+
{action: 'moveNode', id: 'neo-component-4', index: 4, parentId: 'neo-container-1'},
191+
{id: 'neo-component-4', cls: {remove: ['custom-cls']}},
192+
{action: 'moveNode', id: 'neo-component-5', index: 5, parentId: 'neo-container-1'},
193+
{action: 'moveNode', id: 'neo-component-6', index: 6, parentId: 'neo-container-1'},
194+
{action: 'removeNode', id: 'neo-vnode-1'}
195+
]);
196+
});
197+
});

0 commit comments

Comments
 (0)