Skip to content

Commit fe2994a

Browse files
developitdevelopit
committed
Add tests for shallowRender(), and reorganize tests to match new function names
1 parent aa02ea6 commit fe2994a

File tree

1 file changed

+147
-105
lines changed

1 file changed

+147
-105
lines changed

‎test/index.js

Lines changed: 147 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,191 @@
1-
import render from '../src';
1+
import { default as defaultRender, render, shallowRender } from '../src';
22
import { h, Component } from 'preact';
33
import { expect, use } from 'chai';
44
import { spy, match } from 'sinon';
55
import sinonChai from 'sinon-chai';
66
use(sinonChai);
77

88
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);
9+
describe('default()', () => {
10+
it('should be render()', () => {
11+
expect(defaultRender).to.equal(render);
1512
});
13+
});
1614

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);
15+
describe('render()', () => {
16+
it('should be a function', () => {
17+
expect(render).to.be.a('function');
2218
});
23-
});
2419

25-
describe('Functional Components', () => {
26-
it('should render functional components', () => {
27-
let Test = spy( ({ foo, children }) => <div foo={foo}>{ children }</div> );
20+
describe('Basic JSX', () => {
21+
it('should render JSX', () => {
22+
let rendered = render(<div class="foo">bar</div>),
23+
expected = `<div class="foo">bar</div>`;
2824

29-
let rendered = render(<Test foo="test">content</Test>);
25+
expect(rendered).to.equal(expected);
26+
});
3027

31-
expect(rendered)
32-
.to.equal(`<div foo="test">content</div>`);
28+
it('should omit null and undefined attributes', () => {
29+
let rendered = render(<div a={null} b={undefined} />),
30+
expected = `<div></div>`;
3331

34-
expect(Test)
35-
.to.have.been.calledOnce
36-
.and.calledWithExactly(
37-
match({
38-
foo: 'test',
39-
children: ['content']
40-
})
41-
);
32+
expect(rendered).to.equal(expected);
33+
});
4234
});
4335

44-
it('should render functional components within JSX', () => {
45-
let Test = spy( ({ foo, children }) => <div foo={foo}>{ children }</div> );
36+
describe('Functional Components', () => {
37+
it('should render functional components', () => {
38+
let Test = spy( ({ foo, children }) => <div foo={foo}>{ children }</div> );
4639

47-
let rendered = render(
48-
<section>
49-
<Test foo={1}><span>asdf</span></Test>
50-
</section>
51-
);
40+
let rendered = render(<Test foo="test">content</Test>);
41+
42+
expect(rendered)
43+
.to.equal(`<div foo="test">content</div>`);
44+
45+
expect(Test)
46+
.to.have.been.calledOnce
47+
.and.calledWithExactly(
48+
match({
49+
foo: 'test',
50+
children: ['content']
51+
})
52+
);
53+
});
54+
55+
it('should render functional components within JSX', () => {
56+
let Test = spy( ({ foo, children }) => <div foo={foo}>{ children }</div> );
5257

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-
})
58+
let rendered = render(
59+
<section>
60+
<Test foo={1}><span>asdf</span></Test>
61+
</section>
6562
);
63+
64+
expect(rendered)
65+
.to.equal(`<section><div foo="1"><span>asdf</span></div></section>`);
66+
67+
expect(Test)
68+
.to.have.been.calledOnce
69+
.and.calledWithExactly(
70+
match({
71+
foo: 1,
72+
children: [
73+
match({ nodeName:'span', children:['asdf'] })
74+
]
75+
})
76+
);
77+
});
6678
});
67-
});
6879

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>;
80+
describe('Classical Components', () => {
81+
it('should render classical components', () => {
82+
class Test extends Component {
83+
render({ foo, children }, state) {
84+
return <div foo={foo}>{ children }</div>;
85+
}
7486
}
75-
}
7687

77-
Test = spy(Test);
78-
spy(Test.prototype, 'render');
88+
Test = spy(Test);
89+
spy(Test.prototype, 'render');
7990

80-
let rendered = render(<Test foo="test">content</Test>);
91+
let rendered = render(<Test foo="test">content</Test>);
8192

82-
expect(rendered)
83-
.to.equal(`<div foo="test">content</div>`);
93+
expect(rendered)
94+
.to.equal(`<div foo="test">content</div>`);
8495

85-
expect(Test).to.have.been.calledOnce;
96+
expect(Test).to.have.been.calledOnce;
97+
98+
expect(Test.prototype.render)
99+
.to.have.been.calledOnce
100+
.and.calledWithExactly(
101+
match({
102+
foo: 'test',
103+
children: ['content']
104+
}),
105+
match({}) // empty state
106+
);
107+
});
86108

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
109+
it('should render classical components within JSX', () => {
110+
class Test extends Component {
111+
render({ foo, children }, state) {
112+
return <div foo={foo}>{ children }</div>;
113+
}
114+
}
115+
116+
Test = spy(Test);
117+
spy(Test.prototype, 'render');
118+
119+
let rendered = render(
120+
<section>
121+
<Test foo={1}><span>asdf</span></Test>
122+
</section>
95123
);
124+
125+
expect(rendered)
126+
.to.equal(`<section><div foo="1"><span>asdf</span></div></section>`);
127+
128+
expect(Test).to.have.been.calledOnce;
129+
130+
expect(Test.prototype.render)
131+
.to.have.been.calledOnce
132+
.and.calledWithExactly(
133+
match({
134+
foo: 1,
135+
children: [
136+
match({ nodeName:'span', children:['asdf'] })
137+
]
138+
}),
139+
match({}) // empty state
140+
);
141+
});
96142
});
97143

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-
}
144+
describe('className / class massaging', () => {
145+
it('should render class using className', () => {
146+
let rendered = render(<div className="foo bar" />);
147+
expect(rendered).to.equal('<div class="foo bar"></div>');
148+
});
149+
150+
it('should render class using class', () => {
151+
let rendered = render(<div class="foo bar" />);
152+
expect(rendered).to.equal('<div class="foo bar"></div>');
153+
});
154+
155+
it('should prefer className over class', () => {
156+
let rendered = render(<div class="foo" className="foo bar" />);
157+
expect(rendered).to.equal('<div class="foo bar"></div>');
158+
});
159+
});
160+
});
104161

105-
Test = spy(Test);
106-
spy(Test.prototype, 'render');
162+
describe('shallowRender()', () => {
163+
it('should not render nested components', () => {
164+
let Test = spy( ({ foo, children }) => <div bar={foo}><b>test child</b>{ children }</div> );
165+
Test.displayName = 'Test';
107166

108-
let rendered = render(
167+
let rendered = shallowRender(
109168
<section>
110169
<Test foo={1}><span>asdf</span></Test>
111170
</section>
112171
);
113172

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-
);
173+
expect(rendered).to.equal(`<section><Test foo="1"><span>asdf</span></Test></section>`);
174+
expect(Test).not.to.have.been.called;
130175
});
131-
});
132176

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>');
137-
});
177+
it('should always render root component', () => {
178+
let Test = spy( ({ foo, children }) => <div bar={foo}><b>test child</b>{ children }</div> );
179+
Test.displayName = 'Test';
138180

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>');
142-
});
181+
let rendered = shallowRender(
182+
<Test foo={1}>
183+
<span>asdf</span>
184+
</Test>
185+
);
143186

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>');
187+
expect(rendered).to.equal(`<div bar="1"><b>test child</b><span>asdf</span></div>`);
188+
expect(Test).to.have.been.calledOnce;
147189
});
148190
});
149191
});

0 commit comments

Comments
 (0)