From 4209c04a526ea45bf2eccae7f1390cf05a58f053 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Sun, 19 May 2024 12:38:55 +0200
Subject: [PATCH 01/12] styling

---
 .../src/components/buttons/BackButton.vue     | 32 ++++++++++
 frontend/src/i18n/locales/en.ts               |  1 +
 frontend/src/i18n/locales/nl.ts               |  1 +
 frontend/src/views/SubmissionsView.vue        | 58 +++++++++++++------
 frontend/tests/views/SubmissionsView.spec.ts  | 50 ++++++++++++++++
 5 files changed, 125 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/buttons/BackButton.vue
 create mode 100644 frontend/tests/views/SubmissionsView.spec.ts

diff --git a/frontend/src/components/buttons/BackButton.vue b/frontend/src/components/buttons/BackButton.vue
new file mode 100644
index 00000000..34bfae52
--- /dev/null
+++ b/frontend/src/components/buttons/BackButton.vue
@@ -0,0 +1,32 @@
+<template>
+    <router-link :to="destination">
+        <v-btn class="group-button" prepend-icon="mdi-arrow-left">
+            {{ $t(title) }}
+        </v-btn>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import Subject from "@/models/Subject";
+import router from "@/router";
+
+const props = defineProps<{
+    destination: String;
+    title: String;
+}>();
+
+const back = async () => {
+    router.push(props.destination);
+}
+
+</script>
+
+<style scoped>
+
+.v-btn {
+    margin-bottom: 5px;
+    min-width: 150px;
+    background-color: rgb(var(--v-theme-primary));
+    color: rgb(var(--v-theme-navtext));
+}
+</style>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index cee1a4ab..5dc432b0 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -61,6 +61,7 @@ export default {
         not_found2: "Project not found",
         to_subject: "To subject",
         to_groups: "To groups",
+        to_project: "To Project"
     },
     navigation: {
         home: "Home",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index c38ce104..5cbda387 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -61,6 +61,7 @@ export default {
         not_found2: "Project niet teruggevonden",
         to_subject: "Naar vak",
         to_groups: "Naar groepen",
+        to_project: "Naar project"
     },
     navigation: {
         home: "Hoofdscherm",
diff --git a/frontend/src/views/SubmissionsView.vue b/frontend/src/views/SubmissionsView.vue
index 563805b0..26ce2671 100644
--- a/frontend/src/views/SubmissionsView.vue
+++ b/frontend/src/views/SubmissionsView.vue
@@ -1,24 +1,30 @@
 <template>
     <v-container>
-        <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
-        <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card" color="white">
-            <v-col class="mx-auto">
-                <h1>{{ $t("submission.submissions_title", { project: project.name }) }}</h1>
-                <div v-if="sorted.length == 0">
-                    <p>{{ $t("submission.no_submissions") }}</p>
-                    <v-btn :to="`/project/${project?.id}/submit`">
+        <div class="submissionsview">
+            <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
+            <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
+                <v-col class="col-sm-12 col-md-6 col-lg-8">
+                    <h1>{{ $t("submission.submissions_title", { project: project.name }) }}</h1>
+                    <v-btn :to="`/project/${project?.id}/submit`" variant="flat" class="submitbutton">
                         {{ $t("submit.new_submission") }}
                     </v-btn>
-                </div>
-                <SubmissionCard
-                    class="ma-3"
-                    v-for="submission in sorted"
-                    :key="submission"
-                    :submission="submission"
-                    :project="project!"
-                />
-            </v-col>
-        </v-skeleton-loader>
+                    <v-divider />
+                    <div v-if="sorted.length == 0" class="nosubmissions">
+                        <p>{{ $t("submission.no_submissions") }}</p>
+                    </div>
+                    <SubmissionCard
+                        class="ma-3"
+                        v-for="submission in sorted"
+                        :key="submission"
+                        :submission="submission"
+                        :project="project!"
+                    />
+                </v-col>
+                <v-col cols="2" class="backbutton">
+                    <BackButton class="back" :destination="`/project/${project.id}`" title="project.to_project"/>
+                </v-col>
+            </v-skeleton-loader>
+        </div>
     </v-container>
 </template>
 
@@ -28,6 +34,7 @@ import { useSubmissionsQuery } from "@/queries/Submission";
 import { useProjectQuery } from "@/queries/Project";
 import { computed, toRefs } from "vue";
 import SubmissionCard from "@/components/submission/SubmissionCard.vue";
+import BackButton from "@/components/buttons/BackButton.vue"
 
 const props = defineProps<{
     groupId: number;
@@ -57,3 +64,20 @@ const refetch_timer = () => {
 };
 refetch_timer();
 </script>
+<style scoped>
+
+.nosubmissions {
+    margin-top: 15px;
+}
+
+.submitbutton {
+    margin-top: 25px;
+    margin-bottom: 15px;
+    background-color: rgb(var(--v-theme-secondary));
+}
+
+.back{
+    margin: 25px;
+    float: left;
+}
+</style>
diff --git a/frontend/tests/views/SubmissionsView.spec.ts b/frontend/tests/views/SubmissionsView.spec.ts
new file mode 100644
index 00000000..0c7e649b
--- /dev/null
+++ b/frontend/tests/views/SubmissionsView.spec.ts
@@ -0,0 +1,50 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubmissionsView from "@/views/SubmissionsView.vue"
+import {ref} from "vue";
+
+const testSubmissionsQuery = {
+    data: ref([]),
+    setData(value){
+        this.data.value = value
+    },
+    error: ref({message: "testerrormessage"}),
+    isLoading: ref(false),
+    isError: ref(true),
+    refetch: vi.fn()
+}
+
+vi.mock("@/queries/Submission", () => ({
+    useSubmissionsQuery: vi.fn(() => testSubmissionsQuery)
+}))
+
+const testGroupQuery = {
+    data: ref({project_id: 1})
+}
+
+vi.mock("@/queries/Group", () => ({
+    useGroupQuery: vi.fn(() => testGroupQuery)
+}))
+
+const testProjectQuery = {
+    data: ref({id: 1, name: "testproject"}),
+    isSucces: ref(true)
+}
+
+vi.mock("@/queries/Project", () => ({
+    useProjectQuery: vi.fn(() => testProjectQuery)
+}))
+
+describe("SubmissionsView", () => {
+    const wrapper = mount(SubmissionsView, {
+        props: {
+            groupId: 1
+        }
+    })
+    it("render if error", () => {
+       expect(wrapper.text()).toContain("testerrormessage")
+    });
+    it("render submissions", async () => {
+
+    });
+})

From 2ee5b8840e0a6607205fcf4c879334849724885f Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Sun, 19 May 2024 12:38:55 +0200
Subject: [PATCH 02/12] styling

---
 .../src/components/buttons/BackButton.vue     | 32 ++++++++++
 .../components/submission/SubmissionList.vue  | 58 +++++++++++++------
 frontend/src/i18n/locales/en.ts               |  1 +
 frontend/src/i18n/locales/nl.ts               |  1 +
 frontend/tests/views/SubmissionsView.spec.ts  | 50 ++++++++++++++++
 5 files changed, 125 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/buttons/BackButton.vue
 create mode 100644 frontend/tests/views/SubmissionsView.spec.ts

diff --git a/frontend/src/components/buttons/BackButton.vue b/frontend/src/components/buttons/BackButton.vue
new file mode 100644
index 00000000..34bfae52
--- /dev/null
+++ b/frontend/src/components/buttons/BackButton.vue
@@ -0,0 +1,32 @@
+<template>
+    <router-link :to="destination">
+        <v-btn class="group-button" prepend-icon="mdi-arrow-left">
+            {{ $t(title) }}
+        </v-btn>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import Subject from "@/models/Subject";
+import router from "@/router";
+
+const props = defineProps<{
+    destination: String;
+    title: String;
+}>();
+
+const back = async () => {
+    router.push(props.destination);
+}
+
+</script>
+
+<style scoped>
+
+.v-btn {
+    margin-bottom: 5px;
+    min-width: 150px;
+    background-color: rgb(var(--v-theme-primary));
+    color: rgb(var(--v-theme-navtext));
+}
+</style>
diff --git a/frontend/src/components/submission/SubmissionList.vue b/frontend/src/components/submission/SubmissionList.vue
index 1ab087c8..26ce2671 100644
--- a/frontend/src/components/submission/SubmissionList.vue
+++ b/frontend/src/components/submission/SubmissionList.vue
@@ -1,24 +1,30 @@
 <template>
     <v-container>
-        <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
-        <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
-            <v-col class="mx-auto">
-                <h2>{{ $t("submission.submissions_title") }}</h2>
-                <div v-if="sorted.length == 0">
-                    <p>{{ $t("submission.no_submissions") }}</p>
-                    <v-btn :to="`/project/${project?.id}/submit`">
+        <div class="submissionsview">
+            <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
+            <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
+                <v-col class="col-sm-12 col-md-6 col-lg-8">
+                    <h1>{{ $t("submission.submissions_title", { project: project.name }) }}</h1>
+                    <v-btn :to="`/project/${project?.id}/submit`" variant="flat" class="submitbutton">
                         {{ $t("submit.new_submission") }}
                     </v-btn>
-                </div>
-                <SubmissionCard
-                    class="ma-3"
-                    v-for="submission in sorted"
-                    :key="submission"
-                    :submission="submission!"
-                    :deadline="project.deadline!"
-                />
-            </v-col>
-        </v-skeleton-loader>
+                    <v-divider />
+                    <div v-if="sorted.length == 0" class="nosubmissions">
+                        <p>{{ $t("submission.no_submissions") }}</p>
+                    </div>
+                    <SubmissionCard
+                        class="ma-3"
+                        v-for="submission in sorted"
+                        :key="submission"
+                        :submission="submission"
+                        :project="project!"
+                    />
+                </v-col>
+                <v-col cols="2" class="backbutton">
+                    <BackButton class="back" :destination="`/project/${project.id}`" title="project.to_project"/>
+                </v-col>
+            </v-skeleton-loader>
+        </div>
     </v-container>
 </template>
 
@@ -28,6 +34,7 @@ import { useSubmissionsQuery } from "@/queries/Submission";
 import { useProjectQuery } from "@/queries/Project";
 import { computed, toRefs } from "vue";
 import SubmissionCard from "@/components/submission/SubmissionCard.vue";
+import BackButton from "@/components/buttons/BackButton.vue"
 
 const props = defineProps<{
     groupId: number;
@@ -57,3 +64,20 @@ const refetch_timer = () => {
 };
 refetch_timer();
 </script>
+<style scoped>
+
+.nosubmissions {
+    margin-top: 15px;
+}
+
+.submitbutton {
+    margin-top: 25px;
+    margin-bottom: 15px;
+    background-color: rgb(var(--v-theme-secondary));
+}
+
+.back{
+    margin: 25px;
+    float: left;
+}
+</style>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 1c9c4c55..725ef2b6 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -66,6 +66,7 @@ export default {
         not_found2: "Project not found",
         to_subject: "To subject",
         to_groups: "To groups",
+        to_project: "To Project"
     },
     navigation: {
         home: "Home",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 37693491..a2b7fa34 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -66,6 +66,7 @@ export default {
         not_found2: "Project niet teruggevonden",
         to_subject: "Naar vak",
         to_groups: "Naar groepen",
+        to_project: "Naar project"
     },
     navigation: {
         home: "Hoofdscherm",
diff --git a/frontend/tests/views/SubmissionsView.spec.ts b/frontend/tests/views/SubmissionsView.spec.ts
new file mode 100644
index 00000000..0c7e649b
--- /dev/null
+++ b/frontend/tests/views/SubmissionsView.spec.ts
@@ -0,0 +1,50 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubmissionsView from "@/views/SubmissionsView.vue"
+import {ref} from "vue";
+
+const testSubmissionsQuery = {
+    data: ref([]),
+    setData(value){
+        this.data.value = value
+    },
+    error: ref({message: "testerrormessage"}),
+    isLoading: ref(false),
+    isError: ref(true),
+    refetch: vi.fn()
+}
+
+vi.mock("@/queries/Submission", () => ({
+    useSubmissionsQuery: vi.fn(() => testSubmissionsQuery)
+}))
+
+const testGroupQuery = {
+    data: ref({project_id: 1})
+}
+
+vi.mock("@/queries/Group", () => ({
+    useGroupQuery: vi.fn(() => testGroupQuery)
+}))
+
+const testProjectQuery = {
+    data: ref({id: 1, name: "testproject"}),
+    isSucces: ref(true)
+}
+
+vi.mock("@/queries/Project", () => ({
+    useProjectQuery: vi.fn(() => testProjectQuery)
+}))
+
+describe("SubmissionsView", () => {
+    const wrapper = mount(SubmissionsView, {
+        props: {
+            groupId: 1
+        }
+    })
+    it("render if error", () => {
+       expect(wrapper.text()).toContain("testerrormessage")
+    });
+    it("render submissions", async () => {
+
+    });
+})

From ca07ae4763ef6f273c26a72123b3468c1d11382f Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Sun, 19 May 2024 13:48:49 +0200
Subject: [PATCH 03/12] styling

---
 .../src/components/project/ProjectInfo.vue    |   2 +-
 .../components/submission/SubmissionCard.vue  | 149 ++++++++++--------
 .../components/submission/SubmissionList.vue  |  27 ++--
 frontend/src/views/GroupView.vue              |  98 +++++++-----
 4 files changed, 150 insertions(+), 126 deletions(-)

diff --git a/frontend/src/components/project/ProjectInfo.vue b/frontend/src/components/project/ProjectInfo.vue
index 281fedb1..cb02d53c 100644
--- a/frontend/src/components/project/ProjectInfo.vue
+++ b/frontend/src/components/project/ProjectInfo.vue
@@ -36,7 +36,7 @@
         </v-card>
         <SubmitInfo
             class="submitInfo"
-            v-if="group && !isTeacher"
+            v-if="group"
             :project="project"
             :group="group"
         />
diff --git a/frontend/src/components/submission/SubmissionCard.vue b/frontend/src/components/submission/SubmissionCard.vue
index c4d5e562..23883357 100644
--- a/frontend/src/components/submission/SubmissionCard.vue
+++ b/frontend/src/components/submission/SubmissionCard.vue
@@ -1,74 +1,81 @@
 <template>
-    <v-card variant="outlined">
-        <v-card-title>
-            {{ $t("submission.status") }}
-            <p v-if="new Date(submission.date) <= deadline" :class="Status[submission.status]">
-                {{ Status[submission.status] }}
-            </p>
-            <p v-else class="Deadline">{{ $t("submission.after_deadline") }}</p>
-        </v-card-title>
-        <v-card-subtitle>
-            {{ $t("submission.datetime") }} {{ $d(submission.date, "long") }}
-        </v-card-subtitle>
-        <v-card-item>
-            <v-card-title>
-                {{ $t("submission.remarks") }}
-            </v-card-title>
-            <v-card-text v-if="submission.remarks">
-                {{ submission.remarks }}
-            </v-card-text>
-            <v-card-subtitle v-else>
-                {{ $t("submission.remarks_empty") }}
-            </v-card-subtitle>
-        </v-card-item>
-        <v-card-item v-if="submission.stderr || submission.stdout || submission.testresults.length">
-            <v-card-title>{{ $t("submission.docker_test") }}</v-card-title>
-            <v-card-text>
-                <p v-if="submission.stdout">Stdout: {{ submission.stdout }}</p>
-                <p v-if="submission.stderr">Sterr: {{ submission.stderr }}</p>
-                <ul>
-                    <li v-for="result in submission.testresults" :key="result">
-                        <p v-if="result.succeeded" class="text-green">{{ result.value }}</p>
-                        <p v-else class="text-red">{{ result.value }}</p>
-                    </li>
-                </ul>
-            </v-card-text>
-        </v-card-item>
-        <v-card-item>
-            <v-card-title>
-                {{ $t("submission.files") }}
-            </v-card-title>
-            <v-card-subtitle>
-                {{ $t("submission.download_info") }}
-            </v-card-subtitle>
-            <v-container>
-                <v-alert
-                    v-if="isError"
-                    title="Error"
-                    color="error"
-                    :text="error!.message"
-                ></v-alert>
-                <v-skeleton-loader v-else :loading="isLoading" type="card">
-                    <v-col>
-                        <v-chip
-                            class="ma-2"
-                            v-for="(item, index) in files"
-                            label
-                            color="blue"
-                            :key="item.filesortedname"
-                            @click="() => downloadFile(index)"
-                        >
-                            {{ item.filename }}
-                        </v-chip>
-                    </v-col>
-                </v-skeleton-loader>
-            </v-container>
-            <v-card-actions>
-                <v-btn @click="downloadAll">
-                    {{ $t("submission.download_all_files") }}
-                </v-btn>
-            </v-card-actions>
-        </v-card-item>
+    <v-divider />
+    <v-card variant="flat">
+        <v-row>
+            <v-col>
+                <v-card-title>
+                    {{ $t("submission.status") }}
+                    <p v-if="new Date(submission.date) <= deadline" :class="Status[submission.status]">
+                        {{ Status[submission.status] }}
+                    </p>
+                    <p v-else class="Deadline">{{ $t("submission.after_deadline") }}</p>
+                </v-card-title>
+                <v-card-subtitle>
+                    {{ $t("submission.datetime") }} {{ $d(submission.date, "long") }}
+                </v-card-subtitle>
+                <v-card-item>
+                    <v-card-title>
+                        {{ $t("submission.remarks") }}
+                    </v-card-title>
+                    <v-card-text v-if="submission.remarks">
+                        {{ submission.remarks }}
+                    </v-card-text>
+                    <v-card-subtitle v-else>
+                        {{ $t("submission.remarks_empty") }}
+                    </v-card-subtitle>
+                </v-card-item>
+                <v-card-item v-if="submission.stderr || submission.stdout || submission.testresults.length">
+                    <v-card-title>{{ $t("submission.docker_test") }}</v-card-title>
+                    <v-card-text>
+                        <p v-if="submission.stdout">Stdout: {{ submission.stdout }}</p>
+                        <p v-if="submission.stderr">Sterr: {{ submission.stderr }}</p>
+                        <ul>
+                            <li v-for="result in submission.testresults" :key="result">
+                                <p v-if="result.succeeded" class="text-green">{{ result.value }}</p>
+                                <p v-else class="text-red">{{ result.value }}</p>
+                            </li>
+                        </ul>
+                    </v-card-text>
+                </v-card-item>
+            </v-col>
+            <v-col>
+                <v-card-item>
+                    <v-card-title>
+                        {{ $t("submission.files") }}
+                    </v-card-title>
+                    <v-card-subtitle>
+                        {{ $t("submission.download_info") }}
+                    </v-card-subtitle>
+                    <v-container>
+                        <v-alert
+                            v-if="isError"
+                            title="Error"
+                            color="error"
+                            :text="error!.message"
+                        ></v-alert>
+                        <v-skeleton-loader v-else :loading="isLoading" type="card">
+                            <v-col>
+                                <v-chip
+                                    class="ma-2"
+                                    v-for="(item, index) in files"
+                                    label
+                                    color="blue"
+                                    :key="item.filesortedname"
+                                    @click="() => downloadFile(index)"
+                                >
+                                    {{ item.filename }}
+                                </v-chip>
+                            </v-col>
+                        </v-skeleton-loader>
+                    </v-container>
+                    <v-card-actions>
+                        <v-btn @click="downloadAll">
+                            {{ $t("submission.download_all_files") }}
+                        </v-btn>
+                    </v-card-actions>
+                </v-card-item>
+            </v-col>
+        </v-row>
     </v-card>
 </template>
 
@@ -134,5 +141,7 @@ const downloadAll = () => {
 .v-card {
     border-color: rgb(var(--v-theme-text));
     background-color: rgb(var(--v-theme-background));
+    margin-top: 10px;
+    margin-bottom: 10px
 }
 </style>
diff --git a/frontend/src/components/submission/SubmissionList.vue b/frontend/src/components/submission/SubmissionList.vue
index 26ce2671..7afcbe9e 100644
--- a/frontend/src/components/submission/SubmissionList.vue
+++ b/frontend/src/components/submission/SubmissionList.vue
@@ -3,26 +3,23 @@
         <div class="submissionsview">
             <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
             <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
-                <v-col class="col-sm-12 col-md-6 col-lg-8">
-                    <h1>{{ $t("submission.submissions_title", { project: project.name }) }}</h1>
+                <v-col>
+                    <h2>{{ $t("submission.submissions_title", { project: project.name }) }}</h2>
                     <v-btn :to="`/project/${project?.id}/submit`" variant="flat" class="submitbutton">
                         {{ $t("submit.new_submission") }}
                     </v-btn>
-                    <v-divider />
-                    <div v-if="sorted.length == 0" class="nosubmissions">
+                    <div v-if="mockSubmissions.length == 0" class="nosubmissions">
                         <p>{{ $t("submission.no_submissions") }}</p>
                     </div>
                     <SubmissionCard
                         class="ma-3"
-                        v-for="submission in sorted"
+                        v-for="submission in mockSubmissions"
                         :key="submission"
                         :submission="submission"
                         :project="project!"
+                        :deadline="project.deadline"
                     />
                 </v-col>
-                <v-col cols="2" class="backbutton">
-                    <BackButton class="back" :destination="`/project/${project.id}`" title="project.to_project"/>
-                </v-col>
             </v-skeleton-loader>
         </div>
     </v-container>
@@ -34,7 +31,6 @@ import { useSubmissionsQuery } from "@/queries/Submission";
 import { useProjectQuery } from "@/queries/Project";
 import { computed, toRefs } from "vue";
 import SubmissionCard from "@/components/submission/SubmissionCard.vue";
-import BackButton from "@/components/buttons/BackButton.vue"
 
 const props = defineProps<{
     groupId: number;
@@ -48,6 +44,13 @@ const { data: project, isSuccess: projectSuccess } = useProjectQuery(
     computed(() => group.value?.project_id)
 );
 
+const mockSubmissions = [
+    {status: 1, date: new Date(2024, 5, 16), remarks: "wel een opmerking bij indiening",
+    testresults: [{succeeded: true, value: "succeeded"}]},
+    {status: 2, date: new Date(2024, 4, 15), stdout: "test", stderr: "test2",
+    testrestults: [{succeeded: false, value: "not succeeded"}]},
+]
+
 const sorted = computed(() => {
     return submissions.value?.toSorted((a, b) => new Date(b.date) - new Date(a.date));
 });
@@ -74,10 +77,6 @@ refetch_timer();
     margin-top: 25px;
     margin-bottom: 15px;
     background-color: rgb(var(--v-theme-secondary));
-}
-
-.back{
-    margin: 25px;
-    float: left;
+    border-color: rgb(var(--v-theme-text));
 }
 </style>
diff --git a/frontend/src/views/GroupView.vue b/frontend/src/views/GroupView.vue
index 712d3f8e..52ffc41e 100644
--- a/frontend/src/views/GroupView.vue
+++ b/frontend/src/views/GroupView.vue
@@ -4,49 +4,56 @@
         <h1 v-else-if="isError" class="welcome">
             {{ $t("group.not_found") }}
         </h1>
-        <div v-else>
-            <h1>{{ group!.team_name }}</h1>
-            <h2>{{ "Project: " + project!.name }}</h2>
-            <v-card>
-                <v-card-item :title="$t('group.members')">
-                    <div v-if="group!.members.length" class="members">
-                        <v-row
-                            v-for="(member, index) in group!.members"
-                            :key="index"
-                            align="center"
-                        >
-                            <v-col>{{ member.given_name + " " + member.surname }}</v-col>
-                            <v-col>
-                                <v-btn
-                                    v-if="isTeacher"
-                                    prepend-icon="mdi-close"
-                                    color="red"
-                                    variant="flat"
-                                    @click="
+        <v-row v-else>
+            <v-col class="col-sm-12 col-md-6 col-lg-8">
+                <h1>{{ group!.team_name }}</h1>
+                <h2>{{ "Project: " + project!.name }}</h2>
+                <v-card variant="flat">
+                    <v-card-item :title="$t('group.members')">
+                        <div v-if="group!.members.length" class="members">
+                            <v-row
+                                v-for="(member, index) in group!.members"
+                                :key="index"
+                                align="center"
+                            >
+                                <v-col>{{ member.given_name + " " + member.surname }}</v-col>
+                                <v-col>
+                                    <v-btn
+                                        v-if="isTeacher"
+                                        prepend-icon="mdi-close"
+                                        color="red"
+                                        variant="flat"
+                                        @click="
                                         () => removeStudent({ groupId: group!.id, uid: member.uid })
                                     "
-                                >
-                                    {{ $t("group.remove") }}</v-btn
-                                >
-                            </v-col>
-                        </v-row>
-                    </div>
-                    <div v-else class="members">
-                        {{ $t("group.no_members_found") }}
-                    </div>
-                </v-card-item>
-                <v-card-actions>
-                    <GroupButtons
-                        :amountOfMembers="amountOfMembers"
-                        :group="group!"
-                        :project="project!"
-                        :user="user!"
-                        :isTeacher="isTeacher!"
-                    />
-                </v-card-actions>
-            </v-card>
-            <SubmissionList :groupId="groupId" />
-        </div>
+                                    >
+                                        {{ $t("group.remove") }}</v-btn
+                                    >
+                                </v-col>
+                            </v-row>
+                        </div>
+                        <div v-else class="members">
+                            {{ $t("group.no_members_found") }}
+                        </div>
+                    </v-card-item>
+                    <v-card-actions>
+                        <GroupButtons
+                            :amountOfMembers="amountOfMembers"
+                            :group="group!"
+                            :project="project!"
+                            :user="user!"
+                            :isTeacher="isTeacher!"
+                        />
+                    </v-card-actions>
+                </v-card>
+                <v-card variant="outlined" class="submissions">
+                    <SubmissionList :groupId="groupId" />
+                </v-card>
+            </v-col>
+            <v-col cols="2" class="backbutton">
+                <BackButton title="project.to_project" :destination="`/project/${group.project_id}`"/>
+            </v-col>
+        </v-row>
     </v-container>
 </template>
 
@@ -57,6 +64,7 @@ import { useProjectQuery } from "@/queries/Project";
 import { useCurrentUserQuery } from "@/queries/User";
 import GroupButtons from "@/components/buttons/GroupButtons.vue";
 import SubmissionList from "@/components/submission/SubmissionList.vue";
+import BackButton from "@/components/buttons/BackButton.vue"
 import { useSubjectInstructorsQuery } from "@/queries/Subject";
 
 const props = defineProps<{
@@ -116,4 +124,12 @@ const { mutateAsync: removeStudent } = useRemoveUserFromGroupMutation();
 .members {
     margin-top: 15px;
 }
+
+.backbutton {
+    margin-top: 25px;
+}
+
+.submissions {
+    background-color: rgb(var(--v-theme-background));
+}
 </style>

From 7beaf29e0d756c0b695cef0aaa095db01771ee59 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Sun, 19 May 2024 13:53:34 +0200
Subject: [PATCH 04/12] styling

---
 .../src/components/submission/SubmissionList.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/submission/SubmissionList.vue b/frontend/src/components/submission/SubmissionList.vue
index 7afcbe9e..4920156a 100644
--- a/frontend/src/components/submission/SubmissionList.vue
+++ b/frontend/src/components/submission/SubmissionList.vue
@@ -8,12 +8,13 @@
                     <v-btn :to="`/project/${project?.id}/submit`" variant="flat" class="submitbutton">
                         {{ $t("submit.new_submission") }}
                     </v-btn>
-                    <div v-if="mockSubmissions.length == 0" class="nosubmissions">
+                    <div v-if="sorted.length == 0" class="nosubmissions">
+                        <v-divider class="divider"></v-divider>
                         <p>{{ $t("submission.no_submissions") }}</p>
                     </div>
                     <SubmissionCard
                         class="ma-3"
-                        v-for="submission in mockSubmissions"
+                        v-for="submission in sorted"
                         :key="submission"
                         :submission="submission"
                         :project="project!"
@@ -44,13 +45,6 @@ const { data: project, isSuccess: projectSuccess } = useProjectQuery(
     computed(() => group.value?.project_id)
 );
 
-const mockSubmissions = [
-    {status: 1, date: new Date(2024, 5, 16), remarks: "wel een opmerking bij indiening",
-    testresults: [{succeeded: true, value: "succeeded"}]},
-    {status: 2, date: new Date(2024, 4, 15), stdout: "test", stderr: "test2",
-    testrestults: [{succeeded: false, value: "not succeeded"}]},
-]
-
 const sorted = computed(() => {
     return submissions.value?.toSorted((a, b) => new Date(b.date) - new Date(a.date));
 });
@@ -79,4 +73,8 @@ refetch_timer();
     background-color: rgb(var(--v-theme-secondary));
     border-color: rgb(var(--v-theme-text));
 }
+
+.divider {
+    margin-bottom: 15px;
+}
 </style>

From 9164580e03ae3d25e061bd1c276f1a02066e8224 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Sun, 19 May 2024 15:40:19 +0200
Subject: [PATCH 05/12] submissionslist test

---
 .../components/submission/SubmissionList.vue  |   2 +-
 frontend/src/views/SubmissionsView.vue        |  83 --------------
 .../submission/SubmissionList.spec.ts         | 101 ++++++++++++++++++
 frontend/tests/views/SubmissionsView.spec.ts  |  50 ---------
 4 files changed, 102 insertions(+), 134 deletions(-)
 delete mode 100644 frontend/src/views/SubmissionsView.vue
 create mode 100644 frontend/tests/components/submission/SubmissionList.spec.ts
 delete mode 100644 frontend/tests/views/SubmissionsView.spec.ts

diff --git a/frontend/src/components/submission/SubmissionList.vue b/frontend/src/components/submission/SubmissionList.vue
index 4920156a..8e0b4693 100644
--- a/frontend/src/components/submission/SubmissionList.vue
+++ b/frontend/src/components/submission/SubmissionList.vue
@@ -4,7 +4,7 @@
             <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
             <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
                 <v-col>
-                    <h2>{{ $t("submission.submissions_title", { project: project.name }) }}</h2>
+                    <h2>{{ $t("submission.submissions_title") }}</h2>
                     <v-btn :to="`/project/${project?.id}/submit`" variant="flat" class="submitbutton">
                         {{ $t("submit.new_submission") }}
                     </v-btn>
diff --git a/frontend/src/views/SubmissionsView.vue b/frontend/src/views/SubmissionsView.vue
deleted file mode 100644
index 26ce2671..00000000
--- a/frontend/src/views/SubmissionsView.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <v-container>
-        <div class="submissionsview">
-            <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
-            <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
-                <v-col class="col-sm-12 col-md-6 col-lg-8">
-                    <h1>{{ $t("submission.submissions_title", { project: project.name }) }}</h1>
-                    <v-btn :to="`/project/${project?.id}/submit`" variant="flat" class="submitbutton">
-                        {{ $t("submit.new_submission") }}
-                    </v-btn>
-                    <v-divider />
-                    <div v-if="sorted.length == 0" class="nosubmissions">
-                        <p>{{ $t("submission.no_submissions") }}</p>
-                    </div>
-                    <SubmissionCard
-                        class="ma-3"
-                        v-for="submission in sorted"
-                        :key="submission"
-                        :submission="submission"
-                        :project="project!"
-                    />
-                </v-col>
-                <v-col cols="2" class="backbutton">
-                    <BackButton class="back" :destination="`/project/${project.id}`" title="project.to_project"/>
-                </v-col>
-            </v-skeleton-loader>
-        </div>
-    </v-container>
-</template>
-
-<script setup lang="ts">
-import { useGroupQuery } from "@/queries/Group";
-import { useSubmissionsQuery } from "@/queries/Submission";
-import { useProjectQuery } from "@/queries/Project";
-import { computed, toRefs } from "vue";
-import SubmissionCard from "@/components/submission/SubmissionCard.vue";
-import BackButton from "@/components/buttons/BackButton.vue"
-
-const props = defineProps<{
-    groupId: number;
-}>();
-
-const { groupId } = toRefs(props);
-
-const { data: submissions, error, isLoading, isError, refetch } = useSubmissionsQuery(groupId);
-const { data: group } = useGroupQuery(groupId);
-const { data: project, isSuccess: projectSuccess } = useProjectQuery(
-    computed(() => group.value?.project_id)
-);
-
-const sorted = computed(() => {
-    return submissions.value?.toSorted((a, b) => new Date(b.date) - new Date(a.date));
-});
-
-// While latest submission is in progress, keep refetching.
-const refetch_timer = () => {
-    setTimeout(() => {
-        const list = sorted.value;
-        if (list && list.length > 0 && list[0].status == 1) {
-            refetch();
-            refetch_timer();
-        }
-    }, 1000);
-};
-refetch_timer();
-</script>
-<style scoped>
-
-.nosubmissions {
-    margin-top: 15px;
-}
-
-.submitbutton {
-    margin-top: 25px;
-    margin-bottom: 15px;
-    background-color: rgb(var(--v-theme-secondary));
-}
-
-.back{
-    margin: 25px;
-    float: left;
-}
-</style>
diff --git a/frontend/tests/components/submission/SubmissionList.spec.ts b/frontend/tests/components/submission/SubmissionList.spec.ts
new file mode 100644
index 00000000..9d07f9f8
--- /dev/null
+++ b/frontend/tests/components/submission/SubmissionList.spec.ts
@@ -0,0 +1,101 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubmissionList from "@/components/submission/SubmissionList.vue"
+import {computed, ref} from "vue";
+
+const testSubmissionsQuery = {
+    data: ref([]),
+    error: ref({message: "testerrormessage"}),
+    isLoading: ref(false),
+    isError: ref(true),
+    setError(value){
+        this.isError.value = value
+    },
+    refetch: vi.fn()
+}
+
+vi.mock("@/queries/Submission", () => ({
+    useSubmissionsQuery: vi.fn(() => testSubmissionsQuery)
+}))
+
+const testGroupQuery = {
+    data: ref({project_id: 1})
+}
+
+vi.mock("@/queries/Group", () => ({
+    useGroupQuery: vi.fn(() => testGroupQuery)
+}))
+
+const testProjectQuery = {
+    data: ref({id: 1, name: "testproject"}),
+    isSuccess: ref(true)
+}
+
+vi.mock("@/queries/Project", () => ({
+    useProjectQuery: vi.fn(() => testProjectQuery)
+}))
+
+vi.mock("@/components/submission/SubmissionCard.vue", () => ({
+    default: {
+        template: "<div class='submissionCard'></div>"
+    }
+}))
+
+describe("SubmissionsView", () => {
+    it("render if error", async () => {
+        const wrapper = mount(SubmissionList, {
+            props: {
+                groupId: 1
+            },
+            global: {
+                mocks: {
+                    sorted: computed(() => {return []})
+                }
+            }
+        })
+        expect(wrapper.text()).toContain("testerrormessage")
+        testSubmissionsQuery.setError(false)
+        await wrapper.vm.$nextTick()
+    });
+    it("render submissionslist",  () => {
+        const wrapper = mount(SubmissionList, {
+            props: {
+                groupId: 1
+            },
+            global: {
+                mocks: {
+                    sorted: computed(() => {return []})
+                }
+            }
+        })
+        expect(wrapper.text()).toContain("Indieningen:")
+        const VBtn = wrapper.findComponent({name:"VBtn"})
+        expect(VBtn.text()).toContain("Nieuwe indiening")
+    });
+    it("render no submissions", () => {
+        const wrapper = mount(SubmissionList, {
+            props: {
+                groupId: 1
+            },
+            global: {
+                mocks: {
+                    sorted: computed(() => {return []})
+                }
+            }
+        })
+       expect(wrapper.text()).toContain("Nog geen indieningen")
+    });
+    it("render with submissions",  () => {
+        const wrapper = mount(SubmissionList, {
+            props: {
+                groupId: 1
+            },
+            global: {
+                mocks: {
+                    sorted: computed(() => {return [{id: 1}]})
+                }
+            }
+        })
+        expect(wrapper.findComponent(".submissionCard").exists()).toBeTruthy()
+    })
+})
diff --git a/frontend/tests/views/SubmissionsView.spec.ts b/frontend/tests/views/SubmissionsView.spec.ts
deleted file mode 100644
index 0c7e649b..00000000
--- a/frontend/tests/views/SubmissionsView.spec.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import {mount} from "@vue/test-utils";
-import {expect, describe, it, vi} from "vitest";
-import SubmissionsView from "@/views/SubmissionsView.vue"
-import {ref} from "vue";
-
-const testSubmissionsQuery = {
-    data: ref([]),
-    setData(value){
-        this.data.value = value
-    },
-    error: ref({message: "testerrormessage"}),
-    isLoading: ref(false),
-    isError: ref(true),
-    refetch: vi.fn()
-}
-
-vi.mock("@/queries/Submission", () => ({
-    useSubmissionsQuery: vi.fn(() => testSubmissionsQuery)
-}))
-
-const testGroupQuery = {
-    data: ref({project_id: 1})
-}
-
-vi.mock("@/queries/Group", () => ({
-    useGroupQuery: vi.fn(() => testGroupQuery)
-}))
-
-const testProjectQuery = {
-    data: ref({id: 1, name: "testproject"}),
-    isSucces: ref(true)
-}
-
-vi.mock("@/queries/Project", () => ({
-    useProjectQuery: vi.fn(() => testProjectQuery)
-}))
-
-describe("SubmissionsView", () => {
-    const wrapper = mount(SubmissionsView, {
-        props: {
-            groupId: 1
-        }
-    })
-    it("render if error", () => {
-       expect(wrapper.text()).toContain("testerrormessage")
-    });
-    it("render submissions", async () => {
-
-    });
-})

From 0ad1dfa1be3daa52634ef7f0e1873574bbb8d2e1 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Sun, 19 May 2024 17:22:06 +0200
Subject: [PATCH 06/12] meer testen

---
 .../src/components/buttons/BackButton.vue     |   8 +-
 frontend/src/i18n/locales/nl.ts               |   2 +-
 .../components/buttons/BackButton.spec.ts     |  18 +++
 .../submission/SubmissionCard.spec.ts         |  56 ++++++++
 .../submission/SubmissionList.spec.ts         |   2 +-
 frontend/tests/views/GroupView.spec.ts        | 125 ++++++++++++++++++
 6 files changed, 203 insertions(+), 8 deletions(-)
 create mode 100644 frontend/tests/components/buttons/BackButton.spec.ts
 create mode 100644 frontend/tests/components/submission/SubmissionCard.spec.ts
 create mode 100644 frontend/tests/views/GroupView.spec.ts

diff --git a/frontend/src/components/buttons/BackButton.vue b/frontend/src/components/buttons/BackButton.vue
index 34bfae52..f60d9e5e 100644
--- a/frontend/src/components/buttons/BackButton.vue
+++ b/frontend/src/components/buttons/BackButton.vue
@@ -7,17 +7,13 @@
 </template>
 
 <script setup lang="ts">
-import Subject from "@/models/Subject";
-import router from "@/router";
-
 const props = defineProps<{
     destination: String;
     title: String;
 }>();
 
-const back = async () => {
-    router.push(props.destination);
-}
+const destination = props.destination
+const title = props.title
 
 </script>
 
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index a2b7fa34..604bac54 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -35,7 +35,7 @@ export default {
         no_submission_files: "Geen indieningen gevonden",
     },
     submission: {
-        status: "Indiening status: {status}",
+        status: "Indiening status:",
         datetime: "Indiening tijdstip:",
         remarks: "Opmerkingen",
         remarks_empty: "Geen opmerkingen voor deze indiening",
diff --git a/frontend/tests/components/buttons/BackButton.spec.ts b/frontend/tests/components/buttons/BackButton.spec.ts
new file mode 100644
index 00000000..fae4e799
--- /dev/null
+++ b/frontend/tests/components/buttons/BackButton.spec.ts
@@ -0,0 +1,18 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it} from "vitest";
+import BackButton from "@/components/buttons/BackButton.vue"
+
+describe("BackButton", () => {
+    const wrapper = mount(BackButton, {
+        props: {
+            title: "group.to_grouppage",
+            destination: "/test"
+        },
+        global: {
+            stubs: ["router-link"],
+        },
+    })
+    it("render button", () => {
+        expect(wrapper.findComponent({name: "router-link"}).exists()).toBeTruthy()
+    });
+})
diff --git a/frontend/tests/components/submission/SubmissionCard.spec.ts b/frontend/tests/components/submission/SubmissionCard.spec.ts
new file mode 100644
index 00000000..7a1fdbc8
--- /dev/null
+++ b/frontend/tests/components/submission/SubmissionCard.spec.ts
@@ -0,0 +1,56 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubmissionCard from "@/components/submission/SubmissionCard.vue"
+import {ref} from "vue";
+
+const testFilesQuery = {
+    data: ref([{filename: "testfile"}]),
+    isLoading: ref(false),
+    isError: ref(true),
+    error: ref({message: "error message"}),
+    setError(value){
+        this.isError.value = value;
+    }
+}
+
+vi.mock("@/queries/Submission", () => ({
+    useFilesQuery: vi.fn(() => testFilesQuery)
+}))
+
+const mockSubmission = ref({id: 1, date: new Date(2024, 4, 15), status: 2, remarks: "testremarks",
+                                    testresults: []})
+
+describe("SubmissionCard", () => {
+    it("render if error", async () => {
+        const wrapper = mount(SubmissionCard, {
+            props: {
+                submission: mockSubmission,
+                deadline: new Date(2024, 5, 12)
+            }
+        })
+        expect(wrapper.text()).toContain("error message")
+        testFilesQuery.setError(false)
+        await wrapper.vm.$nextTick()
+    });
+    it("render submissions card", () => {
+        const wrapper = mount(SubmissionCard, {
+            props: {
+                submission: mockSubmission,
+                deadline: new Date(2024, 5, 12)
+            }
+        })
+        const text = wrapper.text()
+        expect(text).toContain("Indiening status: Accepted")
+        expect(text).toContain("testremarks")
+        expect(text).toContain("testfile")
+    });
+    it("render submission after deadline", () => {
+        const wrapper = mount(SubmissionCard, {
+            props: {
+                submission: mockSubmission,
+                deadline: new Date(2024, 3, 12)
+            }
+        })
+        expect(wrapper.text()).toContain("Na deadline")
+    })
+})
diff --git a/frontend/tests/components/submission/SubmissionList.spec.ts b/frontend/tests/components/submission/SubmissionList.spec.ts
index 9d07f9f8..563afeef 100644
--- a/frontend/tests/components/submission/SubmissionList.spec.ts
+++ b/frontend/tests/components/submission/SubmissionList.spec.ts
@@ -41,7 +41,7 @@ vi.mock("@/components/submission/SubmissionCard.vue", () => ({
     }
 }))
 
-describe("SubmissionsView", () => {
+describe("SubmissionsList", () => {
     it("render if error", async () => {
         const wrapper = mount(SubmissionList, {
             props: {
diff --git a/frontend/tests/views/GroupView.spec.ts b/frontend/tests/views/GroupView.spec.ts
new file mode 100644
index 00000000..fceb7c01
--- /dev/null
+++ b/frontend/tests/views/GroupView.spec.ts
@@ -0,0 +1,125 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import GroupView from "@/views/GroupView.vue"
+import {ref} from "vue";
+
+const testGroupQuery = {
+    data: ref({project_id: 1, id: 1, team_name: "testgroup", members: [{given_name: "test", surname: "member"}]}),
+    isLoading: ref(true),
+    isError: ref(true),
+    setLoading(value){
+        this.isLoading.value = value
+    },
+    setError(value){
+        this.isError.value = value
+    },
+    setMembers(value) {
+        this.data.value.members = value
+    }
+}
+
+vi.mock("@/queries/Group", () => ({
+    useGroupQuery: vi.fn(() => testGroupQuery),
+    useRemoveUserFromGroupMutation: vi.fn(() => vi.fn())
+}))
+
+const testProjectQuery = {
+    data: ref({subject_id: 1, name: "testproject"}),
+    isLoading: ref(false),
+    isError: ref(false)
+}
+
+vi.mock("@/queries/Project", () => ({
+    useProjectQuery: vi.fn(() => testProjectQuery)
+}))
+
+const testCurrentUserQuery = {
+    isLoading: ref(false),
+    isError: ref(false),
+    data: ref({uid: "testuser"}),
+    setUuid(value){
+        this.data.value.uid = value
+    }
+}
+
+vi.mock("@/queries/User", () => ({
+    useCurrentUserQuery: vi.fn(() => testCurrentUserQuery)
+}))
+
+const testSubjectInstructorsQuery = {
+    data: ref([{uid: "testinstructor"}]),
+    isLoading: ref(false),
+    isError: ref(false)
+}
+
+vi.mock("@/queries/Subject", () => ({
+    useSubjectInstructorsQuery: vi.fn(() => testSubjectInstructorsQuery)
+}))
+
+vi.mock("@/components/buttons/GroupButtons.vue", () => ({
+    default: {
+        template: "<div class='groupButtons'></div>"
+    }
+}))
+
+vi.mock("@/components/submission/SubmissionList.vue", () => ({
+    default: {
+        template: "<div class='submissionList'></div>"
+    }
+}))
+
+vi.mock("@/components/buttons/BackButton.vue", () => ({
+    default: {
+        template: "<div class='backButton'></div>"
+    }
+}))
+
+describe("GroupView", () => {
+    const wrapper = mount(GroupView, {
+        props: {
+            groupId: 1
+        }
+    })
+    it("render if loading", async () => {
+        expect(wrapper.text()).toContain("Aan het laden...")
+        const isLoadingTrue = (wrapper.vm as any).isLoading
+        expect(isLoadingTrue).toBe(true)
+        testGroupQuery.setLoading(false)
+        await wrapper.vm.$nextTick()
+        const isLoadingFalse = (wrapper.vm as any).isLoading
+        expect(isLoadingFalse).toBe(false)
+    });
+    it("render if error", async () => {
+        expect(wrapper.text()).toContain("Groep niet gevonden")
+        const isErrorTrue = (wrapper.vm as any).isError
+        expect(isErrorTrue).toBe(true)
+        testGroupQuery.setError(false)
+        await wrapper.vm.$nextTick()
+        const isErrorFalse = (wrapper.vm as any).isError
+        expect(isErrorFalse).toBe(false)
+    });
+    it("render if student", () => {
+        const text = wrapper.text()
+        expect(text).toContain("testgroup")
+        expect(text).toContain("Project: testproject")
+        expect(text).toContain("test member")
+        expect(wrapper.findComponent(".groupButtons").exists()).toBeTruthy()
+        expect(wrapper.findComponent(".submissionList").exists()).toBeTruthy()
+        expect(wrapper.findComponent(".backButton").exists()).toBeTruthy()
+    });
+    it("render if teacher", async () => {
+        testCurrentUserQuery.setUuid("testinstructor")
+        await wrapper.vm.$nextTick()
+        const isTeacherFunction = (wrapper.vm as any).isTeacher
+        expect(isTeacherFunction).toBe(true)
+    });
+    it("render if no members", async () => {
+        const members = (wrapper.vm as any).amountOfMembers
+        expect(members).toBe(1)
+        testGroupQuery.setMembers([])
+        await wrapper.vm.$nextTick()
+        expect(wrapper.text()).toContain("Geen leden teruggevonden.")
+        const noMembers = (wrapper.vm as any).amountOfMembers
+        expect(noMembers).toBe(0)
+    });
+})

From 0d21839dace072927070beb928cf0e105fe30ac5 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Sun, 19 May 2024 17:27:19 +0200
Subject: [PATCH 07/12] format

---
 frontend/src/components/buttons/BackButton.vue    |  6 ++----
 frontend/src/components/project/ProjectInfo.vue   |  7 +------
 .../src/components/submission/SubmissionCard.vue  | 11 ++++++++---
 .../src/components/submission/SubmissionList.vue  |  7 +++++--
 frontend/src/i18n/locales/en.ts                   |  2 +-
 frontend/src/i18n/locales/nl.ts                   |  2 +-
 frontend/src/views/GroupView.vue                  | 15 +++++++++++----
 7 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/buttons/BackButton.vue b/frontend/src/components/buttons/BackButton.vue
index f60d9e5e..60b732f0 100644
--- a/frontend/src/components/buttons/BackButton.vue
+++ b/frontend/src/components/buttons/BackButton.vue
@@ -12,13 +12,11 @@ const props = defineProps<{
     title: String;
 }>();
 
-const destination = props.destination
-const title = props.title
-
+const destination = props.destination;
+const title = props.title;
 </script>
 
 <style scoped>
-
 .v-btn {
     margin-bottom: 5px;
     min-width: 150px;
diff --git a/frontend/src/components/project/ProjectInfo.vue b/frontend/src/components/project/ProjectInfo.vue
index cb02d53c..8818c537 100644
--- a/frontend/src/components/project/ProjectInfo.vue
+++ b/frontend/src/components/project/ProjectInfo.vue
@@ -34,12 +34,7 @@
                 </v-btn>
             </v-card-actions>
         </v-card>
-        <SubmitInfo
-            class="submitInfo"
-            v-if="group"
-            :project="project"
-            :group="group"
-        />
+        <SubmitInfo class="submitInfo" v-if="group" :project="project" :group="group" />
     </v-container>
 </template>
 
diff --git a/frontend/src/components/submission/SubmissionCard.vue b/frontend/src/components/submission/SubmissionCard.vue
index 23883357..0992e811 100644
--- a/frontend/src/components/submission/SubmissionCard.vue
+++ b/frontend/src/components/submission/SubmissionCard.vue
@@ -5,7 +5,10 @@
             <v-col>
                 <v-card-title>
                     {{ $t("submission.status") }}
-                    <p v-if="new Date(submission.date) <= deadline" :class="Status[submission.status]">
+                    <p
+                        v-if="new Date(submission.date) <= deadline"
+                        :class="Status[submission.status]"
+                    >
                         {{ Status[submission.status] }}
                     </p>
                     <p v-else class="Deadline">{{ $t("submission.after_deadline") }}</p>
@@ -24,7 +27,9 @@
                         {{ $t("submission.remarks_empty") }}
                     </v-card-subtitle>
                 </v-card-item>
-                <v-card-item v-if="submission.stderr || submission.stdout || submission.testresults.length">
+                <v-card-item
+                    v-if="submission.stderr || submission.stdout || submission.testresults.length"
+                >
                     <v-card-title>{{ $t("submission.docker_test") }}</v-card-title>
                     <v-card-text>
                         <p v-if="submission.stdout">Stdout: {{ submission.stdout }}</p>
@@ -142,6 +147,6 @@ const downloadAll = () => {
     border-color: rgb(var(--v-theme-text));
     background-color: rgb(var(--v-theme-background));
     margin-top: 10px;
-    margin-bottom: 10px
+    margin-bottom: 10px;
 }
 </style>
diff --git a/frontend/src/components/submission/SubmissionList.vue b/frontend/src/components/submission/SubmissionList.vue
index 8e0b4693..453e4fe7 100644
--- a/frontend/src/components/submission/SubmissionList.vue
+++ b/frontend/src/components/submission/SubmissionList.vue
@@ -5,7 +5,11 @@
             <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
                 <v-col>
                     <h2>{{ $t("submission.submissions_title") }}</h2>
-                    <v-btn :to="`/project/${project?.id}/submit`" variant="flat" class="submitbutton">
+                    <v-btn
+                        :to="`/project/${project?.id}/submit`"
+                        variant="flat"
+                        class="submitbutton"
+                    >
                         {{ $t("submit.new_submission") }}
                     </v-btn>
                     <div v-if="sorted.length == 0" class="nosubmissions">
@@ -62,7 +66,6 @@ const refetch_timer = () => {
 refetch_timer();
 </script>
 <style scoped>
-
 .nosubmissions {
     margin-top: 15px;
 }
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 725ef2b6..ca3825d3 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -66,7 +66,7 @@ export default {
         not_found2: "Project not found",
         to_subject: "To subject",
         to_groups: "To groups",
-        to_project: "To Project"
+        to_project: "To Project",
     },
     navigation: {
         home: "Home",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 604bac54..a566592e 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -66,7 +66,7 @@ export default {
         not_found2: "Project niet teruggevonden",
         to_subject: "Naar vak",
         to_groups: "Naar groepen",
-        to_project: "Naar project"
+        to_project: "Naar project",
     },
     navigation: {
         home: "Hoofdscherm",
diff --git a/frontend/src/views/GroupView.vue b/frontend/src/views/GroupView.vue
index 52ffc41e..c35cc311 100644
--- a/frontend/src/views/GroupView.vue
+++ b/frontend/src/views/GroupView.vue
@@ -24,8 +24,12 @@
                                         color="red"
                                         variant="flat"
                                         @click="
-                                        () => removeStudent({ groupId: group!.id, uid: member.uid })
-                                    "
+                                            () =>
+                                                removeStudent({
+                                                    groupId: group!.id,
+                                                    uid: member.uid,
+                                                })
+                                        "
                                     >
                                         {{ $t("group.remove") }}</v-btn
                                     >
@@ -51,7 +55,10 @@
                 </v-card>
             </v-col>
             <v-col cols="2" class="backbutton">
-                <BackButton title="project.to_project" :destination="`/project/${group.project_id}`"/>
+                <BackButton
+                    title="project.to_project"
+                    :destination="`/project/${group.project_id}`"
+                />
             </v-col>
         </v-row>
     </v-container>
@@ -64,7 +71,7 @@ import { useProjectQuery } from "@/queries/Project";
 import { useCurrentUserQuery } from "@/queries/User";
 import GroupButtons from "@/components/buttons/GroupButtons.vue";
 import SubmissionList from "@/components/submission/SubmissionList.vue";
-import BackButton from "@/components/buttons/BackButton.vue"
+import BackButton from "@/components/buttons/BackButton.vue";
 import { useSubjectInstructorsQuery } from "@/queries/Subject";
 
 const props = defineProps<{

From f09471445d2bc97bc1468d3a7490791729a74d87 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Mon, 20 May 2024 14:28:23 +0200
Subject: [PATCH 08/12] merge conflicts

---
 frontend/tests/views/GroupView.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/tests/views/GroupView.spec.ts b/frontend/tests/views/GroupView.spec.ts
index fceb7c01..09a54491 100644
--- a/frontend/tests/views/GroupView.spec.ts
+++ b/frontend/tests/views/GroupView.spec.ts
@@ -4,7 +4,7 @@ import GroupView from "@/views/GroupView.vue"
 import {ref} from "vue";
 
 const testGroupQuery = {
-    data: ref({project_id: 1, id: 1, team_name: "testgroup", members: [{given_name: "test", surname: "member"}]}),
+    data: ref({project_id: 1, id: 1, num: 1, members: [{given_name: "test", surname: "member"}]}),
     isLoading: ref(true),
     isError: ref(true),
     setLoading(value){
@@ -100,7 +100,7 @@ describe("GroupView", () => {
     });
     it("render if student", () => {
         const text = wrapper.text()
-        expect(text).toContain("testgroup")
+        expect(text).toContain("Groep 1")
         expect(text).toContain("Project: testproject")
         expect(text).toContain("test member")
         expect(wrapper.findComponent(".groupButtons").exists()).toBeTruthy()

From c6f6f5a01dde8eb3fcb4d2f7d99871c30989d8f3 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Mon, 20 May 2024 14:33:10 +0200
Subject: [PATCH 09/12] lint + format

---
 frontend/src/views/CreateProjectView.vue | 2 +-
 frontend/src/views/GroupView.vue         | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/CreateProjectView.vue b/frontend/src/views/CreateProjectView.vue
index 84e0ece5..cabab9a4 100644
--- a/frontend/src/views/CreateProjectView.vue
+++ b/frontend/src/views/CreateProjectView.vue
@@ -170,7 +170,7 @@ async function submitForm() {
             });
         } else if (selectedGroupProject.value === "random") {
             const groups = divideStudentsIntoGroups(studentsData.value || [], capacity.value);
-            const groupsToCreate = groups.map((_) => ({
+            const groupsToCreate = groups.map(() => ({
                 project_id: createdProjectId,
                 score: 0,
             }));
diff --git a/frontend/src/views/GroupView.vue b/frontend/src/views/GroupView.vue
index 381b3609..f82abb6c 100644
--- a/frontend/src/views/GroupView.vue
+++ b/frontend/src/views/GroupView.vue
@@ -24,7 +24,11 @@
                                         color="red"
                                         variant="flat"
                                         @click="
-                                            () => removeStudent({ groupId: group!.id, uid: member.uid })
+                                            () =>
+                                                removeStudent({
+                                                    groupId: group!.id,
+                                                    uid: member.uid,
+                                                })
                                         "
                                     >
                                         {{ $t("group.remove") }}</v-btn

From ed9fc946d091acede5b84af57adbe9c01952cebf Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Mon, 20 May 2024 18:26:43 +0200
Subject: [PATCH 10/12] fix test after dev merge

---
 frontend/tests/components/submission/SubmissionList.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/tests/components/submission/SubmissionList.spec.ts b/frontend/tests/components/submission/SubmissionList.spec.ts
index 563afeef..24653f6b 100644
--- a/frontend/tests/components/submission/SubmissionList.spec.ts
+++ b/frontend/tests/components/submission/SubmissionList.spec.ts
@@ -68,7 +68,7 @@ describe("SubmissionsList", () => {
                 }
             }
         })
-        expect(wrapper.text()).toContain("Indieningen:")
+        expect(wrapper.text()).toContain("Indieningen voor project")
         const VBtn = wrapper.findComponent({name:"VBtn"})
         expect(VBtn.text()).toContain("Nieuwe indiening")
     });

From 2009e2fdfc024172c7db71c75787d60e070d8504 Mon Sep 17 00:00:00 2001
From: Marieke Sinnaeve <153190736+masinnae@users.noreply.github.com>
Date: Mon, 20 May 2024 18:37:07 +0200
Subject: [PATCH 11/12] Update frontend/src/i18n/locales/nl.ts

Co-authored-by: Bram Reyniers <55666730+reyniersbram@users.noreply.github.com>
---
 frontend/src/i18n/locales/nl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 5cbbdb66..6b9d58ff 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -34,7 +34,7 @@ export default {
         no_submission_files: "Geen indieningen gevonden",
     },
     submission: {
-        status: "Indiening status:",
+        status: "Status indiening:",
         datetime: "Indiening tijdstip:",
         remarks: "Opmerkingen",
         remarks_empty: "Geen opmerkingen voor deze indiening",

From bb45f1b338a208a9c1cc4d77f21d09c231e556ce Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Mon, 20 May 2024 18:42:13 +0200
Subject: [PATCH 12/12] fix test

---
 frontend/tests/components/submission/SubmissionCard.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/tests/components/submission/SubmissionCard.spec.ts b/frontend/tests/components/submission/SubmissionCard.spec.ts
index 7a1fdbc8..936b036d 100644
--- a/frontend/tests/components/submission/SubmissionCard.spec.ts
+++ b/frontend/tests/components/submission/SubmissionCard.spec.ts
@@ -40,7 +40,7 @@ describe("SubmissionCard", () => {
             }
         })
         const text = wrapper.text()
-        expect(text).toContain("Indiening status: Accepted")
+        expect(text).toContain("Status indiening: Accepted")
         expect(text).toContain("testremarks")
         expect(text).toContain("testfile")
     });