Add integration tests to each commit

Additional changes:
* Add a step to check JS has loaded
* Update selector to work on non-vagrant instances

Bug: T113620
Change-Id: Ib7579a43adc37b6e4add8b0ab75f99b6ab994bb6

Gemfile

@@ -1,4 +1,4 @@
 source 'https://rubygems.org'
 
-gem 'mediawiki_selenium', '~> 1.6.3'
+gem 'mediawiki_selenium', '~> 1.6.4'
 gem 'rubocop', '~> 0.35.1', require: false

Gemfile.lock

@@ -5,7 +5,7 @@ GEM
     astrolabe (1.3.1)
       parser (~> 2.2)
     builder (3.2.2)
-    childprocess (0.5.8)
+    childprocess (0.5.9)
       ffi (~> 1.0, >= 1.0.11)
     cucumber (1.3.20)
       builder (>= 2.1.2)
@@ -37,7 +37,7 @@ GEM
     mediawiki_api (0.5.0)
       faraday (~> 0.9, >= 0.9.0)
       faraday-cookie_jar (~> 0.0, >= 0.0.6)
-    mediawiki_selenium (1.6.3)
+    mediawiki_selenium (1.6.5)
       cucumber (~> 1.3, >= 1.3.20)
       headless (~> 2.0, >= 2.1.0)
       json (~> 1.8, >= 1.8.1)
@@ -53,7 +53,7 @@ GEM
     multi_test (0.1.2)
     multipart-post (2.0.0)
     netrc (0.11.0)
-    page-object (1.1.0)
+    page-object (1.1.1)
       page_navigation (>= 0.9)
       selenium-webdriver (>= 2.44.0)
       watir-webdriver (>= 0.6.11)
@@ -79,7 +79,7 @@ GEM
       tins (<= 1.6.0)
     ruby-progressbar (1.7.5)
     rubyzip (1.1.7)
-    selenium-webdriver (2.48.1)
+    selenium-webdriver (2.49.0)
       childprocess (~> 0.5)
       multi_json (~> 1.0)
       rubyzip (~> 1.0)
@@ -93,11 +93,14 @@ GEM
     watir-webdriver (0.9.1)
       selenium-webdriver (>= 2.46.2)
     websocket (1.2.2)
-    yml_reader (0.6)
+    yml_reader (0.7)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  mediawiki_selenium (~> 1.6.3)
+  mediawiki_selenium (~> 1.6.4)
   rubocop (~> 0.35.1)
+
+BUNDLED WITH
+   1.10.6

tests/browser/LocalSettings.php

@@ -0,0 +1,2 @@
+<?php
+	$wgUseInstantCommons = true;

tests/browser/features/mmv.download.feature

@@ -1,4 +1,4 @@
-@en.wikipedia.beta.wmflabs.org @firefox @chrome @internet_explorer_9 @internet_explorer_10 @internet_explorer_11 @safari @test2.wikipedia.org
+@integration @en.wikipedia.beta.wmflabs.org @firefox @chrome @internet_explorer_9 @internet_explorer_10 @internet_explorer_11 @safari @test2.wikipedia.org
 Feature: Download menu
 
   Background:

tests/browser/features/mmv.navigation.feature

@@ -1,4 +1,4 @@
-@en.wikipedia.beta.wmflabs.org @firefox @chrome @internet_explorer_9 @internet_explorer_10 @internet_explorer_11 @safari @test2.wikipedia.org
+@integration @en.wikipedia.beta.wmflabs.org @firefox @chrome @internet_explorer_9 @internet_explorer_10 @internet_explorer_11 @safari @test2.wikipedia.org
 Feature: Navigation
 
   Background:

tests/browser/features/mmv.options.feature

@@ -1,4 +1,4 @@
-@en.wikipedia.beta.wmflabs.org @firefox @chrome @internet_explorer_9 @internet_explorer_10 @internet_explorer_11 @safari @test2.wikipedia.org
+@integration @en.wikipedia.beta.wmflabs.org @firefox @chrome @internet_explorer_9 @internet_explorer_10 @internet_explorer_11 @safari @test2.wikipedia.org
 Feature: Options
 
   Background:

tests/browser/features/step_definitions/mmv_options_steps.rb

@@ -63,7 +63,7 @@ end
 
 Then /^I am taken to the file page$/ do
   on(E2ETestPage) do |page|
