Improve backstop configuration

src/Handler.php

@@ -152,6 +152,7 @@ class Handler extends BaseHandler {
       'wkhtmltox' => [
         'enable' => 0,
       ],
+      'backstop' => $this->backstopDefaults(),
     ];
 
     if ($this->isCiContext() || $this->isLocalDevMode()) {
@@ -336,7 +337,7 @@ class Handler extends BaseHandler {
           $fs->symlink($rel, $link);
         }
       }
-      $fs->chmod($file, 0664);
+      $fs->chmod($file, $def['mode'] ?? 0664);
     }
 
     // Make sure that settings.docker.php gets called from settings.php.
@@ -350,6 +351,8 @@ class Handler extends BaseHandler {
     }
 
     // Setup BackstopJS.
+    $this->gitIgnore('tests/backstop/backstop.json');
+    $this->gitIgnore('tests/backstop/backstop-script-*');
     $this->gitIgnore('tests/backstop/backstop_data/bitmaps_test');
     $this->gitIgnore('tests/backstop/backstop_data/html_report');
     $this->gitLFS('tests/backstop/**/*.png');
@@ -437,7 +440,18 @@ class Handler extends BaseHandler {
         'source' => 'tests/backstop/',
         'dest' => $projectRoot . '/tests/backstop',
         'add2yaml' => TRUE,
-        'add2git' => TRUE,
+      ],
+      'backstop-script-before' => [
+        'source' => 'tests/backstop/',
+        'dest' => $projectRoot . '/tests/backstop',
+        'add2yaml' => TRUE,
+        'mode' => 0775,
+      ],
+      'backstop-script-after' => [
+        'source' => 'tests/backstop/',
+        'dest' => $projectRoot . '/tests/backstop',
+        'add2yaml' => TRUE,
+        'mode' => 0775,
       ],
       'vhost.conf' => [
         'dest' => $projectRoot . '/apache',
@@ -567,4 +581,25 @@ class Handler extends BaseHandler {
     ];
   }
 
+  /**
+   * @return array
+   */
+  private function backstopDefaults(): array {
+    return [
+      'd4dscripts' => [
+        'before' => [],
+        'after' => [],
+      ],
+      'viewports' => [
+        'desktop' => [
+          'width' => 1960,
+          'height' => 1280,
+        ],
+      ],
+      'scenarios' => [
+        'frontpage' => '/',
+      ],
+    ];
+  }
+
 }

templates/tests/backstop/backstop-script-after.twig

+#!/bin/bash
+
+{% for script in backstop.d4dscripts.after %}
+{{ script|raw }}
+{% endfor %}

templates/tests/backstop/backstop-script-before.twig

+#!/bin/bash
+
+{% for script in backstop.d4dscripts.before %}
+{{ script|raw }}
+{% endfor %}

templates/tests/backstop/backstop.json.twig

 {
-  "id": "backstop_{{ projectname }}",
+  "id": "{{ projectname }}",
   "viewports": [
-    {
-      "label": "phone",
-      "width": 320,
-      "height": 480
-    },
-    {
-      "label": "tablet",
-      "width": 768,
-      "height": 1024
-    },
-    {
-      "label": "desktop",
-      "width": 1960,
-      "height": 1280
-    }
+{% set i = 0 %}
+{% for label,viewport in backstop.viewports %}
+  {% if i > 0 %},{% endif %}{
+    "label": "{{ label }}",
+    "width": {{ viewport.width }},
+    "height": {{ viewport.width }}
+  }
+{% set i = i + 1 %}
+{% endfor %}
   ],
-  "onBeforeScript": "puppet/onBefore.js",
-  "onReadyScript": "puppet/onReady.js",
   "scenarios": [
-    {
-      "label": "{{ projectname }}",
-      "url": "http://{{ webserver.type }}"
-    }
+{% set i = 0 %}
+{% for label,path in backstop.scenarios %}
+  {% if i > 0 %},{% endif %}{
+    "label": "{{ label }}",
+    "url": "{{ projectprotocol }}://{{ projectdomain }}{{ projectport }}{{ path }}"
+  }
+{% set i = i + 1 %}
+{% endfor %}
   ],
   "paths": {
     "bitmaps_reference": "backstop_data/bitmaps_reference",
     "bitmaps_test": "backstop_data/bitmaps_test",
-    "engine_scripts": "backstop_data/engine_scripts",
     "html_report": "backstop_data/html_report",
     "ci_report": "backstop_data/ci_report"
   },
@@ -37,7 +32,7 @@
   "engineOptions": {
     "args": ["--no-sandbox"]
   },
-  "asyncCaptureLimit": 5,
+  "asyncCaptureLimit": 1,
   "asyncCompareLimit": 50,
   "debug": false,
   "debugWindow": false