Moyo header

.github/workflows/test.yml-template

@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data

.gitignore

@@ -13,3 +13,4 @@ backstop_data
 dist
 .cache
 .parcel-cache
+reports/html_report/index_bundle.js

backstop.json

@@ -0,0 +1,54 @@
+{
+  "id": "backstop_default",
+  "viewports": [
+    {
+      "label": "phone",
+      "width": 320,
+      "height": 480
+    },
+    {
+      "label": "tablet",
+      "width": 1024,
+      "height": 768
+    }
+  ],
+  "onBeforeScript": "puppet/onBefore.js",
+  "onReadyScript": "puppet/onReady.js",
+  "scenarios": [
+    {
+      "label": "BackstopJS Homepage",
+      "cookiePath": "backstop_data/engine_scripts/cookies.json",
+      "url": "https://garris.github.io/BackstopJS/",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    }
+  ],
+  "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"
+  },
+  "report": ["browser"],
+  "engine": "puppeteer",
+  "engineOptions": {
+    "args": ["--no-sandbox"]
+  },
+  "asyncCaptureLimit": 5,
+  "asyncCompareLimit": 50,
+  "debug": false,
+  "debugWindow": false
+}

backstop_data/engine_scripts/cookies.json

@@ -9,6 +9,6 @@
     "httpOnly": false,
     "secure": false,
     "session": false,
-    "sameSite": "no_restriction"
+    "sameSite": "Lax"
   }
 ]

backstop_data/engine_scripts/puppet/clickAndHoverHelper.js

@@ -1,9 +1,9 @@
 module.exports = async (page, scenario) => {
-  var hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
-  var clickSelector = scenario.clickSelectors || scenario.clickSelector;
-  var keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
-  var scrollToSelector = scenario.scrollToSelector;
-  var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+  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)) {
@@ -27,7 +27,9 @@ module.exports = async (page, scenario) => {
   }
 
   if (postInteractionWait) {
-    await new Promise(resolve => setTimeout(resolve, postInteractionWait));
+    await new Promise(resolve => {
+      setTimeout(resolve, postInteractionWait);
+    });
   }
 
   if (scrollToSelector) {

backstop_data/engine_scripts/puppet/loadCookies.js

@@ -1,8 +1,8 @@
-var fs = require('fs');
+const fs = require('fs');
 
 module.exports = async (page, scenario) => {
-  var cookies = [];
-  var cookiePath = scenario.cookiePath;
+  let cookies = [];
+  const cookiePath = scenario.cookiePath;
 
   // READ COOKIES FROM FILE IF EXISTS
   if (fs.existsSync(cookiePath)) {
@@ -11,7 +11,11 @@ module.exports = async (page, scenario) => {
 
   // MUNGE COOKIE DOMAIN
   cookies = cookies.map(cookie => {
-    cookie.url = 'https://' + cookie.domain;
+    if (cookie.domain.startsWith('http://') || cookie.domain.startsWith('https://')) {
+      cookie.url = cookie.domain;
+    } else {
+      cookie.url = 'https://' + cookie.domain;
+    }
     delete cookie.domain;
     return cookie;
   });

docs/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Moyo Header</title><link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"><link rel="stylesheet" href="index.f9f86b39.css"></head><body> <header class="main-header"> <a href="index.html" class="logo"> <img src="logo.eddae0ff.png" alt="Moyo Logo" width="40" height="40" loading="lazy"> </a> <nav class="main-menu" aria-label="Main navigation"> <ul class="main-menu__list"> <li class="main-menu__item"> <a href="#" class="is-active"> Apple </a> </li> <li class="main-menu__item"><a href="#">Samsung</a></li> <li class="main-menu__item"><a href="#">Smartphones</a></li> <li class="main-menu__item"> <a href="#" data-qa="hover"> <span class="highlight">Laptops & Computers</span> </a> </li> <li class="main-menu__item"><a href="#">Gadgets</a></li> <li class="main-menu__item"><a href="#">Tablets</a></li> <li class="main-menu__item"><a href="#">Photo</a></li> <li class="main-menu__item"><a href="#">Video</a></li> </ul> </nav> </header> </body></html>