add tests

COS301-SE-2024 · Sep 18, 2024 · 2b8d1b0 · 2b8d1b0
1 parent dd9b72a
commit 2b8d1b0
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 198 deletions.
diff --git a/src/src/lib/components/common/Header.svelte b/src/src/lib/components/common/Header.svelte
diff --git a/src/src/lib/components/common/PageUnavailable.svelte b/src/src/lib/components/common/PageUnavailable.svelte
@@ -1,15 +1,14 @@
-<body class="bg-gray-100 dark:bg-gray-800">
-	<div
-		class="m-12 flex min-h-screen flex-col items-center justify-center rounded-lg bg-white p-12 shadow-lg dark:bg-gray-700"
+<div
+	data-testid="page-unavailable-container"
+	class="m-12 flex min-h-screen flex-col items-center justify-center rounded-lg bg-white p-12 shadow-lg dark:bg-gray-700"
+>
+	<img src="https://www.svgrepo.com/show/195897/minus.svg" alt="Logo" class="mb-8 h-40" />
+	<h1
+		class="mb-4 text-center text-4xl font-bold text-gray-700 dark:text-white md:text-5xl lg:text-6xl"
 	>
-		<img src="https://www.svgrepo.com/show/195897/minus.svg" alt="Logo" class="mb-8 h-40" />
-		<h1
-			class="mb-4 text-center text-4xl font-bold text-gray-700 dark:text-white md:text-5xl lg:text-6xl"
-		>
-			Page Unavailable.
-		</h1>
-		<p class="mb-8 text-center text-lg text-gray-500 dark:text-gray-300 md:text-xl lg:text-2xl">
-			Please Create an Organisation to get started!
-		</p>
-	</div>
-</body>
+		Page Unavailable.
+	</h1>
+	<p class="mb-8 text-center text-lg text-gray-500 dark:text-gray-300 md:text-xl lg:text-2xl">
+		Please Create an Organisation to get started!
+	</p>
+</div>
diff --git a/src/src/lib/components/common/Sandbox.svelte b/src/src/lib/components/common/Sandbox.svelte
diff --git a/src/src/lib/components/common/ZeroUsersCard.svelte b/src/src/lib/components/common/ZeroUsersCard.svelte
@@ -11,7 +11,7 @@
 	export let role: string;
 </script>
 
-<Card img={imgSrc} size="none" imgClass="w-auto h-auto object-cover">
+<Card img={imgSrc} size="none" imgClass="w-auto h-auto object-cover" role="img">
 	<div class="p-4">
 		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{title}</h5>
 		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">{description}</p>

diff --git a/src/src/tests/unit/components/common/faq.test.ts b/src/src/tests/unit/components/common/faq.test.ts
@@ -0,0 +1,51 @@
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import FAQAccordion from '$lib/components/common/FAQ.svelte';
+
+const sampleFaqs = [
+	{
+		category: 'General Questions',
+		items: [
+			{ question: 'What is your return policy?', answer: 'You can return items within 30 days.' },
+			{ question: 'Do you ship internationally?', answer: 'Yes, we ship worldwide.' }
+		]
+	},
+	{
+		category: 'Technical Support',
+		items: [{ question: 'How do I reset my password?', answer: 'Click on "Forgot password" link.' }]
+	}
+];
+
+describe('FAQAccordion', () => {
+	it('renders the main heading', () => {
+		render(FAQAccordion, { props: { faqs: sampleFaqs } });
+		expect(screen.getByText('Frequently Asked Questions')).toBeInTheDocument();
+	});
+
+	it('renders categories as headings', () => {
+		render(FAQAccordion, { props: { faqs: sampleFaqs } });
+		expect(screen.getByText('General Questions')).toBeInTheDocument();
+		expect(screen.getByText('Technical Support')).toBeInTheDocument();
+	});
+
+	it('renders accordion items', () => {
+		render(FAQAccordion, { props: { faqs: sampleFaqs } });
+		expect(screen.getByText('What is your return policy?')).toBeInTheDocument();
+		expect(screen.getByText('Do you ship internationally?')).toBeInTheDocument();
+		expect(screen.getByText('How do I reset my password?')).toBeInTheDocument();
+	});
+
+	it('displays the answer when an accordion item is clicked', async () => {
+		render(FAQAccordion, { props: { faqs: sampleFaqs } });
+		const questionElement = screen.getByText('What is your return policy?');
+		await fireEvent.click(questionElement);
+
+		expect(screen.getByText('You can return items within 30 days.')).toBeInTheDocument();
+	});
+
+	it('handles empty faqs prop gracefully', () => {
+		render(FAQAccordion, { props: { faqs: [] } });
+		expect(screen.queryByText('General Questions')).not.toBeInTheDocument();
+		expect(screen.queryByText('Technical Support')).not.toBeInTheDocument();
+	});
+});
diff --git a/src/src/tests/unit/components/common/page-unavailable.test.ts b/src/src/tests/unit/components/common/page-unavailable.test.ts
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import PageUnavailable from '$lib/components/common/PageUnavailable.svelte';
+
+describe('PageUnavailable Component', () => {
+	it('renders the main heading', () => {
+		render(PageUnavailable);
+		expect(
+			screen.getByRole('heading', { level: 1, name: 'Page Unavailable.' })
+		).toBeInTheDocument();
+	});
+
+	it('renders the subheading', () => {
+		render(PageUnavailable);
+		expect(screen.getByText('Please Create an Organisation to get started!')).toBeInTheDocument();
+	});
+
+	it('renders the image with correct attributes', () => {
+		render(PageUnavailable);
+		const img = screen.getByAltText('Logo') as HTMLImageElement;
+		expect(img).toBeInTheDocument();
+		expect(img.src).toBe('https://www.svgrepo.com/show/195897/minus.svg');
+		expect(img.className).toContain('mb-8 h-40');
+	});
+
+	it('applies the correct styles to the container div', () => {
+		render(PageUnavailable);
+		const containerDiv = screen.getByTestId('page-unavailable-container');
+		expect(containerDiv).toBeInTheDocument();
+		expect(containerDiv.className).toContain(
+			'm-12 flex min-h-screen flex-col items-center justify-center rounded-lg bg-white p-12 shadow-lg dark:bg-gray-700'
+		);
+	});
+});