@forsakringskassan/vue-lib-template 1.0.4 → 1.2.0

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);
+    });
+});

package/files/src/FcCatInfoComponent.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { FCard, FLoader } from "@fkui/vue";
+import CatInfoEdit from "./CatInfoEdit.vue";
+import CatInfoShow from "./CatInfoShow.vue";
+import { useCatInfo } from "./cat-info-logic";
+import { type Cat } from "./cat-types";
+
+interface Props {
+    /**
+     * The cat ID to display
+     */
+    catId: string;
+    /**
+     * Whether the cat information should be editable
+     */
+    isEditable?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { loading, cat, fetchCat, updateCat } = useCatInfo();
+
+const editForm = ref({ id: "", name: "", age: 0, breed: "", color: "", favoriteFood: "" });
+
+watch(
+    () => props.catId,
+    async (newCatId) => {
+        if (!newCatId) {
+            return;
+        }
+
+        await fetchCat(newCatId);
+        if (cat.value) {
+            editForm.value = { ...cat.value };
+        }
+    },
+    { immediate: true },
+);
+
+/**
+ * Submit the edited cat information
+ */
+function onSubmit(updatedCat: Cat): void {
+    updateCat(updatedCat);
+}
+
+/**
+ * Cancel editing and reload original data
+ */
+async function onCancel(): Promise<void> {
+    if (!props.catId) {
+        return;
+    }
+
+    await fetchCat(props.catId);
+    if (cat.value) {
+        editForm.value = { ...cat.value };
+    }
+}
+</script>
+
+<template>
+    <f-card>
+        <template #header>
+            <h2>Kattinformation</h2>
+        </template>
+        <template #default>
+            <div>
+                <!-- Loading state -->
+                <f-loader v-if="loading" show data-test="cat-info-loading"> Hämtar kattinformation... </f-loader>
+
+                <!-- Cat data - View mode -->
+                <cat-info-show v-else-if="cat && !isEditable" :cat />
+
+                <!-- Cat data - Edit mode -->
+                <cat-info-edit v-else-if="cat && isEditable" :cat @submit="onSubmit" @cancel="onCancel" />
+            </div>
+        </template>
+    </f-card>
+</template>

package/files/src/FcCatInfoComponentLiveExample.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import { FCheckboxField, FSelectField } from "@fkui/vue";
+import { LiveExample } from "@forsakringskassan/docs-live-example";
+import FcCatInfoComponent from "./FcCatInfoComponent.vue";
+import { getCatIds } from "./cat-data";
+
+export default defineComponent({
+    name: "FcCatInfoComponentLiveExample",
+    components: { LiveExample, FSelectField, FCheckboxField },
+    data() {
+        return {
+            selectedCatId: "whiskers-001",
+            isEditable: false,
+            catIds: getCatIds(),
+        };
+    },
+    computed: {
+        components(): object {
+            return { FcCatInfoComponent };
+        },
+        editableAttr(): string {
+            return this.isEditable ? " is-editable" : "";
+        },
+        template(): string {
+            return /* HTML */ ` <fc-cat-info-component cat-id="${this.selectedCatId}" ${this.editableAttr} /> `;
+        },
+    },
+});
+</script>
+
+<template>
+    <live-example :components :template>
+        <f-select-field v-model="selectedCatId">
+            <template #label>Välj katt</template>
+            <option value="whiskers-001">Whiskers McFluffington</option>
+            <option value="luna-002">Luna the Midnight Prowler</option>
+            <option value="muffin-003">Sir Muffin III</option>
+        </f-select-field>
+        <f-checkbox-field v-model="isEditable" :value="true"> Redigerbar </f-checkbox-field>
+    </live-example>
+</template>

package/files/src/cat-api-mock.spec.ts

@@ -0,0 +1,27 @@
+import { matchRequest } from "@forsakringskassan/apimock-express/browser";
+import { describe, expect, it } from "vitest";
+import mocks from "./mocks.mjs";
+
+describe("Cat API Mock Reproduction", () => {
+    it("should return 200 for a valid cat id /api/cat?id=whiskers-001", async () => {
+        expect.assertions(2);
+        const req = new Request(
+            "http://localhost:8080/api/cat?id=whiskers-001",
+        );
+        const response = await matchRequest(mocks, req);
+        expect(response.status).toBe(200);
+
+        const data = await response.json();
+        expect(data.id).toBe("whiskers-001");
+    });
+
+    it("should return 404 for an invalid cat id /api/cat?id=unknown", async () => {
+        expect.assertions(2);
+        const req = new Request("http://localhost:8080/api/cat?id=unknown");
+        const response = await matchRequest(mocks, req);
+        expect(response.status).toBe(404);
+
+        const data = await response.json();
+        expect(data.error).toContain("not found");
+    });
+});

package/files/src/cat-api.mock.mts

@@ -0,0 +1,26 @@
+import { defineMock } from "@forsakringskassan/apimock-express/helpers";
+import { cats } from "./cat-data.ts";
+import type { Cat } from "./cat-types.ts";
+
+export default defineMock<Cat | { error: string }>({
+    meta: {
+        url: "/cat",
+        method: "GET",
+    },
+    defaultResponse(params) {
+        const id = params.parameters?.id;
+        const cat = cats.find((c) => c.id === id);
+        if (cat) {
+            return {
+                status: 200,
+                body: cat,
+                delay: 300,
+            };
+        }
+        return {
+            status: 404,
+            body: { error: `Cat with ID "${id}" not found` },
+            delay: 300,
+        };
+    },
+});

package/files/src/cat-api.spec.ts

@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { catGetById } from "./cat-api";
+
+describe("catGetById", () => {
+    beforeEach(() => {
+        vi.stubGlobal("fetch", vi.fn());
+    });
+
+    it("should return a cat when the response is ok", async () => {
+        expect.assertions(2);
+        const mockCat = {
+            id: "whiskers-001",
+            name: "Whiskers McFluffington",
+            age: 3,
+            breed: "European Shorthair",
+            color: "Orange Tabby",
+            favoriteFood: "Tuna",
+        };
+
+        vi.mocked(fetch).mockResolvedValue({
+            ok: true,
+            json: () => Promise.resolve(mockCat),
+        } as Response);
+
+        const result = await catGetById("whiskers-001");
+
+        expect(fetch).toHaveBeenCalledWith("/api/cat?id=whiskers-001");
+        expect(result).toEqual(mockCat);
+    });
+
+    it("should throw an error with API message when response is not ok", async () => {
+        expect.assertions(1);
+        const errorResponse = { error: "Cat with ID 'unknown' not found" };
+
+        vi.mocked(fetch).mockResolvedValue({
+            ok: false,
+            json: () => Promise.resolve(errorResponse),
+        } as Response);
+
+        await expect(catGetById("unknown")).rejects.toThrow(
+            "Cat with ID 'unknown' not found",
+        );
+    });
+
+    it("should throw a generic error when response is not ok and no error message is provided", async () => {
+        expect.assertions(1);
+        vi.mocked(fetch).mockResolvedValue({
+            ok: false,
+            json: () => Promise.resolve({}),
+        } as Response);
+
+        await expect(catGetById("unknown")).rejects.toThrow(
+            "Failed to fetch cat with ID unknown",
+        );
+    });
+
+    it("should throw an error when fetch fails", async () => {
+        expect.assertions(1);
+        vi.mocked(fetch).mockRejectedValue(new Error("Network failure"));
+
+        await expect(catGetById("whiskers-001")).rejects.toThrow(
+            "Network failure",
+        );
+    });
+});

package/files/src/cat-api.ts

@@ -0,0 +1,15 @@
+import type { Cat } from "./cat-types";
+
+/**
+ * @internal
+ */
+export async function catGetById(id: string): Promise<Cat> {
+    const response = await fetch(`/api/cat?id=${id}`);
+
+    if (!response.ok) {
+        const errorData = (await response.json()) as { error?: string };
+        throw new Error(errorData.error ?? `Failed to fetch cat with ID ${id}`);
+    }
+
+    return (await response.json()) as Cat;
+}

package/files/src/cat-data.ts

@@ -0,0 +1,40 @@
+import type { Cat } from "./cat-types";
+
+/**
+ * Mock cat data for the FcCatInfoComponent
+ */
+
+export const cats: Cat[] = [
+    {
+        id: "whiskers-001",
+        name: "Whiskers McFluffington",
+        age: 3,
+        breed: "Norsk skogkatt",
+        color: "Orange Tabby",
+        favoriteFood: "Sardiner i champagne-sås",
+    },
+    {
+        id: "luna-002",
+        name: "Luna the Midnight Prowler",
+        age: 5,
+        breed: "Svart huskatt",
+        color: "Midnight Black",
+        favoriteFood: "Döda flugor",
+    },
+    {
+        id: "muffin-003",
+        name: "Sir Muffin III",
+        age: 2,
+        breed: "Maine Coon",
+        color: "Silver and Gray",
+        favoriteFood: "Lyxig tonfisk-mousse med en touch av kattmynta",
+    },
+];
+
+/**
+ * Get all available cat IDs
+ * @returns Array of cat IDs
+ */
+export function getCatIds(): string[] {
+    return cats.map((cat) => cat.id);
+}

package/files/src/cat-info-logic.ts

@@ -0,0 +1,52 @@
+import type { Ref } from "vue";
+import { ref } from "vue";
+import { catGetById } from "./cat-api";
+import type { Cat } from "./cat-types";
+
+/**
+ * Business logic for the FcCatInfoComponent.
+ * Manages fetching and updating cat information from mock backend.
+ */
+export function useCatInfo(): {
+    loading: Ref<boolean>;
+    cat: Ref<Cat | null>;
+    error: Ref<string | null>;
+    fetchCat: (catId: string) => Promise<void>;
+    updateCat: (newCat: Cat) => void;
+} {
+    const loading = ref(false);
+    const cat = ref<Cat | null>(null);
+    const error = ref<string | null>(null);
+
+    /**
+     * Fetch cat data from mock backend
+     */
+    async function fetchCat(catId: string): Promise<void> {
+        loading.value = true;
+        error.value = null;
+
+        try {
+            // Get cat from mock backend
+            const fetchedCat = await catGetById(catId);
+            cat.value = { ...fetchedCat };
+        } catch (err) {
+            error.value =
+                err instanceof Error ? err.message : "Unknown error occurred";
+            cat.value = null;
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    /**
+     * Update cat information
+     * @param updates - Partial cat object with fields to update
+     */
+    function updateCat(newCat: Cat): void {
+        if (cat.value) {
+            cat.value = { ...newCat };
+        }
+    }
+
+    return { loading, cat, error, fetchCat, updateCat };
+}

package/files/src/cat-types.ts

@@ -0,0 +1,11 @@
+/**
+ * Type definitions for cats
+ */
+export interface Cat {
+    id: string;
+    name: string;
+    age: number;
+    breed: string;
+    color: string;
+    favoriteFood: string;
+}

package/files/src/examples/CatInfoExample.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import FcCatInfoComponent from "../FcCatInfoComponent.vue";
+
+const selectedCatId = ref("whiskers-001");
+const isEditable = ref(false);
+</script>
+
+<template>
+    <div class="cat-example__component">
+        <fc-cat-info-component :cat-id="selectedCatId" :is-editable />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.cat-example__component {
+    margin: 2rem;
+    max-width: 800px;
+}
+</style>

package/files/src/index.ts

@@ -1 +1,3 @@
-export { default as AwesomeComponent } from "./AwesomeComponent.vue";
+import "./style.scss";
+
+export { default as FcCatInfoComponent } from "./FcCatInfoComponent.vue";

package/files/src/local.ts

@@ -6,9 +6,9 @@ import {
     ValidationPlugin,
     setRunningContext,
 } from "@fkui/vue";
-import "./local.scss";
 import { type SetupOptions } from "@forsakringskassan/vite-lib-config";
 import "@fkui/icon-lib-default/dist/f";
+import "./local.scss";
 
 export function setup(options: SetupOptions): void {
     const { rootComponent, selector } = options;