Implement unit testing with vitest

Signed-off-by: Filip Wandzio <contact@philw.dev>

3 files changed, 53 insertions, 0 deletions

diff --git a/src/test/App.test.ts b/src/test/App.test.ts
new file mode 100644
index 0000000..64fae7d
--- /dev/null
+++ b/src/test/App.test.ts
@@ -0,0 +1,8 @@
+import { render } from '@testing-library/svelte';
+import App from '../App.svelte';
+
+describe('App component', () => {
+    test('it renders the App component', () => {
+        render(App);
+    });
+});
diff --git a/src/test/Main.test.ts b/src/test/Main.test.ts
new file mode 100644
index 0000000..1fdd1e2
--- /dev/null
+++ b/src/test/Main.test.ts
@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/svelte';
+import Main from '../lib/components/Main.svelte';
+
+describe('Main component', () => {
+    test('it renders the Projects section with the correct heading and content', () => {
+        render(Main);
+
+        const projectsHeading = screen.getByText('Projects');
+        expect(projectsHeading).toBeInTheDocument();
+
+        const projectText = screen.getByText(/git repository/i);
+        expect(projectText).toBeInTheDocument();
+
+        const link = screen.getByRole('link', { name: /git repository/i });
+        expect(link).toHaveAttribute('href', 'https://git.philw.dev');
+        expect(link).toHaveAttribute('target', '_blank');
+    });
+
+    test('it renders the Contact section with the correct heading and content', () => {
+        render(Main);
+
+        const contactHeading = screen.getByText('Contact');
+        expect(contactHeading).toBeInTheDocument();
+
+        const emailLink = screen.getByRole('link', { name: /email filip wandzio/i });
+        expect(emailLink).toHaveAttribute('href', 'mailto:contact@philw.dev');
+
+        const matrixLink = screen.getByRole('link', { name: /filip wandzio matrix account/i });
+        expect(matrixLink).toHaveAttribute('href', 'https://matrix.to/#/@philw:matrix.philw.dev');
+    });
+
+    test('it has the correct aria-labelledby attributes for accessibility', () => {
+        render(Main);
+
+        // Ensure sections are correctly labeled for accessibility
+        const aboutSection = screen.getByRole('region', { name: /about/i });
+        expect(aboutSection).toHaveAttribute('aria-labelledby', 'about-heading');
+
+        const projectsSection = screen.getByRole('region', { name: /projects/i });
+        expect(projectsSection).toHaveAttribute('aria-labelledby', 'projects-heading');
+
+        const contactSection = screen.getByRole('region', { name: /contact/i });
+        expect(contactSection).toHaveAttribute('aria-labelledby', 'contact-heading');
+    });
+});
diff --git a/src/setupTests.ts b/src/test/setupTests.ts
index c44951a..c44951a 100644
--- a/src/setupTests.ts
+++ b/src/test/setupTests.ts