~repos /atoms-element
git clone https://pyrossh.dev/repos/atoms-element.git
A simple web component library for defining your custom elements. It works on both client and server.
1b0ad9c1
—
Peter John 4 years ago
fix tests
- src/index.js +3 -3
- test/index.test.js +31 -4
src/index.js
CHANGED
|
@@ -441,10 +441,10 @@ export class AtomsElement extends BaseElement {
|
|
|
441
441
|
}
|
|
442
442
|
|
|
443
443
|
render() {
|
|
444
|
+
this.funcKeys.forEach((key) => {
|
|
445
|
+
this.props[key] = this[key];
|
|
446
|
+
});
|
|
444
447
|
if (isBrowser) {
|
|
445
|
-
this.funcKeys.forEach((key) => {
|
|
446
|
-
this.props[key] = this[key];
|
|
447
|
-
});
|
|
448
448
|
render(this.renderer(this.props), this);
|
|
449
449
|
} else {
|
|
450
450
|
__setCurrent__(this);
|
test/index.test.js
CHANGED
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
boolean,
|
|
7
7
|
string,
|
|
8
8
|
array,
|
|
9
|
+
func,
|
|
9
10
|
object,
|
|
10
11
|
setLogError,
|
|
11
12
|
defineElement,
|
|
@@ -228,9 +229,31 @@ test('render single template', async () => {
|
|
|
228
229
|
});
|
|
229
230
|
|
|
230
231
|
test('render multi template', async () => {
|
|
232
|
+
const template = html`
|
|
233
|
+
<div>
|
|
234
|
+
${[1, 2].map(
|
|
235
|
+
(v) => html`
|
|
231
|
-
|
|
236
|
+
<app-item meta="${{ index: v }}" @click=${() => {}} .handleClick=${() => {}}>
|
|
237
|
+
<button @click=${() => {}}>+</button>
|
|
238
|
+
</app-item>
|
|
239
|
+
`,
|
|
240
|
+
)}
|
|
241
|
+
</div>
|
|
242
|
+
`;
|
|
232
243
|
const res = await render(template);
|
|
244
|
+
expect(res).toEqual(`
|
|
245
|
+
<div>
|
|
246
|
+
|
|
233
|
-
|
|
247
|
+
<app-item meta="{'index':1}">
|
|
248
|
+
<button>+</button>
|
|
249
|
+
</app-item>
|
|
250
|
+
|
|
251
|
+
<app-item meta="{'index':2}">
|
|
252
|
+
<button>+</button>
|
|
253
|
+
</app-item>
|
|
254
|
+
|
|
255
|
+
</div>
|
|
256
|
+
`);
|
|
234
257
|
});
|
|
235
258
|
|
|
236
259
|
test('defineElement', async () => {
|
|
@@ -239,13 +262,15 @@ test('defineElement', async () => {
|
|
|
239
262
|
address: object({
|
|
240
263
|
street: string.isRequired,
|
|
241
264
|
}).isRequired,
|
|
265
|
+
renderItem: func(),
|
|
242
266
|
};
|
|
243
|
-
const AppItem = ({ perPage, address: { street } }) => {
|
|
267
|
+
const AppItem = ({ perPage, address: { street }, renderItem }) => {
|
|
244
268
|
const [count] = useState(0);
|
|
245
269
|
return html`
|
|
246
270
|
<div perPage=${perPage}>
|
|
247
271
|
<p>street: ${street}</p>
|
|
248
272
|
<p>count: ${count}</p>
|
|
273
|
+
${renderItem()}
|
|
249
274
|
</div>
|
|
250
275
|
`;
|
|
251
276
|
};
|
|
@@ -255,12 +280,14 @@ test('defineElement', async () => {
|
|
|
255
280
|
{ name: 'address', value: JSON.stringify({ street: '123' }).replace(/"/g, `'`) },
|
|
256
281
|
{ name: 'perpage', value: '1' },
|
|
257
282
|
]);
|
|
283
|
+
instance.renderItem = () => html`<div><p>render item 1</p></div>`;
|
|
258
|
-
expect(Clazz.observedAttributes).toEqual(['perpage', 'address']);
|
|
284
|
+
expect(Clazz.observedAttributes).toEqual(['perpage', 'address', 'renderitem']);
|
|
259
285
|
const res = await instance.render();
|
|
260
286
|
expect(res).toEqual(`
|
|
261
287
|
<div perPage="1">
|
|
262
288
|
<p>street: 123</p>
|
|
263
289
|
<p>count: 0</p>
|
|
290
|
+
<div><p>render item 1</p></div>
|
|
264
291
|
</div>
|
|
265
292
|
`);
|
|
266
293
|
});
|