Test client using real browsers on Travis

no issue
- drop phantomjs tests both locally and on Travis
- instruct Travis to install latest Chrome and Firefox
- start an X server when running the client tests on Travis
- update testem config to start Chrome and Firefox in both local and CI tests
- fix testing preview sizing in Firefox as it doesn't support `zoom: 50%` style
- improve infinite scroll testing to be more reliable
- fix post acceptance test to handle both mobile and desktop views

.travis.yml

@@ -11,7 +11,13 @@ cache:
     - core/client/node_modules
     - core/client/bower_components
 addons:
+  firefox: "latest"
   postgresql: "9.3"
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
 env:
   global:
     - GITHUB_OAUTH_KEY=003a44d58f12089d0c0261338298af3813330949
@@ -28,15 +34,10 @@ matrix:
     - node_js: "0.10"
       env: TEST_SUITE=lint
 before_install:
-  # - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH
-  - mkdir travis-phantomjs
-  - wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 -O $PWD/travis-phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2
-  - tar -xvf $PWD/travis-phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2 -C $PWD/travis-phantomjs
-  - export PATH=$PWD/travis-phantomjs/phantomjs-2.1.1-linux-x86_64/bin:$PATH
   - if [ $DB == "mysql" ]; then mysql -e 'create database ghost_testing'; fi
   - if [ $DB == "pg" ]; then psql -c 'create database ghost_testing;' -U postgres; fi
 before_script:
-  - phantomjs --version
+  - if [ $TEST_SUITE == "client" ]; then export DISPLAY=:99; sh -e /etc/init.d/xvfb start; sleep 3; fi
 after_success:
   - |
       if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then

core/client/testem.json

@@ -3,10 +3,11 @@
   "test_page": "tests/index.html?hidepassed",
   "disable_watching": true,
   "launch_in_ci": [
-    "PhantomJS"
+    "Chrome",
+    "Firefox"
   ],
   "launch_in_dev": [
-    "PhantomJS",
-    "Chrome"
+    "Chrome",
+    "Firefox"
   ]
 }

core/client/tests/acceptance/posts/post-test.js

@@ -41,12 +41,13 @@ describe('Acceptance: Posts - Post', function() {
             visit('/');
 
             andThen(() => {
-                // it redirects to first post
-                expect(currentURL(), 'currentURL').to.equal(`/${posts[0].id}`);
-
-                expect(find('.posts-list li').first().hasClass('active'), 'highlights latest post').to.be.true;
-
                 expect(find('.posts-list li').length, 'post list count').to.equal(3);
+
+                // if we're in "desktop" size, we should redirect and highlight
+                if (find('.content-preview:visible').length) {
+                    expect(currentURL(), 'currentURL').to.equal(`/${posts[0].id}`);
+                    expect(find('.posts-list li').first().hasClass('active'), 'highlights latest post').to.be.true;
+                }
             });
         });
 

core/client/tests/acceptance/settings/tags-test.js

@@ -267,15 +267,19 @@ describe('Acceptance: Settings - Tags', function () {
                 find('.tag-list').scrollTop(find('.tag-list-content').height());
             });
 
-            wait().then(() => {
+            triggerEvent('.tag-list', 'scroll');
+
+            andThen(() => {
                 // it loads the second page
                 expect(find('.settings-tags .settings-tag').length, 'tag list count on second load')
                     .to.equal(30);
 
                 find('.tag-list').scrollTop(find('.tag-list-content').height());
             });
 
-            wait().then(() => {
+            triggerEvent('.tag-list', 'scroll');
+
+            andThen(() => {
                 // it loads the final page
                 expect(find('.settings-tags .settings-tag').length, 'tag list count on third load')
                     .to.equal(32);

core/client/tests/index.html

@@ -33,6 +33,13 @@
         #ember-testing > div {
             height: 100%;
         }
+        /* fix firefox not supporting `zoom: 50%` */
+        _::-moz-range-track, body:last-child #ember-testing {
+            -moz-transform-origin: 0 0;
+            -moz-transform: scale(0.5);
+            width: 200%;
+            height: 200%;
+        }
     </style>
   </head>
   <body>