Add testing frameworks

src/lib/i18n/index.ts

@@ -12,6 +12,6 @@ init({
 	initialLocale: browser
 		? browser && localStorage.getItem('locale')
 			? localStorage.getItem('locale')
-			: window.navigator.language
+			: window.navigator.language.slice(0, 2)
 		: defaultLocale
 });

src/routes/+layout.svelte

@@ -13,7 +13,7 @@
 	} from 'sveltestrap';
 
 	import { page } from '$app/stores';
-	import { locale, locales } from 'svelte-i18n';
+	import { locale, locales, isLoading } from 'svelte-i18n';
 
 	export const setLocale = (lang: string) => () => {
 		locale.set(lang);
@@ -39,19 +39,15 @@
 		}
 	};
 
-	export const getLanguageName = (languageCode: string): string | null => {
-		const languageNames: { [key: string]: { [key: string]: string } } = {
-			en: { en: 'English', nl: 'English', es: 'English' },
-			nl: { en: 'Nederlands', nl: 'Nederlands', es: 'Neerlandés' },
-			es: { en: 'Español', nl: 'Spaans', es: 'Español' }
-		};
+	let languageNames = {};
 
-		const lowercaseCode = languageCode.toLowerCase();
+	locale.subscribe(() => {
+		let newLanguageNames = new Intl.DisplayNames([$locale], { type: 'language' });
 
-		return Object.prototype.hasOwnProperty.call(languageNames, lowercaseCode)
-			? languageNames[lowercaseCode][lowercaseCode]
-			: null;
-	};
+		for (let l: string of $locales) {
+			languageNames[l] = newLanguageNames.of(l);
+		}
+	});
 </script>
 
 <Navbar expand="md">
@@ -65,16 +61,18 @@
 				<NavLink href="/api" active={$page.url.pathname === '/api'}>API</NavLink>
 			</NavItem>
 		</Nav>
+		{#if !$isLoading}
 		<Dropdown inNavbar>
-			<DropdownToggle nav caret>{getFlagEmoji($locale)} {getLanguageName($locale)}</DropdownToggle>
+			<DropdownToggle nav caret>{getFlagEmoji($locale)} {languageNames[$locale]}</DropdownToggle>
 			<DropdownMenu end>
 				{#each $locales as locale}
 					<DropdownItem on:click={setLocale(locale)}
-						>{getFlagEmoji(locale)} {getLanguageName(locale)}</DropdownItem
+						>{getFlagEmoji(locale)} {languageNames[locale]}</DropdownItem
 					>
 				{/each}
 			</DropdownMenu>
 		</Dropdown>
+		{/if}
 	</Collapse>
 </Navbar>
 

src/routes/Control.spec.ts

@@ -0,0 +1,30 @@
+import { writable } from 'svelte/store';
+import Control from './Control.svelte';
+import { render } from '@testing-library/svelte';
+import { describe, test, expect, beforeEach } from 'vitest';
+import { addMessages, init, locale } from 'svelte-i18n';
+
+import '$lib/i18n/index.ts';
+import en from '$lib/locales/en.json';
+addMessages('en', en);
+
+describe('Control Component', () => {
+	beforeEach(() => {
+		init({
+			fallbackLocale: 'en',
+			initialLocale: 'en'
+		});
+		locale.set('en');
+	});
+
+	test('should render the component', () => {
+		const host = document.createElement('div');
+		document.body.appendChild(host);
+		const instance = render(Control, {
+			target: host,
+			props: { status: writable([]), settings: writable([]) }
+		});
+		expect(instance).toBeTruthy();
+		expect(host.innerHTML).toContain('Control');
+	});
+});

src/routes/Settings.spec.ts

@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store';
+import Settings from './Settings.svelte';
+import { render } from '@testing-library/svelte';
+import { describe, test, expect, beforeEach } from 'vitest';
+import { addMessages, init, locale } from 'svelte-i18n';
+
+import '$lib/i18n/index.ts';
+import en from '$lib/locales/en.json';
+addMessages('en', en);
+
+describe('Settings Component', () => {
+	beforeEach(() => {
+		init({
+			fallbackLocale: 'en',
+			initialLocale: 'en'
+		});
+		locale.set('en');
+	});
+
+	test('should render the component', () => {
+		locale.set('en');
+
+		const host = document.createElement('div');
+		document.body.appendChild(host);
+		const instance = render(Settings, {
+			target: host,
+			props: { settings: writable([]) }
+		});
+		expect(instance).toBeTruthy();
+		expect(host.innerHTML).toContain('Settings');
+	});
+});

src/routes/Status.spec.ts

@@ -0,0 +1,30 @@
+import { writable } from 'svelte/store';
+import Status from './Status.svelte';
+import { render } from '@testing-library/svelte';
+import { describe, test, expect, beforeEach } from 'vitest';
+import { locale, init, addMessages } from 'svelte-i18n';
+
+import '$lib/i18n/index.ts';
+import en from '$lib/locales/en.json';
+addMessages('en', en);
+
+describe('Status Component', () => {
+	beforeEach(() => {
+		init({
+			fallbackLocale: 'en',
+			initialLocale: 'en'
+		});
+		locale.set('en');
+	});
+
+	test('should render the component', () => {
+		const host = document.createElement('div');
+		document.body.appendChild(host);
+		const instance = render(Status, {
+			target: host,
+			props: { status: writable([]), settings: writable([]) }
+		});
+		expect(instance).toBeTruthy();
+		expect(host.innerHTML).toContain('Status');
+	});
+});