From 47b0bfe47e6f13d549897149b0abc4a72ba8ac88 Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Tue, 20 Apr 2021 23:38:02 +0200
Subject: Add tests to second batch of components

- Error Block
- Forum List
- Language Selector
- Post
- Tag
- Topic Summary
---
 src/components/error_block/error_block.test.js     |   2 +-
 src/components/forum_list/forum_list.svelte        |   6 +-
 src/components/forum_list/forum_list.test.js       |   2 +-
 .../language_selector/language_selector.svelte     |   1 -
 .../language_selector/language_selector.test.js    |  44 ++++++
 src/components/post/post.svelte                    |   2 +
 src/components/post/post.test.js                   |  22 ++-
 src/components/tag/tag.test.js                     |  50 +++++++
 src/components/topic/topic.svelte                  |  30 ++--
 src/components/topic/topic.test.js                 | 156 +++++++++++++++++++++
 src/components/topic_summary/topic_summary.svelte  |  16 +--
 src/components/topic_summary/topic_summary.test.js |  43 ++++++
 12 files changed, 343 insertions(+), 31 deletions(-)
 create mode 100644 src/components/language_selector/language_selector.test.js
 create mode 100644 src/components/tag/tag.test.js
 create mode 100644 src/components/topic/topic.test.js
 create mode 100644 src/components/topic_summary/topic_summary.test.js

(limited to 'src/components')

diff --git a/src/components/error_block/error_block.test.js b/src/components/error_block/error_block.test.js
index bd2fe7a..1d7a7ac 100644
--- a/src/components/error_block/error_block.test.js
+++ b/src/components/error_block/error_block.test.js
@@ -5,7 +5,7 @@ import '$/config/i18n';
 
 import ErrorBlock from './error_block.svelte';
 
