Merge pull request #193 from COS301-SE-2024/bugs

Bugs

src/client/src/lib/components/announcements/Card.svelte

@@ -5,8 +5,14 @@
 	import RemoveModal from '$lib/components/modals/Delete.svelte';
 	import EditModal from '$lib/components/modals/announcement/Edit.svelte';
 
-	export let role;
-	export let announcement;
+	export let role: string;
+	export let announcement: {
+		id: string;
+		title: string;
+		content: string;
+		date: string;
+		createdBy: string;
+	};
 
 	let { id, title, content, date, createdBy } = announcement;
 
@@ -15,13 +21,20 @@
 	let isRemoveModalOpen = false;
 </script>
 
-<div class="my-4">
+<div class="my-4" data-testid="announcement-card">
 	<div class="container rounded-lg bg-white px-4 py-6 shadow-md dark:bg-gray-900 dark:shadow-lg">
 		<div class="flex items-center justify-between">
 			<div class="flex items-center space-x-4">
-				<h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">{title}</h1>
+				<h1
+					class="text-2xl font-bold text-gray-900 dark:text-gray-100"
+					data-testid="announcement-title"
+				>
+					{title}
+				</h1>
+
 				<span
 					class="rounded-full bg-green-100 px-3 py-1 text-sm text-green-600 dark:bg-green-800 dark:text-green-400"
+					data-testid="announcement-date"
 				>
 					{DATE.toDateString()}
 				</span>
@@ -32,23 +45,35 @@
 					<DotsVerticalOutline
 						size="xl"
 						id="dot-menu"
+						data-testid="dots-menu"
 						class="cursor-pointer text-gray-600 dark:text-gray-300"
 					/>
 
 					<Dropdown placement="bottom-end" triggeredBy="#dot-menu">
-						<DropdownItem on:click={() => (isEditModalOpen = true)}>Edit</DropdownItem>
+						<DropdownItem on:click={() => (isEditModalOpen = true)} data-testid="edit-option">
+							Edit
+						</DropdownItem>
+
 						<DropdownDivider />
-						<DropdownItem on:click={() => (isRemoveModalOpen = true)}>Delete</DropdownItem>
+
+						<DropdownItem on:click={() => (isRemoveModalOpen = true)} data-testid="delete-option">
+							Delete
+						</DropdownItem>
 					</Dropdown>
 				</div>
 			{/if}
 		</div>
 
 		<div class="mt-4">
-			<p class="mt-2 text-xl text-gray-700 dark:text-gray-200">{content}</p>
+			<p class="mt-2 text-xl text-gray-700 dark:text-gray-200" data-testid="announcement-content">
+				{content}
+			</p>
 		</div>
 
-		<div class="mt-2 flex justify-end text-sm text-gray-500 dark:text-gray-400">
+		<div
+			class="mt-2 flex justify-end text-sm text-gray-500 dark:text-gray-400"
+			data-testid="announcement-author"
+		>
 			By: {createdBy}
 		</div>
 	</div>

src/client/src/lib/components/common/Banner.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { Banner } from 'flowbite-svelte';
 	import { InfoCircleSolid } from 'flowbite-svelte-icons';
-	export let color: string;
+
 	export let type: string;
+	export let color: string;
 	export let message: string;
 </script>
 

src/client/src/lib/components/common/Breadcrumbs.svelte

@@ -72,7 +72,7 @@
 	updateBreadcrumbs();
 </script>
 
-<Breadcrumb aria-label="Default breadcrumb example">
+<Breadcrumb aria-label="Default breadcrumb example" data-testid="breadcrumbs">
 	<BreadcrumbItem href="/" home>Home</BreadcrumbItem>
 	{#each breadcrumbItems as item}
 		<BreadcrumbItem href={item.href}>{item.name}</BreadcrumbItem>

src/client/src/lib/components/common/Header.svelte

@@ -49,13 +49,16 @@
 	}
 </script>
 
-<Navbar>
+<Navbar data-testid="navbar">
 	<BreadCrumbs />
 
 	<div class="flex items-center md:order-2">
-		<DarkMode class="mx-2 border text-gray-500 dark:border-gray-800 dark:text-gray-600" />
+		<DarkMode
+			class="mx-2 border text-gray-500 dark:border-gray-800 dark:text-gray-600"
+			data-testid="darkmode"
+		/>
 
-		<Avatar id="avatar-menu" src={image} class="mx-2" />
+		<Avatar id="avatar-menu" src={image} class="mx-2" data-testid="avatar" />
 
 		<div class="mx-2">
 			<div class="text-lg font-semibold">{name}</div>