Backstop Visual Regression

.ci/test/visual-regression/backstopConfig.js

@@ -1,66 +1,67 @@
-// Stash dev URL, removing any trailing slash
-const devURL = process.env.DEV_SITE_URL.replace(/\/$/, "");
+// // Stash dev URL, removing any trailing slash
+// const devURL = process.env.DEV_SITE_URL.replace(/\/$/, "");
 
-// Stash multidev URL, removing any trailing slash
-const multidevURL = process.env.MULTIDEV_SITE_URL.replace(/\/$/, "");
+// // Stash multidev URL, removing any trailing slash
+// const multidevURL = process.env.MULTIDEV_SITE_URL.replace(/\/$/, "");
 
-const pathsToTest = {
-    'Homepage': '/',
-    'Hello World': '/hello-world/',
-}
+// const pathsToTest = {
+//     'Homepage': '/',
+//     'Hello World': '/hello-world/',
+// }
 
-let scenariosToTest = [];
+// let scenariosToTest = [];
 
-for (let [key, value] of Object.entries(pathsToTest)) {
-    scenariosToTest.push({
-        label: key,
-        url: multidevURL + value,
-        referenceUrl: devURL + value,
-        hideSelectors: [],
-        removeSelectors: [],
-        selectorExpansion: true,
-        selectors: [
-            'document',
-        ],
-        readyEvent: null,
-        delay: 1500,
-        misMatchThreshold: 0.1
-    })
-}
+// for (let [key, value] of Object.entries(pathsToTest)) {
+//     scenariosToTest.push({
+//         label: key,
+//         url: multidevURL + value,
+//         referenceUrl: devURL + value,
+//         hideSelectors: [],
+//         removeSelectors: [],
+//         selectorExpansion: true,
+//         selectors: [
+//             'document',
+//         ],
+//         readyEvent: null,
+//         delay: 1500,
+//         misMatchThreshold: 0.1
+//     })
+// }
 
-module.exports = {
-    id: 'test',
-    viewports: [{
-            name: 'phone',
-            width: 320,
-            height: 480
-        },
-        {
-            name: 'tablet',
-            width: 1024,
-            height: 768
-        },
-        {
-            "name": "desktop",
-            "width": 1920,
-            "height": 1080
-        }
-    ],
-    scenarios: scenariosToTest,
-    paths: {
-        bitmaps_reference: 'backstop_data/bitmaps_reference',
-        bitmaps_test: 'backstop_data/bitmaps_test',
-        html_report: 'backstop_data/html_report',
-        ci_report: 'backstop_data/ci_report'
-    },
-    report: ['browser', 'CI'],
-    debug: false,
-    engine: 'puppeteer',
-    engineOptions: {
-        args: ['--no-sandbox']
-    },
-    asyncCaptureLimit: 5,
-    asyncCompareLimit: 50,
-    debug: false,
-    debugWindow: false
-};
+// module.exports = {
+//     id: 'test',
+//     viewports: [
+//         {
+//             "label": "mobile-1",
+//             "width": 360,
+//             "height": 800
+//         },   
+//         {
+//             "label": "tablet",
+//             "width": 768,
+//             "height": 1024
+//         },
+//         {
+//             "label": "desktop-1",
+//             "width": 1280,
+//             "height": 720
+//         },
+//     ],
+//     scenarios: scenariosToTest,
+//     paths: {
+//         bitmaps_reference: 'backstop_data/bitmaps_reference',
+//         bitmaps_test: 'backstop_data/bitmaps_test',
+//         html_report: 'backstop_data/html_report',
+//         ci_report: 'backstop_data/ci_report'
+//     },
+//     report: ['browser', 'CI'],
+//     debug: false,
+//     engine: 'puppeteer',
+//     engineOptions: {
+//         args: ['--no-sandbox']
+//     },
+//     asyncCaptureLimit: 5,
+//     asyncCompareLimit: 50,
+//     debug: false,
+//     debugWindow: false
+// };

.ci/test/visual-regression/run

@@ -66,11 +66,11 @@ curl -I "$DEV_SITE_URL" >/dev/null
 
 # Backstop visual regression
 echo -e "\nRunning backstop reference on ${DEV_SITE_URL}..."
-backstop reference --config=.ci/test/visual-regression/backstopConfig.js
+backstop reference --config=backstop/pantheon.js
 
 # Backstop test
 echo -e "\nRunning backstop test on ${MULTIDEV_SITE_URL}..."
