Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a13b66e

Browse files
only update elements when relevant props change, update parallax tests
1 parent 358db64 commit a13b66e

File tree

2 files changed

+62
-21
lines changed

2 files changed

+62
-21
lines changed

‎__tests__/Parallax.test.js‎

Lines changed: 53 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -168,50 +168,84 @@ describe('Expect the <Parallax> component', () => {
168168
expect(controller.removeElement).toBeCalledWith(element);
169169
});
170170

171-
it('to update an element in the controller when receiving new props and disable an element if the disable prop is true', () => {
171+
it('to update an element in the controller when receiving relevant new props', () => {
172172
const node = document.createElement('div');
173173

174174
const controller = ParallaxController.init();
175175
controller.updateElement = jest.fn();
176-
controller.resetElementStyles = jest.fn();
177176

178177
let instance;
179-
180178
class StateChanger extends React.Component {
181179
state = { disabled: false };
182-
183-
componentDidMount() {
184-
this.setState({ disabled: true });
185-
}
186-
187180
render() {
188181
return (
189-
<Parallax
190-
disabled={this.state.disabled}
191-
ref={ref => (instance = ref)}
192-
/>
182+
<Parallax {...this.state} ref={ref => (instance = ref)} />
193183
);
194184
}
195185
}
196186

187+
let stateInstance;
197188
ReactDOM.render(
198189
<MockProvider controllerMock={controller}>
199-
<StateChanger />
190+
<StateChanger ref={ref=>(stateInstance=ref)}/>
200191
</MockProvider>,
201192
node
202193
);
203194

195+
const testProps = {
196+
disabled: true,
197+
offsetXMax: 100,
198+
offsetXMin: -100,
199+
offsetYMax: 100,
200+
offsetYMin: -100,
201+
slowerScrollRate: false,
202+
};
203+
204+
// trigger an update
205+
stateInstance.setState(testProps);
206+
204207
expect(controller.updateElement).toBeCalledWith(instance.element, {
205208
props: {
206-
disabled: instance.props.disabled,
207-
offsetXMax: instance.props.offsetXMax,
208-
offsetXMin: instance.props.offsetXMin,
209-
offsetYMax: instance.props.offsetYMax,
210-
offsetYMin: instance.props.offsetYMin,
211-
slowerScrollRate: instance.props.slowerScrollRate,
209+
...testProps,
212210
},
213211
});
214212

213+
// should not be called again
214+
stateInstance.setState({
215+
...testProps,
216+
foo: false,
217+
bar: true,
218+
});
219+
220+
expect(controller.updateElement).toHaveBeenCalledTimes(1);
221+
});
222+
223+
it('to reset styles on an elment if the disabled prop is true', () => {
224+
const node = document.createElement('div');
225+
226+
const controller = ParallaxController.init();
227+
controller.resetElementStyles = jest.fn();
228+
229+
let instance;
230+
class StateChanger extends React.Component {
231+
state = { disabled: false };
232+
render() {
233+
return (
234+
<Parallax {...this.state} ref={ref => (instance = ref)} />
235+
);
236+
}
237+
}
238+
239+
let stateInstance;
240+
ReactDOM.render(
241+
<MockProvider controllerMock={controller}>
242+
<StateChanger ref={ref => (stateInstance = ref)} />
243+
</MockProvider>,
244+
node
245+
);
246+
247+
stateInstance.setState({ disabled: true });
248+
215249
expect(controller.resetElementStyles).toBeCalledWith(instance.element);
216250
});
217251
});

‎src/components/Parallax.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,15 @@ export default class Parallax extends Component {
6767
}
6868

6969
componentWillReceiveProps(nextProps) {
70-
// updates the elements props when changed
71-
if (this.props !== nextProps) {
70+
// updates the elements props when relevant parallax props change
71+
if (
72+
this.props.disabled !== nextProps.disabled ||
73+
this.props.offsetXMax !== nextProps.offsetXMax ||
74+
this.props.offsetXMin !== nextProps.offsetXMin ||
75+
this.props.offsetYMax !== nextProps.offsetYMax ||
76+
this.props.offsetYMin !== nextProps.offsetYMin ||
77+
this.props.slowerScrollRate !== nextProps.slowerScrollRate
78+
) {
7279
this.controller.updateElement(this.element, {
7380
props: {
7481
disabled: nextProps.disabled,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /