diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js index a6d2e3f184..52b9185f18 100644 --- a/test/components/structures/TimelinePanel-test.js +++ b/test/components/structures/TimelinePanel-test.js @@ -238,9 +238,8 @@ describe('TimelinePanel', function() { }, 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 + it("should let you scroll down to the bottom after you've scrolled up", function(done) { + var N_EVENTS = 120; // the number of events to simulate being added to the timeline // sadly, loading all those events takes a while this.timeout(N_EVENTS * 50); @@ -257,9 +256,7 @@ describe('TimelinePanel', function() { var scrollDefer; var rendered = ReactDOM.render( - {scrollDefer.resolve()}} - timelineCap={TIMELINE_CAP} - />, + {scrollDefer.resolve()}}/>, parentDiv ); console.log("TimelinePanel rendered"); @@ -273,6 +270,7 @@ describe('TimelinePanel', function() { // 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); @@ -306,6 +304,27 @@ describe('TimelinePanel', function() { }); } + function scrollDown() { + // Scroll the bottom of the viewport to the bottom of the panel + setScrollTop(scrollingDiv.scrollHeight - scrollingDiv.clientHeight); + console.log("scrolling down... " + scrollingDiv.scrollTop); + return awaitScroll().delay(0).then(() => { + + let eventTiles = scryEventTiles(panel); + let events = timeline.getEvents(); + + let lastEventInPanel = eventTiles[eventTiles.length - 1].props.mxEvent; + let lastEventInTimeline = events[events.length - 1]; + + // Scroll until the last event in the panel = the last event in the timeline + if(lastEventInPanel.getId() !== lastEventInTimeline.getId()) { + // need to go further + return scrollDown(); + } + console.log("paginated to end."); + }); + } + // let the first round of pagination finish off awaitScroll().then(() => { // we should now have loaded the first few events @@ -321,31 +340,22 @@ describe('TimelinePanel', function() { expect(messagePanel.props.suppressFirstDateSeparator).toBe(false); var events = scryEventTiles(panel); expect(events[0].props.mxEvent).toBe(timeline.getEvents()[0]); - expect(events.length).toBeLessThanOrEqualTo(TIMELINE_CAP); - // we should now be able to scroll down, and paginate in the other - // direction. - setScrollTop(scrollingDiv.scrollHeight); - scrollingDiv.scrollTop = scrollingDiv.scrollHeight; + // Expect to be able to paginate forwards, having unpaginated a few events + expect(panel.state.canForwardPaginate).toBe(true); - // 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); + // scroll all the way to the bottom + return scrollDown(); }).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).toBeLessThanOrEqualTo(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]); + // Expect to be able to see the most recent event + var lastEventInPanel = events[events.length - 1].props.mxEvent; + var lastEventInTimeline = timeline.getEvents()[timeline.getEvents().length - 1]; + expect(lastEventInPanel.getContent()).toBe(lastEventInTimeline.getContent()); console.log("done"); }).done(done, done);