|
|
|
@ -6,34 +6,57 @@ describe('snabbdom', function () {
|
|
|
|
|
it('can be used as a jsxFactory method', function () {
|
|
|
|
|
const vnode = <div title="Hello World">Hello World</div>;
|
|
|
|
|
|
|
|
|
|
assert.strictEqual(JSON.stringify(vnode), JSON.stringify({
|
|
|
|
|
assert.deepStrictEqual(vnode, {
|
|
|
|
|
sel: 'div',
|
|
|
|
|
data: { title: 'Hello World' },
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'Hello World',
|
|
|
|
|
}));
|
|
|
|
|
key: undefined
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('creates text property for text only child', function () {
|
|
|
|
|
const vnode = <div>foo bar</div>;
|
|
|
|
|
|
|
|
|
|
assert.strictEqual(JSON.stringify(vnode), JSON.stringify({
|
|
|
|
|
assert.deepStrictEqual(vnode, {
|
|
|
|
|
sel: 'div',
|
|
|
|
|
data: {},
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'foo bar',
|
|
|
|
|
}));
|
|
|
|
|
key: undefined
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('creates an array of children for multiple children', function () {
|
|
|
|
|
const vnode = <div>{'foo'}{'bar'}</div>;
|
|
|
|
|
|
|
|
|
|
assert.strictEqual(JSON.stringify(vnode), JSON.stringify({
|
|
|
|
|
assert.deepStrictEqual(vnode, {
|
|
|
|
|
sel: 'div',
|
|
|
|
|
data: {},
|
|
|
|
|
children: [
|
|
|
|
|
{ text: 'foo' },
|
|
|
|
|
{ text: 'bar' },
|
|
|
|
|
]
|
|
|
|
|
}));
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'foo',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'bar',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: undefined,
|
|
|
|
|
key: undefined
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('flattens children', function () {
|
|
|
|
@ -45,16 +68,47 @@ describe('snabbdom', function () {
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
assert.strictEqual(JSON.stringify(vnode), JSON.stringify({
|
|
|
|
|
assert.deepStrictEqual(vnode, {
|
|
|
|
|
sel: 'section',
|
|
|
|
|
data: {},
|
|
|
|
|
children: [
|
|
|
|
|
{ sel: 'h1', data: {}, text: 'A Heading' },
|
|
|
|
|
{ text: 'some description' },
|
|
|
|
|
{ sel: 'span', data: {}, text: 'part1' },
|
|
|
|
|
{ sel: 'span', data: {}, text: 'part2' },
|
|
|
|
|
{
|
|
|
|
|
sel: 'h1',
|
|
|
|
|
data: {},
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'A Heading',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'some description',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: 'span',
|
|
|
|
|
data: {},
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'part1',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: 'span',
|
|
|
|
|
data: {},
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'part2',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}));
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: undefined,
|
|
|
|
|
key: undefined
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('removes falsey children', function () {
|
|
|
|
@ -76,17 +130,55 @@ describe('snabbdom', function () {
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
assert.strictEqual(JSON.stringify(vnode), JSON.stringify({
|
|
|
|
|
assert.deepStrictEqual(vnode, {
|
|
|
|
|
sel: 'div',
|
|
|
|
|
data: {},
|
|
|
|
|
children: [
|
|
|
|
|
{ text: 'Login Form' },
|
|
|
|
|
{ text: 'Login Attempts: ' },
|
|
|
|
|
{ text: '0' },
|
|
|
|
|
{ text: 'Logged In: ' },
|
|
|
|
|
{ text: 'true' },
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'Login Form',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'Login Attempts: ',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: '0',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'Logged In: ',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'true',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}));
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: undefined,
|
|
|
|
|
key: undefined
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('works with a function component', function () {
|
|
|
|
@ -100,19 +192,71 @@ describe('snabbdom', function () {
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
assert.strictEqual(JSON.stringify(vnode), JSON.stringify({
|
|
|
|
|
assert.deepStrictEqual(vnode, {
|
|
|
|
|
sel: 'div',
|
|
|
|
|
data: {},
|
|
|
|
|
children: [
|
|
|
|
|
{ sel: 'a', data: { attrs: { href: 'https://github.com/snabbdom/snabbdom' } }, text: 'Snabbdom' },
|
|
|
|
|
{ text: 'and tsx' },
|
|
|
|
|
{ sel: 'span', data: {}, text: 'work' },
|
|
|
|
|
{ sel: 'span', data: {}, text: 'like' },
|
|
|
|
|
{ sel: 'span', data: {}, text: 'a' },
|
|
|
|
|
{ sel: 'span', data: {}, text: 'charm!' },
|
|
|
|
|
{ text: '💃🕺🎉' },
|
|
|
|
|
{
|
|
|
|
|
sel: 'a',
|
|
|
|
|
data: { attrs: { href: 'https://github.com/snabbdom/snabbdom' } },
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'Snabbdom',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'and tsx',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: 'span',
|
|
|
|
|
data: {},
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'work',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: 'span',
|
|
|
|
|
data: {},
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'like',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: 'span',
|
|
|
|
|
data: {},
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'a',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: 'span',
|
|
|
|
|
data: {},
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: 'charm!',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
sel: undefined,
|
|
|
|
|
data: undefined,
|
|
|
|
|
children: undefined,
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: '💃🕺🎉',
|
|
|
|
|
key: undefined
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}));
|
|
|
|
|
elm: undefined,
|
|
|
|
|
text: undefined,
|
|
|
|
|
key: undefined
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|