chore: frontend tests (wip)

SELab-2 · May 21, 2024 · 7a839b9 · 7a839b9
1 parent d6c0606
commit 7a839b9
Show file tree

Hide file tree

Showing 30 changed files with 665 additions and 524 deletions.
diff --git a/frontend/src/components/Loading.vue b/frontend/src/components/Loading.vue
@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import ProgressSpinner from 'primevue/progressspinner';
+import { useTimeout } from '@vueuse/core';
+
+withDefaults(defineProps<{height?:string}>(), {
+    height: '4rem'
+});
+
+const show = useTimeout(250);
+
 </script>
 
 <template>
-    <div class="h-full p-3 flex align-items-center justify-content-center surface-100 h-100">
-        <ProgressSpinner />
+    <div :style="{minHeight: height}" class="loader w-full p-3 flex justify-content-center">
+        <ProgressSpinner stroke="blue" v-if="show"/>
     </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+</style>
diff --git a/frontend/src/components/courses/ShareCourseButton.vue b/frontend/src/components/courses/ShareCourseButton.vue
@@ -8,6 +8,7 @@ import { type Course } from '@/types/Course.ts';
 import { PrimeIcons } from 'primevue/api';
 import { ref, computed } from 'vue';
 import { useCourses } from '@/composables/services/course.service';
+import Editor from '@/components/forms/Editor.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -37,9 +38,7 @@ async function handleShare(): Promise<void> {
  * Copies the invitation link to the clipboard.
  */
 function copyToClipboard(): void {
-    if (props.course.invitation_link !== null) {
-        navigator.clipboard.writeText(invitationLink.value);
-    }
+    navigator.clipboard.writeText(invitationLink.value);
 }
 
 /**
@@ -58,7 +57,6 @@ const invitationLink = computed(() => {
             class="custom-button"
             style="height: 51px; width: 51px"
             @click="displayShareCourse = true"
-            v-if="props.course.private_course"
         />
         <Dialog
             v-model:visible="displayShareCourse"
@@ -78,17 +76,20 @@ const invitationLink = computed(() => {
                 </p>
 
                 <div class="grid">
-                    <div class="flex align-items-center col-12 gap-2">
+                    <!-- Link duration -->
+                    <div class="field col">
                         <label for="linkDuration">{{ t('views.courses.share.duration') }}</label>
                         <InputNumber v-model="linkDuration" :min="1" :max="28" />
                     </div>
                 </div>
 
                 <div class="grid">
-                    <div class="flex align-items-center col-12 gap-2">
+                    <div class="field col">
                         <label for="link">{{ t('views.courses.share.link') }}</label>
-                        <InputText v-model="invitationLink" disabled style="width: 50%" />
-                        <Button @click="copyToClipboard()" icon="pi pi-copy" class="p-button-text no-outline" />
+                        <div class="flex">
+                            <InputText v-model="invitationLink" disabled/>
+                            <Button @click="copyToClipboard()" icon="pi pi-copy" class="p-button-text no-outline" />
+                        </div>
                     </div>
                 </div>
 

diff --git a/frontend/src/components/layout/base/BaseHeader.vue b/frontend/src/components/layout/base/BaseHeader.vue
@@ -42,11 +42,11 @@ const items = computed(() => [
         label: t('layout.header.navigation.courses'),
         route: 'courses',
     },
-    {
-        icon: 'bookmark',
-        label: t('layout.header.navigation.projects'),
-        route: 'projects',
-    },
+    // {
+    //     icon: 'bookmark',
+    //     label: t('layout.header.navigation.projects'),
+    //     route: 'projects',
+    // },
 ]);
 </script>
 

diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
@@ -13,6 +13,7 @@ import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { useStudents } from '@/composables/services/student.service';
 import { type Course } from '@/types/Course.ts';
+import Loading from '@/components/Loading.vue';
 
 /* Props */
 const props = withDefaults(
@@ -109,7 +110,7 @@ const incomingProjects = computed<Project[] | null>(() => {
                             </template>
                         </template>
                         <template v-else>
-                            <Skeleton height="8rem" />
+                            <Loading height="50vh"/>
                         </template>
                     </div>
                 </div>
@@ -129,9 +130,7 @@ const incomingProjects = computed<Project[] | null>(() => {
                             </div>
                         </template>
                         <template v-else>
-                            <div class="col-12" v-for="index in cols" :key="index">
-                                <Skeleton height="20rem" />
-                            </div>
+                            <Loading height="50vh"/>
                         </template>
                     </div>
                 </div>

diff --git a/frontend/src/composables/services/submission.service.ts b/frontend/src/composables/services/submission.service.ts
@@ -39,7 +39,7 @@ export function useSubmission(): SubmissionState {
         uploadedFiles.forEach((file: File) => {
             formData.append('files', file); // Gebruik 'files' in plaats van 'files[]'
         });
-        await create(endpoint, formData, submission, Submission.fromJSONCreate, 'multipart/form-data');
+        await create(endpoint, formData, submission, Submission.fromJSON, 'multipart/form-data');
     }
 
     async function deleteSubmission(id: string): Promise<void> {