Use headless Chrome for browser tests

.travis.yml

@@ -8,6 +8,7 @@ rvm:
 services:
   - postgresql
 addons:
+  chrome: stable
   apt:
     packages:
       - wkhtmltopdf

Dockerfile

@@ -29,9 +29,6 @@ RUN echo "@edge http://nl.alpinelinux.org/alpine/edge/main" >>/etc/apk/repositor
     # Needed for wkhtmltopdf
     dbus \
 
-    # Needed for capybara-webkit
-    qt-dev@edge \
-
   # Set up crontab.
   && echo "*/15 * * * * su -s/bin/sh www-data -c \
     'cd /opt/trainers-hub && bundle exec rake blog:update' >>/proc/1/fd/1 2>&1" >>/etc/crontabs/root \
@@ -40,7 +37,6 @@ RUN echo "@edge http://nl.alpinelinux.org/alpine/edge/main" >>/etc/apk/repositor
     'cd /opt/trainers-hub && bundle exec rake glossary:update' >>/proc/1/fd/1 2>&1" >>/etc/crontab
 
 ENV DISPLAY=:99
-
 COPY Gemfile* ./
 RUN bundle install
 

Gemfile

@@ -95,11 +95,13 @@ end
 
 group :test do
   gem "capybara", "~> 2.13"
-  gem "capybara-webkit"
   gem "factory_girl_rails"
   gem "rack_session_access"
   gem "rspec-core"
   gem "rspec-rails"
+  # Run browser tests with selenium and headless chrome
+  gem "chromedriver-helper"
+  gem "selenium-webdriver"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -68,6 +68,8 @@ GEM
       public_suffix (>= 2.0.2, < 4.0)
     arbre (1.1.1)
       activesupport (>= 3.0.0)
+    archive-zip (0.11.0)
+      io-like (~> 0.3.0)
     arel (8.0.0)
     ast (2.3.0)
     babel-source (5.8.35)
@@ -85,13 +87,15 @@ GEM
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
-    capybara-webkit (1.15.0)
-      capybara (>= 2.3, < 4.0)
-      json
     carrierwave (1.2.1)
       activemodel (>= 4.0.0)
       activesupport (>= 4.0.0)
       mime-types (>= 1.16)
+    childprocess (0.9.0)
+      ffi (~> 1.0, >= 1.0.11)
+    chromedriver-helper (1.2.0)
+      archive-zip (~> 0.10)
+      nokogiri (~> 1.8)
     ckeditor (4.2.4)
       cocaine
       orm_adapter (~> 0.5.0)
@@ -161,14 +165,14 @@ GEM
       responders
     invisible_captcha (0.10.0)
       rails (>= 3.2.0)
+    io-like (0.3.0)
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
     jquery-rails (4.3.1)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.1.0)
     kaminari (1.1.1)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.1.1)
@@ -313,6 +317,7 @@ GEM
       rubocop (~> 0.49)
     ruby-progressbar (1.9.0)
     ruby_dep (1.5.0)
+    rubyzip (1.2.1)
     sass (3.4.25)
     sass-rails (5.0.6)
       railties (>= 4.0.0, < 6)
@@ -322,6 +327,9 @@ GEM
       tilt (>= 1.1, < 3)
     select2-rails (4.0.3)
       thor (~> 0.14)
+    selenium-webdriver (3.11.0)
+      childprocess (~> 0.5)
+      rubyzip (~> 1.2)
     sentry-raven (2.7.1)
       faraday (>= 0.7.6, < 1.0)
     spring (2.0.2)
@@ -376,8 +384,8 @@ DEPENDENCIES
   acts-as-taggable-on (~> 5.0)
   byebug
   capybara (~> 2.13)
-  capybara-webkit
   carrierwave
+  chromedriver-helper
   ckeditor
   delayed_job_active_record
   devise
@@ -408,6 +416,7 @@ DEPENDENCIES
   rubocop-github
   sass-rails (~> 5.0)
   select2-rails
+  selenium-webdriver
   sentry-raven
   spring
   spring-watcher-listen (~> 2.0.0)

README.md

@@ -12,7 +12,10 @@ After running `rake db:setup` you can navigate to `http://localhost:3000/admin`
 - **User**: [email protected]
 - **Password**: password
 
+Running browser tests from within Docker is not currently supported. See [#477](https://github.com/EFForg/sec/pull/447) for more information.
+
 ## Development without Docker
 
 * Install Ruby, Rails, and other gems the usual way.
 * [install Yarn](https://yarnpkg.com/lang/en/docs/install/) and run `yarn install` to install Javascript dependencies.
+* If you don't already have it, install or Chrome or Chromium for browser tests, eg `sudo apt install chromium-browser`.

app/assets/javascripts/application/glossary.js

@@ -1,19 +1,19 @@
-$(document).on('mouseover', '.glossary-term, .glossary-definition', function(e) {
+$(document).on('mouseover', '.glossary-term, .glossary-definition', (e) => {
   var def = $(e.target).closest('.glossary-term').find('.glossary-definition');
   clearTimeout(def.data('timeout'));
   def.data('timeout', null).show();
 });
 
-$(document).on('mouseout', '.glossary-term, .glossary-definition', function(e) {
+$(document).on('mouseout', '.glossary-term, .glossary-definition', (e) => {
   var def = $(e.target).closest('.glossary-term').find('.glossary-definition');
   if (!def.data('timeout')) {
-    def.data('timeout', setTimeout(function() {
+    def.data('timeout', setTimeout(() => {
       def.data('timeout', null).hide();
     }, 200));
   }
 });
 
-$(document).on('click', '.glossary-term', function(e) {
+$(document).on('click', '.glossary-term', (e) => {
   if (!$(e.target).closest('.glossary-definition').length) {
     var url = $(e.target).closest('.glossary-term').find('a').attr('href');
     window.open(url);

spec/rails_helper.rb

@@ -30,7 +30,20 @@
 ActiveRecord::Migration.maintain_test_schema!
 
 require "capybara/rspec"
-Capybara.javascript_driver = :webkit
+
+capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
+  'chromeOptions' => {
+    'args' => ['--headless', '--disable-gpu'].tap do |a|
+      a.push('--no-sandbox') if ENV['TRAVIS']
+    end
+  }
+)
+
+Capybara.register_driver :chrome_headless do |app|
+  Capybara::Selenium::Driver.new(app, browser: :chrome, desired_capabilities: capabilities)
+end
+
+Capybara.javascript_driver = :chrome_headless
 
 RSpec.configure do |config|
   # Load authentication helpers
@@ -65,7 +78,8 @@
   config.filter_rails_from_backtrace!
   # arbitrary gems may also be filtered via:
   # config.filter_gems_from_backtrace("gem name")
-end
 
+  config.file_fixture_path = Rails.root.join("spec", "fixtures", "files")
+end
 
 Lesson.skip_callback(:save, :after, :enqueue_pdf_update)