diff options
| author | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2022-05-01 01:02:58 +0200 |
|---|---|---|
| committer | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2022-05-01 01:02:58 +0200 |
| commit | cac85db02ff00732cf75d473dc3411332f33d845 (patch) | |
| tree | 5f244968a905eb3888434b3f60cbf05d2b652207 /src/lib/components | |
| parent | a7cf03c192470cbab13edeb1aec99e0c66dede10 (diff) | |
Apply formatting
Diffstat (limited to 'src/lib/components')
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(); + }); }); |