Differentiate placeholder and final image

Should fix intermittent issues happening with the browser tests,
which can't currently tell the difference between the placeholder
and the final image.

Bug: T90589
Change-Id: Ibfdff4721ce5f37831863110ad1a2f9650b24d5e

.rubocop_todo.yml

@@ -14,6 +14,10 @@ Lint/AmbiguousRegexpLiteral:
 Lint/UnusedBlockArgument:
   Enabled: false
 
+# Offense count: 3
+Metrics/AbcSize:
+  Max: 77
+
 # Offense count: 61
 # Configuration parameters: AllowURI, URISchemes.
 Metrics/LineLength:

Gemfile.lock

@@ -26,7 +26,7 @@ GEM
     faraday-cookie_jar (0.0.6)
       faraday (>= 0.7.4)
       http-cookie (~> 1.0.0)
-    ffi (1.9.6)
+    ffi (1.9.8)
     gherkin (2.12.2)
       multi_json (~> 1.3)
     headless (1.0.2)

resources/mmv/mmv.js

@@ -274,6 +274,7 @@
 		// size calculations in getCurrentImageWidths, which needs to know
 		// the aspect ratio
 		$initialImage.hide();
+		$initialImage.addClass( 'mw-mmv-placeholder-image' );
 		this.ui.canvas.set( image, $initialImage );
 
 		this.preloadImagesMetadata();
@@ -317,6 +318,7 @@
 				} );
 			}
 
+			imageElement.className = 'mw-mmv-final-image';
 			imageElement.alt = image.alt;
 			viewer.displayRealThumbnail( thumbnail, imageElement, imageWidths, $.now() - start );
 		} ).fail( function ( error ) {

tests/browser/features/step_definitions/mmv_steps.rb

@@ -69,7 +69,7 @@ def check_elements_in_viewer_for_image1(page)
   expect(page.mmv_image_div_element).to be_visible
 
   # Check image content
-  expect(page.mmv_image_div_element.image_element.when_present.attribute('src')).to match /Kerala/
+  expect(page.mmv_final_image_element.when_present.attribute('src')).to match /Kerala/
 
   # Check basic metadata is present
 
@@ -102,7 +102,7 @@ def check_elements_in_viewer_for_image2(page)
   expect(page.mmv_image_div_element).to be_visible
 
   # Check image content
-  expect(page.mmv_image_div_element.image_element.when_present.attribute('src')).to match 'Offsite'
+  expect(page.mmv_final_image_element.when_present.attribute('src')).to match 'Offsite'
 
   # Check basic metadata is present
 

tests/browser/features/support/pages/e2e_test_page.rb

@@ -20,6 +20,9 @@ class E2ETestPage < CommonsPage
   # Wrapper div for image
   div(:mmv_image_div, class: "mw-mmv-image")
 
+  # Actual image
+  image(:mmv_final_image, class: "mw-mmv-final-image")
+
   # Metadata elements
   span(:mmv_metadata_title, class: "mw-mmv-title")
   a(:mmv_metadata_license, class: "mw-mmv-license")