Merge pull request #363 from dgrebb/release/2.5.0

Release/2.5.0

.cz.json

@@ -1,7 +1,7 @@
 {
   "commitizen": {
     "name": "cz_conventional_commits",
-    "version": "2.4.0",
+    "version": "2.5.0",
     "tag_format": "$major.$minor.$patch$prerelease",
     "version_type": "semver",
     "bump_message": "release $current_version \u2192 $new_version"

.github/workflows/releases.yml

@@ -0,0 +1,23 @@
+name: Dispatch Build & Deploy
+
+on:
+  push:
+    branches:
+      - release/**
+  pull_request:
+    branches:
+      - main
+
+jobs:
+
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+
+      - name: Dispatch Frontend
+        run: |
+          curl -X POST https://api.github.com/repos/dgrebb/dgrebb.com/actions/workflows/${{ secrets.FRONTEND_WORKFLOW_ID }}/dispatches \
+          -H 'Accept: application/vnd.github+json' \
+          -H 'Authorization: Bearer ${{ secrets.DISPATCH_TOKEN }}' \
+          --data '{"ref": "${{ github.ref_name }}"}'

.gitignore

@@ -134,4 +134,11 @@ crash.*.log
 # Commitizen
 ############################
 
-.cz.toml
+.cz.toml
+
+############################
+# Visual Regression Tests
+############################
+
+_ci/backstop/bd/bitmaps_test/*
+_ci/backstop/bd/html_report/*

CHANGELOG.md

@@ -2,6 +2,36 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.5.0] - 2023-07-02
+
+### 💡 Features
+
+- ***(front)*** Adds scroll-behavior to body
+- ***(front)*** Adds page transitions
+- ***(testing)*** Adds dg commands for visual regression tests
+
+### 🐛 Bug Fixes
+
+- ***(front)*** Adds tailwind breakpoint and applies smaller padding
+- ***(front)*** Fixes PageTransition container flex layout
+- ***(front)*** Adds width fix to PageTransition and posts/privacy
+- ***(front)*** Reduces sentry tracing/replay to 0 in < production
+- ***(front)*** Fixes links section display
+- ***(front)*** Fixes bad ariaHidden prop name
+
+### 👷 Build
+
+- ***(front)*** Removes unnecessary ThemeToggle classList toggles
+- ***(testing)*** Renames lt_sm scenario to xs
+- ***(testing)*** Adds backstop reference script and reference images
+- ***(testing)*** Initializes backstop project
+- ***(testing)*** Adds backstopjs to project
+- ***(testing)*** Adds backstop reports and test images to .gitignore
+
+### 💚 Continuous Integration
+
+- ***(project)*** Adds release automation on bump and push
+
 ## [2.4.0] - 2023-06-29
 
 ### 💡 Features

_ci/backstop/backstop.json

@@ -0,0 +1,124 @@
+{
+  "id": "dgrebb.com",
+  "viewports": [
+    {
+      "label": "xs",
+      "width": 320,
+      "height": 640
+    },
+    {
+      "label": "sm",
+      "width": 640,
+      "height": 768
+    },
+    {
+      "label": "md",
+      "width": 810,
+      "height": 1080
+    },
+    {
+      "label": "lg",
+      "width": 1024,
+      "height": 768
+    },
+    {
+      "label": "xl",
+      "width": 1440,
+      "height": 900
+    }
+  ],
+  "onBeforeScript": "puppet/onBefore.js",
+  "onReadyScript": "puppet/onReady.js",
+  "scenarios": [
+    {
+      "label": "Local Home Default",
+      "url": "http://local.dgrebb.com:8080",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 1000,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    },
+    {
+      "label": "Local Home Theme Switch",
+      "url": "http://local.dgrebb.com:8080",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": ".theme-toggle",
+      "postInteractionWait": 1000,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    },
+    {
+      "label": "Local Privacy Default",
+      "url": "http://local.dgrebb.com:8080/privacy",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 1000,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    },
+    {
+      "label": "Local Privacy Theme Switch",
+      "url": "http://local.dgrebb.com:8080/privacy",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": ".theme-toggle",
+      "postInteractionWait": 1000,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    }
+  ],
+
+  "paths": {
+    "bitmaps_reference": "bd/bitmaps_reference",
+    "bitmaps_test": "bd/bitmaps_test",
+    "engine_scripts": "bd/engine_scripts",
+    "html_report": "bd/html_report",
+    "ci_report": "bd/ci_report"
+  },
+  "report": ["browser"],
+  "engine": "puppeteer",
+  "engineOptions": {
+    "args": ["--no-sandbox"],
+    "headless": "new"
+  },
+  "asyncCaptureLimit": 5,
+  "asyncCompareLimit": 50,
+  "debug": false,
+  "debugWindow": false
+}

_ci/backstop/bd/engine_scripts/playwright/clickAndHoverHelper.js

@@ -0,0 +1,43 @@
+module.exports = async (page, scenario) => {
+  const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+  const clickSelector = scenario.clickSelectors || scenario.clickSelector;
+  const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+  const scrollToSelector = scenario.scrollToSelector;
+  const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (keyPressSelector) {
+    for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+      await page.waitForSelector(keyPressSelectorItem.selector);
+      await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+    }
+  }
+
+  if (hoverSelector) {
+    for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+      await page.waitForSelector(hoverSelectorIndex);
+      await page.hover(hoverSelectorIndex);
+    }
+  }
+
+  if (clickSelector) {
+    for (const clickSelectorIndex of [].concat(clickSelector)) {
+      await page.waitForSelector(clickSelectorIndex);
+      await page.click(clickSelectorIndex);
+    }
+  }
+
+  if (postInteractionWait) {
+    if (parseInt(postInteractionWait) > 0) {
+      await page.waitForTimeout(postInteractionWait);
+    } else {
+      await page.waitForSelector(postInteractionWait);
+    }
+  }
+
+  if (scrollToSelector) {
+    await page.waitForSelector(scrollToSelector);
+    await page.evaluate(scrollToSelector => {
+      document.querySelector(scrollToSelector).scrollIntoView();
+    }, scrollToSelector);
+  }
+};

_ci/backstop/bd/engine_scripts/playwright/interceptImages.js

@@ -0,0 +1,31 @@
+/**
+ * INTERCEPT IMAGES
+ * Listen to all requests. If a request matches IMAGE_URL_RE
+ * then stub the image with data from IMAGE_STUB_URL
+ *
+ * Use this in an onBefore script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    require('./interceptImages')(page, scenario);
+  }
+  ```
+ *
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const IMAGE_URL_RE = /\.gif|\.jpg|\.png/i;
+const IMAGE_STUB_URL = path.resolve(__dirname, '../../imageStub.jpg');
+const IMAGE_DATA_BUFFER = fs.readFileSync(IMAGE_STUB_URL);
+const HEADERS_STUB = {};
+
+module.exports = async function (page, scenario) {
+  page.route(IMAGE_URL_RE, route => {
+    route.fulfill({
+      body: IMAGE_DATA_BUFFER,
+      headers: HEADERS_STUB,
+      status: 200
+    });
+  });
+};

_ci/backstop/bd/engine_scripts/playwright/loadCookies.js

@@ -0,0 +1,16 @@
+const fs = require('fs');
+
+module.exports = async (browserContext, scenario) => {
+  let cookies = [];
+  const cookiePath = scenario.cookiePath;
+
+  // Read Cookies from File, if exists
+  if (fs.existsSync(cookiePath)) {
+    cookies = JSON.parse(fs.readFileSync(cookiePath));
+  }
+
+  // Add cookies to browser
+  browserContext.addCookies(cookies);
+
+  console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+};

_ci/backstop/bd/engine_scripts/playwright/onBefore.js

@@ -0,0 +1,3 @@
+module.exports = async (page, scenario, viewport, isReference, browserContext) => {
+  await require('./loadCookies')(browserContext, scenario);
+};

_ci/backstop/bd/engine_scripts/playwright/onReady.js

@@ -0,0 +1,6 @@
+module.exports = async (page, scenario, viewport, isReference, browserContext) => {
+  console.log('SCENARIO > ' + scenario.label);
+  await require('./clickAndHoverHelper')(page, scenario);
+
+  // add more ready handlers here...
+};

_ci/backstop/bd/engine_scripts/playwright/overrideCSS.js

@@ -0,0 +1,27 @@
+/**
+ * OVERRIDE CSS
+ * Apply this CSS to the loaded page, as a way to override styles.
+ *
+ * Use this in an onReady script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    await require('./overrideCSS')(page, scenario);
+  }
+  ```
+ *
+ */
+
+const BACKSTOP_TEST_CSS_OVERRIDE = `
+  html {
+    background-image: none;
+  }
+`;
+
+module.exports = async (page, scenario) => {
+  // inject arbitrary css to override styles
+  await page.addStyleTag({
+    content: BACKSTOP_TEST_CSS_OVERRIDE
+  });
+
+  console.log('BACKSTOP_TEST_CSS_OVERRIDE injected for: ' + scenario.label);
+};

_ci/backstop/bd/engine_scripts/puppet/clickAndHoverHelper.js

@@ -0,0 +1,39 @@
+module.exports = async (page, scenario) => {
+  const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+  const clickSelector = scenario.clickSelectors || scenario.clickSelector;
+  const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+  const scrollToSelector = scenario.scrollToSelector;
+  const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (keyPressSelector) {
+    for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+      await page.waitForSelector(keyPressSelectorItem.selector);
+      await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+    }
+  }
+
+  if (hoverSelector) {
+    for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+      await page.waitForSelector(hoverSelectorIndex);
+      await page.hover(hoverSelectorIndex);
+    }
+  }
+
+  if (clickSelector) {
+    for (const clickSelectorIndex of [].concat(clickSelector)) {
+      await page.waitForSelector(clickSelectorIndex);
+      await page.click(clickSelectorIndex);
+    }
+  }
+
+  if (postInteractionWait) {
+    await page.waitForTimeout(postInteractionWait);
+  }
+
+  if (scrollToSelector) {
+    await page.waitForSelector(scrollToSelector);
+    await page.evaluate(scrollToSelector => {
+      document.querySelector(scrollToSelector).scrollIntoView();
+    }, scrollToSelector);
+  }
+};