Test/main navbar (#13)

* setup vitest browser tests

* create navbar component

* start on test for navbar

* add test foor shared components like footer and navbar

* add tests for all awesome privacy components

* add tests for all feed components

* refactpr feed service component

* add test for utils

* setup vitest for components

* add testing library types

* add linting and build to pipline

* format and lint prepush

* install packages for testing and prepush

* remove lock file and downgrate vite-plugin-svelte (#14)

Author: dottmp

.github/workflows/test.yml

@@ -1,11 +1,11 @@
-name: Tests
+name: CI
 
 on:
   pull_request:
 
 jobs:
-  test:
-    name: Unit Tests
+  ci:
+    name: Type Check, Lint, Test & Build
     runs-on: ubuntu-latest
 
     steps:
@@ -16,5 +16,14 @@ jobs:
       - name: Install dependencies
         run: bun install --frozen-lockfile
 
-      - name: Run tests
+      - name: Type check
+        run: bun run check
+
+      - name: Lint
+        run: bun run lint
+
+      - name: Test
         run: bun run test
+
+      - name: Build
+        run: bun run build

.husky/pre-push

@@ -0,0 +1 @@
+bun run fix

bun.lock

@@ -1,37 +1,42 @@
 {
-	"name": "rss-privacy-news",
+	"name": "10xprivacy",
 	"private": true,
 	"version": "0.0.1",
 	"type": "module",
+	"author": "dottmp",
 	"scripts": {
 		"dev": "vite dev",
 		"dev:cf": "bun run build && wrangler pages dev .svelte-kit/cloudflare",
 		"build": "vite build",
 		"preview": "vite preview",
 		"preview:cf": "wrangler pages dev .svelte-kit/cloudflare",
-		"prepare": "svelte-kit sync || echo ''",
+		"prepare": "svelte-kit sync || echo '' && husky",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"lint:fix": "eslint --fix .",
 		"format": "prettier --write .",
 		"fix": "bun run format && bun run lint:fix",
-		"test:unit": "vitest",
-		"test:watch": "vitest --watch",
-		"test": "bun run test:unit",
+		"test": "vitest run",
+		"test:ui": "vitest --ui",
+		"test:watch": "vitest",
+		"test:coverage": "vitest run --coverage",
 		"sync:awesome-privacy": "./fetch-awesome-privacy.sh"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^9.39.2",
-		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.8",
 		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.1.18",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/svelte": "^5.3.1",
 		"@types/js-yaml": "^4.0.9",
 		"@types/node": "^24",
+		"@vitest/browser-playwright": "^4.1.1",
+		"@vitest/coverage-v8": "^4.1.1",
 		"daisyui": "^5.5.19",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
@@ -40,6 +45,8 @@
 		"eslint-plugin-svelte": "^3.14.0",
 		"eslint-plugin-unused-imports": "^4.4.1",
 		"globals": "^17.3.0",
+		"husky": "^9.1.7",
+		"jsdom": "^29.0.1",
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.4.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
@@ -49,7 +56,8 @@
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.54.0",
 		"vite": "^7.3.1",
-		"vitest": "^4.1.0",
+		"vitest": "^4.1.1",
+		"vitest-browser-svelte": "^2.1.0",
 		"wrangler": "^4.76.0"
 	},
 	"dependencies": {

package.json

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+
+import Footer from './footer.svelte';
+
+describe('Footer component', () => {
+	it('GitHub repo link has correct href', () => {
+		render(Footer);
+
+		const repoLink = screen.getByRole('link', { name: /GitHub repo/i });
+
+		expect(repoLink.getAttribute('href')).toBe('https://github.com/dottmp/10xprivacy');
+	});
+
+	it('MIT License link has correct href', () => {
+		render(Footer);
+
+		const licenseLink = screen.getByRole('link', { name: /MIT License/i });
+
+		expect(licenseLink.getAttribute('href')).toBe(
+			'https://github.com/dottmp/10xprivacy/blob/main/LICENSE'
+		);
+	});
+});

src/lib/components/footer.test.ts

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { Link } from '$lib/components/text';
+	import ThemeChange from '$lib/components/theme-change.svelte';
+	import { LOGO } from '$lib/configs';
+</script>
+
+<nav class="navbar flex-col justify-center gap-y-2 bg-base-100 px-4 shadow-sm">
+	<div class="flex w-full items-center">
+		<!-- logo -->
+		<div class="flex-none">
+			<a class=" text-xl font-bold text-primary" href={resolve('/')}>
+				<pre unselectable="on" class="text-[2px]">
+          {LOGO}
+            <span class="sr-only">10xPrivacy</span>
+        </pre>
+			</a>
+		</div>
+
+		<!-- desktop nav items  -->
+		<div class=" hidden flex-1 sm:block">
+			<ul class="flex space-x-6 px-6 [&_a]:font-semibold">
+				<li><Link href={resolve('/privacy-news')}>Privacy News</Link></li>
+				<li><Link href={resolve('/awesome-privacy')}>Awesome Privacy</Link></li>
+				<li><Link href={resolve('/websites')}>Websites</Link></li>
+			</ul>
+		</div>
+
+		<!-- theme toggle -->
+		<ThemeChange />
+	</div>
+
+	<!-- mobile nav items  -->
+	<div class=" w-full flex-1 sm:hidden">
+		<ul class="flex flex-wrap gap-x-6 gap-y-2 [&_a]:font-semibold">
+			<li><Link href={resolve('/privacy-news')}>Privacy News</Link></li>
+			<li><Link href={resolve('/awesome-privacy')}>Awesome Privacy</Link></li>
+			<li><Link href={resolve('/websites')}>Websites</Link></li>
+		</ul>
+	</div>
+</nav>

src/lib/components/navbar.svelte

@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+
+import Navbar from './navbar.svelte';
+
+vi.mock('theme-change');
+
+describe('Navbar component', () => {
+	describe('URLs', () => {
+		it('home link has correct href', () => {
+			render(Navbar);
+
+			const homeLink = screen.getByRole('link', { name: /10xPrivacy/i });
+
+			expect(homeLink.getAttribute('href')).toBe('/');
+		});
+
+		it('Privacy News link has correct href', () => {
+			render(Navbar);
+			const links = screen.getAllByRole('link', { name: /Privacy News/i });
+
+			expect(links).toHaveLength(2);
+
+			links.forEach((link) => {
+				expect(link.getAttribute('href')).toBe('/privacy-news');
+			});
+		});
+
+		it('Awesome Privacy link has correct href', () => {
+			render(Navbar);
+
+			const links = screen.getAllByRole('link', { name: /Awesome Privacy/i });
+
+			expect(links).toHaveLength(2);
+
+			links.forEach((link) => {
+				expect(link.getAttribute('href')).toBe('/awesome-privacy');
+			});
+		});
+
+		it('Websites link has correct href', () => {
+			render(Navbar);
+
+			const links = screen.getAllByRole('link', { name: /Websites/i });
+
+			expect(links).toHaveLength(2);
+
+			links.forEach((link) => {
+				expect(link.getAttribute('href')).toBe('/websites');
+			});
+		});
+	});
+
+	describe('Breakpoint styling', () => {
+		it('desktop nav is hidden by default and visible at sm breakpoint', () => {
+			render(Navbar);
+
+			const desktopNav = screen.getByRole('navigation').querySelector('.hidden.sm\\:block');
+
+			expect(desktopNav).not.toBeNull();
+		});
+
+		it('mobile nav is visible by default and hidden at sm breakpoint', () => {
+			render(Navbar);
+
+			const mobileNav = screen.getByRole('navigation').querySelector('.sm\\:hidden');
+
+			expect(mobileNav).not.toBeNull();
+		});
+
+		it('desktop nav contains all nav links', () => {
+			render(Navbar);
+
+			const desktopNav = screen.getByRole('navigation').querySelector('.hidden.sm\\:block');
+
+			const links = desktopNav?.querySelectorAll('a');
+
+			expect(links).toHaveLength(3);
+		});
+
+		it('mobile nav contains all nav links', () => {
+			render(Navbar);
+
+			const mobileNav = screen.getByRole('navigation').querySelector('.sm\\:hidden');
+
+			const links = mobileNav?.querySelectorAll('a');
+
+			expect(links).toHaveLength(3);
+		});
+	});
+});

src/lib/components/navbar.test.ts

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+
+import CategoriesComponent from './categories.svelte';
+
+import type { Category } from '$lib/features/awesome-privacy/types';
+
+vi.mock('$app/paths', () => ({
+	resolve: (path: string) => path
+}));
+
+const categories: Category[] = [
+	{
+		name: 'Essentials',
+		sections: [
+			{ name: 'Password Managers', services: [] },
+			{ name: 'VPNs', services: [] }
+		]
+	},
+	{
+		name: 'Communication',
+		sections: [
+			{ name: 'Messaging', services: [] },
+			{ name: 'Video Calls', services: [] }
+		]
+	}
+];
+
+describe('Categories component', () => {
+	it('renders all category names', () => {
+		render(CategoriesComponent, { props: { categories } });
+
+		categories.forEach((category) => {
+			expect(screen.getByText(category.name)).toBeTruthy();
+		});
+	});
+
+	it('renders correct href for each category', () => {
+		render(CategoriesComponent, { props: { categories } });
+
+		const links = screen.getAllByRole('link');
+		const hrefs = links.map((link) => link.getAttribute('href'));
+
+		expect(hrefs).toContain('/awesome-privacy/essentials');
+		expect(hrefs).toContain('/awesome-privacy/communication');
+	});
+
+	it('renders all section names', () => {
+		render(CategoriesComponent, { props: { categories } });
+
+		categories
+			.flatMap((category) => category.sections)
+			.forEach((section) => {
+				expect(screen.getByText(section.name)).toBeTruthy();
+			});
+	});
+
+	it('renders correct href for each section link', () => {
+		render(CategoriesComponent, { props: { categories } });
+
+		const links = screen.getAllByRole('link');
+
+		const hrefs = links.map((link) => link.getAttribute('href'));
+
+		expect(hrefs).toContain('/awesome-privacy/essentials/password-managers');
+		expect(hrefs).toContain('/awesome-privacy/essentials/vpns');
+		expect(hrefs).toContain('/awesome-privacy/communication/messaging');
+		expect(hrefs).toContain('/awesome-privacy/communication/video-calls');
+	});
+
+	it('renders back link to /awesome-privacy', () => {
+		render(CategoriesComponent, { props: { categories } });
+
+		const backLink = screen.getByRole('link', { name: /Back/i });
+
+		expect(backLink.getAttribute('href')).toBe('/awesome-privacy');
+	});
+});