spec: added chrome headless as default js runner

So far the feature tests with js enabled were running through
poltergeist driver. As we know, PhantomJS was discontinued and
that's bad. PhantomJS was far from perfect and we've had a lot
of flaky issues with it.

Even knowing that most of those flaky issues were our fault, it's
always good to improve our workflow whenever possible. Based on this we
are adding chrome headless as our default js runner for our feature
tests.

Unfortunately we had to keep poltergeist for one scenario that we
couldn't make chrome headless work properly. That scenario is when the
dev runs the feature tests inside of the container. For bare metal and
travis, chrome headless works like a charm.

Signed-off-by: Vítor Avelino <vavelino@suse.com>

.travis.yml

@@ -8,18 +8,7 @@ matrix:
   allow_failures:
     - rvm: ruby-head
 
-cache:
-  directories:
-    - $PWD/travis_phantomjs
-
 before_install:
-  - phantomjs --version
-  - export PATH=$PWD/travis_phantomjs/phantomjs-2.1.1-linux-x86_64/bin:$PATH
-  - if [ $(phantomjs --version) != '2.1.1' ]; then rm -rf $PWD/travis_phantomjs; mkdir -p $PWD/travis_phantomjs; fi
-  - if [ $(phantomjs --version) != '2.1.1' ]; then 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; fi
-  - if [ $(phantomjs --version) != '2.1.1' ]; then tar -xvf $PWD/travis_phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2 -C $PWD/travis_phantomjs; fi
-  - phantomjs --version
-
   # Use the latest stable Node.js
   - nvm install stable
   - nvm use stable
@@ -45,6 +34,9 @@ before_script:
   - mysql -e 'create database portus_test;'
   - psql -c 'create database portus_test' -U postgres
 
+  # fix for chrome headless
+  - export DISPLAY=:99.0 && sh -e /etc/init.d/xvfb start && sleep 3
+
 script:
   - chmod +x bin/ci.sh && ./bin/ci.sh
 
@@ -73,3 +65,4 @@ addons:
     repo_token: 18a0cf6c35e0c801678f12f444051c33e0390ce0efa91ec06a2aa5068b10c19e
   mariadb: '10.2'
   postgresql: '9.6'
+  chrome: stable

Dockerfile

@@ -18,7 +18,8 @@ RUN zypper addrepo https://download.opensuse.org/repositories/devel:languages:go
     zypper --gpg-auto-import-keys ref && \
     zypper -n in --no-recommends ruby2.5-devel \
            libmysqlclient-devel postgresql-devel \
-           nodejs libxml2-devel libxslt1 git-core go1.10 && \
+           nodejs libxml2-devel libxslt1 git-core \
+           go1.10 phantomjs && \
     zypper -n in --no-recommends -t pattern devel_basis && \
     gem install bundler --no-ri --no-rdoc -v 1.16.0 && \
     update-alternatives --install /usr/bin/bundle bundle /usr/bin/bundle.ruby2.5 3 && \

Gemfile

@@ -100,10 +100,13 @@ end
 
 group :test do
   gem "capybara", "~> 2.14.3"
-  gem "codeclimate-test-reporter", group: :test, require: nil
+  gem "capybara-screenshot", "~> 1.0.0"
+  gem "chromedriver-helper"
+  gem "codeclimate-test-reporter", require: false
   gem "docker-api", "~> 1.28.0"
   gem "json-schema"
-  gem "poltergeist", "~> 1.15.0", require: false
+  gem "poltergeist", "~> 1.18.0", require: false
+  gem "selenium-webdriver", "~> 3.12"
   gem "shoulda"
   gem "simplecov", "0.15.1", require: false
   gem "timecop"

Gemfile.lock

@@ -41,6 +41,8 @@ GEM
     annotate (2.7.2)
       activerecord (>= 3.2, < 6.0)
       rake (>= 10.4, < 13.0)
+    archive-zip (0.11.0)
+      io-like (~> 0.3.0)
     arel (6.0.4)
     ast (2.4.0)
     autoprefixer-rails (7.2.3)
@@ -69,9 +71,17 @@ GEM
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
+    capybara-screenshot (1.0.21)
+      capybara (>= 1.0, < 4)
+      launchy
     cconfig (1.2.0)
       safe_yaml (~> 1.0.0, >= 1.0.0)
+    childprocess (0.9.0)
+      ffi (~> 1.0, >= 1.0.11)
     choice (0.2.0)
+    chromedriver-helper (1.2.0)
+      archive-zip (~> 0.10)
+      nokogiri (~> 1.8)
     cliver (0.3.2)
     codeclimate-test-reporter (0.4.7)
       simplecov (>= 0.7.1, < 1.0.0)
@@ -166,6 +176,7 @@ GEM
     hirb (0.7.3)
     i18n (0.8.0)
     ice_nine (0.11.2)
+    io-like (0.3.0)
     json (2.1.0)
     json-schema (2.5.1)
       addressable (~> 2.3.7)
@@ -240,8 +251,8 @@ GEM
     parser (2.5.0.3)
       ast (~> 2.4.0)
     pg (0.20.0)
