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

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;
   });

package.json

@@ -17,15 +17,14 @@
   "keywords": [],
   "author": "Mate Academy",
   "license": "GPL-3.0",
-  "dependencies": {},
   "devDependencies": {
     "@linthtml/linthtml": "^0.9.6",
     "@mate-academy/backstop-config": "latest",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.8.6",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/stylelint-config": "latest",
-    "backstopjs": "6.3.23",
+    "backstopjs": "^6.3.23",
     "jest": "^29.7.0",
     "parcel": "^2.12.0",
     "prettier": "^3.3.2",

reports/html_report/config.js

@@ -0,0 +1,40 @@
+report({
+  "testSuite": "BackstopJS",
+  "tests": [
+    {
+      "pair": {
+        "reference": "../bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_0_phone.png",
+        "test": "../bitmaps_test/20241221-130037/backstop_default_BackstopJS_Homepage_0_document_0_phone.png",
+        "selector": "document",
+        "fileName": "backstop_default_BackstopJS_Homepage_0_document_0_phone.png",
+        "label": "BackstopJS Homepage",
+        "requireSameDimensions": true,
+        "misMatchThreshold": 0.1,
+        "url": "https://garris.github.io/BackstopJS/",
+        "referenceUrl": "",
+        "expect": 0,
+        "viewportLabel": "phone",
+        "error": "Reference file not found /Users/sergij/projects/layout_moyo-header/backstop_data/bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_0_phone.png"
+      },
+      "status": "fail"
+    },
+    {
+      "pair": {
+        "reference": "../bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png",
+        "test": "../bitmaps_test/20241221-130037/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png",
+        "selector": "document",
+        "fileName": "backstop_default_BackstopJS_Homepage_0_document_1_tablet.png",
+        "label": "BackstopJS Homepage",
+        "requireSameDimensions": true,
+        "misMatchThreshold": 0.1,
+        "url": "https://garris.github.io/BackstopJS/",
+        "referenceUrl": "",
+        "expect": 0,
+        "viewportLabel": "tablet",
+        "error": "Reference file not found /Users/sergij/projects/layout_moyo-header/backstop_data/bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png"
+      },
+      "status": "fail"
+    }
+  ],
+  "id": "backstop_default"
+});