-describe('Glyph component', () => {
+describe('Error Block component', () => {
 
   test('Should act as an image', () => {
 
diff --git a/src/components/forum_list/forum_list.svelte b/src/components/forum_list/forum_list.svelte
index a33358c..aeb389e 100644
--- a/src/components/forum_list/forum_list.svelte
+++ b/src/components/forum_list/forum_list.svelte
@@ -1,8 +1,8 @@
 <script>
-import { _ } from 'svelte-i18n';
-export let forums;
+  import { _ } from 'svelte-i18n';
+  export let forums;
 
-$: sortedForums = forums.sort((a, b) => a.position - b.position);
+  $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
 </script>
 
 <ul>
diff --git a/src/components/forum_list/forum_list.test.js b/src/components/forum_list/forum_list.test.js
index 3066e8a..a165f28 100644
--- a/src/components/forum_list/forum_list.test.js
+++ b/src/components/forum_list/forum_list.test.js
@@ -11,7 +11,7 @@ const internals = {
   results: null
 };
 
-describe('Glyph component', () => {
+describe('Forum List component', () => {
 
   beforeAll(() => {
 
diff --git a/src/components/language_selector/language_selector.svelte b/src/components/language_selector/language_selector.svelte
index 3338810..3198f56 100644
--- a/src/components/language_selector/language_selector.svelte
+++ b/src/components/language_selector/language_selector.svelte
@@ -12,7 +12,6 @@
 	let selected = $locale;
 
 	$: {
-	  console.log(`the current locale is ${selected}`);
 	  locale.set(selected);
 	}
 </script>
diff --git a/src/components/language_selector/language_selector.test.js b/src/components/language_selector/language_selector.test.js
new file mode 100644
index 0000000..baf11bb
--- /dev/null
+++ b/src/components/language_selector/language_selector.test.js
@@ -0,0 +1,44 @@
+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 '$/config/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-US');
+    })();
+    const spanish = internals.results.getByText('Español');
+    userEvent.selectOptions(spanish.closest('select'), spanish);
+    await act();
+    locale.subscribe((localeValue) => {
+
+      expect(localeValue).toBe('es');
+    })();
+  });
+});
+
diff --git a/src/components/post/post.svelte b/src/components/post/post.svelte
index fd9e580..66901af 100644
--- a/src/components/post/post.svelte
+++ b/src/components/post/post.svelte
@@ -23,9 +23,11 @@
 			{timestampToISO(post.created_at)}
 		</a>
 	</time>
+  {#if post.topic}
   <span>
     ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
   </span>
+  {/if}
 </aside>
 <article
 	class="e-content"
diff --git a/src/components/post/post.test.js b/src/components/post/post.test.js
index 3a76482..9ab4848 100644
--- a/src/components/post/post.test.js
+++ b/src/components/post/post.test.js
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom/extend-expect';
 
-import { render } from '@testing-library/svelte';
+import { cleanup, render } from '@testing-library/svelte';
 import '$/config/i18n';
 
 import Post from './post.svelte';
@@ -19,6 +19,15 @@ const internals = {
       title: 'Parent topic, yes'
     }
   },
+  postWithoutTopic: {
+    id: '9e52e38e-9007-4a20-bbf1-cea4e2f950f3',
+    text: 'This is a post without a topic',
+    created_at: Date.UTC(2022, 8, 21, 4, 3, 1, 340).valueOf(),
+    author: {
+      handle: 'my_normal_user',
+      id: '121f8f97-de02-4102-b25d-f34fd619009b'
+    }
+  },
 
   results: null
 };
@@ -82,4 +91,15 @@ describe('Post component', () => {
     expect(internals.results.getByText('Parent topic, yes').closest('a'))
       .toHaveAttribute('href', '/t/35d3c3eb-e486-42ef-994c-d8ab1f1e167a');
   });
+
+  test('Parent topic title should have a permalink to topic', () => {
+
+    cleanup();
+    internals.results = render(Post, { props: {
+      post: internals.postWithoutTopic
+    } });
+
+    expect(internals.results.queryByText('Parent topic, yes'))
+      .toBe(null);
+  });
 });
diff --git a/src/components/tag/tag.test.js b/src/components/tag/tag.test.js
new file mode 100644
index 0000000..3f19598
--- /dev/null
+++ b/src/components/tag/tag.test.js
@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import { render } from '@testing-library/svelte';
+import '$/config/i18n';
+
+import Tag from './tag.svelte';
+
+const internals = {
+  results: null
+};
+
+describe('Tag component', () => {
+
+  beforeEach(() => {
+
+    internals.results = render(Tag, { props: {
+      tag: {
+        id: 'avocado',
+        topics: [
+          {
+            id: 'eb751e7a-5777-46c3-b81b-cc66546d5157',
+            title: 'A single topic',
+            ttl: 160 * 1000,
+            updated_at: Date.now()
+          },
+          {
+            id: 'b4a5613c-237b-4147-a867-9c105d51e365',
+            title: 'And its companion',
+            ttl: 160 * 1000,
+            updated_at: Date.now()
+          }
+        ]
+      }
+    } });
+  });
+
+  test('It should display the tag title', () => {
+
+    expect(internals.results.getByText('Tag: avocado'))
+      .toBeVisible();
+  });
+
+  test('It should display the topics', () => {
+
+    expect(internals.results.getByText('A single topic'))
+      .toBeVisible();
+    expect(internals.results.getByText('And its companion'))
+      .toBeVisible();
+  });
+});
diff --git a/src/components/topic/topic.svelte b/src/components/topic/topic.svelte
index 181b429..0b73d44 100644
--- a/src/components/topic/topic.svelte
+++ b/src/components/topic/topic.svelte
@@ -13,28 +13,28 @@
 	<h1 class="p-name">{topic.title}</h1>
 	<aside class="topic-meta" title={$_('topic.metadata_title')}>
 		{#if topic.forum}
-			<span class="topic-location"
-				>{$_('topic.category_location')}
-				<a href="/f/{topic.forum.id}" class="p-category"
-					>{topic.forum.glyph} {$_(topic.forum.label)}</a
-				>.</span
-			>
+			<span class="topic-location">
+        {$_('topic.category_location')}
+				<a href="/f/{topic.forum.id}" class="p-category">
+          {topic.forum.glyph} {$_(topic.forum.label)}
+        </a>.
+      </span>
 		{/if}
-		<span class="topic-ttl"
-			><a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}"
-				>({$_('topic.remaining_time', {
+		<span class="topic-ttl">
+      <a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
+        ({$_('topic.remaining_time', {
 					values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
-				})})</a
-			>.</span
-		>
+        })})
+      </a>.
+    </span>
 	</aside>
 	{#if topic.tags.length > 0}
 		<aside class="topic-tags" title={$_('topic.tags_title')}>
 			{$_('topic.tags_location')}
 			{#each topic.tags as tag}
-				<a href="/g/{tag.id}" class="p-category"
-					>{tag.id}<span class="tag-weight">({tag.weight})</span></a
-				>{' '}
+				<a href="/g/{tag.id}" class="p-category">
+          {tag.id}<span class="tag-weight">({tag.weight})</span>
+        </a>{' '}
 			{/each}
 		</aside>
 	{/if}
diff --git a/src/components/topic/topic.test.js b/src/components/topic/topic.test.js
new file mode 100644
index 0000000..83eeba3
--- /dev/null
+++ b/src/components/topic/topic.test.js
@@ -0,0 +1,156 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import { addMessages } from 'svelte-i18n';
+
+import { cleanup, render } from '@testing-library/svelte';
+import '$/config/i18n';
+
+import Topic from './topic.svelte';
+
+const internals = {
+  results: null,
+  basicTopic: {
+    id: 'b1a4f8d1-4d16-4872-b391-fda6a0e9012d',
+    title: 'I sure am a test topic',
+    ttl: 160 * 1000,
+    updated_at: Date.now(),
+    forum: {
+      id: 'diversion',
+      glyph: '⏃',
+      label: 'test_forums.diversion'
+    },
+    tags: [
+      {
+        id: 'fish',
+        weight: 40
+      },
+      {
+        id: 'statue',
+        weight: 5
+      }
+    ],
+    posts: [
+      {
+        id: '413a74db-9473-4bac-8698-da9452c05854',
+        text: 'This is the first post',
+        created_at: Date.UTC(1999, 7, 1, 8, 8, 2, 111).valueOf(),
+        author: {
+          handle: 'past_user',
+          id: 'c76d3e51-76ac-4e84-a1b2-2eee9abd68b3'
+        }
+      },
+      {
+        id: '821ff177-5250-406f-9431-1a8097b35430',
+        text: 'This response came later',
+        created_at: Date.UTC(2038, 1, 2, 3, 4, 6, 789).valueOf(),
+        author: {
+          handle: 'future_user',
+          id: 'cb9307cb-77e9-4c55-bbe7-dbbf88737358'
+        }
+      }
+    ]
+  },
+  topicWithoutForum: {
+    id: '9715e9ee-0d63-4b50-b613-826ef2791728',
+    title: 'This topic, no forums',
+    ttl: 160 * 1000,
+    updated_at: Date.now(),
+    tags: [
+      {
+        id: 'cauliflower',
+        weight: 33
+      }
+    ],
+    posts: []
+  }
+};
+
+describe('Topic component', () => {
+
+  beforeAll(() => {
+
+    addMessages('en', {
+      'test_forums.diversion': 'Diversion'
+    });
+  });
+
+  beforeEach(() => {
+
+    internals.results = render(Topic, { props: {
+      topic: internals.basicTopic
+    } });
+  });
+
+  test('Should show the topic title', () => {
+
+    expect(internals.results.getByText('I sure am a test topic'))
+      .toBeVisible();
+  });
+  test('Should display remaining time in readable format', () => {
+
+    expect(internals.results.getByText(/2 minutes remaining/))
+      .toBeVisible();
+  });
+  test('Remaining time should be a permalink to the topic', () => {
+
+    expect(internals.results.getByText(/2 minutes remaining/).closest('a'))
+      .toHaveAttribute('href', '/t/b1a4f8d1-4d16-4872-b391-fda6a0e9012d');
+  });
+
+  test('Should show text for all posts', () => {
+
+    expect(internals.results.getByText('This is the first post'))
+      .toBeVisible();
+    expect(internals.results.getByText('This response came later'))
+      .toBeVisible();
+  });
+
+  describe('Forum link', () => {
+
+    test('Should show forum if the post has one', () => {
+
+      expect(internals.results.getByText(/^\s*⏃\s*Diversion\s*$/))
+        .toBeVisible();
+    });
+
+    test('Forum text should be a permalink to the forum', () => {
+
+      expect(internals.results.getByText(/^\s*⏃\s*Diversion\s*$/).closest('a'))
+        .toHaveAttribute('href', '/f/diversion');
+    });
+
+    test('Should not show forum if the post doesn\'t have one', () => {
+
+      cleanup();
+      internals.results = render(Topic, { props: {
+        topic: internals.topicWithoutForum
+      } });
+
+      expect(internals.results.queryByText(/^\s*⏃\s*Diversion\s*$/))
+        .toBe(null);
+    });
+  });
+
+  describe('Tag listing', () => {
+
+    test('Should show topic tags', () => {
+
+      expect(internals.results.getByText('fish'))
+        .toBeVisible();
+      expect(internals.results.getByText('fish'))
+        .toHaveTextContent('fish(40)');
+      expect(internals.results.getByText('statue'))
+        .toBeVisible();
+      expect(internals.results.getByText('statue'))
+        .toHaveTextContent('statue(5)');
+    });
+
+    test('Tag text should be a permalink to the tag', () => {
+
+      expect(internals.results.getByText('fish').closest('a'))
+        .toHaveAttribute('href', '/g/fish');
+      expect(internals.results.getByText('statue').closest('a'))
+        .toHaveAttribute('href', '/g/statue');
+    });
+  });
+});
diff --git a/src/components/topic_summary/topic_summary.svelte b/src/components/topic_summary/topic_summary.svelte
index 5f2678b..86e51d1 100644
--- a/src/components/topic_summary/topic_summary.svelte
+++ b/src/components/topic_summary/topic_summary.svelte
@@ -9,16 +9,14 @@
 </script>
 
 <li class="h-entry" title={$_('topic.title')}>
-	<span class="p-name"
-		><a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}"
-			>{topic.title}</a
-		></span
-	>
-	<span class="topic-ttl"
-		>({$_('topic.remaining_time', {
+  <span class="p-name">
+    <a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
+      {topic.title}
+  </a></span>
+    <span class="topic-ttl">({$_('topic.remaining_time', {
 			values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
-		})})</span
-	>
+      })})
+    </span>
 </li>
 
 <style>
diff --git a/src/components/topic_summary/topic_summary.test.js b/src/components/topic_summary/topic_summary.test.js
new file mode 100644
index 0000000..9122730
--- /dev/null
+++ b/src/components/topic_summary/topic_summary.test.js
@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import { render } from '@testing-library/svelte';
+import '$/config/i18n';
+
+import TopicSummary from './topic_summary.svelte';
+
+const internals = {
+  results: null
+};
+
+describe('Topic Summary component', () => {
+
+  beforeEach(() => {
+
+    internals.results = render(TopicSummary, { props: {
+      topic: {
+        id: 'ea2431c8-5c1c-4ed0-907a-45e012696ab8',
+        title: 'I sure am a test topic',
+        ttl: 160 * 1000,
+        updated_at: Date.now()
+      }
+    } });
+  });
+
+  test('It should display the title', () => {
+
+    expect(internals.results.getByText('I sure am a test topic'))
+      .toBeVisible();
+  });
+
+  test('Topic title should be a permalink', () => {
+
+    expect(internals.results.getByText('I sure am a test topic').closest('a'))
+      .toHaveAttribute('href', '/t/ea2431c8-5c1c-4ed0-907a-45e012696ab8');
+  });
+
+  test('It should display remaining time in readable format', () => {
+
+    expect(internals.results.getByText(/2 minutes remaining/))
+      .toBeVisible();
+  });
+});
-- 
cgit