[WIP] Visual Regression Testing with Cypress

README.md

@@ -112,10 +112,7 @@ tufte:
 
 ## TODO
 
-- [x] Global search-page, adapting to root templates
-  - [x] Generate data via Static Generator, and in Admin
-    - [x] Generate static, eg. ekstern.php onPageContentProcessed()
-      - [ ] Needs testing with broader collections
+- [ ] Static Generator: Simplify options, add Page button
 - [x] Styles
   - [ ] Minimize conflicts across styles
   - [ ] Naive night-mode: https://dev.to/wgao19/night-mode-with-mix-blend-mode-difference-23lm

classes/Content/Content.php

@@ -130,14 +130,14 @@ public static function pageNavigation(string $content, bool $itemize = false): o
      * Remove given HTML tags
      *
      * @param string $content HTML-content
-     * @param mixed  $tags    Tags to strip, comma-separated
+     * @param mixed  $tags    Tags to strip, array or comma-separated
      *
      * @return string Manipulated HTML, UTF-8 encoded
      */
     public static function stripHTML(string $content, $tags)
     {
         if (strlen($content) < 1) {
-            return;
+            return $content;
         }
         if (is_string($tags)) {
             $tags = explode(',', $tags);

components/docs/partials/docs/toolbar/menu.html.twig

@@ -2,7 +2,7 @@
 {% block search %}
     {% if config.theme.toolbar.search and config.theme.flexsearch.enabled %}
         <form class="search" role="search">
-            <input id="query" maxlength="100" type="search" name="search" tabindex="0" aria-label="{{ "THEME_SCHOLAR.SEARCH.LABEL"|t }}" placeholder="{{ "THEME_SCHOLAR.SEARCH.PLACEHOLDER"|t }}" aria-label="{{ "THEME_SCHOLAR.SEARCH.TITLE"|t }}" aria-expanded="false" />
+            <input id="query" maxlength="100" type="search" name="search" tabindex="0" aria-label="{{ "THEME_SCHOLAR.SEARCH.LABEL"|t }}" placeholder="{{ "THEME_SCHOLAR.SEARCH.PLACEHOLDER"|t }}" aria-label="{{ "THEME_SCHOLAR.SEARCH.TITLE"|t }}" aria-current="false" />
             <label class="search-button" for="query" role="button" aria-label="">
                 {# Icon8 LineAwesome Search #}
                 <svg class="search-submit" title="{{ "THEME_SCHOLAR.SEARCH.TITLE"|t }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 19 3 C 13.488997 3 9 7.4889972 9 13 C 9 15.39499 9.8389508 17.588106 11.25 19.3125 L 3.28125 27.28125 L 4.71875 28.71875 L 12.6875 20.75 C 14.411894 22.161049 16.60501 23 19 23 C 24.511003 23 29 18.511003 29 13 C 29 7.4889972 24.511003 3 19 3 z M 19 5 C 23.430123 5 27 8.5698774 27 13 C 27 17.430123 23.430123 21 19 21 C 14.569877 21 11 17.430123 11 13 C 11 8.5698774 14.569877 5 19 5 z"/></svg>

cypress.json

@@ -0,0 +1 @@
+{ "baseUrl": "http://127.0.0.1:8000/", "numTestsKeptInMemory": 100 }

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/accessibility.spec.js

@@ -0,0 +1,44 @@
+/// <reference types="Cypress" />
+
+Cypress.env("routes").forEach(route => {
+  describe("Accessibility: " + route, () => {
+    before(function() {
+      cy.visit(route);
+      cy.configureAxe({
+        exclude: [["#query"], [".search-button"]],
+      });
+      cy.injectAxe();
+    });
+    it(route + " has no violations", function() {
+      cy.checkA11y();
+    });
+    it(route + " has no active violations", function() {
+      cy.get('header[role="banner"] h1 a').trigger("mouseover");
+      cy.get('header[role="banner"] .links a:first-of-type').trigger(
+      cy.get('aside article:first-of-type header a:first-of-type').trigger("mouseover");
+      cy.get('aside article:first-of-type footer a:first-of-type').trigger("mouseover");
+      cy.get('header[role="banner"] .menu .search-button').trigger(
+        "click"
+      );
+      cy.checkA11y();
+    });
+    /* Cypress.env("styles").forEach(style => {
+      it(style + " has sufficient contrast", function() {
+        cy.document().then(doc => {
+          if (doc.querySelector("link[href$='metal.css']")) {
+            let cssLink = doc.querySelector("link[href$='metal.css']");
+            // let cssLink = doc.querySelector(
+            //   "link[href^='" + Cypress.env("stylesFolder") + "']"
+            // );
+            let cssPath = cssLink.getAttribute("href").replace("metal.css", "");
+            cssLink.setAttribute("href", cssPath + style);
+          }
+        });
+        cy.checkA11y({
+          runOnly: ["cat.color"],
+        });
+        // cy.screenshot(route + "/styles/" + style);
+      });
+    }); */
+  });
+});

cypress/integration/test.spec.js

@@ -0,0 +1,44 @@
+/// <reference types="Cypress" />
+
+describe("Accessibility: " + "/", () => {
+  before(function() {
+    cy.visit("/");
+    cy.injectAxe();
+  });
+  it("/" + " has no violations", function() {
+    cy.checkA11y();
+  });
+  it("/" + " has no active violations", function() {
+    // cy.get('header[role="banner"] h1 a').focus();
+    // cy.get('header[role="banner"] .links a:first-of-type').focus();
+    cy.get('header[role="banner"] h1 a').trigger("mouseenter");
+    cy.get('header[role="banner"] h1 a').trigger("mouseover");
+    // cy.get('header[role="banner"] .links a:first-of-type').trigger("mouseover");
+    // cy.get("aside article:first-of-type header a:first-of-type").trigger(
+    //   "mouseover"
+    // );
+    // cy.get("aside article:first-of-type footer a:first-of-type").trigger(
+    //   "mouseover"
+    // );
+    // cy.get('header[role="banner"] .menu .search-button').trigger("click");
+    cy.checkA11y();
+  });
+  /* Cypress.env("styles").forEach(style => {
+      it(style + " has sufficient contrast", function() {
+        cy.document().then(doc => {
+          if (doc.querySelector("link[href$='metal.css']")) {
+            let cssLink = doc.querySelector("link[href$='metal.css']");
+            // let cssLink = doc.querySelector(
+            //   "link[href^='" + Cypress.env("stylesFolder") + "']"
+            // );
+            let cssPath = cssLink.getAttribute("href").replace("metal.css", "");
+            cssLink.setAttribute("href", cssPath + style);
+          }
+        });
+        cy.checkA11y({
+          runOnly: ["cat.color"],
+        });
+        // cy.screenshot(route + "/styles/" + style);
+      });
+    }); */
+});

cypress/plugins/index.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const path = require("path");
+const fs = require("fs");
+
+module.exports = (on, config) => {
+  config.env.routes = ["/", "/article", "/blog", "/cv", "/docs"];
+  config.env.stylesFolder = path.join(__dirname, "../../css/styles");
+  let styles = [];
+  var files = fs.readdirSync(config.env.stylesFolder);
+  files.forEach(function(file) {
+    styles.push(file);
+  });
+  config.env.styles = styles;
+  return config;
+};

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+import "cypress-axe";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

languages.yaml

@@ -87,7 +87,9 @@ en:
         CATEGORIES: Categories
         TAGS: Tags
         CONTENT: Content
+    HOME: Home
     MENU: Menu
+    LINKS: Links
     EDIT: Edit
     DRAWER: Contents
     POWERED_BY: Powered by

package.json

@@ -55,6 +55,7 @@
     "@babel/preset-env": "^7.5.5",
     "@fullhuman/postcss-purgecss": "^1.2.0",
     "@khanacademy/tota11y": "^0.2.0",
+    "axe-core": "^3.4.0",
     "babel-preset-minify": "^0.5.1",
     "babelify": "^10.0.0",
     "browserify": "^16.5.0",
@@ -64,7 +65,10 @@
     "concurrently": "^4.1.2",
     "core-js": "3",
     "cssnano": "^4.1.10",
+    "cypress": "^3.7.0",
+    "cypress-axe": "^0.5.1",
     "formbase": "^10.0.0",
+    "fs-extra": "^8.1.0",
     "gutenberg-css": "^0.5.0",
     "has-values": "^2.0.1",
     "line-awesome": "github:icons8/line-awesome",