/
children.js
129 lines (104 loc) · 3.35 KB
/
children.js
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
123
124
125
126
127
128
129
var ComponentTree = require('react-component-tree'),
ComponentPlayground =
require('../../../src/components/component-playground.jsx');
describe('ComponentPlayground component', function() {
var component,
params,
childParams;
function render(extraParams) {
// Alow tests to extend fixture before rendering
_.merge(params, extraParams);
component = ComponentTree.render({
component: ComponentPlayground,
snapshot: params,
container: document.createElement('div')
});
if (params.component) {
childParams = component.children.preview.call(component);
}
}
beforeEach(function() {
// Don't render any children
sinon.stub(ComponentTree.loadChild, 'loadChild');
params = {
components: {
FirstComponent: {
class: 'FirstComponent',
fixtures: {
'default state': {}
}
}
},
router: {
routeLink: sinon.spy()
}
};
});
afterEach(function() {
ComponentTree.loadChild.loadChild.restore();
})
describe('children', function() {
it('should not render child without selected fixture', function() {
render();
expect(ComponentTree.loadChild.loadChild).to.not.have.been.called;
});
it('should render child with selected fixture', function() {
render({
component: 'FirstComponent',
fixture: 'default state'
});
expect(ComponentTree.loadChild.loadChild).to.have.been.called;
});
describe('with fixture contents', function() {
beforeEach(function() {
_.assign(params, {
component: 'FirstComponent',
fixture: 'default state',
// Children draw their props from state.fixtureContents. Generating
// state from props is tested in the state.js suite
state: {
fixtureContents: {
width: 200,
height: 100,
state: {
paused: true
}
},
fixtureChange: 155
}
});
});
it('should send component class to preview child', function() {
render();
expect(childParams.component)
.to.equal(params.components['FirstComponent'].class);
});
it('should send fixture contents to preview child', function() {
render();
var fixtureContents = component.state.fixtureContents;
expect(childParams.width).to.equal(fixtureContents.width);
expect(childParams.height).to.equal(fixtureContents.height);
});
it('should not send state as prop to preview child', function() {
render();
var fixtureContents = component.state.fixtureContents;
expect(childParams.state).to.be.undefined;
});
it('should use fixture component, name and change id as key for ' +
'preview child', function() {
render();
var fixtureChange = component.state.fixtureChange;
expect(childParams.key).to.equal(
'FirstComponent-default state-' + fixtureChange);
});
it('should clone fixture contents sent to child', function() {
var obj = {};
params.state.fixtureContents.nested = {
shouldBeCloned: obj
};
render();
expect(childParams.nested.shouldBeCloned).to.not.equal(obj);
});
});
});
});