@forsakringskassan/cypress-config 0.0.0 → 1.0.0

package/README.md

@@ -1,45 +1,78 @@
-# @forsakringskassan/cypress-config
+# `@forsakringskassan/cypress-config`
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+Sharable Cypress configuration building blocks for Försäkringskassan.
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+## Usage
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+In `cypress.config.ts`, replace the vanilla `defineConfig()` helper from `cypress` with `@forsakringskassan/cypress-config`:
 
-## Purpose
+```diff
+-import { defineConfig } from "cypress";
++import { defineConfig } from "@forsakringskassan/cypress-config";
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@forsakringskassan/cypress-config`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+ export default defineConfig({
+   /* ... */
+ });
+```
 
-## What is OIDC Trusted Publishing?
+It works the same but is preconfigured with new defaults.
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+> [!TIP]
+> The `defineConfig()` helper does not require any parameters.
+> Unless you are explicitly overwriting the default configuration it is recommended to call `defineConfig()` without parameters.
+>
+> ```ts
+> export default defineConfig();
+> ```
+>
+> This ensures maximum compatibility with future releases.
 
-## Setup Instructions
+A configuration function is available for usage in `cypress/support/e2e.ts` and/or `cypress/support/component.ts`:
 
-To properly configure OIDC trusted publishing for this package:
+```ts
+import { configure } from "@forsakringskassan/cypress-config/support";
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
+configure({
+    afterEach: {
+        htmlvalidate: true,
+    },
+});
+```
 
-## DO NOT USE THIS PACKAGE
+> [!NOTE]  
+> The `configure()` function is expected to be called exactly once.
+> If the call is omitted some functionality will not work as expected.
+> Calling it multiple times is undefined behaviour.
 
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
+See the various components for details.
 
-## More Information
+### HTML-Validate
 
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+A preconfigured [HTML-validate](https://html-validate.org/) plugin ([cypress-html-validate](https://gitlab.com/html-validate/cypress-html-validate/)) is exported as `htmlValidatePlugin`:
 
----
+```ts
+import {
+    defineConfig,
+    htmlValidatePlugin,
+} from "@forsakringskassan/cypress-config";
 
