202 lines
3.9 KiB
JavaScript
202 lines
3.9 KiB
JavaScript
|
import { h } from '../../src/preact';
|
||
|
import { VNode } from '../../src/vnode';
|
||
|
import { expect } from 'chai';
|
||
|
|
||
|
/*eslint-env browser, mocha */
|
||
|
|
||
|
/** @jsx h */
|
||
|
|
||
|
let flatten = obj => JSON.parse(JSON.stringify(obj));
|
||
|
|
||
|
describe('h(jsx)', () => {
|
||
|
it('should return a VNode', () => {
|
||
|
let r;
|
||
|
expect( () => r = h('foo') ).not.to.throw();
|
||
|
expect(r).to.be.an('object');
|
||
|
expect(r).to.be.an.instanceof(VNode);
|
||
|
expect(r).to.have.property('nodeName', 'foo');
|
||
|
expect(r).to.have.property('attributes', undefined);
|
||
|
expect(r).to.have.property('children', undefined);
|
||
|
});
|
||
|
|
||
|
it('should perserve raw attributes', () => {
|
||
|
let attrs = { foo:'bar', baz:10, func:()=>{} },
|
||
|
r = h('foo', attrs);
|
||
|
expect(r).to.be.an('object')
|
||
|
.with.property('attributes')
|
||
|
.that.deep.equals(attrs);
|
||
|
});
|
||
|
|
||
|
it('should support element children', () => {
|
||
|
let r = h(
|
||
|
'foo',
|
||
|
null,
|
||
|
h('bar'),
|
||
|
h('baz')
|
||
|
);
|
||
|
|
||
|
expect(r).to.be.an('object')
|
||
|
.with.property('children')
|
||
|
.that.deep.equals([
|
||
|
new VNode('bar'),
|
||
|
new VNode('baz')
|
||
|
]);
|
||
|
});
|
||
|
|
||
|
it('should support multiple element children, given as arg list', () => {
|
||
|
let r = h(
|
||
|
'foo',
|
||
|
null,
|
||
|
h('bar'),
|
||
|
h('baz', null, h('test'))
|
||
|
);
|
||
|
|
||
|
r = flatten(r);
|
||
|
|
||
|
expect(r).to.be.an('object')
|
||
|
.with.property('children')
|
||
|
.that.deep.equals([
|
||
|
{ nodeName:'bar' },
|
||
|
{ nodeName:'baz', children:[
|
||
|
{ nodeName:'test' }
|
||
|
]}
|
||
|
]);
|
||
|
});
|
||
|
|
||
|
it('should handle multiple element children, given as an array', () => {
|
||
|
let r = h(
|
||
|
'foo',
|
||
|
null,
|
||
|
[
|
||
|
h('bar'),
|
||
|
h('baz', null, h('test'))
|
||
|
]
|
||
|
);
|
||
|
|
||
|
r = flatten(r);
|
||
|
|
||
|
expect(r).to.be.an('object')
|
||
|
.with.property('children')
|
||
|
.that.deep.equals([
|
||
|
{ nodeName:'bar' },
|
||
|
{ nodeName:'baz', children:[
|
||
|
{ nodeName:'test' }
|
||
|
]}
|
||
|
]);
|
||
|
});
|
||
|
|
||
|
it('should handle multiple children, flattening one layer as needed', () => {
|
||
|
let r = h(
|
||
|
'foo',
|
||
|
null,
|
||
|
h('bar'),
|
||
|
[
|
||
|
h('baz', null, h('test'))
|
||
|
]
|
||
|
);
|
||
|
|
||
|
r = flatten(r);
|
||
|
|
||
|
expect(r).to.be.an('object')
|
||
|
.with.property('children')
|
||
|
.that.deep.equals([
|
||
|
{ nodeName:'bar' },
|
||
|
{ nodeName:'baz', children:[
|
||
|
{ nodeName:'test' }
|
||
|
]}
|
||
|
]);
|
||
|
});
|
||
|
|
||
|
it('should support nested children', () => {
|
||
|
const m = x => h(x);
|
||
|
expect(
|
||
|
h('foo', null, m('a'), [m('b'), m('c')], m('d'))
|
||
|
).to.have.property('children').that.eql(['a', 'b', 'c', 'd'].map(m));
|
||
|
|
||
|
expect(
|
||
|
h('foo', null, [m('a'), [m('b'), m('c')], m('d')])
|
||
|
).to.have.property('children').that.eql(['a', 'b', 'c', 'd'].map(m));
|
||
|
|
||
|
expect(
|
||
|
h('foo', { children: [m('a'), [m('b'), m('c')], m('d')] })
|
||
|
).to.have.property('children').that.eql(['a', 'b', 'c', 'd'].map(m));
|
||
|
|
||
|
expect(
|
||
|
h('foo', { children: [[m('a'), [m('b'), m('c')], m('d')]] })
|
||
|
).to.have.property('children').that.eql(['a', 'b', 'c', 'd'].map(m));
|
||
|
|
||
|
expect(
|
||
|
h('foo', { children: m('a') })
|
||
|
).to.have.property('children').that.eql([m('a')]);
|
||
|
|
||
|
expect(
|
||
|
h('foo', { children: 'a' })
|
||
|
).to.have.property('children').that.eql(['a']);
|
||
|
});
|
||
|
|
||
|
it('should support text children', () => {
|
||
|
let r = h(
|
||
|
'foo',
|
||
|
null,
|
||
|
'textstuff'
|
||
|
);
|
||
|
|
||
|
expect(r).to.be.an('object')
|
||
|
.with.property('children')
|
||
|
.with.length(1)
|
||
|
.with.property('0')
|
||
|
.that.equals('textstuff');
|
||
|
});
|
||
|
|
||
|
it('should merge adjacent text children', () => {
|
||
|
let r = h(
|
||
|
'foo',
|
||
|
null,
|
||
|
'one',
|
||
|
'two',
|
||
|
h('bar'),
|
||
|
'three',
|
||
|
h('baz'),
|
||
|
h('baz'),
|
||
|
'four',
|
||
|
null,
|
||
|
'five',
|
||
|
'six'
|
||
|
);
|
||
|
|
||
|
r = flatten(r);
|
||
|
|
||
|
expect(r).to.be.an('object')
|
||
|
.with.property('children')
|
||
|
.that.deep.equals([
|
||
|
'onetwo',
|
||
|
{ nodeName:'bar' },
|
||
|
'three',
|
||
|
{ nodeName:'baz' },
|
||
|
{ nodeName:'baz' },
|
||
|
'fourfivesix'
|
||
|
]);
|
||
|
});
|
||
|
|
||
|
it('should merge nested adjacent text children', () => {
|
||
|
let r = h(
|
||
|
'foo',
|
||
|
null,
|
||
|
'one',
|
||
|
['two', null, 'three'],
|
||
|
null,
|
||
|
['four', null, 'five', null],
|
||
|
'six',
|
||
|
null
|
||
|
);
|
||
|
|
||
|
r = flatten(r);
|
||
|
|
||
|
expect(r).to.be.an('object')
|
||
|
.with.property('children')
|
||
|
.that.deep.equals([
|
||
|
'onetwothreefourfivesix'
|
||
|
]);
|
||
|
});
|
||
|
});
|