Test TimelinePanel canForwardPaginate (#561)

Fix scroll up, down pagination test

NB: this test may not fail on Travis, although it did fail locally without a fix: #563.

Once the test has scrolled the panel to the top, to the earliest events, it should be able to forward paginate, because some degree of unpagination occurs. This does assume that unpagination will occur when scrolling to the beginning of the events and that unpagination should allow pagination again in the same direction.

Instead of checking that the first event is no longer the first event (varies due to unpagination), check instead that the most recent event can be seen when scrolling all the way down to the bottom of the TimelinePanel.

Scrolling past the bottom of content seems to have strange behaviour, which isn't a useful part of the test. So now the test will scroll down until the last event instead.

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(
-            <WrappedTimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
-                timelineCap={TIMELINE_CAP}
-            />,
+            <WrappedTimelinePanel timelineSet={timelineSet} onScroll={() => {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);