2 files changed, 74 insertions, 0 deletions
diff --git a/src/lib/components/language_selector/language_selector.svelte b/src/lib/components/language_selector/language_selector.svelte
new file mode 100644
index 0000000..64a4ef9
--- /dev/null
+++ b/src/lib/components/language_selector/language_selector.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { locale, locales } from 'svelte-i18n';
+	import { getLangNameFromCode } from 'language-name-map';
+
+	$: namedLocales = $locales
+	  .map((code) => ({
+	    code,
+	    ...getLangNameFromCode(code)
+	  }))
+	  .sort((a, b) => a.native - b.native);
+
+  let selected = $locale
+
+	$: {
+	  locale.set(selected);
+	}
+</script>
+
+<select bind:value={selected}>
+	{#each namedLocales as namedLocale}
+		<option value={namedLocale.code}>{namedLocale.native}</option>
+	{/each}
+</select>
+
+<style>
+</style>
diff --git a/src/lib/components/language_selector/language_selector.test.ts b/src/lib/components/language_selector/language_selector.test.ts
new file mode 100644
index 0000000..74156bc
--- /dev/null
+++ b/src/lib/components/language_selector/language_selector.test.ts
@@ -0,0 +1,48 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/extend-expect';
+
+import { locale } from 'svelte-i18n';
+import { act, render } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import '$lib/i18n';
+
+import LanguageSelector from './language_selector.svelte';
+
+const internals = {
+  results: null
+};
+
+describe('Language Selector component', () => {
+
+  beforeEach(() => {
+
+    internals.results = render(LanguageSelector);
+  });
+
+  test('Should display languages in their own language', () => {
+
+    expect(internals.results.getByText('English'))
+      .toBeVisible();
+    expect(internals.results.getByText('Español'))
+      .toBeVisible();
+  });
+
+  test('Should change locale when a language is selected', async () => {
+
+    locale.subscribe((localeValue) => {
+
+      expect(localeValue).toBe('en');
+    })();
+    const spanish = internals.results.getByText('Español');
+    await userEvent.selectOptions(spanish.closest('select'), spanish);
+    await act();
+    locale.subscribe((localeValue) => {
+
+      expect(localeValue).toBe('es');
+    })();
+  });
+});
+