Projectspage testen + styling

frontend/src/i18n/locales/en.ts

@@ -52,13 +52,12 @@ export default {
         needhelp_button: "Need help",
         group: "Group {number}",
         assignment: "Assignment:",
-        myProject: "My projects:",
+        myProject: "My projects",
         capacity_group: "Capacity: ",
         edit: "Edit project",
         submissions_list: "All submissions",
         not_found: "No projects found.",
-        archived: "Archived",
-        not_finished: "Not Finished",
+        finished: "Finished",
         not_found2: "Project not found",
         to_subject: "To subject",
     },

frontend/src/i18n/locales/nl.ts

@@ -52,13 +52,12 @@ export default {
         needhelp_button: "Hulp nodig",
         group: "Groep {number}",
         assignment: "Opdracht:",
-        myProject: "Mijn projecten:",
+        myProject: "Mijn projecten",
         capacity_group: "Capaciteit: ",
         edit: "Bewerk project",
         submissions_list: "Alle indieningen",
         not_found: "Geen projecten teruggevonden.",
-        archived: "Gearchiveerd",
-        not_finished: "Onafgewerkt",
+        finished: "Afgerond",
         not_found2: "Project niet teruggevonden",
         to_subject: "Naar vak",
     },

frontend/src/views/ProjectsView.vue

@@ -1,30 +1,23 @@
 <template>
     <div>
-        <v-container>
-            <h1 v-if="isLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
-            <h1 v-else-if="isError || noProjectsFound" class="welcome">
-                {{ $t("project.not_found") }}
-            </h1>
-            <div v-else class="projectInfo">
-                <v-row class="rowheader">
-                    <h1>{{ $t("project.myProject") }}</h1>
-                    <v-btn-toggle v-model="activeButton">
-                        <v-btn value="notFinished" class="leftbuttonspace">{{
-                            $t("project.not_finished")
-                        }}</v-btn>
-                        <v-btn value="archived" class="leftbuttonspace">{{
-                            $t("project.archived")
-                        }}</v-btn>
-                    </v-btn-toggle>
-                </v-row>
-                <ProjectMiniCard
-                    v-for="project in filteredProjects"
-                    :key="project.id"
-                    :project="project"
-                    class="project-card"
-                />
+        <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-toggle>
             </div>
-        </v-container>
+            <ProjectMiniCard
+                v-for="project in filteredProjects"
+                :key="project.id"
+                :project="project"
+                class="project-card"
+            />
+        </div>
     </div>
 </template>
 
@@ -51,12 +44,10 @@ const filteredProjects = computed(() => {
         );
 
     switch (activeButton.value) {
-        case "archived":
+        case "finished":
             return sortedProjects.filter((project: Project) => new Date(project.deadline) < now);
-        case "notFinished":
-            return sortedProjects.filter((project: Project) => new Date(project.deadline) > now);
         default:
-            return sortedProjects;
+            return sortedProjects.filter((project: Project) => new Date(project.deadline) > now);
     }
 });
 </script>
@@ -67,14 +58,20 @@ const filteredProjects = computed(() => {
 }
 
 .projectInfo {
-    padding: 10px;
+    padding: 15px;
+    margin: 25px;
 }
 
 .rowheader {
-    padding: 10px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
 }
 
-.leftbuttonspace {
-    margin-left: 10px;
+.button {
+    height: 30px;
+    margin-top: 10px;
+    margin-left: 75px;
+    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")
+    });
+});