@forsakringskassan/vue-lib-template 1.2.11 → 1.3.0

package/files/docs/build.mts

@@ -4,7 +4,9 @@ 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", {

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.10.1",
+    "@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/package.json

@@ -20,6 +20,13 @@
       "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"
@@ -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",
@@ -91,40 +98,40 @@
     "@forsakringskassan/commitlint-config": "4.2.8",
     "@forsakringskassan/cypress-config": "1.10.0",
     "@forsakringskassan/cypress-visual-regression": "5.2.0",
-    "@forsakringskassan/docs-generator": "3.10.1",
+    "@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/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.11",
-    "@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",
+    "@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/index.js

@@ -7,7 +7,7 @@
 
         const options = {
             ...packageJson.cloneman,
-            fileHash: "c8696b477625b5dc20f234843d09017230ad3dbd962739042e8d0f82b0166b2a",
+            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.11",
+  "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",