-VISUAL_REGRESSION_RESULTS=$(backstop test --config=.ci/test/visual-regression/backstopConfig.js || echo 'true')
+VISUAL_REGRESSION_RESULTS=$(backstop test --config=backstop/pantheon.js || echo 'true')
 
 echo "${VISUAL_REGRESSION_RESULTS}"
 

.circleci/config.yml

@@ -107,6 +107,10 @@ jobs:
           name: run PHP build step
           command: ./.ci/build/php
 
+      - run:
+          name: install theme composer dependencies
+          command: cd web/wp-content/themes/sage && composer install
+
       - save_cache:
           key: vendor-{{ checksum "composer.lock" }}
           paths:
@@ -118,6 +122,41 @@ jobs:
             - web
             - vendor
 
+  build_yarn:
+    <<: *defaults
+    docker:
+      - image: circleci/node:10.16.2
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - yarn-packages-{{ checksum "web/wp-content/themes/sage/yarn.lock" }}
+            - yarn-packages- # used if checksum fails
+
+      - run:
+          name: install theme yarn dependencies
+          command: cd web/wp-content/themes/sage && yarn install
+
+      - run:
+          name: build theme assets
+          # If non-hashed versions of site assets are needed for 3rd parties, also run `yarn build:nohash`
+          command: cd web/wp-content/themes/sage && yarn build
+
+      - save_cache:
+          name: cache Yarn files
+          key: yarn-packages-{{ checksum "web/wp-content/themes/sage/yarn.lock" }}
+          paths:
+            - $HOME/.cache/yarn
+
+      - persist_to_workspace:
+          # Must be relative path from working_directory
+          root: .
+          # Must be relative path from root
+          paths:
+            - web/wp-content/themes/sage/dist
+
   deploy_to_pantheon:
     <<: *defaults
     steps:
@@ -230,24 +269,26 @@ workflows:
   build_deploy_and_test:
     jobs:
       - configure_env_vars
-      - static_tests
+      # - static_tests
+      - build_yarn
       - build_php
       - deploy_to_pantheon:
           requires:
-            - static_tests
+            # - static_tests
+            - build_yarn
             - build_php
-      - visual_regression_test:
-          requires:
-            - configure_env_vars
-            - deploy_to_pantheon
-          filters:
-            branches:
-              ignore:
-                - master
-      - behat_test:
-          requires:
-            - deploy_to_pantheon
-            - visual_regression_test
+      # - visual_regression_test:
+      #     requires:
+      #       - configure_env_vars
+      #       - deploy_to_pantheon
+      #     filters:
+      #       branches:
+      #         ignore:
+      #           - master
+      # - behat_test:
+      #     requires:
+      #       - deploy_to_pantheon
+      #       - visual_regression_test
 
   scheduled_update_check:
     triggers:

.gitignore

@@ -38,7 +38,9 @@ web/private/scripts/quicksilver
 
 # Add directories containing build assets below.
 # Keep all additions above the "cut" line.
-
+node_modules
+backstop_data
+backstop/shared/live-links.json
 
 
 # :::::::::::::::::::::: cut ::::::::::::::::::::::
@@ -99,7 +101,10 @@ pantheon.upstream.yml
 ######################
 .DS_Store*
 ehthumbs.db
-Icon?
+# Info on ignoring Icon? files
+# https://stackoverflow.com/questions/17556250/how-to-ignore-icon-in-git
+Icon[
+]
 Thumbs.db
 ._*
 

.op/adminLoginTemplate.json

@@ -0,0 +1,33 @@
+
+{
+  "title": "FIXME WordPress Admin",
+  "category": "LOGIN",
+  "tags": [
+    "wordpress", "admin"
+  ],
+  "urls": [
+    {
+      "label": "Lando",
+      "href": "https://app-name.lndo.site/"
+    },
+    {
+      "label": "FIXME Pantheon Dev",
+      "href": "https://dev-app-name.pantheonsite.io/"
+    },
+    {
+      "label": "FIXME Pantheon Test",
+      "href": "https://test-app-name.pantheonsite.io/"
+    },      
+    {
+      "label": "FIXME Pantheon Live",
+      "href": "https://live-app-name.pantheonsite.io/"
+    },      
+    {
+      "label": "FIXME.org",
+      "primary": true,
+      "href": "https://fixme.org"
+    }
+  ],
+  "fields": [ 
+  ]
+}

.tool-versions

@@ -0,0 +1,2 @@
+nodejs 20.11.0
+yarn 1.22.17