Merge pull request #1184 from matrix-org/rav/chrome_headless

Use Chrome instead of PhantomJS for tests

.travis.yml

@@ -1,6 +1,15 @@
+# we need trusty for the chrome addon
+dist: trusty
+
+# we don't need sudo, so can run in a container, which makes startup much
+# quicker.
+sudo: false
+
 language: node_js
 node_js:
     - node # Latest stable version of nodejs.
+addons:
+    chrome: stable
 install:
     - npm install
     - (cd node_modules/matrix-js-sdk && npm install)

karma.conf.js

@@ -116,11 +116,25 @@ module.exports = function (config) {
         browsers: [
             'Chrome',
             //'PhantomJS',
+            //'ChromeHeadless',
         ],
 
+        customLaunchers: {
+            'ChromeHeadless': {
+                base: 'Chrome',
+                flags: [
+                    // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
+                    '--headless',
+                    '--disable-gpu',
+                    // Without a remote debugging port, Google Chrome exits immediately.
+                    '--remote-debugging-port=9222',
+                ],
+            }
+        },
+
         // Continuous Integration mode
         // if true, Karma captures browsers, runs the tests and exits
-        singleRun: true,
+        // singleRun: false,
 
         // Concurrency level
         // how many browser should be started simultaneous

package.json

@@ -41,8 +41,8 @@
     "lintall": "eslint src/ test/",
     "clean": "rimraf lib",
     "prepublish": "npm run build && git rev-parse HEAD > git-revision.txt",
-    "test": "karma start $KARMAFLAGS --browsers PhantomJS",
+    "test": "karma start $KARMAFLAGS --single-run=true --browsers ChromeHeadless",
-    "test-multi": "karma start $KARMAFLAGS --single-run=false"
+    "test-multi": "karma start $KARMAFLAGS"
   },
   "dependencies": {
     "babel-runtime": "^6.11.6",
@@ -106,12 +106,10 @@
     "karma-cli": "^0.1.2",
     "karma-junit-reporter": "^0.4.1",
     "karma-mocha": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.4.5",
     "parallelshell": "^1.2.0",
-    "phantomjs-prebuilt": "^2.1.7",
     "react-addons-test-utils": "^15.4.0",
     "require-json": "0.0.1",
     "rimraf": "^2.4.3",

test/components/structures/ScrollPanel-test.js

@@ -192,52 +192,37 @@ describe('ScrollPanel', function() {
         }
     });
 
-    it('should handle scrollEvent strangeness', function(done) {
+    it('should handle scrollEvent strangeness', function() {
-        var events = [];
+        const events = [];
 
-        q().then(() => {
+        return q().then(() => {
-            // initialise with a few events
+            // initialise with a load of events
-            for (var i = 0; i < 10; i++) {
+            for (let i = 0; i < 20; i++) {
-                events.push(i+90);
+                events.push(i+80);
             }
             tester.setTileKeys(events);
-            expect(tester.fillCounts.b).toEqual(1);
+            expect(scrollingDiv.scrollHeight).toEqual(3050); // 20*150 + 50
-            expect(tester.fillCounts.f).toEqual(2);
+            expect(scrollingDiv.scrollTop).toEqual(3050 - 600);
-            expect(scrollingDiv.scrollHeight).toEqual(1550) // 10*150 + 50
-            expect(scrollingDiv.scrollTop).toEqual(1550 - 600);
             return tester.awaitScroll();
         }).then(() => {
-            expect(tester.lastScrollEvent).toBe(950);
+            expect(tester.lastScrollEvent).toBe(3050 - 600);
 
-            // we want to simulate back-filling as we scroll up
+            tester.scrollPanel().scrollToToken("92", 0);
-            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.
+            // the event hasn't fired.
-            expect(tester.lastScrollEvent).toEqual(200);
+            expect(tester.lastScrollEvent).toEqual(3050 - 600);
-            expect(scrollingDiv.scrollTop).toEqual(10*150 + 200);
+            expect(scrollingDiv.scrollTop).toEqual(1950);
+
+            // now stamp over the scrollTop.
+            console.log('faking #528');
             scrollingDiv.scrollTop = 500;
 
             return tester.awaitScroll();
         }).then(() => {
-            expect(tester.lastScrollEvent).toBe(10*150 + 200);
+            expect(tester.lastScrollEvent).toBe(1950);
-            expect(scrollingDiv.scrollTop).toEqual(10*150 + 200);
+            expect(scrollingDiv.scrollTop).toEqual(1950);
-        }).done(done);
+        });
     });
 
     it('should not get stuck in #528 workaround', function(done) {
@@ -250,7 +235,7 @@ describe('ScrollPanel', function() {
             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.scrollHeight).toEqual(6050); // 40*150 + 50
             expect(scrollingDiv.scrollTop).toEqual(6050 - 600);
 
             // try to scroll up, to a non-integer offset.