Update annoying TimelinePanel test

* Actually test what we were supposed to be testing (viz, that we can paginate
  back down after we hit the top of the room)

* Make the cap on the number of events we show in the timeline a configurable
  property, so that we can set it in the test

* Use a smaller cap in the test, so that we have to do less paginating to hit
  the cap, to make the test run quicker.

* add some more logging so that we can see how far it's got if it gets stuck.

src/components/structures/TimelinePanel.js

@@ -31,7 +31,6 @@ var KeyCode = require('../../KeyCode');
 
 var PAGINATE_SIZE = 20;
 var INITIAL_SIZE = 20;
-var TIMELINE_CAP = 250; // the most events to show in a timeline
 
 var DEBUG = false;
 
@@ -82,6 +81,9 @@ var TimelinePanel = React.createClass({
 
         // opacity for dynamic UI fading effects
         opacity: React.PropTypes.number,
+
+        // maximum number of events to show in a timeline
+        timelineCap: React.PropTypes.number,
     },
 
     statics: {
@@ -92,6 +94,12 @@ var TimelinePanel = React.createClass({
         roomReadMarkerTsMap: {},
     },
 
+    getDefaultProps: function() {
+        return {
+            timelineCap: 250,
+        };
+    },
+
     getInitialState: function() {
         var initialReadMarker =
             TimelinePanel.roomReadMarkerMap[this.props.room.roomId]
@@ -684,7 +692,7 @@ var TimelinePanel = React.createClass({
     _loadTimeline: function(eventId, pixelOffset, offsetBase) {
         this._timelineWindow = new Matrix.TimelineWindow(
             MatrixClientPeg.get(), this.props.room,
-            {windowLimit: TIMELINE_CAP});
+            {windowLimit: this.props.timelineCap});
 
         var onLoaded = () => {
             this._reloadEvents();

test/components/structures/TimelinePanel-test.js

@@ -40,11 +40,12 @@ describe('TimelinePanel', function() {
     var timeline;
     var parentDiv;
 
-    function mkMessage() {
+    function mkMessage(opts) {
         return test_utils.mkMessage(
             {
                 event: true, room: ROOM_ID, user: USER_ID,
                 ts: Date.now(),
+                ... opts,
             });
     }
 
@@ -207,10 +208,11 @@ describe('TimelinePanel', function() {
     });
 
     it("should let you scroll down again after you've scrolled up", function(done) {
-        var N_EVENTS = 600;
+        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 * 30);
+        this.timeout(N_EVENTS * 50);
 
         // client.getRoom is called a /lot/ in this test, so replace
         // sinon's spy with a fast noop.
@@ -218,13 +220,15 @@ describe('TimelinePanel', function() {
 
         // fill the timeline with lots of events
         for (var i = 0; i < N_EVENTS; i++) {
-            timeline.addEvent(mkMessage());
+            timeline.addEvent(mkMessage({msg: ""+i}));
         }
         console.log("added events to timeline");
 
         var scrollDefer;
         var panel = ReactDOM.render(
-            <TimelinePanel room={room} onScroll={() => {scrollDefer.resolve()}} />,
+            <TimelinePanel room={room} onScroll={() => {scrollDefer.resolve()}}
+                timelineCap={TIMELINE_CAP}
+            />,
             parentDiv
         );
         console.log("TimelinePanel rendered");
@@ -256,14 +260,18 @@ describe('TimelinePanel', function() {
             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.");
-
-                // hopefully, we got to the start of the timeline
-                expect(messagePanel.props.backPaginating).toBe(false);
             });
         }
 
@@ -276,9 +284,13 @@ describe('TimelinePanel', function() {
             // 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[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.
@@ -286,6 +298,23 @@ describe('TimelinePanel', function() {
             scrollingDiv.scrollTop = scrollingDiv.scrollHeight;
             return awaitScroll();
         }).then(() => {
+            expect(messagePanel.props.backPaginating).toBe(false);
+            expect(messagePanel.props.forwardPaginating).toBe(true);
+            return awaitScroll();
+        }).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);
     });