Merge pull request #54 from COS301-SE-2024/update/vitests

Addition of Vitests for Unit Testing

Author: JoshuaTristanWereley

src/client/package.json

@@ -10,7 +10,10 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"cy:open-ct": "cypress open --component",
-		"cy:run-ct": "cypress run --e2e"
+		"cy:run-ct": "cypress run --e2e",
+		"test": "vitest run",
+		"test:ui": "vitest --ui",
+		"test:watch": "vitest"
 	},
 	"devDependencies": {
 		"@cypress/code-coverage": "^3.12.39",
@@ -19,11 +22,14 @@
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@tailwindcss/typography": "^0.5.10",
+		"@testing-library/jest-dom": "^6.4.5",
+		"@testing-library/svelte": "^5.1.0",
 		"@types/eslint": "^8.56.0",
 		"@typescript-eslint/eslint-plugin": "^7.0.0",
 		"@typescript-eslint/parser": "^7.0.0",
+		"@vitest/ui": "^1.6.0",
 		"autoprefixer": "^10.4.16",
 		"cypress": "^13.10.0",
 		"cypress-svelte-unit-test": "^3.3.4",
@@ -34,6 +40,7 @@
 		"flowbite-svelte": "^0.46.1",
 		"flowbite-svelte-icons": "^1.6.1",
 		"istanbul-lib-coverage": "^3.2.2",
+		"jsdom": "^24.1.0",
 		"nyc": "^15.1.0",
 		"postcss": "^8.4.33",
 		"prettier": "^3.1.1",
@@ -44,7 +51,8 @@
 		"tailwindcss": "^3.4.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"vite": "^5.0.3",
+		"vitest": "^1.6.0"
 	},
 	"type": "module",
 	"dependencies": {

src/client/src/testing/Activities.test.ts

@@ -0,0 +1,52 @@
+import { render } from '@testing-library/svelte';
+import { expect, test } from 'vitest';
+import ActivityTimeline from '../lib/components/admin/+Activities.svelte';
+
+test('renders activities correctly', () => {
+	const { getByText } = render(ActivityTimeline);
+
+	// Check that each activity title and description is rendered
+	const activities = [
+		{
+			title: 'Budget Planning Meeting',
+			date: '15 Oct',
+			activity:
+				'Attend and contribute to the annual budget planning meeting to allocate resources for the upcoming academic year.'
+		},
+		{
+			title: 'Faculty Evaluation',
+			date: '18 Oct',
+			activity:
+				'Conduct evaluations for tenured and non-tenured faculty members, reviewing their performance and providing feedback.'
+		},
+		{
+			title: 'Student Affairs Committee',
+			date: '20 Oct',
+			activity:
+				'Participate in the Student Affairs Committee meeting to discuss and address student concerns and initiatives.'
+		},
+		{
+			title: 'Campus Safety Review',
+			date: '22 Oct',
+			activity:
+				'Review campus safety protocols and emergency procedures with the safety department to ensure the well-being of students and staff.'
+		},
+		{
+			title: 'Strategic Planning Workshop',
+			date: '25 Oct',
+			activity:
+				'Engage in a strategic planning workshop to set long-term goals and objectives for the university’s growth and development.'
+		},
+		{
+			title: 'Alumni Networking Event',
+			date: '30 Oct',
+			activity:
+				'Host an alumni networking event to strengthen relationships with former students and encourage their involvement in university activities.'
+		}
+	];
+
+	activities.forEach((activity) => {
+		expect(getByText(activity.title)).toBeInTheDocument();
+		expect(getByText(activity.activity)).toBeInTheDocument();
+	});
+});

src/client/src/testing/Degrees.test.ts

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/svelte';
+import Degree from '../lib/components/admin/+Degrees.svelte';
+import { expect, test } from 'vitest';
+import { degrees } from '../routes/degrees';
+
+degrees.forEach((degree) => {
+	test(`displays the degree: ${degree.program}`, () => {
+		const { getByText } = render(Degree, { degrees });
+		expect(getByText(degree.program)).toBeVisible();
+	});
+});

src/client/src/testing/Workspace.test.ts

@@ -0,0 +1,21 @@
+// sum.test.js
+import { render } from '@testing-library/svelte';
+import { expect, test } from 'vitest';
+import Workspaces from '../lib/components/admin/+Workspaces.svelte';
+
+test('it renders the correct number of workspace cards', () => {
+	const workspaces = [
+		{ title: 'COS 333', description: 'Programming languages', image: 'COS333.png' },
+		{ title: 'COS 314', description: 'Artificial Intelligence', image: 'COS314.png' },
+		{ title: 'COS 344', description: 'Computer Graphics', image: 'COS344.png' }
+	];
+
+	const { getByText } = render(Workspaces, { props: { workspaces } });
+
+	expect(getByText('COS 333')).toBeInTheDocument();
+	expect(getByText('Programming languages')).toBeInTheDocument();
+	expect(getByText('COS 314')).toBeInTheDocument();
+	expect(getByText('Artificial Intelligence')).toBeInTheDocument();
+	expect(getByText('COS 344')).toBeInTheDocument();
+	expect(getByText('Computer Graphics')).toBeInTheDocument();
+});

src/client/vite.config.ts

@@ -1,9 +1,13 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
+import { svelteTesting } from '@testing-library/svelte/vite';
 
 export default defineConfig({
-	plugins: [sveltekit()],
-
+	plugins: [sveltekit(), svelteTesting()],
+	test: {
+		environment: 'jsdom',
+		setupFiles: ['./vitest-setup.js']
+	},
 	ssr: {
 		noExternal: ['three']
 	}

src/client/vitest-setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';