Skip to content

Commit a427647

Browse files
tklohttkloht
committed
fallback tests: fix lint errors, use sinon-chai
1 parent eb5d73c commit a427647

File tree

3 files changed

+96
-76
lines changed

3 files changed

+96
-76
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
"react-transform-hmr": "1.0.4",
7474
"simulant": "0.2.2",
7575
"sinon": "1.17.4",
76+
"sinon-chai": "2.8.0",
7677
"source-map-support": "0.4.1",
7778
"style-loader": "0.13.1",
7879
"webpack": "1.13.1",

‎tests/.eslintrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"rules": {
3+
"max-len": 0,
4+
},
5+
}

‎tests/VideoCoverFallback.spec.js

Lines changed: 90 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -5,154 +5,167 @@ import React from 'react';
55
import { shallow, mount } from 'enzyme';
66
import chai, { expect } from 'chai';
77
import chaiEnzyme from 'chai-enzyme';
8+
import sinonChai from 'sinon-chai';
9+
import dirtyChai from 'dirty-chai';
10+
chai.use(sinonChai);
11+
chai.use(dirtyChai);
812
chai.use(chaiEnzyme());
913
import sinon from 'sinon';
1014

11-
describe('VideoCoverFallback', function () {
12-
it('should update container ratio when mounted', function () {
15+
describe('VideoCoverFallback', () => {
16+
it('should update container ratio when mounted', () => {
1317
const spy = sinon.spy();
1418
class WithSpy extends VideoCoverFallback {
1519
updateContainerRatio = spy;
1620
}
17-
const wrapper = mount(<WithSpy />);
18-
expect(spy.calledOnce).to.be.true;
21+
mount(<WithSpy />);
22+
expect(spy).to.have.been.calledOnce();
1923
});
2024

21-
it('should call getResizeNotifier prop when mounted', function () {
25+
it('should call onFallbackDidMount prop when mounted', () => {
2226
const spy = sinon.spy();
23-
const wrapper = mount(<VideoCoverFallback getResizeNotifyer={spy} />)
24-
expect(spy.calledOnce).to.be.true;
27+
mount(<VideoCoverFallback onFallbackDidMount={spy} />);
28+
expect(spy).to.have.been.calledOnce();
2529
});
2630

27-
it('should pass this.updateContainerRatio as parameter in getResizeNotifier', function () {
31+
it('should pass this.updateContainerRatio as parameter in onFallbackWillUnmount', () => {
2832
let resizeNotifyer;
29-
const wrapper = mount(<VideoCoverFallback getResizeNotifyer={result => {
30-
resizeNotifyer = result;
31-
}} />)
33+
const wrapper = mount(<VideoCoverFallback
34+
onFallbackDidMount={result => {
35+
resizeNotifyer = result;
36+
}}
37+
/>);
3238
expect(resizeNotifyer).to.equal(wrapper.instance().updateContainerRatio);
3339
});
3440

35-
it('should initialize window-resize eventlisteners if props.remeasureOnWindowResize is set', function () {
41+
it('should initialize window-resize eventlisteners if props.remeasureOnWindowResize is set', () => {
3642
const spy = sinon.spy();
3743
class WithSpy extends VideoCoverFallback {
3844
initEventListeners = spy;
3945
}
40-
const wrapper = mount(<WithSpy remeasureOnWindowResize />);
41-
expect(spy.calledOnce).to.be.true;
46+
mount(<WithSpy remeasureOnWindowResize />);
47+
expect(spy).to.have.been.calledOnce();
4248
});
4349

44-
it('should NOT initialize window-resize eventlisteners if props.remeasureOnWindowResize is not set', function () {
50+
it('should NOT initialize window-resize eventlisteners if props.remeasureOnWindowResize is not set', () => {
4551
const spy = sinon.spy();
4652
class WithSpy extends VideoCoverFallback {
4753
initEventListeners = spy;
4854
}
49-
const wrapper = mount(<WithSpy />);
50-
expect(spy.calledOnce).to.be.false;
55+
mount(<WithSpy />);
56+
expect(spy).not.to.have.been.called();
5157
});
5258

53-
it('should remove eventlisteners before unmount', function () {
59+
it('should remove eventlisteners before unmount', () => {
5460
const spy = sinon.spy();
5561
class WithSpy extends VideoCoverFallback {
5662
removeEventListeners = spy;
5763
}
5864
const wrapper = mount(<WithSpy />);
5965
wrapper.unmount();
60-
expect(spy.calledOnce).to.be.true;
66+
expect(spy).to.have.been.calledOnce();
6167
});
6268

63-
it('should add/remove eventlisteners if props.remeasureOnWindowResize changes', function () {
69+
it('should add/remove eventlisteners if props.remeasureOnWindowResize changes', () => {
6470
const addSpy = sinon.spy();
6571
const removeSpy = sinon.spy();
6672
class WithSpy extends VideoCoverFallback {
6773
initEventListeners = addSpy;
6874
removeEventListeners = removeSpy;
6975
}
7076
const wrapper = mount(<WithSpy />);
71-
expect(addSpy.called).to.be.false;
72-
expect(removeSpy.called).to.be.false;
73-
wrapper.setProps({remeasureOnWindowResize: true});
74-
expect(addSpy.calledOnce).to.be.true;
75-
expect(removeSpy.called).to.be.false;
76-
wrapper.setProps({remeasureOnWindowResize: false});
77-
expect(addSpy.calledOnce).to.be.true;
78-
expect(removeSpy.calledOnce).to.be.true;
79-
})
80-
81-
it('should render a video tag inside a container-div', function() {
77+
expect(addSpy).not.to.have.been.called();
78+
expect(removeSpy).not.to.have.been.called();
79+
wrapper.setProps({ remeasureOnWindowResize: true });
80+
expect(addSpy).to.have.been.calledOnce();
81+
expect(removeSpy).not.to.have.been.called();
82+
wrapper.setProps({ remeasureOnWindowResize: false });
83+
expect(addSpy).to.have.been.calledOnce();
84+
expect(removeSpy).to.have.been.calledOnce();
85+
});
86+
87+
it('should render a video tag inside a container-div', () => {
8288
const wrapper = shallow(<VideoCoverFallback />);
8389
expect(wrapper).to.have.descendants('div');
8490
expect(wrapper.find('div')).to.have.descendants('video');
8591
});
8692

87-
it('should pass props.className to the container-div', function() {
88-
const wrapper = shallow(<VideoCoverFallback className='some-classname' />);
93+
it('should pass props.className to the container-div', () => {
94+
const wrapper = shallow(<VideoCoverFallback className="some-classname" />);
8995
expect(wrapper).to.have.className('some-classname');
90-
})
96+
});
9197

92-
it('should invoke updateVideoRatio on loadedData media event', function () {
98+
it('should invoke updateVideoRatio on loadedData media event', () => {
9399
const spy = sinon.spy();
94100
class WithSpy extends VideoCoverFallback {
95101
updateVideoRatio = spy;
96102
}
97103
const wrapper = shallow(<WithSpy />);
98104
const video = wrapper.find('video');
99-
video.simulate('loadedData', {target: {
100-
videoWidth: 50,
101-
videoHeight: 50,
102-
}});
103-
expect(spy.calledOnce).to.be.true;
104-
expect(spy.calledWith(50, 50)).to.be.true;
105+
video.simulate('loadedData', {
106+
target: {
107+
videoWidth: 50,
108+
videoHeight: 50,
109+
},
110+
});
111+
expect(spy).to.have.been.calledOnce();
112+
expect(spy.calledWith(50, 50)).to.be.true();
105113
});
106114

107-
it('should apply all props.videoOptions to the video tag', function () {
108-
const wrapper = shallow(<VideoCoverFallback videoOptions={{
109-
src: 'http://some-video-url.mp4',
110-
}} />);
115+
it('should apply all props.videoOptions to the video tag', () => {
116+
const wrapper = shallow(<VideoCoverFallback
117+
videoOptions={{
118+
src: 'http://some-video-url.mp4',
119+
}}
120+
/>);
111121
expect(wrapper.find('video')).to.have.prop('src', 'http://some-video-url.mp4');
112122
});
113123

114-
describe('container-styles', function () {
115-
116-
it('should apply props.style to the container-div', function() {
117-
const wrapper = shallow(<VideoCoverFallback style={{
118-
backgroundColor: 'teal',
119-
lineHeight: '100px',
120-
}} />);
124+
describe('container-styles', () => {
125+
it('should apply props.style to the container-div', () => {
126+
const wrapper = shallow(<VideoCoverFallback
127+
style={{
128+
backgroundColor: 'teal',
129+
lineHeight: '100px',
130+
}}
131+
/>);
121132
expect(wrapper).to.have.style('background-color', 'teal');
122133
expect(wrapper).to.have.style('line-height', '100px');
123134
});
124-
125-
it('should set width and height to 100% by default', function () {
135+
136+
it('should set width and height to 100% by default', () => {
126137
const wrapper = shallow(<VideoCoverFallback />);
127138
expect(wrapper).to.have.style('height', '100%');
128139
expect(wrapper).to.have.style('width', '100%');
129140
});
130141

131-
it('should be possible to override width and height via props.style', function (){
142+
it('should be possible to override width and height via props.style', () => {
132143
const wrapper = shallow(<VideoCoverFallback style={{ width: '50%', height: '50%' }} />);
133144
expect(wrapper).to.have.style('height', '50%');
134145
expect(wrapper).to.have.style('width', '50%');
135146
});
136147

137-
it('should set position relative and overflow: hidden', function (){
148+
it('should set position relative and overflow: hidden', () => {
138149
const wrapper = shallow(<VideoCoverFallback />);
139150
expect(wrapper).to.have.style('position', 'relative');
140151
expect(wrapper).to.have.style('overflow', 'hidden');
141152
});
142153

143-
it('should not be possible to override position and overflow', function () {
144-
const wrapper = shallow(<VideoCoverFallback style={{
145-
position: 'fixed',
146-
overflow: 'scroll',
147-
}} />);
154+
it('should not be possible to override position and overflow', () => {
155+
const wrapper = shallow(<VideoCoverFallback
156+
style={{
157+
position: 'fixed',
158+
overflow: 'scroll',
159+
}}
160+
/>);
148161
expect(wrapper).to.have.style('position', 'relative');
149162
expect(wrapper).to.have.style('overflow', 'hidden');
150163
});
151164
});
152165

153166
// todo: maybe use generated test-data for this?
154-
describe('video-styles', function () {
155-
it('should have width auto, height 100% if innerRatio > outerRatio', function () {
167+
describe('video-styles', () => {
168+
it('should have width auto, height 100% if innerRatio > outerRatio', () => {
156169
const wrapper = shallow(<VideoCoverFallback />);
157170
wrapper.setState({
158171
innerRatio: 5,
@@ -161,7 +174,7 @@ describe('VideoCoverFallback', function () {
161174
expect(wrapper.find('video')).to.have.style('width', 'auto');
162175
expect(wrapper.find('video')).to.have.style('height', '100%');
163176
});
164-
it('should have width 100%, height auto if innerRatio <= outerRatio', function () {
177+
it('should have width 100%, height auto if innerRatio <= outerRatio', () => {
165178
const wrapper = shallow(<VideoCoverFallback />);
166179
wrapper.setState({
167180
innerRatio: 3,
@@ -172,28 +185,29 @@ describe('VideoCoverFallback', function () {
172185
});
173186
});
174187

175-
describe('updateContainerRatio()', function () {
176-
it('should set state.outerRatio to ratio of container width/height', function () {
188+
describe('updateContainerRatio()', () => {
189+
it('should set state.outerRatio to ratio of container width/height', () => {
177190
const wrapper = shallow(<VideoCoverFallback />);
178-
const mockRef = {
191+
const mockRef = {
179192
getBoundingClientRect: () => {
180-
return {
193+
const result = {
181194
width: 4,
182-
height: 5
183-
}
184-
}
195+
height: 5,
196+
};
197+
return result;
198+
},
185199
};
186200
wrapper.instance().updateContainerRatio(mockRef);
187-
expect(wrapper).to.have.state('outerRatio', 4/5);
201+
expect(wrapper).to.have.state('outerRatio', 4 / 5);
188202
});
189203
});
190204

191-
describe('updateVideoRatio()', function () {
192-
it('should set state.innerRatio to ratio of video width/height', function () {
205+
describe('updateVideoRatio()', () => {
206+
it('should set state.innerRatio to ratio of video width/height', () => {
193207
const wrapper = shallow(<VideoCoverFallback />);
194208
expect(wrapper).not.to.have.state('innerRatio');
195209
wrapper.instance().updateVideoRatio(4, 5);
196-
expect(wrapper).to.have.state('innerRatio', 4/5);
210+
expect(wrapper).to.have.state('innerRatio', 4 / 5);
197211
});
198212
});
199-
});
213+
});

0 commit comments

Comments
 (0)