frontend test

frontend/src/views/ProjectsView.vue

@@ -1,16 +1,14 @@
 <template>
     <div>
-        <h1 v-if="isLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
+        <h1 v-if="isLoading">{{ $t("default.loading.loading_page") }}</h1>
         <h1 v-else-if="isError || noProjectsFound" class="welcome">
             {{ $t("project.not_found") }}
         </h1>
         <div v-else class="projectInfo">
             <div class="rowheader">
                 <h1>{{ $t("project.myProject") }}</h1>
                 <v-btn-toggle v-model="activeButton" class="button">
-                    <v-btn value="finished">{{
-                        $t("project.finished")
-                    }}</v-btn>
+                    <v-btn value="finished">{{ $t("project.finished") }}</v-btn>
                 </v-btn-toggle>
             </div>
             <ProjectMiniCard
@@ -60,21 +58,20 @@ const filteredProjects = computed(() => {
 }
 
 .projectInfo {
-    padding: 10px;
+    padding: 15px;
     margin: 25px;
 }
 
 .rowheader {
     display: flex;
     align-items: center;
     margin-bottom: 30px;
-
 }
 
 .button {
     height: 30px;
     margin-top: 10px;
     margin-left: 75px;
-    border: 1px solid rgb(var(--v-theme-text))
+    border: 1px solid rgb(var(--v-theme-text));
 }
 </style>

frontend/tests/views/ProjectsView.spec.ts

@@ -0,0 +1,49 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import ProjectsView from "@/views/ProjectsView.vue"
+import {ref} from "vue";
+
+const mockProjects = [
+    {id: 1}
+]
+
+const testProjectsQuery = {
+    data: ref(mockProjects),
+    isLoading: ref(true),
+    isError: ref(true),
+    setIsError(value){
+        this.isError.value = value;
+    },
+    setIsLoading(value){
+        this.isLoading.value = value;
+    }
+};
+
+vi.mock('@/queries/Project', () => ({
+    useProjectsQuery: vi.fn(() => testProjectsQuery),
+}));
+
+vi.mock("@/components/project/ProjectMiniCard.vue", () => ({
+    default: {
+        template: "<div class='projectMiniCard'></div>",
+    },
+}));
+
+describe("ProjectsView", () => {
+    const wrapper = mount(ProjectsView, {});
+    it("render if loading", () => {
+        expect(wrapper.text()).toContain("Aan het laden...")
+    });
+    it("render if error", async () => {
+        testProjectsQuery.setIsLoading(false)
+        await wrapper.vm.$nextTick();
+        expect(wrapper.text()).toContain("Geen projecten teruggevonden.")
+    });
+    it("render projects view", async () => {
+        testProjectsQuery.setIsError(false)
+        await wrapper.vm.$nextTick();
+        expect(wrapper.text()).toContain("Mijn projecten")
+        const Button = wrapper.findComponent({name: "VBtn"})
+        expect(Button.text()).toContain("Afgerond")
+    });
+});