@forsakringskassan/cypress-config 1.6.1 → 1.7.0

package/README.md

@@ -11,7 +11,10 @@ npm install --save-dev @forsakringskassan/cypress-config
 If you previously had these packages installed, they can be uninstalled:
 
 ```bash
-npm rm mocha-multi-reporter
+npm rm \
+  @forsakringskassan/cypress-axe \
+  cypress-html-validate \
+  mocha-multi-reporter
 ```
 
 - [Usage](#usage)
@@ -67,6 +70,33 @@ configure({
 - `resetEmulatedMedia` - When enabled, any emulated CSS media features will be reset between runs.
 - `afterEach` - Enables features to automatically run after each test. See the various components for details.
 
+For component tests a preconfigured `mount` function is available.
+It adds the following Vue plugins from `@fkui/vue`:
+
+- [`FormatPlugin`](https://designsystem.forsakringskassan.se/latest/functions/plugins/formatplugin.html)
+- [`TestPlugin`](https://designsystem.forsakringskassan.se/latest/functions/plugins/testplugin.html)
+- [`TranslationPlugin`](https://designsystem.forsakringskassan.se/latest/functions/plugins/translationplugin.html)
+- [`ValidationPlugin`](https://designsystem.forsakringskassan.se/latest/functions/plugins/validationplugin.html)
+
+To use, edit `cypress/support/component.ts`:
+
+```diff
+-import { mount } from "cypress/mount";
+-import { configure } from "@forsakringskassan/cypress-config/support";
++import { configure, mount } from "@forsakringskassan/cypress-config/support";
+
+ Cypress.Commands.add("mount", mount);
+```
+
+If you need further customization, wrap it in your own custom function:
+
+```ts
+Cypress.Commands.add("mount", (component, options = {}) => {
+    /* modify options as needed */
+    return mount(component, options);
+});
+```
+
 ### Commands
 
 This preset adds new custom commands:

package/dist/support.d.ts

@@ -1,6 +1,5 @@
-import "@forsakringskassan/cypress-axe/support";
-import "cypress-html-validate/commands";
-
+import { mount as mount_2 } from 'cypress/vue';
+
 /**
  * Configure plugins.
  *
@@ -15,9 +14,29 @@ export declare function configure(options: {
     };
 }): void;
 
+/**
+ * Wrapper around `mount()` from `cypress/vue` with new defaults.
+ *
+ * @public
+ * @since v1.7.0
+ */
+export declare const mount: (component: Parameters<typeof mount_2>[0], options?: NonNullable<Parameters<typeof mount_2>[1]>) => ReturnType<typeof mount_2>;
+
 export { }
 
 
+import "@forsakringskassan/cypress-axe/support";
+import { type mount as cypressMount } from "cypress/vue";
+import "cypress-html-validate/commands";
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            mount: typeof cypressMount;
+        }
+    }
+}
+
+
 declare global {
     namespace Cypress {
         interface Chainable {

package/dist/support.mjs

@@ -94,6 +94,37 @@ function configure(options) {
     });
   }
 }
+
+// src/support/mount.ts
+import { mount as originalMount } from "cypress/vue";
+import {
+  FormatPlugin,
+  TestPlugin,
+  TranslationPlugin,
+  ValidationPlugin,
+  setRunningContext
+} from "@fkui/vue";
+var mount = (component, options) => {
+  options ??= {};
+  options.global ??= {};
+  options.global.plugins ??= [];
+  options.global.config ??= {};
+  options.global.config.compilerOptions ??= {};
+  options.global.config.compilerOptions.whitespace = "preserve";
+  options.global.plugins.push(
+    FormatPlugin,
+    TestPlugin,
+    TranslationPlugin,
+    ValidationPlugin
+  );
+  options.global.plugins.push({
+    install(app) {
+      setRunningContext(app);
+    }
+  });
+  return originalMount(component, options);
+};
 export {
-  configure
+  configure,
+  mount
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/cypress-config",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Sharable Cypress configuration building blocks for Försäkringskassan",
   "keywords": [
     "cypress"