Add tests for header

Also patches up the leaky abstraction on the actions

diff --git a/src/components/actions/topic.svelte b/src/components/actions/topic.svelte
new file mode 100644 (file)
index 0000000..e2f59c9
--- /dev/null
+++ b/src/components/actions/topic.svelte
@@ -0,0 +1,24 @@
+<script>
+       export let actions;
+
+       import { _ } from 'svelte-i18n';
+</script>
+
+<li>
+  <a href="/reply/{actions.id}" title={$_('header.action.reply.title')}>
+    {@html $_('header.action.reply.display')}
+  </a>
+</li>
+
+<style>
+       li {
+               display: inline;
+               margin: 5px;
+       }
+
+       a {
+               text-decoration: none;
+               line-height: 3em;
+               display: inline-block;
+       }
+</style>

diff --git a/src/components/actions/topic.test.js b/src/components/actions/topic.test.js
new file mode 100644 (file)
index 0000000..9d6ee93
--- /dev/null
+++ b/src/components/actions/topic.test.js
@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import { render } from '@testing-library/svelte';
+import '$/config/i18n';
+
+import Topic from './topic.svelte';
+
+const internals = {
+  results: null
+};
+
+describe('Topic Actions component', () => {
+
+  test('Should link to reply page', () => {
+
+    const results = render(Topic, { props: {
+      actions: {
+        id: '8ebaa211-fd9b-423a-8b4f-b57622007fde'
+      }
+    } });
+
+    expect(results.getByTitle('Reply').closest('a'))
+      .toHaveAttribute('href', '/reply/8ebaa211-fd9b-423a-8b4f-b57622007fde');
+  });
+});

diff --git a/src/components/header/header.svelte b/src/components/header/header.svelte
index f33e77bf445cdb38fb17176f3a259e8f6031088e..dcf95d53a42b43375e13fab48c0a44536b83bfc2 100644 (file)
--- 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';
 <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
 </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>
                                        >{$_('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>
                                >{@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>
                {/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>
                                >{@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>
                                >{@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 (file)
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();
+  });
+});

diff --git a/src/config/config.js b/src/config/config.js
index 0570e1cd312e85a22022daea96fc023a1a2ce694..36376700ccd7d8c448641c342192b5cd9ef8377f 100644 (file)
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -12,6 +12,4 @@ export const apollo = {
   version: packageVersion
 };
 
   version: packageVersion
 };
 

-export const socketServer = import.meta.env.FORUM_SOCKET_SERVER;
-

 export const version = packageVersion;
 export const version = packageVersion;

diff --git a/src/stores/actions.js b/src/stores/actions.js
index 3a6d13fbe0ddc8ce62352d21d6768a9c4855d49f..ae0190624c751017923a92d9c6ae37364173a28c 100644 (file)
--- a/src/stores/actions.js
+++ b/src/stores/actions.js
@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';

 
 /*
  * This is a store to set the actions in the top header.
 
 /*
  * This is a store to set the actions in the top header.


@@ -10,7 +10,9 @@ export const enableTopicActions = (id) => {
 
   actions.update((actionsValue) => {
 
 
   actions.update((actionsValue) => {
 

-    actionsValue.topic_id = id;
+    actionsValue.topic = {
+      id
+    };

     return actionsValue;
   });
 };
     return actionsValue;
   });
 };


@@ -19,7 +21,12 @@ export const disableTopicActions = () => {
 
   actions.update((actionsValue) => {
 
 
   actions.update((actionsValue) => {
 

-    delete actionsValue.id;
+    delete actionsValue.topic;

     return actionsValue;
   });
 };
     return actionsValue;
   });
 };

+
+export const topicActions = derived(
+  actions,
+  ($actions) => $actions.topic
+);