Add variant parameter to ImageProcessingChecker

To prevent the incorrect variant of an image being used, you can now
specify a `variant` in the `ImageProcessingChecker` so that the correct
variant of an image will be rendered instead of the previous behaviour
(the first non-original image).

Author: patrickpatrickpatrick

app/assets/javascripts/admin/modules/image-processing-checker.js

@@ -9,6 +9,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
     constructor($root) {
       this.$root = $root
       this.imageLink = this.$root.dataset.imageLink
+      this.variant = this.$root.dataset.variant || "original"
 
       this.timeoutDuration =
         parseInt(this.$root.dataset.timeoutDuration, 10) ||
@@ -95,13 +96,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
 
         if (imgElement) {
           const previewAsset = assets.find(
-            ({ variant }) => variant !== 'original'
+            ({ variant }) => variant === this.variant
           )
 
           // images with multiple assets can have
           // transformed variants so we should not use
           // the `original` asset if this is the case
-          imgElement.src = previewAsset ? previewAsset.url : assets[0].url
+          imgElement.src = previewAsset.url
         }
 
         this.updateImageStatus(this.imagePreview)

app/components/admin/edition_images/image_component.html.erb

@@ -1,4 +1,4 @@
- <li data-module="image-processing-checker" data-image-link="<%= admin_edition_image_path(edition, image) %>" class="govuk-grid-row">
+ <li data-module="image-processing-checker" data-image-link="<%= admin_edition_image_path(edition, image) %>" data-variant="s960" class="govuk-grid-row">
   <template class="js-image-preview">
     <div class="govuk-grid-column-one-third">
       <img src="" alt="" class="app-view-edition-resource__preview">

spec/javascripts/admin/modules/image-processing-checker.spec.js

@@ -55,7 +55,7 @@ describe('GOVUK.Modules.ImageProcessingChecker', function () {
 
   afterEach(() => imagePreview.remove())
 
-  it('should replace the processing status with the image preview', (done) => {
+  it('should replace the processing status with the original image', (done) => {
     spyOn(window, 'fetch').and.resolveTo(okResponse)
     // eslint-disable-next-line no-new
     new GOVUK.Modules.ImageProcessingChecker(imagePreview)
@@ -64,6 +64,27 @@ describe('GOVUK.Modules.ImageProcessingChecker', function () {
 
     window.setTimeout(() => {
       expect(imagePreview.querySelector('img'))
+      expect(imagePreview.querySelector('img').src).toBe(
+        'http://assets.gov.uk/media/960x640.png'
+      )
+      done()
+    }, imageProcessingTimeout * 2)
+  })
+
+  it('should replace the processing status with a specific image if `variant` specified', (done) => {
+    imagePreview.dataset.variant = 's960'
+
+    spyOn(window, 'fetch').and.resolveTo(okResponse)
+    // eslint-disable-next-line no-new
+    new GOVUK.Modules.ImageProcessingChecker(imagePreview)
+
+    expect(imagePreview.querySelector('img')).toBe(null)
+
+    window.setTimeout(() => {
+      expect(imagePreview.querySelector('img'))
+      expect(imagePreview.querySelector('img').src).toBe(
+        'http://assets.gov.uk/media/s960_960x640.png'
+      )
       done()
     }, imageProcessingTimeout * 2)
   })