-    page.current_url.should match %r{/wiki/File:}
+    page.current_url.should match %r{/File:}
     page.current_url.should_not match %r{#/media}
   end
 end

tests/browser/features/step_definitions/mmv_steps.rb

@@ -1,12 +1,26 @@
 # encoding: utf-8
 
 Given /^I am at a wiki article with at least two embedded pictures$/ do
+  api.create_page 'MediaViewerE2ETest', File.read('samples/MediaViewerE2ETest.wikitext')
   visit(E2ETestPage)
   on(E2ETestPage).image1_in_article_element.when_present.should be_visible
 end
 
+Given /^the MMV has loaded$/ do
+  on(E2ETestPage) do |page|
+    page.wait_until do
+      # Wait for JS to hijack standard link
+      # TODO: If this approach works well, we should implement general
+      # `wait_for_resource` and `resource_ready?` helper methods in
+      # mw-selenium, and document this pattern on mw.org
+      browser.execute_script("return mw.loader.getState('mmv.bootstrap') === 'ready'")
+    end
+  end
+end
+
 Given /^I am viewing an image using MMV$/ do
   step 'I am at a wiki article with at least two embedded pictures'
+  step 'the MMV has loaded'
   step 'I click on the second image in the article'
   step 'the image metadata and the image itself should be there'
 end
@@ -15,7 +29,7 @@ When /^I click on the first image in the article$/ do
   on(E2ETestPage) do |page|
     # We store the offset of the image as the scroll position and scroll to it, because cucumber/selenium
     # sometimes automatically scrolls to it when we ask it to click on it (seems to depend on timing)
-    @article_scroll_top = page.execute_script("var scrollTop = Math.round($('a[href=\"/wiki/File:Sunrise_over_fishing_boats_in_Kerala.jpg\"]').first().find('img').offset().top); window.scrollTo(0, scrollTop); return scrollTop;")
+    @article_scroll_top = page.execute_script("var scrollTop = Math.round($('a[href$=\"File:Sunrise_over_fishing_boats_in_Kerala.jpg\"]').first().find('img').offset().top); window.scrollTo(0, scrollTop); return scrollTop;")
     # Scrolls to the image and clicks on it
     page.image1_in_article
     # This is a global variable that can be used to measure performance
@@ -27,7 +41,7 @@ When /^I click on the second image in the article$/ do
   on(E2ETestPage) do |page|
     # We store the offset of the image as the scroll position and scroll to it, because cucumber/selenium
     # sometimes automatically scrolls to it when we ask it to click on it (seems to depend on timing)
-    @article_scroll_top = page.execute_script("var scrollTop = Math.round($('a[href=\"/wiki/File:Wikimedia_Foundation_2013_All_Hands_Offsite_-_Day_2_-_Photo_24.jpg\"]').first().find('img').offset().top); window.scrollTo(0, scrollTop); return scrollTop;")
+    @article_scroll_top = page.execute_script("var scrollTop = Math.round($('a[href$=\"File:Wikimedia_Foundation_2013_All_Hands_Offsite_-_Day_2_-_Photo_24.jpg\"]').first().find('img').offset().top); window.scrollTo(0, scrollTop); return scrollTop;")
     # Scrolls to the image and clicks on it
     page.image2_in_article
     # This is a global variable that can be used to measure performance

tests/browser/samples/MediaViewerE2ETest.wikitext

@@ -0,0 +1,14 @@
+<big>PLEASE DO NOT EDIT THIS PAGE! IT NEEDS TO STAY THE SAME FOR THE PURPOSE OF AUTOMATED TESTING</big>
+
+==Test Images==
+Here are some sample images for testing different features of Media Viewer. 
+
+[[File:Sunrise over fishing boats in Kerala.jpg|thumb|left|Sunrise over fishing boats]] [[File:Wikimedia_Foundation_2013_All_Hands_Offsite_-_Day_2_-_Photo_24.jpg|thumb|Tropical Fish Aquarium]]  [[File:Wikimania 2013 - Hong Kong - Photo 090.jpg|thumb|center|Hong Kong Harbor at night]] 
+<br clear="all"/>
+
+[[File:Wikimedia_Foundation_2013_All_Hands_Offsite_-_Day_2_-_Photo_16.jpg|thumb|left|Nautilus Shell at California Academy of Sciences]] [[File:Multimedia_Team_-_Wikimedia_Foundation.jpg|thumb|center|Multimedia Team]] [[File:Zonotrichia atricapilla -British Columbia, Canada-8.jpg|thumb|Golden-crowned Sparrow]] 
+<br clear="all"/>
+
+[[File:Multimedia Roundtable 5 Photo 2.jpg|thumb|left|Multimedia Roundtable]]  [[File:Wikimedia Foundation - Team 1 - California Academy of Sciences.jpg|thumb|Wikimedia Team]] 
+
+<br clear="all"/>