[#28, #33] Mobile menu backgrounds and spacing (#35)

.github/workflows/capture.yml

@@ -1,6 +1,6 @@
 name: Capture Theme Changes
 run-name: Capturing visual reference 👓
-on: [push]
+on: []
 permissions:
   contents: write
 jobs:

.ops/backstop.js

@@ -19,7 +19,6 @@ module.exports = {
     },
     "report": ["browser","json"],
     "engine": "playwright",
-    "onReadyScript": "onReady.js",
     "engineOptions": {
       "browser": "chromium"
     },
@@ -34,39 +33,36 @@ module.exports = {
     "debugWindow": false,
     "scenarioLogsInReports": true,
     "fileNameTemplate": '{scenarioLabel}--{viewportLabel}',
-    "scenarios": [
-      {
-        "label": "Mobile Menu",
-        "url":  "http://app/",
-        "viewports": [
-          {
-            "label": "mobile",
-            "width": 360,
-            "height": 800
-          }
-        ],
-        // "clickSelector": ".menu-toggle-button",
-        "postInteractionWait": 1000,
-        "clickSelectors": [
-            ".l-header .menu-toggle-button",
-            ".l-header .has-children"
-        ]
-      }
-    ],
+    "onReadyScript": "",
+    "scenarios": [],
+    readyTimeout: 3,
   }
 
   try {
     require('fs')
       .readFileSync('/urls.txt', 'utf-8')
       .split(/\n/)
-      .forEach((url) => {
-                  module.exports.scenarios.push(
-                    {
-                      "label":  url.split(/\s+/).pop().trim(),
-                      "url":    `http://app${url.split(/\s+/)[0]}`,
-                    }
-                  );
-                });
+      .forEach((line) => {
+          parts = line.split(',').map(str => str.trim());
+          if (!parts || parts[0]?.startsWith('#') || !parts?.[1])
+            return;
+
+          scenario = {
+                "label":          parts[0],
+                "url":           `http://app${parts[1]}`,
+                "onReadyScript":  parts[2] || "onReady.js"
+              };
+          module.exports.scenarios.push(scenario);
+        });
   } catch (err) {
     console.log(err);
-  }
+  }
+
+//          // module.exports.scenarios.push(scenario);
+
+  // module.exports.scenarios.push(
+  //   {
+  //     "label":          parts[0].trim(),
+  //     "url":           `http://app${parts[1]}`,
+  //   }
+  // );

.ops/urls.txt

@@ -1,5 +1,5 @@
-/							Home
-/menus						Menus
-/events						Events
-/events/past-events			Past Events
-/menus/b					Secondary Page with Breadcrumb
+# Title            Path                   
+Header Menus,        /,                    clickMenu.js
+Home,               /                     
+Menus,              /menus                
+Long Menus,         /menus/long           

.ops/vrt-scripts/clickMenu.js

@@ -0,0 +1,21 @@
+module.exports = async (page, scenario) => {
+
+  // Desktop: Top Level menu link is visible
+  // const menu = await page.waitForSelector('a[href*="menus"]', {state: 'attached', timeout: 3000});
+  // if (menu && await menu.isVisible()) {
+  //   await menu.hover(); 
+  //   await menu.dispatchEvent('mousemove')
+  //   // #TODO: The playwrite hover does not trigger the menu js.
+  //   // await page.hover('a[href*="menus/long"]');
+  //   await page.waitForTimeout(10000);
+  // }
+
+  // Mobile: Menu toggle is visible
+  const toggle = await page.waitForSelector('.menu-toggle-button', {state: 'attached', timeout: 3000});
+  if (toggle && await toggle.isVisible()) {
+    await toggle.click();
+    await page.click('a[href="/menus"]');
+    await page.click('a[href="/menus/long"]');
+    await page.waitForTimeout(1000);
+  }
+};

containerfile

@@ -30,14 +30,14 @@ RUN  apt-get update \
 # Create some helper utilities
 RUN\
   util() { echo "#!/bin/sh\n\n$2" > "/usr/local/bin/$1" && chmod a+x "/usr/local/bin/$1"; }\
-  && util "bd"                "php /bee/bee.php --root=/var/www/html --base-url=http://localhost:8888/ \$@" \
-  && util "cr"                "bd cc all;" \
-  && util "uli"               "bd uli;" \
-  && util "si"                "bd si --auto --db-name=app --db-user=root --db-pass=root --db-host=db --profile=decanter_profile" \
-  && util "reset-db"          "mariadb -h db --user=root --password=root -e 'DROP DATABASE IF EXISTS app; CREATE DATABASE app'" \
-  && util "reset-app"         "rm -rf /var/www/html/files/config*;" \
-  && util "fix-perms"         "chown --quiet -R www-data:www-data /var/www/html;" \
-  && util "install-app"       "reset-db && reset-app && si && fix-perms && uli;"
+  && util "bd"          "php /bee/bee.php --root=/var/www/html --base-url=http://localhost:8888/ \$@" \
+  && util "cr"          "bd cc all;" \
+  && util "uli"         "bd uli;" \
+  && util "si"          "bd si --auto --db-name=app --db-user=root --db-pass=root --db-host=db --profile=decanter_profile" \
+  && util "reset-db"    "mariadb -h db --user=root --password=root -e 'DROP DATABASE IF EXISTS app; CREATE DATABASE app'" \
+  && util "reset-app"   "rm -rf /var/www/html/files/config*;" \
+  && util "fix-perms"   "chown --quiet -R www-data:www-data /var/www/html;" \
+  && util "install-app" "reset-db && reset-app && si && bd -y cim && fix-perms && uli;"
 
 
 # Download backdrop and bee