element-web/test/components/structures/TimelinePanel-test.js

333 lines
12 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 sinon = require('sinon');
var jssdk = require('matrix-js-sdk');
var EventTimeline = jssdk.EventTimeline;
var sdk = require('matrix-react-sdk');
var TimelinePanel = sdk.getComponent('structures.TimelinePanel');
var peg = require('../../../src/MatrixClientPeg');
var test_utils = require('test-utils');
var ROOM_ID = '!room:localhost';
var USER_ID = '@me:localhost';
describe('TimelinePanel', function() {
var sandbox;
var timelineSet;
var room;
var client;
var timeline;
var parentDiv;
function mkMessage(opts) {
return test_utils.mkMessage(
{
event: true, room: ROOM_ID, user: USER_ID,
ts: Date.now(),
... opts,
});
}
function scryEventTiles(panel) {
return ReactTestUtils.scryRenderedComponentsWithType(
panel, sdk.getComponent('rooms.EventTile'));
};
beforeEach(function() {
test_utils.beforeEach(this);
sandbox = test_utils.stubClient(sandbox);
room = sinon.createStubInstance(jssdk.Room);
room.roomId = ROOM_ID;
timelineSet = sinon.createStubInstance(jssdk.EventTimelineSet);
timelineSet.getPendingEvents.returns([]);
timelineSet.room = room;
timeline = new jssdk.EventTimeline(timelineSet);
timelineSet.getLiveTimeline.returns(timeline);
client = peg.get();
client.credentials = {userId: USER_ID};
// 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);
});
afterEach(function() {
if (parentDiv) {
ReactDOM.unmountComponentAtNode(parentDiv);
parentDiv.remove();
parentDiv = null;
}
sandbox.restore();
});
it('should load new events even if you are scrolled up', function(done) {
// this is https://github.com/vector-im/vector-web/issues/1367
// enough events to allow us to scroll back
var N_EVENTS = 30;
for (var i = 0; i < N_EVENTS; i++) {
timeline.addEvent(mkMessage());
}
var scrollDefer;
var panel = ReactDOM.render(
<TimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
/>,
parentDiv,
);
var scrollingDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
panel, "gm-scroll-view");
// helper function which will return a promise which resolves when the
// panel isn't paginating
var awaitPaginationCompletion = function() {
if(!panel.state.forwardPaginating)
return q();
else
return q.delay(0).then(awaitPaginationCompletion);
};
// helper function which will return a promise which resolves when
// the TimelinePanel fires a scroll event
var awaitScroll = function() {
scrollDefer = q.defer();
return scrollDefer.promise;
};
// wait for the panel to load - we'll get a scroll event once it
// happens
awaitScroll().then(() => {
expect(panel.state.canBackPaginate).toBe(false);
expect(scryEventTiles(panel).length).toEqual(N_EVENTS);
// scroll up
console.log("setting scrollTop = 0");
scrollingDiv.scrollTop = 0;
// wait for the scroll event to land
}).then(awaitScroll).then(() => {
// there should be no pagination going on now
expect(panel.state.backPaginating).toBe(false);
expect(panel.state.forwardPaginating).toBe(false);
expect(panel.state.canBackPaginate).toBe(false);
expect(panel.state.canForwardPaginate).toBe(false);
expect(panel.isAtEndOfLiveTimeline()).toBe(false);
expect(scrollingDiv.scrollTop).toEqual(0);
console.log("adding event");
// a new event!
var ev = mkMessage();
timeline.addEvent(ev);
panel.onRoomTimeline(ev, room, false, false, {
liveEvent: true,
timeline: timeline,
});
// that won't make much difference, because we don't paginate
// unless we're at the bottom of the timeline, but a scroll event
// should be enough to set off a pagination.
expect(scryEventTiles(panel).length).toEqual(N_EVENTS);
scrollingDiv.scrollTop = 10;
}).delay(0).then(awaitPaginationCompletion).then(() => {
expect(scryEventTiles(panel).length).toEqual(N_EVENTS+1);
}).done(done, done);
});
it('should not paginate forever if there are no events', function(done) {
// start with a handful of events in the timeline, as would happen when
// joining a room
var d = Date.now();
for (var i = 0; i < 3; i++) {
timeline.addEvent(test_utils.mkMessage(
{
event: true, room: ROOM_ID, user: USER_ID,
ts: d+i,
}
));
}
timeline.setPaginationToken('tok', EventTimeline.BACKWARDS);
// back-pagination returns a promise for true, but adds no events
client.paginateEventTimeline = sinon.spy((tl, opts) => {
console.log("paginate:", opts);
expect(opts.backwards).toBe(true);
return q(true);
});
var panel = ReactDOM.render(
<TimelinePanel timelineSet={timelineSet}/>,
parentDiv
);
var messagePanel = ReactTestUtils.findRenderedComponentWithType(
panel, sdk.getComponent('structures.MessagePanel'));
expect(messagePanel.props.backPaginating).toBe(true);
// let the first round of pagination finish off
setTimeout(() => {
// at this point, the timeline window should have tried to paginate
// 5 times, and we should have given up paginating
expect(client.paginateEventTimeline.callCount).toEqual(5);
expect(messagePanel.props.backPaginating).toBe(false);
expect(messagePanel.props.suppressFirstDateSeparator).toBe(false);
// now, if we update the events, there shouldn't be any
// more requests.
client.paginateEventTimeline.reset();
panel.forceUpdate();
expect(messagePanel.props.backPaginating).toBe(false);
setTimeout(() => {
expect(client.paginateEventTimeline.callCount).toEqual(0);
done();
}, 0);
}, 0);
});
it("should let you scroll down again after you've scrolled up", function(done) {
var TIMELINE_CAP = 100; // needs to be more than we can fit in the div
var N_EVENTS = 120; // needs to be more than TIMELINE_CAP
// sadly, loading all those events takes a while
this.timeout(N_EVENTS * 50);
// client.getRoom is called a /lot/ in this test, so replace
// sinon's spy with a fast noop.
client.getRoom = function(id) { return null; };
// fill the timeline with lots of events
for (var i = 0; i < N_EVENTS; i++) {
timeline.addEvent(mkMessage({msg: "Event "+i}));
}
console.log("added events to timeline");
var scrollDefer;
var panel = ReactDOM.render(
<TimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
timelineCap={TIMELINE_CAP}
/>,
parentDiv
);
console.log("TimelinePanel rendered");
var messagePanel = ReactTestUtils.findRenderedComponentWithType(
panel, sdk.getComponent('structures.MessagePanel'));
var scrollingDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
panel, "gm-scroll-view");
// helper function which will return a promise which resolves when
// the TimelinePanel fires a scroll event
var awaitScroll = function() {
scrollDefer = q.defer();
return scrollDefer.promise.then(() => {
console.log("got scroll event; scrollTop now " +
scrollingDiv.scrollTop);
});
};
function setScrollTop(scrollTop) {
const before = scrollingDiv.scrollTop;
scrollingDiv.scrollTop = scrollTop;
console.log("setScrollTop: before update: " + before +
"; assigned: " + scrollTop +
"; after update: " + scrollingDiv.scrollTop);
}
function backPaginate() {
console.log("back paginating...");
setScrollTop(0);
return awaitScroll().then(() => {
let eventTiles = scryEventTiles(panel);
let firstEvent = eventTiles[0].props.mxEvent;
console.log("TimelinePanel contains " + eventTiles.length +
" events; first is " +
firstEvent.getContent().body);
if(scrollingDiv.scrollTop > 0) {
// need to go further
return backPaginate();
}
console.log("paginated to start.");
});
}
// let the first round of pagination finish off
awaitScroll().then(() => {
// we should now have loaded the first few events
expect(messagePanel.props.backPaginating).toBe(false);
expect(messagePanel.props.suppressFirstDateSeparator).toBe(true);
// back-paginate until we hit the start
return backPaginate();
}).then(() => {
// hopefully, we got to the start of the timeline
expect(messagePanel.props.backPaginating).toBe(false);
expect(messagePanel.props.suppressFirstDateSeparator).toBe(false);
var events = scryEventTiles(panel);
expect(events[0].props.mxEvent).toBe(timeline.getEvents()[0]);
expect(events.length).toEqual(TIMELINE_CAP);
// we should now be able to scroll down, and paginate in the other
// direction.
setScrollTop(scrollingDiv.scrollHeight);
scrollingDiv.scrollTop = scrollingDiv.scrollHeight;
// the delay() below is a heinous hack to deal with the fact that,
// without it, we may or may not get control back before the
// forward pagination completes. The delay means that it should
// have completed.
return awaitScroll().delay(0);
}).then(() => {
expect(messagePanel.props.backPaginating).toBe(false);
expect(messagePanel.props.forwardPaginating).toBe(false);
expect(messagePanel.props.suppressFirstDateSeparator).toBe(true);
var events = scryEventTiles(panel);
expect(events.length).toEqual(TIMELINE_CAP);
// we don't really know what the first event tile will be, since that
// depends on how much the timelinepanel decides to paginate.
//
// just check that the first tile isn't event 0.
expect(events[0].props.mxEvent).toNotBe(timeline.getEvents()[0]);
console.log("done");
}).done(done, done);
});
});