Update / use typescript

2 files changed, 96 insertions, 0 deletions

diff --git a/src/lib/components/header/header.svelte b/src/lib/components/header/header.svelte
new file mode 100644
index 0000000..e6c9348
--- /dev/null
+++ b/src/lib/components/header/header.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { version } from '$lib/config/config';
+	import { topicActions } from '$lib/stores/actions';
+	import TopicActions from '$lib/components/actions/topic.svelte';
+</script>
+
+<header title={$_('header.title')}>
+	<ul>
+		<li>
+			<strong
+				><a href="/" title={$_('header.long_version', { values: { version } })}
+					>{$_('header.short_version', { values: { version } })}</a
+				></strong
+			>
+		</li>
+		<li>
+			<a href="/new" title={$_('header.action.new.title')}
+				>{@html $_('header.action.new.display')}</a
+			>
+		</li>
+		{#if $topicActions}
+      <TopicActions actions={$topicActions} />
+		{/if}
+		<li>
+			<a href="/search" title={$_('header.action.search.title')}
+				>{@html $_('header.action.search.display')}</a
+			>
+		</li>
+		<li>
+			<a href="/logout" title={$_('header.action.log_out.title')}
+				>{@html $_('header.action.log_out.display')}</a
+			>
+		</li>
+	</ul>
+</header>
+
+<style>
+	header {
+		grid-column: col-start 1 / span 12;
+		border-bottom: 1px solid black;
+	}
+
+	ul {
+		padding: 0;
+	}
+
+	li {
+		display: inline;
+		margin: 5px;
+	}
+
+	a {
+		text-decoration: none;
+		line-height: 3em;
+		display: inline-block;
+	}
+
+	strong a {
+		color: blue;
+		text-decoration: underline;
+	}
+</style>
diff --git a/src/lib/components/header/header.test.ts b/src/lib/components/header/header.test.ts
new file mode 100644
index 0000000..4107b2d
--- /dev/null
+++ b/src/lib/components/header/header.test.ts
@@ -0,0 +1,33 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/extend-expect';
+
+import { render } from '@testing-library/svelte';
+import '$lib/i18n';
+import { enableTopicActions } from '$lib/stores/actions';
+
+jest.mock('$lib/config/config.ts');
+
+import Header from './header.svelte';
+
+describe('Header component', () => {
+
+  test('Should not display topic if action is not set', () => {
+
+    const results = render(Header);
+
+    expect(results.queryByTitle('Reply'))
+      .toBe(null);
+  });
+
+  test('Should display topic if action is set', () => {
+
+    enableTopicActions('d138d6d8-e669-42e7-995d-20a7fcc176f5');
+    const results = render(Header);
+
+    expect(results.getByTitle('Reply'))
+      .toBeVisible();
+  });
+});