element-web/test/components/structures/ScrollPanel-test.js
Richard van der Hoff 51fe77122b Fix an issue where the scroll stopped working.
Under certain conditions, it was possible to get stuck in a state where any
user-initiated scroll would be met with "Working around
vector-im/vector-web#528" and overridden. Fix this by removing the duplication
between _lastSetScroll and recentEventScroll, and using _lastSetScroll which is
more reliable.
2016-04-05 10:41:32 +01:00

275 lines
8.6 KiB
JavaScript

/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
var React = require('react');
var ReactDOM = require("react-dom");
var ReactTestUtils = require('react-addons-test-utils');
var expect = require('expect');
var q = require('q');
var sdk = require('matrix-react-sdk');
var ScrollPanel = sdk.getComponent('structures.ScrollPanel');
var test_utils = require('test-utils');
var Tester = React.createClass({
getInitialState: function() {
return {
tileKeys: [],
};
},
componentWillMount: function() {
this.fillCounts = {'b': 0, 'f': 0};
this._fillHandlers = {'b': null, 'f': null};
this._fillDefers = {'b': null, 'f': null};
this._scrollDefer = null;
// scrollTop at the last scroll event
this.lastScrollEvent = null;
},
_onFillRequest: function(back) {
var dir = back ? 'b': 'f';
console.log("FillRequest: " + dir);
this.fillCounts[dir]++;
var handler = this._fillHandlers[dir];
var defer = this._fillDefers[dir];
// don't use the same handler twice
this._fillHandlers[dir] = null;
this._fillDefers[dir] = null;
var res;
if (handler) {
res = handler();
} else {
res = q(false);
}
if (defer) {
defer.resolve();
}
return res;
},
addFillHandler: function(dir, handler) {
this._fillHandlers[dir] = handler;
},
/* returns a promise which will resolve when the fill happens */
awaitFill: function(dir) {
var defer = q.defer();
this._fillDefers[dir] = defer;
return defer.promise;
},
_onScroll: function(ev) {
var st = ev.target.scrollTop;
console.log("Scroll event; scrollTop: " + st);
this.lastScrollEvent = st;
var d = this._scrollDefer;
if (d) {
this._scrollDefer = null;
d.resolve();
}
},
/* returns a promise which will resolve when a scroll event happens */
awaitScroll: function() {
console.log("Awaiting scroll");
this._scrollDefer = q.defer();
return this._scrollDefer.promise;
},
setTileKeys: function(keys) {
console.log("Updating keys: len=" + keys.length);
this.setState({tileKeys: keys.slice()});
},
scrollPanel: function() {
return this.refs.sp;
},
_mkTile: function(key) {
// each tile is 150 pixels high:
// 98 pixels of body
// 2 pixels of border
// 50 pixels of margin
//
// there is an extra 50 pixels of margin at the bottom.
return (
<li key={key} data-scroll-token={key}>
<div style={{height: '98px', margin: '50px', border: '1px solid black',
backgroundColor: '#fff8dc' }}>
{key}
</div>
</li>
);
},
render: function() {
var tiles = this.state.tileKeys.map(this._mkTile);
console.log("rendering with " + tiles.length + " tiles");
return (
<ScrollPanel ref="sp"
onScroll={ this._onScroll }
onFillRequest={ this._onFillRequest }>
{tiles}
</ScrollPanel>
);
},
});
describe('ScrollPanel', function() {
var parentDiv;
var tester;
var scrollingDiv;
beforeEach(function(done) {
test_utils.beforeEach(this);
// create a div of a useful size to put our panel in, and attach it to
// the document so that we can interact with it properly.
parentDiv = document.createElement('div');
parentDiv.style.width = '800px';
parentDiv.style.height = '600px';
parentDiv.style.overflow = 'hidden';
document.body.appendChild(parentDiv);
tester = ReactDOM.render(<Tester/>, parentDiv);
expect(tester.fillCounts.b).toEqual(1);
expect(tester.fillCounts.f).toEqual(1);
scrollingDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
tester, "gm-scroll-view");
// wait for a browser tick to let the initial paginates complete
setTimeout(function() {
done();
}, 0);
});
afterEach(function() {
if (parentDiv) {
document.body.removeChild(parentDiv);
parentDiv = null;
}
});
it('should handle scrollEvent strangeness', function(done) {
var events = [];
q().then(() => {
// initialise with a few events
for (var i = 0; i < 10; i++) {
events.push(i+90);
}
tester.setTileKeys(events);
expect(tester.fillCounts.b).toEqual(1);
expect(tester.fillCounts.f).toEqual(2);
expect(scrollingDiv.scrollHeight).toEqual(1550) // 10*150 + 50
expect(scrollingDiv.scrollTop).toEqual(1550 - 600);
return tester.awaitScroll();
}).then(() => {
expect(tester.lastScrollEvent).toBe(950);
// we want to simulate back-filling as we scroll up
tester.addFillHandler('b', function() {
var newEvents = [];
for (var i = 0; i < 10; i++) {
newEvents.push(i+80);
}
events.unshift.apply(events, newEvents);
tester.setTileKeys(events);
return q(true);
});
// simulate scrolling up; this should trigger the backfill
scrollingDiv.scrollTop = 200;
return tester.awaitFill('b');
}).then(() => {
console.log('filled');
// at this point, ScrollPanel will have updated scrollTop, but
// the event hasn't fired. Stamp over the scrollTop.
expect(tester.lastScrollEvent).toEqual(200);
expect(scrollingDiv.scrollTop).toEqual(10*150 + 200);
scrollingDiv.scrollTop = 500;
return tester.awaitScroll();
}).then(() => {
expect(tester.lastScrollEvent).toBe(10*150 + 200);
expect(scrollingDiv.scrollTop).toEqual(10*150 + 200);
}).done(done);
});
it('should not get stuck in #528 workaround', function(done) {
var events = [];
q().then(() => {
// initialise with a bunch of events
for (var i = 0; i < 40; i++) {
events.push(i);
}
tester.setTileKeys(events);
expect(tester.fillCounts.b).toEqual(1);
expect(tester.fillCounts.f).toEqual(2);
expect(scrollingDiv.scrollHeight).toEqual(6050) // 40*150 + 50
expect(scrollingDiv.scrollTop).toEqual(6050 - 600);
// try to scroll up, to a non-integer offset.
tester.scrollPanel().scrollToToken("30", -101/3);
expect(scrollingDiv.scrollTop).toEqual(4616); // 31*150 - 34
// wait for the scroll event to land
return tester.awaitScroll(); // fails
}).then(() => {
expect(tester.lastScrollEvent).toEqual(4616);
// Now one more event; this will make it reset the scroll, but
// because the delta will be less than 1, will not trigger a
// scroll event, this leaving recentEventScroll defined.
console.log("Adding event 50");
events.push(50);
tester.setTileKeys(events);
// wait for the scrollpanel to stop trying to paginate
}).then(() => {
// Now, simulate hitting "scroll to bottom".
events = [];
for (var i = 100; i < 120; i++) {
events.push(i);
}
tester.setTileKeys(events);
tester.scrollPanel().scrollToBottom();
// wait for the scroll event to land
return tester.awaitScroll(); // fails
}).then(() => {
expect(scrollingDiv.scrollTop).toEqual(20*150 + 50 - 600);
// simulate a user-initiated scroll on the div
scrollingDiv.scrollTop = 1200;
return tester.awaitScroll();
}).then(() => {
expect(scrollingDiv.scrollTop).toEqual(1200);
}).done(done);
});
});