Update to newer svelte configs, remove packages, and adding tests.

package.json

@@ -6,22 +6,20 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"test": "playwright test",
+		"test": "npm run test:integration && npm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test:unit": "vitest",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write .",
-		"site:update": "pnpm update -i -L"
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
 	},
 	"devDependencies": {
 		"@iconify-icons/material-symbols": "^1.2.56",
 		"@iconify-icons/mdi": "^1.2.47",
 		"@iconify-icons/radix-icons": "^1.2.9",
 		"@iconify-icons/simple-icons": "^1.2.70",
-		"@leveluptuts/svelte-side-menu": "^1.0.5",
+		"@playwright/test": "^1.28.1",
-		"@leveluptuts/svelte-toy": "^2.0.3",
-		"@playwright/test": "^1.36.2",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/adapter-vercel": "^1.0.6",
 		"@sveltejs/kit": "^1.25.1",
@@ -43,7 +41,7 @@
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"sass": "^1.65.1",
-		"scrape-it": "^5.3.2",
+		"scrape-it": "^6.0.1",
 		"sharp": "^0.32.6",
 		"svelte": "^4.2.1",
 		"svelte-check": "^3.4.6",
@@ -54,7 +52,7 @@
 		"vanilla-lazyload": "^17.8.4",
 		"vite": "^4.4.9",
 		"vite-imagetools": "^5.0.8",
-		"vitest": "^0.25.3"
+		"vitest": "^0.32.2"
 	},
 	"type": "module",
 	"dependencies": {

playwright.config.ts

@@ -2,10 +2,11 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
 	webServer: {
-		command: 'npm run build && npm run preview',
+		command: 'pnpm run build && pnpm run preview',
 		port: 4173
 	},
-	testDir: 'tests'
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
 };
 
 export default config;

src/lib/components/contactHub/index.svelte

@@ -3,14 +3,9 @@
 	import github from '@iconify-icons/radix-icons/github-logo';
 	import linkedin from '@iconify-icons/radix-icons/linkedin-logo';
 	import twitter from '@iconify-icons/radix-icons/twitter-logo';
-  
+
-	export let showFacebook: boolean = false;
-	export let showInstagram: boolean = false;
 	export let showTwitter: boolean = false;
 	export let showLinkedIn: boolean = false;
-	export let showReddit: boolean = false;
-	export let showGithub: boolean = false;
-	export let showYoutube: boolean = false;
 	export let showEmail: boolean = false;
 	export let userNames: Record<string, string>;
 	export let showText: boolean = false;
@@ -30,7 +25,7 @@
 				aria-label="Contact through Twitter"
 				rel="noreferrer"
 			>
-				<iconify-icon icon={github} class="twitter-contact" width="24" height="24" />
+				<iconify-icon icon={twitter} class="twitter-contact" width="24" height="24" />
 			</a>
 		</span>
 	{/if}
@@ -60,7 +55,7 @@
 			</a>
 		</span>
   {/if}
-	{#if email && userNames?.email}
+	{#if showEmail && userNames?.email}
 		<span>
 			<a
 				href={`mailto:${userNames.email}`}
@@ -79,19 +74,14 @@
 	div {
 		display: flex;
 		flex-wrap: wrap;
-		/* margin-top: 1rem; */
 		align-items: center;
 
 		&.justifyCenter {
 			justify-content: center;
 		}
 
-		--facebookColor: #3b5999;
-		--instagramColor: #8e37b8;
-		--redditColor: #ff4500;
 		--twitterColor: #1da1f2;
 		--linkedInColor: #0a66c2;
-		--youTubeColor: #ff0000;
 		--githubColor: #72757e;
 		--emailColor: var(--linkHover);
 	}
@@ -112,24 +102,6 @@
       font-size: 3.55rem;
     }
   }
-  .facebook-contact {
-    color: var(--textColor);
-    &:hover {
-      color: var(--facebookColor);
-    }
-  }
-  .instagram-contact {
-    color: var(--textColor);
-    &:hover {
-      color: var(--instagramColor);
-    }
-  }
-  .reddit-contact {
-    color: var(--textColor);
-    &:hover {
-      color: var(--redditColor);
-    }
-  }
   .twitter-contact {
     color: var(--textColor);
     &:hover {
@@ -142,12 +114,6 @@
       color: var(--linkedInColor);
     }
   }
-  .youtube-contact {
-    color: var(--textColor);
-    &:hover {
-      color: var(--youTubeColor);
-    }
-  }
   .github-contact {
     color: var(--textColor);
     &:hover {

src/lib/util/fetchBandcampAlbums.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { fetchBandcampAlbums } from './fetchBandcampAlbums';
+
+describe('test fetchBandcampAlbums', () => {
+	it('fetches bandcamp albums', async () => {
+		const albums = await fetchBandcampAlbums();
+		console.log('albums');
+		expect(albums).not.toBeNull();
+		expect(albums).toBeTruthy();
+		expect(albums?.length).toBeGreaterThan(0);
+		for (const album of albums) {
+			expect(album?.artist).toHaveLength;
+			expect(album?.artwork).toHaveLength;
+			expect(album?.src).toHaveLength;
+			expect(album?.title).toHaveLength;
+			expect(album?.url).toHaveLength;
+		}
+	});
+});

svelte.config.js

@@ -10,19 +10,16 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	extensions: ['.svelte', ...mdsvexConfig.extensions],
-	preprocess: [vitePreprocess(),mdsvex(mdsvexConfig)],
+	preprocess: [vitePreprocess(), mdsvex(mdsvexConfig)],
+	vitePlugin: {
+		inspector: true,
+		toggleKeyCombo: 'control-alt-shift'
+	},
 	kit: {
 		adapter: adapter(),
 		alias: {
 			$root: './src'
 		}
-	},
-	vitePlugin: {
-		experimental: {
-			inspector: {
-				toggleKeyCombo: 'control-alt-shift'
-			}
-		}
 	}
 };
 

tests/home.test.ts

@@ -2,5 +2,5 @@ import { expect, test } from '@playwright/test';
 
 test('index page has expected h1', async ({ page }) => {
 	await page.goto('/');
-	expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
+	expect(await page.textContent('h1')).toBe("Hello! I'm Bradley Shellnut.");
 });