aboutsummaryrefslogtreecommitdiff
path: root/src/lib/components
diff options
context:
space:
mode:
authorRuben Beltran del Rio <ruben@unlimited.pizza>2022-05-01 01:02:58 +0200
committerRuben Beltran del Rio <ruben@unlimited.pizza>2022-05-01 01:02:58 +0200
commitcac85db02ff00732cf75d473dc3411332f33d845 (patch)
tree5f244968a905eb3888434b3f60cbf05d2b652207 /src/lib/components
parenta7cf03c192470cbab13edeb1aec99e0c66dede10 (diff)
Apply formatting
Diffstat (limited to 'src/lib/components')
-rw-r--r--src/lib/components/actions/topic.svelte8
-rw-r--r--src/lib/components/actions/topic.test.ts28
-rw-r--r--src/lib/components/error_block/error_block.test.ts28
-rw-r--r--src/lib/components/forum/forum.test.ts99
-rw-r--r--src/lib/components/forum_list/forum_list.svelte22
-rw-r--r--src/lib/components/forum_list/forum_list.test.ts136
-rw-r--r--src/lib/components/glyph/glyph.test.ts32
-rw-r--r--src/lib/components/header/header.svelte2
-rw-r--r--src/lib/components/header/header.test.ts23
-rw-r--r--src/lib/components/language_selector/language_selector.svelte14
-rw-r--r--src/lib/components/language_selector/language_selector.test.ts47
-rw-r--r--src/lib/components/post/post.svelte10
-rw-r--r--src/lib/components/post/post.test.ts185
-rw-r--r--src/lib/components/tag/tag.test.ts84
-rw-r--r--src/lib/components/topic/topic.svelte23
-rw-r--r--src/lib/components/topic/topic.test.ts262
-rw-r--r--src/lib/components/topic_summary/topic_summary.svelte16
-rw-r--r--src/lib/components/topic_summary/topic_summary.test.ts53
18 files changed, 506 insertions, 566 deletions
diff --git a/src/lib/components/actions/topic.svelte b/src/lib/components/actions/topic.svelte
index 1311d06..a3cba3b 100644
--- a/src/lib/components/actions/topic.svelte
+++ b/src/lib/components/actions/topic.svelte
@@ -1,14 +1,14 @@
<script lang="ts">
- import type { TopicAction } from '$lib/stores/action';
+ import type { TopicAction } from '$lib/stores/action';
export let actions: TopicAction;
import { _ } from 'svelte-i18n';
</script>
<li>
- <a href="/reply/{actions.id}" title={$_('header.action.reply.title')}>
- {@html $_('header.action.reply.display')}
- </a>
+ <a href="/reply/{actions.id}" title={$_('header.action.reply.title')}>
+ {@html $_('header.action.reply.display')}
+ </a>
</li>
<style>
diff --git a/src/lib/components/actions/topic.test.ts b/src/lib/components/actions/topic.test.ts
index 0037a7f..9a17d38 100644
--- a/src/lib/components/actions/topic.test.ts
+++ b/src/lib/components/actions/topic.test.ts
@@ -9,21 +9,19 @@ import '$lib/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'
+ }
+ }
+ });
- 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');
- });
+ expect(results.getByTitle('Reply').closest('a')).toHaveAttribute(
+ 'href',
+ '/reply/8ebaa211-fd9b-423a-8b4f-b57622007fde'
+ );
+ });
});
diff --git a/src/lib/components/error_block/error_block.test.ts b/src/lib/components/error_block/error_block.test.ts
index d2ac458..401874f 100644
--- a/src/lib/components/error_block/error_block.test.ts
+++ b/src/lib/components/error_block/error_block.test.ts
@@ -10,23 +10,19 @@ import '$lib/i18n';
import ErrorBlock from './error_block.svelte';
describe('Error Block component', () => {
+ test('Should display error message sent', () => {
+ const results = render(ErrorBlock, {
+ props: {
+ message: 'An error has, sadly, destroyed everything.'
+ }
+ });
- test('Should display error message sent', () => {
+ expect(results.getByText('An error has, sadly, destroyed everything.')).toBeVisible();
+ });
- const results = render(ErrorBlock, { props: {
- message: 'An error has, sadly, destroyed everything.'
- } });
+ test('Should display default error message', () => {
+ const results = render(ErrorBlock);
- expect(results.getByText('An error has, sadly, destroyed everything.'))
- .toBeVisible();
- });
-
- test('Should display default error message', () => {
-
- const results = render(ErrorBlock);
-
- expect(results.getByText('Unknown error has occurred. Panic!'))
- .toBeVisible();
- });
+ expect(results.getByText('Unknown error has occurred. Panic!')).toBeVisible();
+ });
});
-
diff --git a/src/lib/components/forum/forum.test.ts b/src/lib/components/forum/forum.test.ts
index b3ce167..61a70e1 100644
--- a/src/lib/components/forum/forum.test.ts
+++ b/src/lib/components/forum/forum.test.ts
@@ -12,62 +12,59 @@ import '$lib/i18n';
import Forum from './forum.svelte';
const internals = {
- results: null
+ results: null
};
describe('Forum component', () => {
+ beforeAll(() => {
+ addMessages('en', {
+ 'test_forums.oleo': 'Oleo'
+ });
+ });
- beforeAll(() => {
+ beforeEach(() => {
+ internals.results = render(Forum, {
+ props: {
+ forum: {
+ id: 'oleo',
+ glyph: '☽',
+ label: 'test_forums.oleo',
+ topics: [
+ {
+ id: '0575d375-5bea-44df-a597-bee3adda624d',
+ title: 'Very forumy topic',
+ ttl: 160 * 1000,
+ updated_at: Date.now()
+ },
+ {
+ id: 'aeeb56e4-751d-4400-8aa7-d0f3a20d4e25',
+ title: 'Only mildly forum-like',
+ ttl: 160 * 1000,
+ updated_at: Date.now()
+ }
+ ]
+ }
+ }
+ });
+ });
- addMessages('en', {
- 'test_forums.oleo': 'Oleo'
- });
- });
+ test('It should display the forum glyph and label', () => {
+ expect(internals.results.getByText(/^\s*☽\s*Oleo\s*$/)).toBeVisible();
+ });
- beforeEach(() => {
+ test('It should display the topics', () => {
+ expect(internals.results.getByText('Very forumy topic')).toBeVisible();
+ expect(internals.results.getByText('Only mildly forum-like')).toBeVisible();
+ });
- internals.results = render(Forum, { props: {
- forum: {
- id: 'oleo',
- glyph: '☽',
- label: 'test_forums.oleo',
- topics: [
- {
- id: '0575d375-5bea-44df-a597-bee3adda624d',
- title: 'Very forumy topic',
- ttl: 160 * 1000,
- updated_at: Date.now()
- },
- {
- id: 'aeeb56e4-751d-4400-8aa7-d0f3a20d4e25',
- title: 'Only mildly forum-like',
- ttl: 160 * 1000,
- updated_at: Date.now()
- }
- ]
- }
- } });
- });
-
- test('It should display the forum glyph and label', () => {
-
- expect(internals.results.getByText(/^\s*☽\s*Oleo\s*$/))
- .toBeVisible();
- });
-
- test('It should display the topics', () => {
-
- expect(internals.results.getByText('Very forumy topic'))
- .toBeVisible();
- expect(internals.results.getByText('Only mildly forum-like'))
- .toBeVisible();
- });
-
- test('It should link to the topics', () => {
-
- expect(internals.results.getByText('Very forumy topic').closest('a'))
- .toHaveAttribute('href', '/t/0575d375-5bea-44df-a597-bee3adda624d');
- expect(internals.results.getByText('Only mildly forum-like').closest('a'))
- .toHaveAttribute('href', '/t/aeeb56e4-751d-4400-8aa7-d0f3a20d4e25');
- });
+ test('It should link to the topics', () => {
+ expect(internals.results.getByText('Very forumy topic').closest('a')).toHaveAttribute(
+ 'href',
+ '/t/0575d375-5bea-44df-a597-bee3adda624d'
+ );
+ expect(internals.results.getByText('Only mildly forum-like').closest('a')).toHaveAttribute(
+ 'href',
+ '/t/aeeb56e4-751d-4400-8aa7-d0f3a20d4e25'
+ );
+ });
});
diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte
index 3529de8..81a5e4f 100644
--- a/src/lib/components/forum_list/forum_list.svelte
+++ b/src/lib/components/forum_list/forum_list.svelte
@@ -1,19 +1,19 @@
<script lang="ts">
- import { _ } from 'svelte-i18n';
- export let forums;
+ import { _ } from 'svelte-i18n';
+ export let forums;
- $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
+ $: 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}
+ {#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>
diff --git a/src/lib/components/forum_list/forum_list.test.ts b/src/lib/components/forum_list/forum_list.test.ts
index be7d449..1670b5c 100644
--- a/src/lib/components/forum_list/forum_list.test.ts
+++ b/src/lib/components/forum_list/forum_list.test.ts
@@ -12,83 +12,79 @@ import { addMessages } from 'svelte-i18n';
import ForumList from './forum_list.svelte';
const internals = {
- results: null
+ 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...'
+ });
+ });
- beforeAll(() => {
+ 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
+ }
+ ]
+ }
+ });
+ });
- addMessages('en', {
- 'test_forums.yes': 'Absolutely yes',
- 'test_forums.no': 'No, not at all',
- 'test_forums.maybe': 'OK, maybe...'
- });
- });
+ test('It should display each forum according to their position', () => {
+ expect(internals.results.container).toHaveTextContent(/^◯.+⏀.+☆.+$/);
+ });
- beforeEach(() => {
+ 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();
+ });
- 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 forum glyphs', () => {
+ expect(internals.results.getByText('☆')).toBeVisible();
+ expect(internals.results.getByText('◯')).toBeVisible();
+ expect(internals.results.getByText('⏀')).toBeVisible();
+ });
- test('It should display each forum according to their position', () => {
+ 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'
+ );
+ });
- 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');
- });
+ 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');
+ });
});
diff --git a/src/lib/components/glyph/glyph.test.ts b/src/lib/components/glyph/glyph.test.ts
index 778353f..a4a7470 100644
--- a/src/lib/components/glyph/glyph.test.ts
+++ b/src/lib/components/glyph/glyph.test.ts
@@ -10,27 +10,23 @@ import '$lib/i18n';
import Glyph from './glyph.svelte';
const internals = {
- results: null
+ results: null
};
describe('Glyph component', () => {
+ beforeEach(() => {
+ internals.results = render(Glyph, {
+ props: {
+ uuid: '9fb14ebc-bc64-400b-915f-d429ec44b8fe'
+ }
+ });
+ });
- beforeEach(() => {
+ test('Should act as an image', () => {
+ expect(internals.results.getByRole('img')).toBeVisible();
+ });
- internals.results = render(Glyph, { props: {
- uuid: '9fb14ebc-bc64-400b-915f-d429ec44b8fe'
- } });
- });
-
- test('Should act as an image', () => {
-
- expect(internals.results.getByRole('img'))
- .toBeVisible();
- });
-
- test('Should render 4 glyphs', () => {
-
- expect(internals.results.getByRole('img'))
- .toHaveTextContent(/^. . . .$/);
- });
+ test('Should render 4 glyphs', () => {
+ expect(internals.results.getByRole('img')).toHaveTextContent(/^. . . .$/);
+ });
});
diff --git a/src/lib/components/header/header.svelte b/src/lib/components/header/header.svelte
index e6c9348..51df1c2 100644
--- a/src/lib/components/header/header.svelte
+++ b/src/lib/components/header/header.svelte
@@ -20,7 +20,7 @@
>
</li>
{#if $topicActions}
- <TopicActions actions={$topicActions} />
+ <TopicActions actions={$topicActions} />
{/if}
<li>
<a href="/search" title={$_('header.action.search.title')}
diff --git a/src/lib/components/header/header.test.ts b/src/lib/components/header/header.test.ts
index 4107b2d..d7a7801 100644
--- a/src/lib/components/header/header.test.ts
+++ b/src/lib/components/header/header.test.ts
@@ -13,21 +13,16 @@ 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);
- test('Should not display topic if action is not set', () => {
+ expect(results.queryByTitle('Reply')).toBe(null);
+ });
- const results = render(Header);
+ test('Should display topic if action is set', () => {
+ enableTopicActions('d138d6d8-e669-42e7-995d-20a7fcc176f5');
+ 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();
- });
+ expect(results.getByTitle('Reply')).toBeVisible();
+ });
});
diff --git a/src/lib/components/language_selector/language_selector.svelte b/src/lib/components/language_selector/language_selector.svelte
index 64a4ef9..4e245f8 100644
--- a/src/lib/components/language_selector/language_selector.svelte
+++ b/src/lib/components/language_selector/language_selector.svelte
@@ -3,16 +3,16 @@
import { getLangNameFromCode } from 'language-name-map';
$: namedLocales = $locales
- .map((code) => ({
- code,
- ...getLangNameFromCode(code)
- }))
- .sort((a, b) => a.native - b.native);
+ .map((code) => ({
+ code,
+ ...getLangNameFromCode(code)
+ }))
+ .sort((a, b) => a.native - b.native);
- let selected = $locale
+ let selected = $locale;
$: {
- locale.set(selected);
+ locale.set(selected);
}
</script>
diff --git a/src/lib/components/language_selector/language_selector.test.ts b/src/lib/components/language_selector/language_selector.test.ts
index 74156bc..673e1e6 100644
--- a/src/lib/components/language_selector/language_selector.test.ts
+++ b/src/lib/components/language_selector/language_selector.test.ts
@@ -12,37 +12,28 @@ import '$lib/i18n';
import LanguageSelector from './language_selector.svelte';
const internals = {
- results: null
+ results: null
};
describe('Language Selector component', () => {
+ beforeEach(() => {
+ internals.results = render(LanguageSelector);
+ });
- beforeEach(() => {
+ test('Should display languages in their own language', () => {
+ expect(internals.results.getByText('English')).toBeVisible();
+ expect(internals.results.getByText('Español')).toBeVisible();
+ });
- 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');
- })();
- const spanish = internals.results.getByText('Español');
- await userEvent.selectOptions(spanish.closest('select'), spanish);
- await act();
- locale.subscribe((localeValue) => {
-
- expect(localeValue).toBe('es');
- })();
- });
+ test('Should change locale when a language is selected', async () => {
+ locale.subscribe((localeValue) => {
+ expect(localeValue).toBe('en');
+ })();
+ const spanish = internals.results.getByText('Español');
+ await userEvent.selectOptions(spanish.closest('select'), spanish);
+ await act();
+ locale.subscribe((localeValue) => {
+ expect(localeValue).toBe('es');
+ })();
+ });
});
-
diff --git a/src/lib/components/post/post.svelte b/src/lib/components/post/post.svelte
index 4e6c28f..d909be1 100644
--- a/src/lib/components/post/post.svelte
+++ b/src/lib/components/post/post.svelte
@@ -23,11 +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}
+ {#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/lib/components/post/post.test.ts b/src/lib/components/post/post.test.ts
index d43583e..4351f3f 100644
--- a/src/lib/components/post/post.test.ts
+++ b/src/lib/components/post/post.test.ts
@@ -10,119 +10,110 @@ import '$lib/i18n';
import Post from './post.svelte';
const internals = {
- basicPost: {
- id: 'e5a19d53-4c9a-4be8-afa5-00942ea3afa4',
- text: 'This is an example post qwerty',
- created_at: Date.UTC(2021, 3, 19, 6, 6, 6, 666).valueOf(),
- author: {
- handle: 'very_cool_user',
- id: 'b01bdb48-4b5e-46a4-97f3-6db789bcd33b'
- },
- topic: {
- id: '35d3c3eb-e486-42ef-994c-d8ab1f1e167a',
- 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'
- }
- },
+ basicPost: {
+ id: 'e5a19d53-4c9a-4be8-afa5-00942ea3afa4',
+ text: 'This is an example post qwerty',
+ created_at: Date.UTC(2021, 3, 19, 6, 6, 6, 666).valueOf(),
+ author: {
+ handle: 'very_cool_user',
+ id: 'b01bdb48-4b5e-46a4-97f3-6db789bcd33b'
+ },
+ topic: {
+ id: '35d3c3eb-e486-42ef-994c-d8ab1f1e167a',
+ 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
+ results: null
};
describe('Post component', () => {
+ beforeEach(() => {
+ internals.results = render(Post, {
+ props: {
+ post: internals.basicPost
+ }
+ });
+ });
- beforeEach(() => {
+ test('Should display the text of the post', () => {
+ expect(internals.results.getByText('This is an example post qwerty')).toBeVisible();
+ });
- internals.results = render(Post, { props: {
- post: internals.basicPost
- } });
- });
+ test('Should display date of the post', () => {
+ expect(internals.results.getByText('2021-04-19T06:06:06.666Z')).toBeVisible();
+ });
- test('Should display the text of the post', () => {
+ test('Date of post should be a permalink to the post', () => {
+ expect(internals.results.getByText('2021-04-19T06:06:06.666Z').closest('a')).toHaveAttribute(
+ 'href',
+ '/p/e5a19d53-4c9a-4be8-afa5-00942ea3afa4'
+ );
+ });
- expect(internals.results.getByText('This is an example post qwerty')).toBeVisible();
- });
+ test('Should display the glyph of the post author', () => {
+ const glyphicon = internals.results.getByRole('img');
- test('Should display date of the post', () => {
+ expect(glyphicon).toBeVisible();
+ expect(glyphicon).toHaveTextContent(/^. . . .$/);
+ });
- expect(internals.results.getByText('2021-04-19T06:06:06.666Z'))
- .toBeVisible();
- });
+ test('Should display author handle', () => {
+ expect(internals.results.getByText('very_cool_user')).toBeVisible();
+ });
- test('Date of post should be a permalink to the post', () => {
+ test('Author handle should have a permalink to topic', () => {
+ expect(internals.results.getByText('very_cool_user').closest('a')).toHaveAttribute(
+ 'href',
+ '/a/very_cool_user'
+ );
+ });
- expect(internals.results.getByText('2021-04-19T06:06:06.666Z').closest('a'))
- .toHaveAttribute('href', '/p/e5a19d53-4c9a-4be8-afa5-00942ea3afa4');
- });
+ test('Should display parent topic title', () => {
+ expect(internals.results.getByText('Parent topic, yes')).toBeVisible();
+ });
- test('Should display the glyph of the post author', () => {
+ test('Parent topic title should have a permalink to topic', () => {
+ expect(internals.results.getByText('Parent topic, yes').closest('a')).toHaveAttribute(
+ 'href',
+ '/t/35d3c3eb-e486-42ef-994c-d8ab1f1e167a'
+ );
+ });
- const glyphicon = internals.results.getByRole('img');
+ test('Parent topic title should have a permalink to topic', () => {
+ cleanup();
+ internals.results = render(Post, {
+ props: {
+ post: internals.postWithoutTopic
+ }
+ });
- expect(glyphicon)
- .toBeVisible();
- expect(glyphicon)
- .toHaveTextContent(/^. . . .$/);
- });
+ expect(internals.results.queryByText('Parent topic, yes')).toBe(null);
+ });
- test('Should display author handle', () => {
+ test('It should default to 1/1 when no index or count is passed', () => {
+ expect(internals.results.getByTitle('Post 1 of 1 by very_cool_user')).toBeVisible();
+ });
- expect(internals.results.getByText('very_cool_user'))
- .toBeVisible();
- });
+ test('Parent topic title should have a permalink to topic', () => {
+ cleanup();
+ internals.results = render(Post, {
+ props: {
+ index: 2,
+ count: 5,
+ post: internals.postWithoutTopic
+ }
+ });
- test('Author handle should have a permalink to topic', () => {
-
- expect(internals.results.getByText('very_cool_user').closest('a'))
- .toHaveAttribute('href', '/a/very_cool_user');
- });
-
- test('Should display parent topic title', () => {
-
- expect(internals.results.getByText('Parent topic, yes'))
- .toBeVisible();
- });
-
- test('Parent topic title should have a permalink to topic', () => {
-
- 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);
- });
-
- test('It should default to 1/1 when no index or count is passed', () => {
-
- expect(internals.results.getByTitle('Post 1 of 1 by very_cool_user'))
- .toBeVisible();
- });
-
- test('Parent topic title should have a permalink to topic', () => {
-
- cleanup();
- internals.results = render(Post, { props: {
- index: 2,
- count: 5,
- post: internals.postWithoutTopic
- } });
-
- expect(internals.results.getByTitle('Post 3 of 5 by my_normal_user'))
- .toBeVisible();
- });
+ expect(internals.results.getByTitle('Post 3 of 5 by my_normal_user')).toBeVisible();
+ });
});
diff --git a/src/lib/components/tag/tag.test.ts b/src/lib/components/tag/tag.test.ts
index 76304e6..9e4564c 100644
--- a/src/lib/components/tag/tag.test.ts
+++ b/src/lib/components/tag/tag.test.ts
@@ -10,53 +10,51 @@ import '$lib/i18n';
import Tag from './tag.svelte';
const internals = {
- results: null
+ 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()
+ }
+ ]
+ }
+ }
+ });
+ });
- beforeEach(() => {
+ test('It should display the tag title', () => {
+ expect(internals.results.getByText('Tag: avocado')).toBeVisible();
+ });
- 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 topics', () => {
+ expect(internals.results.getByText('A single topic')).toBeVisible();
+ expect(internals.results.getByText('And its companion')).toBeVisible();
+ });
- 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();
- });
-
- test('It should link to the topics', () => {
-
- expect(internals.results.getByText('A single topic').closest('a'))
- .toHaveAttribute('href', '/t/eb751e7a-5777-46c3-b81b-cc66546d5157');
- expect(internals.results.getByText('And its companion').closest('a'))
- .toHaveAttribute('href', '/t/b4a5613c-237b-4147-a867-9c105d51e365');
- });
+ test('It should link to the topics', () => {
+ expect(internals.results.getByText('A single topic').closest('a')).toHaveAttribute(
+ 'href',
+ '/t/eb751e7a-5777-46c3-b81b-cc66546d5157'
+ );
+ expect(internals.results.getByText('And its companion').closest('a')).toHaveAttribute(
+ 'href',
+ '/t/b4a5613c-237b-4147-a867-9c105d51e365'
+ );
+ });
});
diff --git a/src/lib/components/topic/topic.svelte b/src/lib/components/topic/topic.svelte
index 06f2aeb..5b5ed0b 100644
--- a/src/lib/components/topic/topic.svelte
+++ b/src/lib/components/topic/topic.svelte
@@ -14,27 +14,28 @@
<aside class="topic-meta" title={$_('topic.metadata_title')}>
{#if topic.forum}
<span class="topic-location">
- {$_('topic.category_location')}
+ {$_('topic.category_location')}
<a href="/f/{topic.forum.id}" class="p-category">
- {topic.forum.glyph} {$_(topic.forum.label)}
- </a>.
- </span>
+ {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', {
+ <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>{' '}
+ {tag.id}<span class="tag-weight">({tag.weight})</span>
+ </a>{' '}
{/each}
</aside>
{/if}
diff --git a/src/lib/components/topic/topic.test.ts b/src/lib/components/topic/topic.test.ts
index 985ca72..e4c3bad 100644
--- a/src/lib/components/topic/topic.test.ts
+++ b/src/lib/components/topic/topic.test.ts
@@ -12,157 +12,139 @@ import '$lib/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: []
- }
+ 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'
+ });
+ });
- beforeAll(() => {
+ beforeEach(() => {
+ internals.results = render(Topic, {
+ props: {
+ topic: internals.basicTopic
+ }
+ });
+ });
- addMessages('en', {
- 'test_forums.diversion': 'Diversion'
- });
- });
+ 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'
+ );
+ });
- beforeEach(() => {
+ 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();
+ });
- internals.results = render(Topic, { props: {
- topic: internals.basicTopic
- } });
- });
+ test('Should send index and count to posts', () => {
+ expect(internals.results.getByTitle('Post 1 of 2 by past_user')).toBeVisible();
+ expect(internals.results.getByTitle('Post 2 of 2 by future_user')).toBeVisible();
+ });
- test('Should show the topic title', () => {
+ describe('Forum link', () => {
+ test('Should show forum if the post has one', () => {
+ expect(internals.results.getByText(/^\s*⏃\s*Diversion\s*$/)).toBeVisible();
+ });
- expect(internals.results.getByText('I sure am a test topic'))
- .toBeVisible();
- });
- test('Should display remaining time in readable format', () => {
+ test('Forum text should be a permalink to the forum', () => {
+ expect(internals.results.getByText(/^\s*⏃\s*Diversion\s*$/).closest('a')).toHaveAttribute(
+ 'href',
+ '/f/diversion'
+ );
+ });
- expect(internals.results.getByText(/2 minutes remaining/))
- .toBeVisible();
- });
- test('Remaining time should be a permalink to the topic', () => {
+ test("Should not show forum if the post doesn't have one", () => {
+ cleanup();
+ internals.results = render(Topic, {
+ props: {
+ topic: internals.topicWithoutForum
+ }
+ });
- expect(internals.results.getByText(/2 minutes remaining/).closest('a'))
- .toHaveAttribute('href', '/t/b1a4f8d1-4d16-4872-b391-fda6a0e9012d');
- });
+ expect(internals.results.queryByText(/^\s*⏃\s*Diversion\s*$/)).toBe(null);
+ });
+ });
- test('Should show text for all posts', () => {
+ 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)');
+ });
- expect(internals.results.getByText('This is the first post'))
- .toBeVisible();
- expect(internals.results.getByText('This response came later'))
- .toBeVisible();
- });
-
- test('Should send index and count to posts', () => {
-
- expect(internals.results.getByTitle('Post 1 of 2 by past_user'))
- .toBeVisible();
- expect(internals.results.getByTitle('Post 2 of 2 by future_user'))
- .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');
- });
- });
+ 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/lib/components/topic_summary/topic_summary.svelte b/src/lib/components/topic_summary/topic_summary.svelte
index bfcf8ab..39dad08 100644
--- a/src/lib/components/topic_summary/topic_summary.svelte
+++ b/src/lib/components/topic_summary/topic_summary.svelte
@@ -9,14 +9,16 @@
</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/lib/components/topic_summary/topic_summary.test.ts b/src/lib/components/topic_summary/topic_summary.test.ts
index a4c46bf..f178c89 100644
--- a/src/lib/components/topic_summary/topic_summary.test.ts
+++ b/src/lib/components/topic_summary/topic_summary.test.ts
@@ -10,38 +10,35 @@ import '$lib/i18n';
import TopicSummary from './topic_summary.svelte';
const internals = {
- results: null
+ 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()
+ }
+ }
+ });
+ });
- beforeEach(() => {
+ test('It should display the title', () => {
+ expect(internals.results.getByText('I sure am a test topic')).toBeVisible();
+ });
- 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('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 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();
- });
+ test('It should display remaining time in readable format', () => {
+ expect(internals.results.getByText(/2 minutes remaining/)).toBeVisible();
+ });
});