From 55fb920baa9792266be1a6b981f954c622c1eaf9 Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Thu, 22 Apr 2021 23:02:02 +0200
Subject: Add tests for header

Also patches up the leaky abstraction on the actions
---
 src/components/header/header.svelte  | 21 ++++++++-------------
 src/components/header/header.test.js | 27 +++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 src/components/header/header.test.js

(limited to 'src/components/header')

diff --git a/src/components/header/header.svelte b/src/components/header/header.svelte
index f33e77b..dcf95d5 100644
--- a/src/components/header/header.svelte
+++ b/src/components/header/header.svelte
@@ -1,39 +1,34 @@
 <script>
 	import { _ } from 'svelte-i18n';
 	import { version } from '$/config/config';
-	import { actions } from '$/stores/actions';
-
-	$: topic_id = $actions.topic_id;
+	import { topicActions } from '$/stores/actions';
+	import TopicActions from '$/components/actions/topic.svelte';
 </script>
 
 <header title={$_('header.title')}>
 	<ul>
 		<li>
 			<strong
-				><a href="/" aria-label={$_('header.long_version', { values: { version } })}
+				><a href="/" title={$_('header.long_version', { values: { version } })}
 					>{$_('header.short_version', { values: { version } })}</a
 				></strong
 			>
 		</li>
 		<li>
-			<a href="/new" aria-label={$_('header.action.new.title')}
+			<a href="/new" title={$_('header.action.new.title')}
 				>{@html $_('header.action.new.display')}</a
 			>
 		</li>
-		{#if topic_id}
-			<li>
-				<a href="/reply/{topic_id}" aria-label={$_('header.action.reply.title')}
-					>{@html $_('header.action.reply.display')}</a
-				>
-			</li>
+		{#if $topicActions}
+      <TopicActions actions={$topicActions} />
 		{/if}
 		<li>
-			<a href="/search" aria-label={$_('header.action.search.title')}
+			<a href="/search" title={$_('header.action.search.title')}
 				>{@html $_('header.action.search.display')}</a
 			>
 		</li>
 		<li>
-			<a href="/logout" aria-label={$_('header.action.log_out.title')}
+			<a href="/logout" title={$_('header.action.log_out.title')}
 				>{@html $_('header.action.log_out.display')}</a
 			>
 		</li>
diff --git a/src/components/header/header.test.js b/src/components/header/header.test.js
new file mode 100644
index 0000000..7d57265
--- /dev/null
+++ b/src/components/header/header.test.js
@@ -0,0 +1,27 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import { render } from '@testing-library/svelte';
+import '$/config/i18n';
+import { enableTopicActions } from '$/stores/actions';
+
+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();
+  });
+});
-- 
cgit