-    poltergeist (1.15.0)
-      capybara (~> 2.1)
+    poltergeist (1.18.1)
+      capybara (>= 2.1, < 4)
       cliver (~> 0.3.1)
       websocket-driver (>= 0.2.0)
     polyglot (0.3.5)
@@ -343,6 +354,7 @@ GEM
     ruby-openid (2.7.0)
     ruby-progressbar (1.9.0)
     ruby_dep (1.5.0)
+    rubyzip (1.2.1)
     safe_yaml (1.0.4)
     sass (3.4.25)
     sass-rails (5.0.7)
@@ -356,6 +368,9 @@ GEM
       uri_template (~> 0.5.0)
     search_cop (1.0.6)
       treetop
+    selenium-webdriver (3.12.0)
+      childprocess (~> 0.5)
+      rubyzip (~> 1.2)
     shellany (0.0.1)
     shoulda (3.5.0)
       shoulda-context (~> 1.0, >= 1.0.1)
@@ -413,9 +428,9 @@ GEM
     webpack-rails (0.9.10)
       hashdiff
       railties (>= 3.2.0)
-    websocket-driver (0.6.5)
+    websocket-driver (0.7.0)
       websocket-extensions (>= 0.1.0)
-    websocket-extensions (0.1.2)
+    websocket-extensions (0.1.3)
     wirb (2.0.0)
       paint (>= 0.9, < 2.0)
     wirble (0.1.3)
@@ -437,7 +452,9 @@ DEPENDENCIES
   brakeman
   byebug
   capybara (~> 2.14.3)
+  capybara-screenshot (~> 1.0.0)
   cconfig (~> 1.2.0)
+  chromedriver-helper
   codeclimate-test-reporter
   database_cleaner
   devise
@@ -472,7 +489,7 @@ DEPENDENCIES
   omniauth-google-oauth2
   omniauth-openid
   pg (~> 0.20.0)
-  poltergeist (~> 1.15.0)
+  poltergeist (~> 1.18.0)
   pry-rails
   public_activity
   puma (~> 3.10.0)
@@ -491,6 +508,7 @@ DEPENDENCIES
   sass (~> 3.4.23)
   sass-rails (~> 5.0.6)
   search_cop
+  selenium-webdriver (~> 3.12)
   shoulda
   simplecov (= 0.15.1)
   slim (~> 3.0.8)

app/assets/javascripts/main.js

