/
createClass.spec.browser.ts
122 lines (111 loc) · 3 KB
/
createClass.spec.browser.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import {expect} from "chai";
import {render} from "../../DOM/rendering";
import createClass from "../createClass";
import createElement from "../../factories/createElement";
import {innerHTML} from "../../tools/utils";
describe('Components createClass (non-JSX)', () => {
let container;
beforeEach(() => {
container = document.createElement('div');
container.style.display = 'none';
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
render(null, container);
});
const BasicComponent = createClass({
render() {
return createElement('div', null, 'Hello world!');
}
});
it('should render a basic component', () => {
render(createElement(BasicComponent as Function), container);
expect(container.innerHTML).to.equal(innerHTML('<div>Hello world!</div>'));
});
it('should render a basic component with lifecycle', () => {
let componentWillUpdate = false;
const LifecycleComponent1 = createClass({
componentWillUpdate() {
componentWillUpdate = true;
},
render() {
return createElement('div', null, 'Hello world!');
}
});
render(createElement(LifecycleComponent1 as Function, {}), container);
render(createElement(LifecycleComponent1 as Function, {}), container);
expect(componentWillUpdate).to.equal(true);
});
it('should have context available in getInitialState', done => {
let context;
let context2;
const BoundComponent = createClass({
getInitialState() {
expect(this.context)
},
foo() {
context2 = this;
},
render() {
return createElement('div', null, 'Hello world!');
}
});
render(createElement(BoundComponent as Function), container);
setTimeout(() => {
expect(context === context2).to.equal(true);
done();
}, 2);
});
it('should have propTypes on created class', () => {
const propTypes = {
value() {
}
};
const Component = createClass({
propTypes,
render() {
return createElement('div', null, 'Hello world!');
}
});
expect(Component.propTypes).to.equal(propTypes);
});
it('should not have propTypes on created class when not specified', () => {
const Component = createClass({
render() {
return createElement('div', null, 'Hello world!');
}
});
expect(Component.propTypes).to.be.undefined;
});
it('should have mixins on created class', () => {
const mixins = [{
func1: () => true
}];
const Component = createClass({
mixins,
render() {
return createElement('div', null, 'Hello world!');
}
});
render(createElement(Component as Function, {}), container);
expect(Component.mixins).to.have.property('func1');
});
it('should have nested mixins on created class', () => {
const mixins = [{
mixins: [{
mixins: [{
nestedMixin: () => true,
}]
}]
}];
const Component = createClass({
mixins,
render() {
return createElement('div', null, 'Hello world!');
}
});
render(createElement(Component as Function, {}), container);
expect(Component.mixins).to.have.property('nestedMixin');
});
});