@forsakringskassan/vue-lib-template 1.2.10 → 1.3.0

package/files/cypress/support/component.ts

@@ -6,25 +6,7 @@ import "@fkui/theme-default";
 import "./main.scss";
 import "./common";
 
-Cypress.Commands.add("mount", (component, options = {}) => {
-    options.global ??= {};
-    options.global.plugins ??= [];
-
-    /* handle warnings as errors */
-    options.global.plugins.push({
-        install(app) {
-            app.config.warnHandler = (msg) => {
-                const mochaRunner = Cypress.mocha.getRunner();
-                const body = mochaRunner.test?.body ?? "";
-                if (!body.includes("<expectedException")) {
-                    cy.wrap(`Vue warning: ${msg}`).should("be.empty");
-                }
-            };
-        },
-    });
-
-    return mount(component, options);
-});
+Cypress.Commands.add("mount", mount);
 
 const uncaughtErrors: string[] = [];
 

package/files/cypress/tsconfig.json

@@ -14,6 +14,7 @@
         ],
         "typeRoots": ["../node_modules", "../node_modules/@types", "./types"],
         "paths": {
+            // prettier-ignore
             "@forsakringskassan/vue-lib-template/selectors": [
                 "./src/selectors/index.ts"
             ],

package/files/docs/build.mts

@@ -1,10 +1,12 @@
 /* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
-import { copyFileSync } from "node:fs";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 import {
     Generator,
+    extractMarkdownProcessor,
     frontMatterFileReader,
+    manifestProcessor,
     vueFileReader,
 } from "@forsakringskassan/docs-generator";
 import pkg from "../package.json" with { type: "json" };
@@ -24,6 +26,12 @@ const docs = new Generator(import.meta.url, {
         "@fkui/logic",
         "@fkui/vue",
     ],
+    processors: [
+        extractMarkdownProcessor({
+            outputFolder: path.join(import.meta.dirname, "../dist/docs"),
+        }),
+        manifestProcessor(),
+    ],
 });
 
 docs.compileScript("main", "./src/main.js", {
@@ -34,10 +42,20 @@ docs.compileStyle("main", "./src/main.scss", {
     appendTo: "head",
 });
 
+const styleUrl = import.meta.resolve(`../dist/esm/style.css`);
+const stylePath = fileURLToPath(styleUrl); // workaround for https://github.com/Forsakringskassan/docs-generator/issues/499
+docs.compileStyle("lib", stylePath, {
+    appendTo: "head",
+});
+
 docs.compileScript("mocks", "./src/bundle-mocks.mjs", {
     appendTo: "head",
 });
 
+const mswUrl = import.meta.resolve("msw/mockServiceWorker.js");
+const mswPath = fileURLToPath(mswUrl); // workaround for https://github.com/Forsakringskassan/docs-generator/issues/499
+docs.compileWorker("msw", mswPath);
+
 await docs.build([
     {
         include: ["**/*.md"],
@@ -49,8 +67,3 @@ await docs.build([
         fileReader: vueFileReader,
     },
 ]);
-
-copyFileSync(
-    "../node_modules/msw/lib/mockServiceWorker.js",
-    "./public/mock-service-worker.js",
-);

package/files/docs/package.json

@@ -10,11 +10,11 @@
     "@fkui/icon-lib-default": "6.58.0",
     "@fkui/vue": "6.58.0",
     "@forsakringskassan/apimock-express": "4.1.0",
-    "@forsakringskassan/docs-generator": "3.9.0",
+    "@forsakringskassan/docs-generator": "3.11.1",
     "@tsconfig/node24": "24.0.5",
     "@tsconfig/recommended": "1.0.13",
     "http-server": "14.1.1",
     "msw": "2.15.0",
-    "vue": "3.5.42"
+    "vue": "3.5.43"
   }
 }

package/files/docs/src/bundle-mocks.mjs