@@ -38,6 +38,9 @@ $(function () {
 
   refreshFloatAlertPosition();
 
+  // disable effects during tests
+  $.fx.off = $('body').data('disable-effects');
+
   // necessary to be compatible with the js rendered
   // on the server-side via jquery-ujs
   window.setTimeOutAlertDelay = setTimeOutAlertDelay;

app/assets/javascripts/modules/repositories/components/comments/wrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="comments-wrapper">
     <comments-form :state="state" form-state="commentFormVisible" :repository="repository"></comments-form>
     <comments-panel :comments="comments" :state="state"></comments-panel>
   </div>

app/assets/javascripts/modules/teams/components/panel.vue

@@ -2,9 +2,7 @@
   <panel>
     <h5 slot="heading-left">{{ title }}</h5>
 
-    <div slot="heading-right" v-if="canCreate">
-      <toggle-link text="Create new team" :state="state" state-key="newFormVisible" class="toggle-link-new-team"></toggle-link>
-    </div>
+    <toggle-link slot="heading-right" text="Create new team" :state="state" state-key="newFormVisible" class="toggle-link-new-team" v-if="canCreate"></toggle-link>
 
     <div slot="body">
       <teams-table :teams="teams" :sortable="true" sort-by="name" :teams-path="teamsPath"></teams-table>

app/assets/javascripts/shared/components/toggle-link.vue

@@ -1,5 +1,5 @@
 <template>
-  <a type="button" class="btn btn-xs btn-link toggle-link" @click="toggle">
+  <a type="button" class="btn btn-xs btn-link toggle-link" @click.prevent="toggle">
     <i class="fa" :class="icon"></i> {{ text }}
   </a>
 </template>

app/views/layouts/application.html.slim

@@ -32,7 +32,7 @@ html
     = javascript_include_tag(*webpack_asset_paths("application"))
     = yield :js_header
 
-  body data-controller="#{js_controller}" data-route="#{js_route}" class="#{'is-admin' if current_user.admin?}"
+  body data-controller="#{js_controller}" data-route="#{js_route}" class="#{'is-admin' if current_user.admin?}" data-disable-effects="#{Rails.env.test?}"
     .vue-root
       header
         = render 'shared/header'

spec/features/admin/registries_spec.rb

@@ -21,7 +21,7 @@
       visit new_admin_registry_path
 
       fill_in "registry_name", with: "registry"
-      fill_in "registry_name", with: ""
+      clear_field("#registry_name")
 
       expect(page).to have_content("Name can't be blank")
       expect(page).to have_button("Create", disabled: true)
@@ -31,7 +31,7 @@
       visit new_admin_registry_path
 
       fill_in "registry_hostname", with: "registry"
-      fill_in "registry_hostname", with: ""
+      clear_field("#registry_hostname")
 
       expect(page).to have_content("Hostname can't be blank")
       expect(page).to have_button("Create", disabled: true)
@@ -86,7 +86,6 @@
       expect(page).not_to have_css("#advanced.collapse.in")
 
       click_button "Show Advanced"
-      wait_for_effect_on("#advanced")
 
       expect(page).to have_content("External Registry Name")
       expect(page).to have_css("#advanced.collapse.in")
@@ -96,13 +95,11 @@
       visit new_admin_registry_path
 
       click_button "Show Advanced"
-      wait_for_effect_on("#advanced")
 
       expect(page).to have_content("External Registry Name")
       expect(page).to have_css("#advanced.collapse.in")
 
       click_button "Hide Advanced"
-      wait_for_effect_on("#advanced")
 
       expect(page).not_to have_css("#advanced.collapse.in")
       expect(page).not_to have_content("External Registry Name")
@@ -140,21 +137,18 @@
       expect(page).not_to have_css("#advanced")
 
       click_button "Show Advanced"
-      wait_for_effect_on("#advanced")
 
       expect(page).to have_content("External Registry Name")
       expect(page).to have_css("#advanced.collapse.in")
     end
 
     it "hides advanced options when clicking on Hide Advanced" do
       click_button "Show Advanced"
-      wait_for_effect_on("#advanced")
 
       expect(page).to have_content("External Registry Name")
       expect(page).to have_css("#advanced.collapse.in")
 
       click_button "Hide Advanced"
-      wait_for_effect_on("#advanced")
 
       expect(page).not_to have_css("#advanced.collapse.in")
       expect(page).not_to have_content("External Registry Name")

spec/features/admin/users_spec.rb

@@ -164,14 +164,12 @@
       visit edit_admin_user_path(bot)
 
       find(".toggle-link-new-app-token").click
-      wait_for_effect_on("#new-app-token-form")
 
       expect(focused_element_id).to eq "application_token_application"
       fill_in "Application", with: "awesome-application"
 
       click_button "Create"
       wait_for_ajax
-      wait_for_effect_on("#float-alert")
 
       expect(page).to have_css("#float-alert")
       expect(page).to have_content("was created successfully")
@@ -186,7 +184,6 @@
       find(".application_token_#{token.id} button").click
       find(".popover-content .yes").click
       wait_for_ajax
-      wait_for_effect_on("#float-alert")
 
       expect(page).to have_css("#float-alert")
       expect(page).to have_content("was removed successfully")

spec/features/application_tokens_spec.rb

@@ -13,14 +13,12 @@
     it "As an user I can create a new token", js: true do
       visit edit_user_registration_path
       find(".toggle-link-new-app-token").click
-      wait_for_effect_on("#new-app-token-form")
 
       expect(focused_element_id).to eq "application_token_application"
       fill_in "Application", with: "awesome-application"
 
       click_button "Create"
       wait_for_ajax
-      wait_for_effect_on("#float-alert")
 
       expect(page).to have_css("#float-alert")
       expect(page).to have_content("was created successfully")
@@ -32,14 +30,12 @@
 
       visit edit_user_registration_path
       find(".toggle-link-new-app-token").click
-      wait_for_effect_on("#new-app-token-form")
 
       expect(focused_element_id).to eq "application_token_application"
       fill_in "Application", with: "awesome-application"
 
       click_button "Create"
       wait_for_ajax
-      wait_for_effect_on("#float-alert")
 
       expect(page).to have_css("#float-alert")
       expect(page).to have_content("Application has already been taken")
@@ -50,14 +46,12 @@
 
       visit edit_user_registration_path
       find(".toggle-link-new-app-token").click
-      wait_for_effect_on("#new-app-token-form")
 
       expect(focused_element_id).to eq "application_token_application"
       fill_in "Application", with: "awesome-application"
 
       click_button "Create"
       wait_for_ajax
-      wait_for_effect_on("#float-alert")
 
       expect(page).to have_css("#float-alert")
       expect(page).to have_content("was created successfully")
@@ -82,7 +76,6 @@
       find(".application_token_#{token.id} button").click
       find(".popover-content .yes").click
       wait_for_ajax
-      wait_for_effect_on("#float-alert")
 
       expect(page).to have_css("#float-alert")
       expect(page).to have_content("was removed successfully")

spec/features/auth/profile_feature_spec.rb

@@ -72,8 +72,7 @@
 
       expect(page).to have_content("Profile updated successfully!")
       expect(page).to have_button("Update", disabled: true)
-      # fill_in does not trigger keyUp event, so using clear_field instead
-      clear_field("Display name")
+      clear_field("#user_display_name")
       expect(page).to have_button("Update")
     end
   end

spec/features/help_spec.rb

@@ -11,11 +11,11 @@
       login_as user, scope: :user
     end
 
-    it "A user can go to the API documentation", js: true do
+    it "A user can go to the API documentation" do
       visit help_index_path
       click_link("API Documentation")
 
-      expect(page).to have_http_status(200)
+      expect(page).to have_content("Swagger")
       expect(page).to have_current_path("/documentation")
     end
   end