Skip to content

Commit a472866

Browse files
developitdevelopit
committed
Test for 3.3.0 + shallow + dangerouslySetInnerHTML 
1 parent 0cdf24c commit a472866

File tree

2 files changed

+201
-140
lines changed

2 files changed

+201
-140
lines changed

‎test/index.js

Lines changed: 10 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,19 @@
1-
import render from '../src';
2-
import { h, Component } from 'preact';
3-
import { expect, use } from 'chai';
4-
import { spy, match } from 'sinon';
5-
import sinonChai from 'sinon-chai';
6-
use(sinonChai);
1+
import renderToString, { render, shallowRender } from '../src';
2+
import { expect } from 'chai';
73

84
describe('render-to-string', () => {
9-
describe('Basic JSX', () => {
10-
it('should render JSX', () => {
11-
let rendered = render(<div class="foo">bar</div>),
12-
expected = `<div class="foo">bar</div>`;
13-
14-
expect(rendered).to.equal(expected);
15-
});
16-
17-
it('should omit null and undefined attributes', () => {
18-
let rendered = render(<div a={null} b={undefined} />),
19-
expected = `<div></div>`;
20-
21-
expect(rendered).to.equal(expected);
22-
});
23-
});
24-
25-
describe('Functional Components', () => {
26-
it('should render functional components', () => {
27-
let Test = spy( ({ foo, children }) => <div foo={foo}>{ children }</div> );
28-
29-
let rendered = render(<Test foo="test">content</Test>);
30-
31-
expect(rendered)
32-
.to.equal(`<div foo="test">content</div>`);
33-
34-
expect(Test)
35-
.to.have.been.calledOnce
36-
.and.calledWithExactly(
37-
match({
38-
foo: 'test',
39-
children: ['content']
40-
})
41-
);
42-
});
43-
44-
it('should render functional components within JSX', () => {
45-
let Test = spy( ({ foo, children }) => <div foo={foo}>{ children }</div> );
46-
47-
let rendered = render(
48-
<section>
49-
<Test foo={1}><span>asdf</span></Test>
50-
</section>
51-
);
52-
53-
expect(rendered)
54-
.to.equal(`<section><div foo="1"><span>asdf</span></div></section>`);
55-
56-
expect(Test)
57-
.to.have.been.calledOnce
58-
.and.calledWithExactly(
59-
match({
60-
foo: 1,
61-
children: [
62-
match({ nodeName:'span', children:['asdf'] })
63-
]
64-
})
65-
);
66-
});
67-
});
68-
69-
describe('Classical Components', () => {
70-
it('should render classical components', () => {
71-
class Test extends Component {
72-
render({ foo, children }, state) {
73-
return <div foo={foo}>{ children }</div>;
74-
}
75-
}
76-
77-
Test = spy(Test);
78-
spy(Test.prototype, 'render');
79-
80-
let rendered = render(<Test foo="test">content</Test>);
81-
82-
expect(rendered)
83-
.to.equal(`<div foo="test">content</div>`);
84-
85-
expect(Test).to.have.been.calledOnce;
86-
87-
expect(Test.prototype.render)
88-
.to.have.been.calledOnce
89-
.and.calledWithExactly(
90-
match({
91-
foo: 'test',
92-
children: ['content']
93-
}),
94-
match({}) // empty state
95-
);
96-
});
97-
98-
it('should render classical components within JSX', () => {
99-
class Test extends Component {
100-
render({ foo, children }, state) {
101-
return <div foo={foo}>{ children }</div>;
102-
}
103-
}
104-
105-
Test = spy(Test);
106-
spy(Test.prototype, 'render');
107-
108-
let rendered = render(
109-
<section>
110-
<Test foo={1}><span>asdf</span></Test>
111-
</section>
112-
);
113-
114-
expect(rendered)
115-
.to.equal(`<section><div foo="1"><span>asdf</span></div></section>`);
116-
117-
expect(Test).to.have.been.calledOnce;
118-
119-
expect(Test.prototype.render)
120-
.to.have.been.calledOnce
121-
.and.calledWithExactly(
122-
match({
123-
foo: 1,
124-
children: [
125-
match({ nodeName:'span', children:['asdf'] })
126-
]
127-
}),
128-
match({}) // empty state
129-
);
130-
});
131-
});
132-
133-
describe('className / class massaging', () => {
134-
it('should render class using className', () => {
135-
let rendered = render(<div className="foo bar" />);
136-
expect(rendered).to.equal('<div class="foo bar"></div>');
5+
describe('exports', () => {
6+
it('exposes renderToString as default', () => {
7+
expect(renderToString).to.be.a('function');
1378
});
1389

139-
it('should render class using class', () => {
140-
let rendered = render(<div class="foo bar" />);
141-
expect(rendered).to.equal('<div class="foo bar"></div>');
10+
it('exposes render as a named export', () => {
11+
expect(render).to.be.a('function');
12+
expect(render).to.equal(renderToString);
14213
});
14314

144-
it('should prefer className over class', () => {
145-
let rendered = render(<div class="foo" className="foo bar" />);
146-
expect(rendered).to.equal('<div class="foo bar"></div>');
15+
it('exposes shallowRender as a named export', () => {
16+
expect(shallowRender).to.be.a('function');
14717
});
14818
});
14919
});

‎test/render.js

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
import { render, shallowRender } from '../src';
2+
import { h, Component } from 'preact';
3+
import { expect, use } from 'chai';
4+
import { spy, match } from 'sinon';
5+
import sinonChai from 'sinon-chai';
6+
use(sinonChai);
7+
8+
describe('render', () => {
9+
describe('Basic JSX', () => {
10+
it('should render JSX', () => {
11+
let rendered = render(<div class="foo">bar</div>),
12+
expected = `<div class="foo">bar</div>`;
13+
14+
expect(rendered).to.equal(expected);
15+
});
16+
17+
it('should omit null and undefined attributes', () => {
18+
let rendered = render(<div a={null} b={undefined} />),
19+
expected = `<div></div>`;
20+
21+
expect(rendered).to.equal(expected);
22+
});
23+
});
24+
25+
describe('Functional Components', () => {
26+
it('should render functional components', () => {
27+
let Test = spy( ({ foo, children }) => <div foo={foo}>{ children }</div> );
28+
29+
let rendered = render(<Test foo="test">content</Test>);
30+
31+
expect(rendered)
32+
.to.equal(`<div foo="test">content</div>`);
33+
34+
expect(Test)
35+
.to.have.been.calledOnce
36+
.and.calledWithExactly(
37+
match({
38+
foo: 'test',
39+
children: ['content']
40+
}),
41+
match({})
42+
);
43+
});
44+
45+
it('should render functional components within JSX', () => {
46+
let Test = spy( ({ foo, children }) => <div foo={foo}>{ children }</div> );
47+
48+
let rendered = render(
49+
<section>
50+
<Test foo={1}><span>asdf</span></Test>
51+
</section>
52+
);
53+
54+
expect(rendered)
55+
.to.equal(`<section><div foo="1"><span>asdf</span></div></section>`);
56+
57+
expect(Test)
58+
.to.have.been.calledOnce
59+
.and.calledWithExactly(
60+
match({
61+
foo: 1,
62+
children: [
63+
match({ nodeName:'span', children:['asdf'] })
64+
]
65+
}),
66+
match({})
67+
);
68+
});
69+
});
70+
71+
describe('Classical Components', () => {
72+
it('should render classical components', () => {
73+
class Test extends Component {
74+
render({ foo, children }, state) {
75+
return <div foo={foo}>{ children }</div>;
76+
}
77+
}
78+
79+
Test = spy(Test);
80+
spy(Test.prototype, 'render');
81+
82+
let rendered = render(<Test foo="test">content</Test>);
83+
84+
expect(rendered)
85+
.to.equal(`<div foo="test">content</div>`);
86+
87+
expect(Test).to.have.been.calledOnce;
88+
89+
expect(Test.prototype.render)
90+
.to.have.been.calledOnce
91+
.and.calledWithExactly(
92+
match({
93+
foo: 'test',
94+
children: ['content']
95+
}),
96+
match({}), // empty state
97+
match({}) // empty context
98+
);
99+
});
100+
101+
it('should render classical components within JSX', () => {
102+
class Test extends Component {
103+
render({ foo, children }, state) {
104+
return <div foo={foo}>{ children }</div>;
105+
}
106+
}
107+
108+
Test = spy(Test);
109+
spy(Test.prototype, 'render');
110+
111+
let rendered = render(
112+
<section>
113+
<Test foo={1}><span>asdf</span></Test>
114+
</section>
115+
);
116+
117+
expect(rendered)
118+
.to.equal(`<section><div foo="1"><span>asdf</span></div></section>`);
119+
120+
expect(Test).to.have.been.calledOnce;
121+
122+
expect(Test.prototype.render)
123+
.to.have.been.calledOnce
124+
.and.calledWithExactly(
125+
match({
126+
foo: 1,
127+
children: [
128+
match({ nodeName:'span', children:['asdf'] })
129+
]
130+
}),
131+
match({}), // empty state
132+
match({})
133+
);
134+
});
135+
});
136+
137+
describe('High-order components', () => {
138+
class Outer extends Component {
139+
render({ children, ...props }) {
140+
return <Inner {...props} a="b">child <span>{ children }</span></Inner>;
141+
}
142+
}
143+
144+
class Inner extends Component {
145+
render({ children, ...props }) {
146+
return <div id="inner" {...props} b="c" c="d">{ children }</div>;
147+
}
148+
}
149+
150+
it('should resolve+render high order components', () => {
151+
let rendered = render(<Outer a="a" b="b" p={1}>foo</Outer>);
152+
expect(rendered).to.equal('<div id="inner" a="b" b="c" p="1" c="d">child <span>foo</span></div>');
153+
});
154+
155+
it('should render child inline when shallow=true', () => {
156+
let rendered = shallowRender(<Outer a="a" b="b" p={1}>foo</Outer>);
157+
expect(rendered).to.equal('<Inner a="b" b="b" p="1">child <span>foo</span></Inner>');
158+
});
159+
});
160+
161+
describe('dangerouslySetInnerHTML', () => {
162+
it('should support dangerouslySetInnerHTML', () => {
163+
// some invalid HTML to make sure we're being flakey:
164+
let html = '<a href="foo">asdf</a> some text <ul><li>foo<li>bar</ul>';
165+
let rendered = render(<div id="f" dangerouslySetInnerHTML={{__html:html}} />);
166+
expect(rendered).to.equal(`<div id="f">${html}</div>`);
167+
});
168+
169+
it('should override children', () => {
170+
let rendered = render(<div dangerouslySetInnerHTML={{__html:'foo'}}><b>bar</b></div>);
171+
expect(rendered).to.equal('<div>foo</div>');
172+
});
173+
});
174+
175+
describe('className / class massaging', () => {
176+
it('should render class using className', () => {
177+
let rendered = render(<div className="foo bar" />);
178+
expect(rendered).to.equal('<div class="foo bar"></div>');
179+
});
180+
181+
it('should render class using class', () => {
182+
let rendered = render(<div class="foo bar" />);
183+
expect(rendered).to.equal('<div class="foo bar"></div>');
184+
});
185+
186+
it('should prefer className over class', () => {
187+
let rendered = render(<div class="foo" className="foo bar" />);
188+
expect(rendered).to.equal('<div class="foo bar"></div>');
189+
});
190+
});
191+
});

0 commit comments

Comments
 (0)