@@ -11,7 +11,7 @@ const handlers = [
 const worker = setupWorker(...handlers);
 // eslint-disable-next-line no-undef -- technical debt
 const rootUrl = document.documentElement.dataset["rootUrl"];
-const url = `${rootUrl}/mock-service-worker.js`;
+const url = `${rootUrl}/msw.js`;
 
 // Used in setup.ts
 // eslint-disable-next-line unicorn/no-global-object-property-assignment, no-undef -- technical debt

package/files/package.json

@@ -20,11 +20,18 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.esm.js"
     },
+    "./docs": {
+      "types": "./dist/docs/index.d.mts",
+      "import": "./dist/docs/index.mjs"
+    },
+    "./docs/links.json": {
+      "default": "./dist/docs/links.json"
+    },
     "./selectors": {
       "types": "./dist/types/selectors.d.ts",
       "import": "./dist/esm/selectors.esm.js"
     },
-    "./style.css": "./dist/esm/vue-lib-template.css",
+    "./style.css": "./dist/esm/style.css",
     "./package.json": "./package.json"
   },
   "main": "dist/esm/index.esm.js",
@@ -57,7 +64,7 @@
     "postpublish": "release-postpublish",
     "start": "vite --",
     "start:docs": "npm start -w docs",
-    "stylelint": "stylelint \"src/**/*.{css,scss}\"",
+    "stylelint": "stylelint \"src/**/*.{css,scss,vue}\"",
     "stylelint:fix": "npm run stylelint -- --fix",
     "pretest": "npm run lint",
     "test": "vitest run",
@@ -89,42 +96,42 @@
     "@fkui/vue": "6.58.0",
     "@forsakringskassan/apimock-express": "4.1.0",
     "@forsakringskassan/commitlint-config": "4.2.8",
-    "@forsakringskassan/cypress-config": "1.9.2",
+    "@forsakringskassan/cypress-config": "1.10.0",
     "@forsakringskassan/cypress-visual-regression": "5.2.0",
-    "@forsakringskassan/docs-generator": "3.9.0",
+    "@forsakringskassan/docs-generator": "3.11.1",
     "@forsakringskassan/docs-live-example": "3.0.2",
-    "@forsakringskassan/eslint-config": "15.9.10",
-    "@forsakringskassan/eslint-config-cli": "15.9.3",
-    "@forsakringskassan/eslint-config-cypress": "15.9.9",
-    "@forsakringskassan/eslint-config-jest": "15.9.2",
-    "@forsakringskassan/eslint-config-typescript": "15.9.8",
-    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.9.8",
-    "@forsakringskassan/eslint-config-vitest": "15.9.4",
-    "@forsakringskassan/eslint-config-vue": "15.9.8",
-    "@forsakringskassan/prettier-config": "3.7.8",
-    "@forsakringskassan/stylelint-config": "3.4.6",
-    "@forsakringskassan/vite-lib-config": "5.12.1",
+    "@forsakringskassan/eslint-config": "15.10.0",
+    "@forsakringskassan/eslint-config-cli": "15.10.0",
+    "@forsakringskassan/eslint-config-cypress": "15.10.0",
+    "@forsakringskassan/eslint-config-jest": "15.10.0",
+    "@forsakringskassan/eslint-config-typescript": "15.10.0",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.10.0",
+    "@forsakringskassan/eslint-config-vitest": "15.10.0",
+    "@forsakringskassan/eslint-config-vue": "15.10.0",
+    "@forsakringskassan/prettier-config": "3.7.10",
+    "@forsakringskassan/stylelint-config": "3.5.0",
+    "@forsakringskassan/vite-lib-config": "5.12.4",
     "@forsakringskassan/vitest-config-jsdom": "5.0.0",
-    "@forsakringskassan/vue-lib-template": "1.2.10",
-    "@html-validate/release-scripts": "7.6.11",
-    "@types/node": "24.13.4",
+    "@forsakringskassan/vue-lib-template": "1.3.0",
+    "@html-validate/release-scripts": "7.6.12",
+    "@types/node": "24.13.5",
     "@typescript/native": "npm:typescript@7.0.2",
