@forsakringskassan/cypress-config 1.3.0 → 1.4.0

package/README.md

@@ -15,6 +15,7 @@ npm rm mocha-multi-reporter
 ```
 
 - [Usage](#usage)
+- [Axe](#axe)
 - [docs-generator](#docs-generator)
 - [HTML-Validate](#html-validate)
 
@@ -63,6 +64,25 @@ configure({
 
 See the various components for details.
 
+### Axe
+
+A preconfigured [Axe](https://github.com/dequelabs/axe-core) plugin ([@forsakringskassan/cypress-axe](https://github.com/Forsakringskassan/cypress-axe/)) is exported as `axePlugin`:
+
+```ts
+import { defineConfig, axePlugin } from "@forsakringskassan/cypress-config";
+
+export default defineConfig(import.meta.dirname, {
+    component: {
+        async setupNodeEvents(on, config) {
+            config = await axePlugin(on, config);
+            return config;
+        },
+    },
+});
+```
+
+Automatic validation after each test cannot currently be disabled.
+
 ### docs-generator
 
 A plugin to get all pages and examples generated by `@forsakringskassan/docs-generator`.
@@ -113,6 +133,7 @@ export default defineConfig(import.meta.dirname, {
     component: {
         async setupNodeEvents(on, config) {
             config = await htmlValidatePlugin(on, config);
+            return config;
         },
     },
 });

package/dist/index.d.ts

@@ -2,6 +2,18 @@ import { ConfigData } from 'cypress-html-validate';
 import { CypressHtmlValidateOptions } from 'cypress-html-validate';
 import { defineConfig as defineConfig_2 } from 'cypress';
 
+/**
+ * Preconfigured `@forsakringskassan/cypress-axe` plugin.
+ *
+ * @public
+ * @since v1.4.0
+ * @param on - Cypress `on` callback from `setupNodeEvents`.
+ * @param config - Cypress `config` parameter from `setupNodeEvents`.
+ * @param userOptions - Custom configuration to pass to `@forsakringskassan/cypress-axe`.
+ * @returns A promise resolved with the updated cypress configuration.
+ */
+export declare function axePlugin(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, userOptions?: object): Promise<Cypress.PluginConfigOptions>;
+
 /**
  * @public
  */

package/dist/index.mjs

@@ -131,20 +131,42 @@ var require_cjs = __commonJS({
   }
 });
 
-// src/plugins/docs-generator.ts
-async function docsGeneratorPlugin(_on, config, docs, sourceFiles) {
-  const manifest = await docs.manifest(sourceFiles);
-  const pages = manifest.pages.filter((it) => {
-    return it.path.endsWith(".html");
-  });
-  config.expose["pages"] = pages;
-  return config;
-}
+// src/plugins/axe.ts
+import "cypress";
 
-// src/plugins/html-validate.ts
+// node_modules/@forsakringskassan/cypress-axe/dist/esm/plugins.js
+import fs from "node:fs";
 import { createRequire } from "node:module";
-import "cypress";
-import { install } from "cypress-html-validate/plugin";
+var localConfig = null;
+var tasks = {
+  // Allows access to regular log output
+  axeReportLog(message) {
+    console.log(message);
+    return null;
+  },
+  axeGetInjectorSource() {
+    const require4 = createRequire(import.meta.url);
+    const scriptPath = require4.resolve("axe-core/axe.min.js");
+    return fs.readFileSync(scriptPath, "utf8");
+  },
+  getLocalConfig() {
+    return localConfig;
+  }
+};
+function init(on, config, userOptions = void 0) {
+  on("task", tasks);
+  if (userOptions !== void 0) {
+    localConfig = userOptions;
+    return config;
+  }
+  try {
+    localConfig = JSON.parse(fs.readFileSync("fk-cypress-axe.json", {
+      encoding: "utf8"
+    }));
+  } catch {
+  }
+  return config;
+}
 
 // src/utils/merge-config.ts
 var import_deepmerge = __toESM(require_cjs(), 1);
@@ -155,8 +177,39 @@ function mergeConfig(a, b) {
   return (0, import_deepmerge.default)(a, b ?? {}, { arrayMerge: overwriteMerge });
 }
 
+// src/plugins/axe.ts
+var defaultOptions = {
+  context: {
+    include: [[".code-preview"], ["[data-preview]"], ["[data-cy-root]"]],
+    exclude: [
+      [".calendar__item--selected"],
+      [".file-selector input"],
+      [".wizard-step__header__title"],
+      [".live-example__code"]
+    ]
+  }
+};
+function axePlugin(on, config, userOptions) {
+  const options = mergeConfig(defaultOptions, userOptions);
+  config = init(on, config, options);
+  return Promise.resolve(config);
+}
+
+// src/plugins/docs-generator.ts
+async function docsGeneratorPlugin(_on, config, docs, sourceFiles) {
+  const manifest = await docs.manifest(sourceFiles);
+  const pages = manifest.pages.filter((it) => {
+    return it.path.endsWith(".html");
+  });
+  config.expose["pages"] = pages;
+  return config;
+}
+
 // src/plugins/html-validate.ts
-var require2 = createRequire(import.meta.url);
+import { createRequire as createRequire2 } from "node:module";
+import "cypress";
+import { install } from "cypress-html-validate/plugin";
+var require2 = createRequire2(import.meta.url);
 var exclude = [];
 try {
   exclude = require2("@fkui/vue/htmlvalidate/cypress");
@@ -205,8 +258,8 @@ function htmlValidatePlugin(on, cypressConfig, userConfig, userOptions) {
 }
 
 // src/default-config.ts
-import { createRequire as createRequire2 } from "node:module";
-var require3 = createRequire2(import.meta.url);
+import { createRequire as createRequire3 } from "node:module";
+var require3 = createRequire3(import.meta.url);
 var isGithub = Boolean(process.env["GITHUB_ACTION"]);
 var defaultConfig = Object.freeze({
   allowCypressEnv: false,
@@ -240,6 +293,7 @@ function defineConfig(_rootDir, userConfig) {
   );
 }
 export {
+  axePlugin,
   defaultConfig,
   defineConfig,
   docsGeneratorPlugin,

package/dist/support.d.ts

@@ -1,3 +1,4 @@
+import "@forsakringskassan/cypress-axe/support";
 import "cypress-html-validate/commands";
 
 /**

package/dist/support.mjs

@@ -1,3 +1,466 @@
+// node_modules/@forsakringskassan/cypress-axe/dist/esm/support.js
+var defaultConfig = {
+  axe: {
+    rules: [
+      //Disable color contrast rule
+      {
+        id: "color-contrast",
+        enabled: false
+      }
+    ]
+  },
+  /**
+   * Context object to pass to axe. If not set `window.document` is passed.
+   *
+   * Can be set to:
+   *
+   *   - CSS selector with root element.
+   *   - An object `{include: string[][], exclude: string[][]}`
+   *
+   * Example:
+   *
+   * "context": {
+   *   "include": [["#app"]],
+   *   "exclude": [[".selector1"], [".selector2"]]
+   * }
+   *
+   * See
+   * https://www.deque.com/axe/axe-for-web/documentation/api-documentation/#context-parameter
+   * for a longer description.
+   */
+  context: null,
+  assertOnViolation: true,
+  // Stoppar resterande tester så fort ett misslyckas. (Annars rapporteras även felaktiga testfall som lyckade).
+  displayHelpUrl: true,
+  // Visar aXe help URL tillsammans med felet. Default true.
+  displayContext: true,
+  // Visar sammanhang (CSS selector, HTML, Förslag till rättelse, osv.)
+  displayPasses: false,
+  // Visar även passes. Default false
+  displayViolations: true,
+  // Visar felen. Default true.
+  standardsToReport: ["wcag2a", "wcag2aa"],
+  // Lista med standarder som kontrolleras. Om listan är tom visas valideras samtliga standarder.
+  ignoreAxeFailures: false,
+  // Ignorera Axe-valideringsfel. Default false
+  displayWhen: "both",
+  // När felen ska visas ("immediate", "end", "both")
+  excludeSelectorsList: []
+  // Lista med eventuella CSS selectorer som ska undantas från tillgänglighetskontrollerna
+};
+var Attribute = {
+  ColorCodes: {
+    red: "\x1B[31m",
+    grey: "\x1B[37m",
+    white: "\x1B[37;1m",
+    normalColor: "\x1B[39m",
+    indent: "",
+    green: "\x1B[32m",
+    yellow: "\x1B[33m",
+    magenta: "\x1B[35m",
+    cyan: "\x1B[36m",
+    resetColor: "\x1B[0m",
+    bold: "\x1B[1m",
+    underline: "\x1B[4m",
+    reversed: "\x1B[7m"
+  },
+  red(message) {
+    return `${this.ColorCodes.red}${message}${this.ColorCodes.resetColor}`;
+  },
+  grey(message) {
+    return `${this.ColorCodes.grey}${message}${this.ColorCodes.resetColor}`;
+  },
+  white(message) {
+    return `${this.ColorCodes.white}${message}${this.ColorCodes.resetColor}`;
+  },
+  green(message) {
+    return `${this.ColorCodes.green}${message}${this.ColorCodes.resetColor}`;
+  },
+  yellow(message) {
+    return `${this.ColorCodes.yellow}${message}${this.ColorCodes.resetColor}`;
+  },
+  magenta(message) {
+    return `${this.ColorCodes.magenta}${message}${this.ColorCodes.resetColor}`;
+  },
+  cyan(message) {
+    return `${this.ColorCodes.cyan}${message}${this.ColorCodes.resetColor}`;
+  },
+  bold(message) {
+    return `${this.ColorCodes.bold}${message}${this.ColorCodes.resetColor}`;
+  },
+  underline(message) {
+    return `${this.ColorCodes.underline}${message}${this.ColorCodes.resetColor}`;
+  },
+  reversed(message) {
+    return `${this.ColorCodes.reversed}${message}${this.ColorCodes.resetColor}`;
+  }
+};
+var cachedLocalConfig = null;
+var globalResults = {
+  passes: { enabled: [], disabled: [] },
+  violations: { enabled: [], disabled: [] }
+};
+function nodeLog(message) {
+  cy.task("axeReportLog", message, { log: false });
+}
+function getInjectorSource() {
+  return cy.task("axeGetInjectorSource", null, { log: false });
+}
+function validateConfig(config) {
+  const errors = [];
+  for (const key of Object.keys(config)) {
+    if (defaultConfig[key] === void 0) {
+      errors.push(`- The field "${key}" is not a valid configuration option.`);
+    }
+  }
+  if (config.displayWhen !== "immediate" && config.displayWhen !== "end" && config.displayWhen !== "both") {
+    errors.push(`- "displayWhen" can only be set to "immediate", "end", or "both" (was: ${config.displayWhen}).`);
+  }
+  if (errors.length > 0) {
+    nodeLog(Attribute.reversed(Attribute.red(`Invalid fk-cypress-axe configuration!`)));
+    for (const error of errors) {
+      nodeLog(Attribute.red(error));
+    }
+    nodeLog(Attribute.red(`As a result, some tests may be omitted or displayed when they shouldn't be!`));
+  }
+}
+function getConfig() {
+  const localConfig = cachedLocalConfig;
+  if (!localConfig) {
+    return defaultConfig;
+  }
+  const finalConfig = { ...defaultConfig, ...localConfig };
+  if (localConfig.axe) {
+    finalConfig.axe = {
+      ...defaultConfig.axe,
+      ...localConfig.axe
+    };
+    if (localConfig.axe.rules) {
+      finalConfig.axe.rules = [
+        ...defaultConfig.axe.rules.filter((defaultRule) => {
+          return localConfig.axe.rules.every((parsedRule) => {
+            return parsedRule.id !== defaultRule.id;
+          });
+        }),
+        ...localConfig.axe.rules
+      ];
+    }
+  }
+  validateConfig(finalConfig);
+  return finalConfig;
+}
+function prepareAxe() {
+  getInjectorSource().then((source) => cy.window({ log: false }).then((window) => {
+    window.eval(source);
+    if (!window.axe) {
+      nodeLog(Attribute.red(Attribute.reversed("AXE COULD NOT BE LOADED")) + Attribute.red("\nAxe was likely injected before cy.visit or incorrectly processed"));
+    }
+  }));
+}
+function filterResultsByStandardTags(results, standardTags) {
+  const filteredResults = {
+    enabled: [],
+    disabled: []
+  };
+  if (standardTags.length === 0) {
+    filteredResults.enabled = results;
+    return filteredResults;
+  }
+  const isStandardTag2 = (tag) => {
+    return standardTags.includes(tag);
+  };
+  filteredResults.enabled = results.filter((result) => {
+    return result.tags.some(isStandardTag2);
+  });
+  filteredResults.disabled = results.filter((result) => {
+    return !result.tags.some(isStandardTag2);
+  });
+  return filteredResults;
+}
+function filterResultsByExcludedSelectors(results, excludedSelectors) {
+  const filteredResults = {
+    enabled: [],
+    disabled: []
+  };
+  const isExcluded = (selector) => {
+    return excludedSelectors.includes(selector);
+  };
+  filteredResults.enabled = results.filter((result) => {
+    return result.nodes.some((node) => {
+      return !node.target.some(isExcluded);
+    });
+  });
+  filteredResults.disabled = results.filter((result) => {
+    return result.nodes.some((node) => {
+      return node.target.some(isExcluded);
+    });
+  });
+  return filteredResults;
+}
+function impactToPriority(impact) {
+  switch (impact) {
+    case "minor":
+      return 3;
+    case "moderate":
+      return 2;
+    case "serious":
+      return 1;
+    case "critical":
+      return 0;
+    default:
+      return 4;
+  }
+}
+function formatSuggestions(suggestions) {
+  return suggestions.reduce((msg, line) => {
+    return `${msg}
+					* ${line.replace("\n", "").trim()}`;
+  });
+}
+function formatHTML(html) {
+  return html.reduce((msg, line) => {
+    return `${msg}
+			  ${line.replace("\n", "")}`;
+  });
+}
+function formatTarget(target) {
+  return target.reduce((msg, target2) => {
+    return `${msg} ${target2}`;
+  });
+}
+var isStandardTag = (tag) => {
+  const config = getConfig();
+  return config.standardsToReport.includes(tag);
+};
+function formatTags(tags) {
+  return tags.reduce((msg, tag) => {
+    if (isStandardTag(tag)) {
+      return `${msg}, ${Attribute.green(tag)}`;
+    }
+    return `${msg}, ${tag}`;
+  });
+}
+function printContextField(name, value, withBullet) {
+  name = `${name}:`.padEnd(14);
+  let bullet = ``;
+  if (withBullet) {
+    bullet = `*`;
+  }
+  nodeLog(`		${bullet}	${name}${value}`);
+}
+function displayContext(violation, config) {
+  cy.wrap(violation.nodes, { log: false }).each((node) => {
+    const context = {
+      ["CSS Selector"]: formatTarget(node.target),
+      ["HTML"]: formatHTML(node.html.split("\n")),
+      ["Suggestions"]: formatSuggestions(node.failureSummary.split("\n")),
+      ["Standards"]: formatTags(violation.tags)
+    };
+    let withBullet = true;
+    for (const [key, value] of Object.entries(context)) {
+      if (config.displayContext !== true) {
+        continue;
+      }
+      printContextField(key, value, withBullet);
+      withBullet = false;
+    }
+    const log = Cypress.log({
+      name: `(${violation.impact}) ACCESSIBILITY VIOLATION`,
+      consoleProps: () => context,
+      message: violation.help
+    });
+    cy.get(context["CSS Selector"], { log: false }).then(($el) => {
+      log.set({ $el }).snapshot().end();
+    });
+  });
+}
+function printPass(pass, config) {
+  let messageTemplate = ` ${pass.help}`;
+  if (config.displayHelpUrl) {
+    messageTemplate += `
+		${pass.helpUrl}`;
+  }
+  nodeLog(`	${Attribute.green(Attribute.reversed(" PASS "))}${Attribute.green(messageTemplate)}: [${pass.id}]`);
+}
+function printViolation(violation, config) {
+  const impactPriority = impactToPriority(violation.impact);
+  let messageTemplate = ` (${violation.impact}) ${violation.help}`;
+  if (config.displayHelpUrl) {
+    messageTemplate += `
+		${violation.helpUrl}`;
+  }
+  if (impactPriority <= 1) {
+    nodeLog(`	${Attribute.red(Attribute.reversed(" FAIL "))}${Attribute.red(messageTemplate)}: [${violation.id}]`);
+  } else if (impactPriority <= 2) {
+    nodeLog(`	${Attribute.yellow(Attribute.reversed(` FAIL `))}${Attribute.yellow(messageTemplate)}: [${violation.id}]`);
+  } else {
+    nodeLog(`	${Attribute.magenta(Attribute.reversed(` FAIL `))}${Attribute.magenta(messageTemplate)}: [${violation.id}]`);
+  }
+}
+var impactComparator = (a, b) => {
+  const aImpact = impactToPriority(a.impact);
+  const bImpact = impactToPriority(b.impact);
+  return Math.sign(aImpact - bImpact);
+};
+function processResults(results, config) {
+  results.sort(impactComparator);
+  const postPass1 = filterResultsByStandardTags(results, config.standardsToReport);
+  const postPass2 = filterResultsByExcludedSelectors(postPass1.enabled, config.excludeSelectorsList);
+  return {
+    enabled: postPass2.enabled,
+    disabled: [...postPass1.disabled, ...postPass2.disabled]
+  };
+}
+function displayPasses(passes, config) {
+  if (!config.displayPasses || passes.enabled.length === 0) {
+    return;
+  }
+  for (const pass of passes.enabled) {
+    printPass(pass, config);
+  }
+}
+function displayViolations(violations, config, withTitle) {
+  if (!config.displayViolations || violations.enabled.length === 0) {
+    return;
+  }
+  if (violations.enabled.length > 0) {
+    if (withTitle) {
+      const testName = Cypress.mocha.getRunner()?.suite?.ctx?.currentTest?.title ?? "";
+      nodeLog(Attribute.red(`	[${violations.enabled.length} Accessibility violation(s) were detected after `) + Attribute.red(Attribute.underline(`"${testName}"`)) + Attribute.red(`]`));
+    }
+    for (const violation of violations.enabled) {
+      printViolation(violation, config);
+      if (config.displayContext) {
+        displayContext(violation, config);
+      }
+    }
+  } else {
+    nodeLog(Attribute.green(`	All enabled tests passed!`));
+  }
+}
+function anythingToDisplay(config, passes, violations) {
+  const { displayPasses: displayPasses2, displayViolations: displayViolations2 } = config;
+  const numPasses = passes.enabled.length;
+  const numViolations = violations.enabled.length;
+  const anyPasses = displayPasses2 && numPasses > 0;
+  const anyViolations = displayViolations2 && numViolations > 0;
+  return anyPasses || anyViolations;
+}
+function runAxe() {
+  Cypress.log({
+    name: "fk-cypress-axe",
+    displayName: "Axe",
+    message: ["Running accessibility tests"]
+  });
+  const config = getConfig();
+  if (config.ignoreAxeFailures === true) {
+    return;
+  }
+  cy.window({ log: false }).then((window) => {
+    window.axe.configure(config.axe);
+    return window.axe.run(config.context || window.document);
+  }).then(({ passes, violations }) => {
+    passes = processResults(passes, config);
+    violations = processResults(violations, config);
+    const displayNow = config.displayWhen === "immediate" || config.displayWhen === "both";
+    globalResults.passes.enabled = globalResults.passes.enabled.concat(passes.enabled);
+    globalResults.passes.disabled = globalResults.passes.disabled.concat(passes.disabled);
+    globalResults.violations.enabled = globalResults.violations.enabled.concat(violations.enabled);
+    globalResults.violations.disabled = globalResults.violations.disabled.concat(violations.disabled);
+    if (displayNow && anythingToDisplay(config, passes, violations)) {
+      nodeLog("	Accessibility results:");
+      displayPasses(passes, config);
+      displayViolations(violations, config, true);
+      nodeLog("");
+    }
+    return cy.wrap(violations, { log: false });
+  }).then((violations) => {
+    if (config.assertOnViolation) {
+      assert.equal(violations.enabled.length, 0, `${violations.enabled.length} A11y problems were detected`, { log: false });
+    }
+  });
+}
+function removeDuplicates(results) {
+  let finalResults = JSON.parse(JSON.stringify(results));
+  for (const [index, result] of finalResults.entries()) {
+    const foundIndex = finalResults.findIndex((v) => {
+      return v.help === result.help;
+    });
+    if (foundIndex !== index) {
+      finalResults[foundIndex].nodes = finalResults[foundIndex].nodes.concat(result.nodes);
+      finalResults[index].toBeRemoved = true;
+    }
+  }
+  finalResults = finalResults.filter((result) => {
+    return !result.toBeRemoved;
+  });
+  for (const result of finalResults) {
+    for (const [index, node] of result.nodes.entries()) {
+      const foundIndex = result.nodes.findIndex((n) => {
+        return n.html === node.html;
+      });
+      if (foundIndex !== index) {
+        result.nodes[index].toBeRemoved = true;
+      }
+    }
+    result.nodes = result.nodes.filter((n) => {
+      return !n.toBeRemoved;
+    });
+  }
+  return finalResults;
+}
+Cypress.Commands.add("getAxeConfigThisFile", () => {
+  const config = getConfig();
+  return cy.wrap(config);
+});
+Cypress.Commands.add("setAxeConfigThisFile", (userConfig) => {
+  cachedLocalConfig = userConfig;
+  return cy.wrap(userConfig);
+});
+Cypress.Commands.add("enableAxeFailures", () => {
+  const config = getConfig();
+  config.ignoreAxeFailures = false;
+  cachedLocalConfig = config;
+});
+Cypress.Commands.add("disableAxeFailures", () => {
+  const config = getConfig();
+  config.ignoreAxeFailures = true;
+  cachedLocalConfig = config;
+});
+Cypress.Commands.add("axe", () => {
+  prepareAxe();
+  runAxe();
+});
+before(() => {
+  cy.task("getLocalConfig", null, { log: false }).then((config) => {
+    cachedLocalConfig = config;
+  });
+});
+afterEach(() => {
+  cy.axe();
+});
+after(() => {
+  const config = getConfig();
+  const displayNow = config.displayWhen === "end" || config.displayWhen === "both";
+  if (config.ignoreAxeFailures === false && displayNow) {
+    globalResults.passes.enabled = removeDuplicates(globalResults.passes.enabled);
+    globalResults.passes.disabled = removeDuplicates(globalResults.passes.disabled);
+    globalResults.violations.enabled = removeDuplicates(globalResults.violations.enabled);
+    globalResults.violations.disabled = removeDuplicates(globalResults.violations.disabled);
+    globalResults.passes.enabled = globalResults.passes.enabled.filter((pass) => {
+      return globalResults.violations.enabled.every((violation) => {
+        return pass.id !== violation.id;
+      });
+    });
+    const { passes, violations } = globalResults;
+    if (anythingToDisplay(config, passes, violations)) {
+      nodeLog(Attribute.reversed(Attribute.yellow("---------------Accessibility Summary----------------")));
+      displayPasses(passes, config);
+      displayViolations(violations, config, false);
+    }
+  }
+});
+
 // src/support/html-validate.ts
 import "cypress-html-validate/commands";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/cypress-config",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Sharable Cypress configuration building blocks for Försäkringskassan",
   "keywords": [
     "cypress"
@@ -17,6 +17,7 @@
   "author": "Försäkringskassan",
   "sideEffects": [
     "./dist/support.mjs",
+    "./src/support/axe.ts",
     "./src/support/html-validate.ts"
   ],
   "type": "module",