Homescreen testen

frontend/src/components/home/cards/SubjectsCard.vue

@@ -1,7 +1,7 @@
 <template>
     <HomeScreenSkeletonCard v-if="isSubjectsLoading" />
     <!-- TODO: Add error handling -->
-    <h1 v-else-if="isSubjectsError">Error loading subjects</h1>
+    <h1 v-else-if="isSubjectsError">{{ $t("subject.error") }}</h1>
     <HomeScreenCard v-else :title="'homescreen.subjects'">
         <SubjectItem
             v-for="subject in [...subjects!.as_student, ...subjects!.as_instructor]"

frontend/src/components/home/listcontent/SubjectItem.vue

@@ -3,8 +3,8 @@
         <div>
             <h3>{{ subject.name }}</h3>
             <v-skeleton-loader v-if="isInstructorsLoading" type="text" />
-            <p v-else-if="instructors!.length > 0" class="teacher">
-                {{ instructors![0].given_name }}
+            <p v-else-if="sortedInstructors.length > 0" class="teacher">
+                {{ sortedInstructors[0].given_name + " " + sortedInstructors[0].surname }}
             </p>
         </div>
         <v-icon class="chevron" icon="mdi-chevron-right" />
@@ -23,10 +23,18 @@ const props = defineProps<{
 
 const { subject } = toRefs(props);
 
-const { data: instructors, isLoading: isInstructorsLoading } = useSubjectInstructorsQuery(
+const { data: instructorsData, isLoading: isInstructorsLoading } = useSubjectInstructorsQuery(
     computed(() => subject.value.id)
 );
 
+//sorteer zodat teachers voor assistenten tevoorschijn komen
+const sortedInstructors = computed(() => {
+    if (!instructorsData.value) return [];
+    return instructorsData.value.slice().sort((a, b) => {
+        return b.is_teacher - a.is_teacher;
+    });
+});
+
 const navigateToCourse = () => {
     router.push(`/subjects/${subject.value.id}`);
 };

frontend/src/i18n/locales/en.ts

@@ -42,7 +42,7 @@ export default {
         files: "Files",
         download_info: "Click on filename to download",
         after_deadline: "After deadline",
-        submissions_title: "Submissions:",
+        submissions_title: "Submissions for project {project}",
         no_submissions: "No submissions yet",
         teacher_submissions_info:
             "This page contains a list of the latest submission of each group for this project.",
@@ -115,6 +115,7 @@ export default {
             group: "Group",
             submissions: "Submissions",
         },
+        error: "Error when loading subjects",
         create_project: "Create project",
         register_link_button: {
             title: "Register link",

frontend/src/i18n/locales/nl.ts

@@ -2,7 +2,6 @@ export default {
     default: {
         error: {
             "not-found": "Pagina niet gevonden",
-            "something-went-wrong": "Er is iets misgegaan",
         },
         loading: {
             loading_page: "Aan het laden...",
@@ -42,7 +41,7 @@ export default {
         files: "Bestanden",
         download_info: "Klik op bestandsnaam om te downloaden",
         after_deadline: "Na deadline",
-        submissions_title: "Indieningen:",
+        submissions_title: "Indieningen voor project {project}",
         no_submissions: "Nog geen indieningen",
         teacher_submissions_info:
             "Deze pagina bevat een lijst van de laatste indiening van elke groep voor dit project.",
@@ -122,6 +121,7 @@ export default {
             tooltip:
                 "Kopieer de registratie link voor dit vak, deze kan gedeeld worden met studenten om zich te registreren voor het vak.",
         },
+        error: "Fout bij het inladen van vakken",
     },
 
     subjects: {

frontend/src/views/HomeScreenView.vue

@@ -10,9 +10,6 @@
         <div class="mobileCard">
             <SubjectsCard />
         </div>
-        <div class="mobileCard">
-            <AnnouncementsCard />
-        </div>
     </v-container>
     <v-container v-else>
         <h1 v-if="isLoading">Loading...</h1>
@@ -26,17 +23,13 @@
             <v-col>
                 <SubjectsCard />
             </v-col>
-            <v-col>
-                <AnnouncementsCard />
-            </v-col>
         </v-row>
     </v-container>
 </template>
 
 <script setup lang="ts">
 import SubjectsCard from "@/components/home/cards/SubjectsCard.vue";
 import DeadlinesCard from "@/components/home/cards/DeadlinesCard.vue";
-import AnnouncementsCard from "@/components/home/cards/AnnouncementsCard.vue";
 import { useCurrentUserQuery } from "@/queries/User";
 import { useDisplay } from "vuetify";
 

frontend/tests/components/home/cards/DeadlinesCard.spec.ts

@@ -0,0 +1,39 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import DeadlinesCard from "@/components/home/cards/DeadlinesCard.vue"
+import {ref} from "vue";
+
+const testProjectsQuery = {
+    data: ref({as_student: [
+            {id: 1, deadline: new Date(2024, 12, 31)}
+        ],
+        as_instructor: []
+    }),
+    setData(value){
+        this.data.value = value
+    }
+}
+
+vi.mock("@/queries/Project", () => ({
+    useProjectsQuery: vi.fn(() => testProjectsQuery)
+}));
+
+vi.mock("@/components/home/listcontent/DeadlineItem.vue", () => ({
+    default : {
+        template: "<div class='deadlineItem'></div>",
+    }
+}))
+
+describe("DeadlinesCard", () => {
+    const wrapper = mount(DeadlinesCard, {});
+    it("render deadlinescard", () => {
+        expect(wrapper.text()).toContain("Project deadlines")
+        expect(wrapper.findComponent(".deadlineItem").exists()).toBe(true)
+    });
+    it("render if no deadlines", async () => {
+        testProjectsQuery.setData(null)
+        await wrapper.vm.$nextTick()
+        const filteredProjects = (wrapper.vm as any).filteredProjects
+        expect(filteredProjects).toStrictEqual([])
+    })
+})

frontend/tests/components/home/cards/HomeScreenSkeletonCard.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it} from "vitest";
+import HomeScreenSkeletonCard from "@/components/home/cards/HomeScreenSkeletonCard.vue";
+
+describe("HomeScreenSkeletonCard", () => {
+    const wrapper = mount(HomeScreenSkeletonCard, {})
+    it("render skeletoncard", () => {
+        expect(wrapper.findComponent({name: 'VSkeletonLoader'}).exists()).toBeTruthy()
+    })
+})

frontend/tests/components/home/cards/SubjectsCard.spec.ts

@@ -0,0 +1,44 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubjectsCard from "@/components/home/cards/SubjectsCard.vue"
+import {ref} from "vue";
+
+const testSubjectsQuery = {
+    data: ref({as_student: [{id: 1}], as_instructor: []}),
+    isLoading: ref(true),
+    isError: ref(true),
+    setLoading(value){
+        this.isLoading.value = value;
+    },
+    setError(value){
+        this.isError.value = value;
+    }
+}
+
+vi.mock("@/queries/Subject", () => ({
+    useSubjectsQuery: vi.fn(() => testSubjectsQuery)
+}));
+
+vi.mock("@/components/home/listcontent/SubjectItem.vue", () => ({
+    default : {
+        template: "<div class='subjectItem'></div>",
+    }
+}))
+
+describe("SubjectsCard", () => {
+    const wrapper = mount(SubjectsCard, {})
+    it("render if loading", () => {
+        expect(wrapper.findComponent({name: 'HomeScreenSkeletonCard'}).exists()).toBe(true)
+    });
+    it("render if error", async () => {
+        testSubjectsQuery.setLoading(false)
+        await wrapper.vm.$nextTick()
+        expect(wrapper.text()).toContain("Fout bij het inladen van vakken")
+    });
+    it("render subjects card", async () => {
+        testSubjectsQuery.setError(false)
+        await wrapper.vm.$nextTick()
+        expect(wrapper.text()).toContain("Mijn vakken")
+        expect(wrapper.findComponent(".subjectItem").exists()).toBe(true)
+    })
+})

frontend/tests/components/home/listcontent/DeadlineItem.spec.ts

@@ -0,0 +1,39 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import DeadlineItem from "@/components/home/listcontent/DeadlineItem.vue"
+import {ref} from "vue";
+
+const testUserProjectSubmissionsQuery = {
+    data: ref([
+        {date: new Date(2024, 5,17), status: 1}
+    ])
+}
+
+vi.mock("@/queries/Submission", () => ({
+    useUserProjectSubmissionsQuery: vi.fn(() => testUserProjectSubmissionsQuery)
+}))
+
+const testSubjectQuery = {
+    data: ref({name: "testsubject"}),
+    isLoading: ref(false)
+}
+
+vi.mock("@/queries/Subject", () => ({
+    useSubjectQuery: vi.fn(() => testSubjectQuery)
+}))
+
+describe("DeadlineItem",() => {
+    const wrapper = mount(DeadlineItem, {
+        props: {
+            project: ref({
+                name: "testproject",
+                deadline: new Date(2024, 10, 15),
+                id: 1
+            })
+        }
+    })
+    it("render item", () => {
+        expect(wrapper.text()).toContain("testproject")
+        expect(wrapper.text()).toContain("testsubject")
+    });
+})

frontend/tests/components/home/listcontent/SubjectItem.spec.ts

@@ -0,0 +1,34 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubjectItem from "@/components/home/listcontent/SubjectItem.vue"
+import {ref} from "vue";
+
+const testSubjectInstructorsQuery = {
+    data: ref([{given_name: "test", surname: "instructor"}]),
+    isLoading: ref(true),
+    setLoading(value){
+        this.isLoading.value = value
+    }
+}
+
+vi.mock("@/queries/Subject", () => ({
+    useSubjectInstructorsQuery: vi.fn(() => testSubjectInstructorsQuery)
+}))
+
+describe("SubjectItem", () => {
+    const wrapper = mount(SubjectItem, {
+        props: {
+            subject: ref({name: "testsubject"})
+        }
+    })
+    it("render if loading", () => {
+        expect(wrapper.text()).toContain("testsubject")
+        expect(wrapper.findComponent({name: "VSkeletonLoader"}))
+    });
+    it("render subject item", async () => {
+        testSubjectInstructorsQuery.setLoading(false)
+        await wrapper.vm.$nextTick()
+        expect(wrapper.text()).toContain("testsubject")
+        expect(wrapper.text()).toContain("test instructor")
+    });
+})

frontend/tests/views/HomeScreenView.spec.ts

@@ -0,0 +1,45 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import HomeScreenView from "../../src/views/HomeScreenView.vue"
+import {computed, ref} from "vue";
+
+const testCurrentUserQuery = {
+    data: computed(() => {
+        return {given_name: "test", surname: "user"}
+    }),
+    isLoading: ref(true),
+    setLoading(value){
+        this.isLoading.value = value;
+    }
+}
+
+vi.mock('@/queries/User', () => ({
+    useCurrentUserQuery: vi.fn(() => testCurrentUserQuery),
+}));
+
+
+vi.mock("@/components/home/cards/DeadlinesCard.vue", () => ({
+    default: {
+        template: "<div class='deadlinesCard'></div>",
+    },
+}));
+
+vi.mock("@/components/home/cards/SubjectsCard.vue", () => ({
+    default: {
+        template: "<div class='subjectsCard'></div>",
+    },
+}));
+
+describe("HomeScreenView", () => {
+    const wrapper = mount(HomeScreenView, {})
+    it("render if loading", () => {
+        expect(wrapper.text()).toContain("Loading...")
+    });
+    it("render homescreen", async() => {
+        testCurrentUserQuery.setLoading(false)
+        await wrapper.vm.$nextTick()
+        expect(wrapper.text()).toContain("Welkom test user")
+        expect(wrapper.findComponent(".deadlinesCard").exists()).toBeTruthy()
+        expect(wrapper.findComponent(".subjectsCard").exists()).toBeTruthy()
+    });
+});