@forsakringskassan/vue-lib-template 1.0.4 → 1.1.0

package/files/README.md

@@ -80,9 +80,10 @@ Dokumentationen genereras med [`@forsakringskassan/docs-generator`](https://fors
 - [x] npm run build
 - [x] npm run build:docs
 - [x] npm run start:docs
-- [ ] apimock
-- [ ] bättre exempelkomponent
-- [ ] bättre enhetstest
-- [ ] bättre komponenttest
-- [ ] live exempel
+- [x] apimock
+- [x] bättre exempelkomponent
+- [x] bättre enhetstest
+- [x] bättre komponenttest
+- [x] live exempel
 - [ ] skill för att skapa live exempel
+- [ ] skript för att rensa demo-filer

package/files/_htmlvalidateignore

@@ -1,2 +1,4 @@
 # generated files
 docs/public/
+docs/node_modules/
+docs/temp/

package/files/cypress.config.ts

@@ -85,6 +85,7 @@ export default defineConfig({
             framework: "vue",
             bundler: "vite",
         },
+        excludeSpecPattern: ["temp/**"], // cloneman puts cy-files in temp folder during build
     },
     defaultBrowser: "chrome",
     hosts: { localhost: "127.0.0.1" },

package/files/docs/build.mts

@@ -1,3 +1,4 @@
+import { copyFileSync } from "node:fs";
 import path from "node:path";
 import {
     Generator,
@@ -17,10 +18,18 @@ const docs = new Generator(import.meta.url, {
     ],
 });
 
+docs.compileScript("main", "./src/main.js", {
+    appendTo: "body",
+});
+
 docs.compileStyle("main", "./src/main.scss", {
     appendTo: "head",
 });
 
+docs.compileScript("mocks", "./src/bundle-mocks.mjs", {
+    appendTo: "head",
+});
+
 await docs.build([
     {
         include: ["**/*.md"],
@@ -32,3 +41,8 @@ await docs.build([
         fileReader: vueFileReader,
     },
 ]);
+
+copyFileSync(
+    "../node_modules/msw/lib/mockServiceWorker.js",
+    "./public/mock-service-worker.js",
+);

package/files/docs/index.md

@@ -1,3 +1,5 @@
 ---
 title: "@forsakringskassan/vue-lib-template"
 ---
+
+För mer information om hur du skapar egna sidor, besök [docs-generator](https://forsakringskassan.github.io/docs-generator/latest/).

package/files/docs/kattinformation/index.md

@@ -0,0 +1,28 @@
+---
+title: Kattinformation
+status: Draft
+layout: component
+component: FcCatInfoComponent
+---
+
+Komponenten kan visa kattdata i visningsläge eller i ett redigerbart läge.
+Den hämtar kattdata från ett mockat backend.
+
+```import live-example
+FcCatInfoComponentLiveExample.vue
+```
+
+## Tänk på att
+
+- Detta är en exempelkomponent.
+- Den ska inte användas i produktion.
+
+## Copy
+
+- Använd tydlig och begriplig text.
+
+## API
+
+::: api
+vue:FcCatInfoComponent
+:::

package/files/docs/package.json

@@ -7,11 +7,14 @@
     "start": "http-server public"
   },
   "devDependencies": {
-    "@fkui/vue": "6.55.0",
-    "@forsakringskassan/docs-generator": "3.6.2",
+    "@fkui/icon-lib-default": "6.57.1",
+    "@fkui/vue": "6.57.1",
+    "@forsakringskassan/apimock-express": "4.0.0",
+    "@forsakringskassan/docs-generator": "3.6.4",
     "@tsconfig/node24": "24.0.5",
     "@tsconfig/recommended": "1.0.13",
     "http-server": "14.1.1",
+    "msw": "2.15.0",
     "vue": "3.5.42"
   }
 }

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

@@ -0,0 +1,22 @@
+import { matchRequest } from "@forsakringskassan/apimock-express/browser";
+import { http } from "msw";
+import { setupWorker } from "msw/browser";
+import mocks from "../../src/mocks.mts";
+
+const handlers = [
+    http.all("/api/*", async (req) => {
+        return await matchRequest(mocks, req.request);
+    }),
+];
+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`;
+
+// Used in setup.ts
+// eslint-disable-next-line unicorn/no-global-object-property-assignment, no-undef -- technical debt
+window.bundleMocks = worker.start({
+    serviceWorker: {
+        url,
+    },
+});

package/files/docs/src/global.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+    interface Window {
+        bundleMocks?: Promise<void>;
+    }
+}

package/files/docs/src/main.js

@@ -0,0 +1,17 @@
+import { config } from "@fkui/vue";
+
+function importDefault(m) {
+    return m.default ?? m;
+}
+
+async function importIcons() {
+    const icons = importDefault(await import(process.env.DOCS_ICON_LIB));
+
+    for (const entry of Object.values(icons)) {
+        entry.injectSpritesheet();
+    }
+}
+
+config.teleportTarget = document.querySelector("#teleport-target");
+
+await importIcons();

package/files/docs/src/main.scss

@@ -1 +1,23 @@
 @use "@forsakringskassan/docs-generator/style.css";
+@use "@fkui/theme-default" as theme with (
+    $global: false
+);
+@use "@fkui/font-default" as font with (
+    $global: false
+);
+@use "@fkui/design";
+@use "@fkui/design/lib/fonts.css";
+@use "@forsakringskassan/docs-live-example";
+
+@include font.font-face;
+
+:root {
+    @include theme.auto;
+    @include font.font-family;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+}

package/files/docs/src/setup.ts

@@ -10,8 +10,13 @@ import {
 } from "@fkui/vue";
 import { type SetupOptions } from "@forsakringskassan/docs-generator";
 
-export function setup(options: SetupOptions): void {
+export async function setup(options: SetupOptions): Promise<void> {
     const { rootComponent, selector } = options;
+
+    // Set in bundle-mocks.mjs, wait on mock service worker to be ready.
+    if (window.bundleMocks) {
+        await window.bundleMocks;
+    }
     const app = createApp({
         render() {
             return h(FErrorHandlingApp, { defaultComponent: rootComponent });

package/files/docs/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": ["@tsconfig/recommended", "@tsconfig/node24"],
     "compilerOptions": {
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
         "types": ["node"]
     },
     "include": ["**/*.ts", "**/*.mts"],

package/files/etc/lib.api.md

@@ -12,7 +12,7 @@ import { PublicProps } from 'vue';
 // Warning: (ae-forgotten-export) The symbol "__VLS_export" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const AwesomeComponent: typeof __VLS_export;
+export const FcCatInfoComponent: typeof __VLS_export;
 
 // (No @packageDocumentation comment for this package)
 

package/files/etc/selectors.api.md

@@ -4,6 +4,19 @@
 
 ```ts
 
+// @public
+export function FcCatInfoComponentSelectors(selector?: string): Readonly<{
+    readonly selector: string;
+    loadingContainer(): string;
+    viewContainer(): string;
+    editContainer(): string;
+    nameInput(): string;
+    ageInput(): string;
+    breedInput(): string;
+    colorInput(): string;
+    favoriteFoodInput(): string;
+}>;
+
 // (No @packageDocumentation comment for this package)
 
 ```

package/files/package.json

@@ -1,6 +1,19 @@
 {
   "name": "${name}",
   "version": "${version}",
+  "description": "Vue library template based on Cloneman",
+  "keywords": [
+    "template",
+    "vue",
+    "cloneman",
+    "library"
+  ],
+  "homepage": "https://github.com/Forsakringskassan/vue-lib-template#readme",
+  "bugs": {
+    "url": "https://github.com/Forsakringskassan/vue-lib-template/issues"
+  },
+  "license": "MIT",
+  "author": "Försäkringskassan",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -66,51 +79,52 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@babel/preset-env": "7.29.7",
-    "@fkui/design": "6.55.0",
-    "@fkui/font-default": "6.55.0",
-    "@fkui/icon-lib-default": "6.55.0",
-    "@fkui/logic": "6.55.0",
-    "@fkui/test-utils": "6.55.0",
-    "@fkui/theme-default": "6.55.0",
-    "@fkui/vue": "6.55.0",
+    "@fkui/design": "6.57.1",
+    "@fkui/font-default": "6.57.0",
+    "@fkui/icon-lib-default": "6.57.1",
+    "@fkui/logic": "6.57.1",
+    "@fkui/test-utils": "6.57.1",
+    "@fkui/theme-default": "6.57.1",
+    "@fkui/vue": "6.57.1",
+    "@forsakringskassan/apimock-express": "4.0.0",
     "@forsakringskassan/commitlint-config": "4.2.8",
     "@forsakringskassan/cypress-axe": "5.1.5",
-    "@forsakringskassan/cypress-visual-regression": "5.1.0",
-    "@forsakringskassan/docs-generator": "3.6.2",
-    "@forsakringskassan/docs-live-example": "3.0.1",
-    "@forsakringskassan/eslint-config": "15.9.0",
-    "@forsakringskassan/eslint-config-cli": "15.9.0",
-    "@forsakringskassan/eslint-config-cypress": "15.9.0",
-    "@forsakringskassan/eslint-config-jest": "15.9.0",
-    "@forsakringskassan/eslint-config-typescript": "15.9.0",
-    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.9.0",
-    "@forsakringskassan/eslint-config-vitest": "15.9.0",
-    "@forsakringskassan/eslint-config-vue": "15.9.0",
+    "@forsakringskassan/cypress-visual-regression": "5.2.0",
+    "@forsakringskassan/docs-generator": "3.6.4",
+    "@forsakringskassan/docs-live-example": "3.0.2",
+    "@forsakringskassan/eslint-config": "15.9.5",
+    "@forsakringskassan/eslint-config-cli": "15.9.3",
+    "@forsakringskassan/eslint-config-cypress": "15.9.3",
+    "@forsakringskassan/eslint-config-jest": "15.9.2",
+    "@forsakringskassan/eslint-config-typescript": "15.9.2",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.9.2",
+    "@forsakringskassan/eslint-config-vitest": "15.9.4",
+    "@forsakringskassan/eslint-config-vue": "15.9.6",
     "@forsakringskassan/prettier-config": "3.7.8",
-    "@forsakringskassan/stylelint-config": "3.4.5",
-    "@forsakringskassan/vite-lib-config": "5.10.2",
-    "@forsakringskassan/vitest-config-jsdom": "2.7.0",
-    "@forsakringskassan/vue-lib-template": "1.0.4",
-    "@html-validate/release-scripts": "7.6.8",
+    "@forsakringskassan/stylelint-config": "3.4.6",
+    "@forsakringskassan/vite-lib-config": "5.11.0",
+    "@forsakringskassan/vitest-config-jsdom": "5.0.0",
+    "@forsakringskassan/vue-lib-template": "1.1.0",
+    "@html-validate/release-scripts": "7.6.11",
     "@types/node": "24.13.3",
     "@typescript/native": "npm:typescript@7.0.2",
     "@vue/server-renderer": "3.5.42",
     "@vue/test-utils": "2.5.0",
-    "cloneman": "1.22.0",
+    "cloneman": "1.23.1",
     "core-js": "3.50.0",
-    "cypress": "15.21.1",
-    "cypress-html-validate": "9.0.0",
-    "html-validate": "11.10.0",
+    "cypress": "16.0.0",
+    "cypress-html-validate": "9.1.0",
+    "html-validate": "11.14.0",
     "html-validate-markdown": "6.0.0",
     "html-validate-vue": "9.3.1",
     "mocha-junit-reporter": "2.2.1",
     "mocha-multi-reporters": "1.5.1",
-    "npm-pkg-lint": "5.2.4",
+    "npm-pkg-lint": "5.2.5",
     "npm-run-all2": "9.0.3",
     "rimraf": "6.1.3",
     "typescript": "npm:@typescript/typescript6@6.0.2",
     "vite": "8.2.2",
-    "vitest": "4.1.11",
+    "vitest": "5.0.0",
     "vue": "3.5.42",
     "vue-tsc": "3.3.11"
   },
@@ -130,7 +144,9 @@
     "cypress": true,
     "esbuild": true,
     "fsevents": false,
+    "msw": false,
     "unrs-resolver": true
   },
+  "cloneman": {},
   "externalDependencies": []
 }

package/files/renovate.json

@@ -3,6 +3,7 @@
     "ignoreDeps": [
         "@babel/core",
         "@babel/preset-env",
+        "@forsakringskassan/apimock-express",
         "@forsakringskassan/commitlint-config",
         "@forsakringskassan/cypress-axe",
         "@forsakringskassan/cypress-visual-regression",

package/files/src/CatInfoEdit.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { FButton, FNumericTextField, FTextField, FValidationForm } from "@fkui/vue";
+import { type Cat } from "./cat-types";
+
+interface Props {
+    cat: Cat;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "submit", cat: Cat): void;
+    (e: "cancel"): void;
+}>();
+
+// Create a local copy for editing
+const editForm = { ...props.cat };
+</script>
+
+<template>
+    <div data-test="cat-info-edit">
+        <f-validation-form @submit="emit('submit', editForm)">
+            <template #error-message> Oj, du har glömt fylla i något. Gå till: </template>
+            <template #default>
+                <f-text-field v-model="editForm.name" v-validation.required.maxLength="100" v-test="'edit-name'">
+                    Namn
+                </f-text-field>
+
+                <f-numeric-text-field v-model="editForm.age" v-validation.required v-test="'edit-age'">
+                    Ålder
+                </f-numeric-text-field>
+
+                <f-text-field v-model="editForm.breed" v-validation.required.maxLength="100" v-test="'edit-breed'">
+                    Ras
+                </f-text-field>
+
+                <f-text-field v-model="editForm.color" v-validation.required.maxLength="100" v-test="'edit-color'">
+                    Färg
+                </f-text-field>
+
+                <f-text-field
+                    v-model="editForm.favoriteFood"
+                    v-validation.maxLength="500"
+                    v-test="'edit-favorite-food'"
+                >
+                    Favoritmat
+                </f-text-field>
+                <div class="button-group">
+                    <f-button class="button-group__item" size="large" variant="primary" type="submit"> Spara </f-button>
+                    <f-button class="button-group__item" size="large" variant="secondary" @click="emit('cancel')">
+                        Avbryt
+                    </f-button>
+                </div>
+            </template>
+        </f-validation-form>
+    </div>
+</template>

package/files/src/CatInfoLogic.spec.ts

@@ -0,0 +1,118 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { catGetById } from "./cat-api";
+import { useCatInfo } from "./cat-info-logic";
+
+vi.mock(import("./cat-api"));
+//vi.useFakeTimers();
+
+describe("useCatInfo", () => {
+    beforeEach(() => {
+        vi.mocked(catGetById).mockReset();
+    });
+
+    it("should have initial state", () => {
+        expect.assertions(3);
+        const { loading, cat, error } = useCatInfo();
+        expect(loading.value).toBe(false);
+        expect(cat.value).toBeNull();
+        expect(error.value).toBeNull();
+    });
+
+    it("should set loading then data for valid cat ID", async () => {
+        expect.assertions(5);
+        const { loading, cat, error, fetchCat } = useCatInfo();
+        const mockCat = {
+            id: "whiskers-001",
+            name: "Whiskers McFluffington",
+            age: 3,
+            breed: "European Shorthair",
+            color: "Orange Tabby",
+            favoriteFood: "Tuna",
+        };
+        vi.mocked(catGetById).mockResolvedValue(mockCat);
+
+        const fetchPromise = fetchCat("whiskers-001");
+
+        // loading should be true immediately
+        expect(loading.value).toBe(true);
+
+        await fetchPromise;
+
+        expect(loading.value).toBe(false);
+        expect(cat.value).not.toBeNull();
+        expect(cat.value?.name).toBe("Whiskers McFluffington");
+        expect(error.value).toBeNull();
+    });
+
+    it("should set error for invalid cat ID", async () => {
+        expect.assertions(4);
+        const { loading, cat, error, fetchCat } = useCatInfo();
+        vi.mocked(catGetById).mockRejectedValue(
+            new Error("Cat with ID 'invalid-id' not found"),
+        );
+
+        await fetchCat("invalid-id");
+
+        expect(loading.value).toBe(false);
+        expect(cat.value).toBeNull();
+        expect(error.value).not.toBeNull();
+        expect(error.value).toContain("not found");
+    });
+
+    it("should modify cat data", () => {
+        expect.assertions(2);
+        const { cat, updateCat } = useCatInfo();
+        const testCat = {
+            id: "test",
+            name: "Original",
+            age: 5,
+            breed: "Test",
+            color: "Test",
+            favoriteFood: "Test",
+        };
+        cat.value = testCat;
+
+        updateCat({ ...testCat, name: "Updated" });
+
+        expect(cat.value.name).toBe("Updated");
+        expect(cat.value.age).toBe(5);
+    });
+
+    it("should fetch cat for luna-002", async () => {
+        expect.assertions(2);
+        const { cat, fetchCat } = useCatInfo();
+        const mockCat = {
+            id: "luna-002",
+            name: "Luna the Midnight Prowler",
+            age: 2,
+            breed: "Bombay",
+            color: "Midnight Black",
+            favoriteFood: "Salmon",
+        };
+        vi.mocked(catGetById).mockResolvedValue(mockCat);
+
+        await fetchCat("luna-002");
+
+        expect(cat.value!.name).toBe("Luna the Midnight Prowler");
+        expect(cat.value!.color).toBe("Midnight Black");
+    });
+
+    it("should fetch cat for muffin-003", async () => {
+        expect.assertions(2);
+        const { cat, fetchCat } = useCatInfo();
+        const mockCat = {
+            id: "muffin-003",
+            name: "Sir Muffin III",
+            age: 5,
+            breed: "Maine Coon",
+            color: "Calico",
+            favoriteFood: "Chicken",
+        };
+        vi.mocked(catGetById).mockResolvedValue(mockCat);
+
+        await fetchCat("muffin-003");
+
+        expect(cat.value!.name).toBe("Sir Muffin III");
+        expect(cat.value!.breed).toBe("Maine Coon");
+    });
+});

package/files/src/CatInfoShow.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { FDefinitionList } from "@fkui/vue";
+import { type Cat } from "./cat-types";
+
+interface Props {
+    cat: Cat;
+}
+
+const props = defineProps<Props>();
+
+const catDefinitions = computed(() => {
+    return [
+        { term: "Namn", definition: props.cat.name },
+        { term: "Ålder", definition: `${props.cat.age} år` },
+        { term: "Ras", definition: props.cat.breed },
+        { term: "Färg", definition: props.cat.color },
+        { term: "Favoritmat", definition: props.cat.favoriteFood },
+    ];
+});
+</script>
+
+<template>
+    <div data-test="cat-info-view">
+        <f-definition-list :definitions="catDefinitions" />
+    </div>
+</template>

package/files/src/FcCatInfoComponent.cy.ts

@@ -0,0 +1,74 @@
+import { FLoaderSelectors } from "@fkui/vue/selectors";
+import FcCatInfoComponent from "./FcCatInfoComponent.vue";
+import { cats } from "./cat-data";
+import { FcCatInfoComponentSelectors } from "./selectors";
+
+describe("FcCatInfoComponent", () => {
+    const testCat = cats[0];
+    const catInfoSelectors = FcCatInfoComponentSelectors();
+    const loaderSelectors = FLoaderSelectors();
+
+    it("verifies loading text", () => {
+        cy.mount(FcCatInfoComponent, {
+            props: {
+                catId: testCat.id,
+            },
+        });
+
+        cy.get(catInfoSelectors.loadingContainer()).should("be.visible");
+        cy.get(loaderSelectors.waitText()).should(
+            "contain.text",
+            "Hämtar kattinformation...",
+        );
+    });
+
+    it("verifies all fields in view mode have correct data", () => {
+        cy.mount(FcCatInfoComponent, {
+            props: {
+                catId: testCat.id,
+                isEditable: false,
+            },
+        });
+
+        // Wait for loading to disappear
+        cy.get(catInfoSelectors.loadingContainer()).should("not.exist");
+
+        const view = catInfoSelectors.viewContainer();
+        cy.get(view).should("be.visible");
+
+        cy.get(view).contains(testCat.name).should("be.visible");
+        cy.get(view).contains(`${testCat.age} år`).should("be.visible");
+        cy.get(view).contains(testCat.breed).should("be.visible");
+        cy.get(view).contains(testCat.color).should("be.visible");
+        cy.get(view).contains(testCat.favoriteFood).should("be.visible");
+    });
+
+    it("verifies all fields in edit mode have correct data", () => {
+        cy.mount(FcCatInfoComponent, {
+            props: {
+                catId: testCat.id,
+                isEditable: true,
+            },
+        });
+
+        // Wait for loading to disappear
+        cy.get(catInfoSelectors.loadingContainer()).should("not.exist");
+        cy.get(catInfoSelectors.editContainer()).should("be.visible");
+
+        cy.get(catInfoSelectors.nameInput())
+            .should("be.visible")
+            .should("have.value", testCat.name);
+        cy.get(catInfoSelectors.ageInput())
+            .should("be.visible")
+            .should("have.value", testCat.age.toString());
+        cy.get(catInfoSelectors.breedInput())
+            .should("be.visible")
+            .should("have.value", testCat.breed);
+        cy.get(catInfoSelectors.colorInput())
+            .should("be.visible")
+            .should("have.value", testCat.color);
+        cy.get(catInfoSelectors.favoriteFoodInput())
+            .should("be.visible")
+            .should("have.value", testCat.favoriteFood);
+    });
+});