-    "@vue/server-renderer": "3.5.42",
-    "@vue/test-utils": "2.5.0",
-    "cloneman": "1.24.0",
+    "@vue/server-renderer": "3.5.43",
+    "@vue/test-utils": "2.5.1",
+    "cloneman": "1.24.1",
     "core-js": "3.50.0",
-    "cypress": "16.0.0",
-    "html-validate": "11.15.0",
+    "cypress": "16.1.0",
+    "html-validate": "11.16.0",
     "html-validate-markdown": "6.0.0",
     "html-validate-vue": "9.3.1",
     "mocha-junit-reporter": "2.2.1",
-    "npm-pkg-lint": "5.2.5",
+    "npm-pkg-lint": "5.3.1",
     "npm-run-all2": "9.0.3",
     "rimraf": "6.1.3",
     "typescript": "npm:@typescript/typescript6@6.0.2",
     "vite": "8.3.0",
-    "vitest": "5.0.0",
-    "vue": "3.5.42",
+    "vitest": "5.0.1",
+    "vue": "3.5.43",
     "vue-tsc": "3.3.11"
   },
   "peerDependencies": {

package/files/src/selectors/guide/FcCatInfoComponent.selectors.spec.ts

@@ -0,0 +1,111 @@
+import { TestPlugin, ValidationPlugin } from "@fkui/vue";
+import { mount } from "@vue/test-utils";
+import { beforeEach, expect, it, vi } from "vitest";
+import FcCatInfoComponent from "../../components/guide/FcCatInfo/FcCatInfoComponent.vue";
+import { catGetById } from "../../components/guide/FcCatInfo/cat-api";
+import { cats } from "../../components/guide/FcCatInfo/cat-data";
+import { FcCatInfoComponentSelectors } from "./FcCatInfoComponent.selectors";
+
+vi.mock(import("../../components/guide/FcCatInfo/cat-api"));
+
+beforeEach(() => {
+    vi.mocked(catGetById).mockResolvedValue(cats[0]);
+});
+
+it("should use the default selector", () => {
+    expect.assertions(2);
+    const wrapper = mount(FcCatInfoComponent, {
+        props: { catId: cats[0].id },
+    });
+    const { selector } = FcCatInfoComponentSelectors();
+
+    expect(selector).toBe(":scope");
+    expect(wrapper.find(selector).exists()).toBe(true);
+});
+
+it("should find the component with an explicit selector", () => {
+    expect.assertions(2);
+    const wrapper = mount(FcCatInfoComponent, {
+        attrs: { "data-test": "my-cat-info" },
+        props: { catId: cats[0].id },
+    });
+    const { selector } = FcCatInfoComponentSelectors(
+        '[data-test="my-cat-info"]',
+    );
+
+    expect(selector).toBe('[data-test="my-cat-info"]');
+    expect(wrapper.find(selector).exists()).toBe(true);
+});
+
+it("should find the loading container", () => {
+    expect.assertions(1);
+    const wrapper = mount(FcCatInfoComponent, {
+        props: { catId: cats[0].id },
+    });
+    const { loadingContainer } = FcCatInfoComponentSelectors();
+
+    expect(wrapper.get(loadingContainer()).text()).toContain(
+        "Hämtar kattinformation...",
+    );
+});
+
+it("should find all view mode elements", async () => {
+    expect.assertions(5);
+    const wrapper = mount(FcCatInfoComponent, {
+        props: { catId: cats[0].id, isEditable: false },
+    });
+    const selectors = FcCatInfoComponentSelectors();
+
+    await vi.waitFor(() => {
+        if (!wrapper.find(selectors.viewContainer()).exists()) {
+            throw new Error("View container has not been rendered yet");
+        }
+    });
+
+    const view = wrapper.get(selectors.viewContainer());
+    expect(view.text()).toContain(cats[0].name);
+    expect(view.text()).toContain(`${cats[0].age} år`);
+    expect(view.text()).toContain(cats[0].breed);
+    expect(view.text()).toContain(cats[0].color);
+    expect(view.text()).toContain(cats[0].favoriteFood);
+});
+
+it("should find all edit mode inputs", async () => {
+    expect.assertions(6);
+    const wrapper = mount(FcCatInfoComponent, {
+        props: { catId: cats[0].id, isEditable: true },
+        global: {
+            plugins: [TestPlugin, ValidationPlugin],
+        },
+    });
+    const selectors = FcCatInfoComponentSelectors();
+
+    await vi.waitFor(() => {
+        if (!wrapper.find(selectors.editContainer()).exists()) {
+            throw new Error("Edit container has not been rendered yet");
+        }
+    });
+
+    expect(wrapper.find(selectors.editContainer()).exists()).toBe(true);
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.nameInput()).element.value,
+    ).toBe(cats[0].name);
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.ageInput()).element.value,
+    ).toBe(cats[0].age.toString());
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.breedInput()).element.value,
+    ).toBe(cats[0].breed);
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.colorInput()).element.value,
+    ).toBe(cats[0].color);
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.favoriteFoodInput()).element
+            .value,
+    ).toBe(cats[0].favoriteFood);
+});

