Update / use typescript

2 files changed, 136 insertions, 0 deletions

diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte
new file mode 100644
index 0000000..3529de8
--- /dev/null
+++ b/src/lib/components/forum_list/forum_list.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+  export let forums;
+
+  $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
+</script>
+
+<ul>
+  {#each sortedForums as forum}
+    <li>
+      <a href="/f/{forum.id}">
+        <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+        <span class="navigation-label">{$_(forum.label)}</span>
+      </a>
+    </li>
+  {/each}
+</ul>
+
+<style>
+	ul {
+		padding: 0;
+	}
+
+	li {
+		display: block;
+		text-align: left;
+		margin-bottom: 20px;
+	}
+
+	.navigation-glyph {
+		font-size: 1.5rem;
+		display: block;
+	}
+
+	.☽ {
+		font-size: 2rem;
+	}
+
+	a {
+		text-decoration: none;
+	}
+</style>
diff --git a/src/lib/components/forum_list/forum_list.test.ts b/src/lib/components/forum_list/forum_list.test.ts
new file mode 100644
index 0000000..be7d449
--- /dev/null
+++ b/src/lib/components/forum_list/forum_list.test.ts
@@ -0,0 +1,94 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/extend-expect';
+
+import { render } from '@testing-library/svelte';
+import '$lib/i18n';
+
+import { addMessages } from 'svelte-i18n';
+
+import ForumList from './forum_list.svelte';
+
+const internals = {
+  results: null
+};
+
+describe('Forum List component', () => {
+
+  beforeAll(() => {
+
+    addMessages('en', {
+      'test_forums.yes': 'Absolutely yes',
+      'test_forums.no': 'No, not at all',
+      'test_forums.maybe': 'OK, maybe...'
+    });
+  });
+
+  beforeEach(() => {
+
+    internals.results = render(ForumList, { props: {
+      forums: [
+        {
+          id: 'yes',
+          glyph: '☆',
+          label: 'test_forums.yes',
+          position: 2
+        },
+        {
+          id: 'no',
+          glyph: '◯',
+          label: 'test_forums.no',
+          position: 0
+        },
+        {
+          id: 'maybe',
+          glyph: '⏀',
+          label: 'test_forums.maybe',
+          position: 1
+        }
+      ]
+    } });
+  });
+
+  test('It should display each forum according to their position', () => {
+
+    expect(internals.results.container)
+      .toHaveTextContent(/^◯.+⏀.+☆.+$/);
+  });
+
+  test('It should translate forum labels', () => {
+
+    expect(internals.results.getByText('Absolutely yes')).toBeVisible();
+    expect(internals.results.getByText('No, not at all')).toBeVisible();
+    expect(internals.results.getByText('OK, maybe...')).toBeVisible();
+  });
+
+  test('It should display forum glyphs', () => {
+
+    expect(internals.results.getByText('☆')).toBeVisible();
+    expect(internals.results.getByText('◯')).toBeVisible();
+    expect(internals.results.getByText('⏀')).toBeVisible();
+  });
+
+  test('Label should be a permalink to the forum', () => {
+
+    expect(internals.results.getByText('Absolutely yes').closest('a'))
+      .toHaveAttribute('href', '/f/yes');
+    expect(internals.results.getByText('No, not at all').closest('a'))
+      .toHaveAttribute('href', '/f/no');
+    expect(internals.results.getByText('OK, maybe...').closest('a'))
+      .toHaveAttribute('href', '/f/maybe');
+  });
+
+  test('Glyph should be a permalink to the forum', () => {
+
+    expect(internals.results.getByText('☆').closest('a'))
+      .toHaveAttribute('href', '/f/yes');
+    expect(internals.results.getByText('◯').closest('a'))
+      .toHaveAttribute('href', '/f/no');
+    expect(internals.results.getByText('⏀').closest('a'))
+      .toHaveAttribute('href', '/f/maybe');
+  });
+});