-**Maintained for OIDC setup purposes only**
+export default defineConfig({
+    component: {
+        async setupNodeEvents(on, config) {
+            config = await htmlValidatePlugin(on, config);
+        },
+    },
+});
+```
+
+To automatically run validation after each test configure it using the configuration function:
+
+```ts
+import { configure } from "@forsakringskassan/cypress-config/support";
+
+configure({
+    afterEach: {
+        htmlvalidate: true,
+    },
+});
+```

package/assets/component-index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <title>Components App</title>
+    </head>
+    <body>
+        <div data-cy-root>
+            <div id="teleport"></div>
+        </div>
+    </body>
+</html>

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import { ConfigData } from 'cypress-html-validate';
+import { CypressHtmlValidateOptions } from 'cypress-html-validate';
+import { defineConfig as defineConfig_2 } from 'cypress';
+
+/**
+ * @public
+ */
+export declare type ConfigOptions = Parameters<typeof defineConfig_2>[0];
+
+/**
+ * Default cypress configuration.
+ *
+ * @public
+ * @since v1.0.0
+ */
+export declare const defaultConfig: Readonly<{
+    allowCypressEnv: false;
+    video: false;
+    component: {
+        devServer: {
+            framework: "vue";
+            bundler: "vite";
+        };
+        indexHtmlFile: string;
+    };
+}>;
+
+/**
+ * @public
+ * @since v1.0.0
+ */
+export declare function defineConfig(userConfig?: Omit<ConfigOptions, "component"> & {
+    component?: Partial<ConfigOptions["component"]>;
+}): Readonly<ConfigOptions>;
+
+/**
+ * Preconfigured `cypress-html-validate` plugin.
+ *
+ * @public
+ * @since v1.0.0
+ * @param on - Cypress `on` callback from `setupNodeEvents`.
+ * @param cypressConfig - Cypress `config` parameter from `setupNodeEvents`.
+ * @param userConfig - Custom configuration to pass to `html-validate`.
+ * @param userOptions - Custom options to pass to `cypress-html-validate`.
+ * @returns A promise resolved with the updated cypress configuration.
+ */
+export declare function htmlValidatePlugin(on: Cypress.PluginEvents, cypressConfig: Cypress.PluginConfigOptions, userConfig?: ConfigData, userOptions?: CypressHtmlValidateOptions): Promise<Cypress.PluginConfigOptions>;
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,225 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  try {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  } catch (e) {
+    throw mod = 0, e;
+  }
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// node_modules/deepmerge/dist/cjs.js
+var require_cjs = __commonJS({
+  "node_modules/deepmerge/dist/cjs.js"(exports, module) {
+    "use strict";
+    var isMergeableObject = function isMergeableObject2(value) {
+      return isNonNullObject(value) && !isSpecial(value);
+    };
+    function isNonNullObject(value) {
+      return !!value && typeof value === "object";
+    }
+    function isSpecial(value) {
+      var stringValue = Object.prototype.toString.call(value);
+      return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
+    }
+    var canUseSymbol = typeof Symbol === "function" && Symbol.for;
+    var REACT_ELEMENT_TYPE = canUseSymbol ? /* @__PURE__ */ Symbol.for("react.element") : 60103;
+    function isReactElement(value) {
+      return value.$$typeof === REACT_ELEMENT_TYPE;
+    }
+    function emptyTarget(val) {
+      return Array.isArray(val) ? [] : {};
+    }
+    function cloneUnlessOtherwiseSpecified(value, options) {
+      return options.clone !== false && options.isMergeableObject(value) ? deepmerge2(emptyTarget(value), value, options) : value;
+    }
+    function defaultArrayMerge(target, source, options) {
+      return target.concat(source).map(function(element) {
+        return cloneUnlessOtherwiseSpecified(element, options);
+      });
+    }
+    function getMergeFunction(key, options) {
+      if (!options.customMerge) {
+        return deepmerge2;
+      }
+      var customMerge = options.customMerge(key);
+      return typeof customMerge === "function" ? customMerge : deepmerge2;
+    }
+    function getEnumerableOwnPropertySymbols(target) {
+      return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
+        return Object.propertyIsEnumerable.call(target, symbol);
+      }) : [];
+    }
+    function getKeys(target) {
+      return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
+    }
+    function propertyIsOnObject(object, property) {
+      try {
+        return property in object;
+      } catch (_) {
+        return false;
+      }
+    }
+    function propertyIsUnsafe(target, key) {
+      return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
+    }
+    function mergeObject(target, source, options) {
+      var destination = {};
+      if (options.isMergeableObject(target)) {
+        getKeys(target).forEach(function(key) {
+          destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+        });
+      }
+      getKeys(source).forEach(function(key) {
+        if (propertyIsUnsafe(target, key)) {
+          return;
+        }
+        if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
+          destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
+        } else {
+          destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
+        }
+      });
+      return destination;
+    }
+    function deepmerge2(target, source, options) {
+      options = options || {};
+      options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+      options.isMergeableObject = options.isMergeableObject || isMergeableObject;
+      options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+      var sourceIsArray = Array.isArray(source);
+      var targetIsArray = Array.isArray(target);
+      var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+      if (!sourceAndTargetTypesMatch) {
+        return cloneUnlessOtherwiseSpecified(source, options);
+      } else if (sourceIsArray) {
+        return options.arrayMerge(target, source, options);
+      } else {
+        return mergeObject(target, source, options);
+      }
+    }
+    deepmerge2.all = function deepmergeAll(array, options) {
+      if (!Array.isArray(array)) {
+        throw new Error("first argument should be an array");
+      }
+      return array.reduce(function(prev, next) {
+        return deepmerge2(prev, next, options);
+      }, {});
+    };
+    var deepmerge_1 = deepmerge2;
+    module.exports = deepmerge_1;
+  }
+});
+
+// src/plugins/html-validate.ts
+import { createRequire } from "node:module";
+import "cypress";
+import { install } from "cypress-html-validate/plugin";
+
+// src/utils/merge-config.ts
+var import_deepmerge = __toESM(require_cjs(), 1);
+function overwriteMerge(_a, b) {
+  return b;
+}
+function mergeConfig(a, b) {
+  return (0, import_deepmerge.default)(a, b ?? {}, { arrayMerge: overwriteMerge });
+}
+
+// src/plugins/html-validate.ts
+var require2 = createRequire(import.meta.url);
+var exclude = [];
+try {
+  exclude = require2("@fkui/vue/htmlvalidate/cypress");
+} catch {
+}
+var htmlValidateConfig = () => {
+  return {
+    rules: {
+      /* some examples show how to use custom heading levels which often
+       * doesn't match the heading outline for the documentation */
+      "heading-level": ["off"],
+      /* prevents mismatches from disabled rules which does not trigger errors
+       * when Cypress tests are running but would yield errors during normal
+       * validation */
+      "no-unused-disable": "off",
+      /* we cannot use native progressbar element due to SLA */
+      "prefer-native-element": [
+        "error",
+        {
+          exclude: ["progressbar"]
+        }
+      ],
+      /* sadly we dont use SRI at FK */
+      "require-sri": "off"
+    }
+  };
+};
+var htmlValidateOptions = () => {
+  return {
+    include: [
+      /* Cypress component tests */
+      "#__cy_vue_root > div",
+      /* @forsakringskassan/docs-generator examples */
+      ".code-preview__preview",
+      /* @forsakringskassan/docs-live-example examples */
+      ".live-example__example"
+    ],
+    exclude
+  };
+};
+function htmlValidatePlugin(on, cypressConfig, userConfig, userOptions) {
+  const config = mergeConfig(htmlValidateConfig(), userConfig);
+  const options = mergeConfig(htmlValidateOptions(), userOptions);
+  install(on, config, options);
+  return Promise.resolve(cypressConfig);
+}
+
+// src/default-config.ts
+import { createRequire as createRequire2 } from "node:module";
+var require3 = createRequire2(import.meta.url);
+var defaultConfig = Object.freeze({
+  allowCypressEnv: false,
+  /* disable video recording, it is to slow both on remote machines and on
+   * CI/CD testing. */
+  video: false,
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "vite"
+    },
+    indexHtmlFile: require3.resolve("#assets/component-index.html")
+  }
+});
+
+// src/define-config.ts
+function defineConfig(userConfig) {
+  return mergeConfig(
+    defaultConfig,
+    userConfig
+  );
+}
+export {
+  defaultConfig,
+  defineConfig,
+  htmlValidatePlugin
+};

package/dist/support.d.ts

@@ -0,0 +1,15 @@
+import "cypress-html-validate/commands";
+
+/**
+ * Configure plugins.
+ *
+ * @public
+ * @since v1.0.0
+ */
+export declare function configure(options: {
+    afterEach: {
+        htmlvalidate: boolean;
+    };
+}): void;
+
+export { }

package/dist/support.mjs

@@ -0,0 +1,15 @@
+// src/support/html-validate.ts
+import "cypress-html-validate/commands";
+
+// src/support/configure.ts
+import "cypress";
+function configure(options) {
+  if (options.afterEach.htmlvalidate) {
+    afterEach(() => {
+      cy.htmlvalidate();
+    });
+  }
+}
+export {
+  configure
+};

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.59.0"
+    }
+  ]
+}

package/package.json

@@ -1,10 +1,53 @@
 {
   "name": "@forsakringskassan/cypress-config",
-  "version": "0.0.0",
-  "description": "OIDC trusted publishing setup package for @forsakringskassan/cypress-config",
+  "version": "1.0.0",
+  "description": "Sharable Cypress configuration building blocks for Försäkringskassan",
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+    "cypress"
+  ],
+  "homepage": "https://github.com/Forsakringskassan/cypress-config#readme",
+  "bugs": {
+    "url": "https://github.com/Forsakringskassan/cypress-config/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Forsakringskassan/cypress-config.git"
+  },
+  "license": "MIT",
+  "author": "Försäkringskassan",
+  "sideEffects": [
+    "./dist/support.mjs",
+    "./src/support/html-validate.ts"
+  ],
+  "type": "module",
+  "imports": {
+    "#assets/*": "./assets/*"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./support": {
+      "types": "./dist/support.d.ts",
+      "default": "./dist/support.mjs"
+    }
+  },
+  "main": "dist/index.mjs",
+  "files": [
+    "assets",
+    "dist"
+  ],
+  "dependencies": {
+    "cypress-html-validate": "9.0.0"
+  },
+  "peerDependencies": {
+    "@fkui/vue": ">= 6.0.0",
+    "cypress": "^15.0.0",
+    "html-validate": ">= 8.0.0"
+  },
+  "engines": {
+    "node": "^22.16 || >= 24",
+    "npm": ">= 7"
+  }
 }