package/files/tsconfig.cypress.json

@@ -7,9 +7,11 @@
     ],
     "compilerOptions": {
         "paths": {
+            // prettier-ignore
             "@forsakringskassan/vue-lib-template/selectors": [
                 "./src/selectors/index.ts"
             ],
+            // prettier-ignore
             "@forsakringskassan/vue-lib-template": ["./src/index.ts"]
         }
     }

package/files/tsconfig.lib.json

@@ -4,9 +4,11 @@
     "extends": "@forsakringskassan/vite-lib-config/tsconfig.lib.json",
     "compilerOptions": {
         "paths": {
+            // prettier-ignore
             "@forsakringskassan/vue-lib-template/selectors": [
                 "./src/selectors/index.ts"
             ],
+            // prettier-ignore
             "@forsakringskassan/vue-lib-template": ["./src/index.ts"]
         }
     }

package/hooks/install.mjs

@@ -1,9 +1,8 @@
 
 
 export async function install(context                )                {
-    const { updateJsonFile, getApplicationName, replaceInFile } = context;
+    const { getApplicationName, replaceInFile } = context;
     const scopedName = getApplicationName();
-    const unscopedName = getApplicationName({ unscoped: true });
 
     /* update placeholder names with the real application name (from package.json) */
     const placeholder = /"@forsakringskassan\/vue-lib-template(\/[^"]+)?"/g;
@@ -14,11 +13,4 @@ export async function install(context                )                {
     await replaceInFile("tsconfig.lib.json", placeholder, quotedName);
     await replaceInFile("tsconfig.cypress.json", placeholder, quotedName);
     await replaceInFile("tsconfig.selectors.json", placeholder, quotedName);
-
-    /* correct exported subpath "style.css" */
-    await updateJsonFile("package.json", {
-        exports: {
-            "./style.css": `./dist/esm/${unscopedName}.css`,
-        },
-    });
 }

package/index.js

@@ -7,7 +7,7 @@
 
         const options = {
             ...packageJson.cloneman,
-            fileHash: "2ee3be5e7c82414646fd3310bff404d2d9441920ddcdc0c78457e8f783479049",
+            fileHash: "3ed96f7ccd01c366c430cf3081cbf47d160888c6d793dc177709a483b78000f9",
             filesDir: path.join(import.meta.dirname, "files"),
             hooksDir: path.join(import.meta.dirname, "hooks"),
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/vue-lib-template",
-  "version": "1.2.10",
+  "version": "1.3.0",
   "description": "Vue library template based on Cloneman",
   "keywords": [
     "template",
@@ -91,6 +91,7 @@
       "src/mocks/guide/cat-api.mock.mts",
       "src/mocks/guide/index.mts",
       "src/mocks/index.mts",
+      "src/selectors/guide/FcCatInfoComponent.selectors.spec.ts",
       "src/selectors/guide/FcCatInfoComponent.selectors.ts",
       "src/selectors/guide/index.ts",
       "src/selectors/index.ts",