From a7cf03c192470cbab13edeb1aec99e0c66dede10 Mon Sep 17 00:00:00 2001 From: Ruben Beltran del Rio Date: Sun, 1 May 2022 00:56:06 +0200 Subject: Update / use typescript --- src/lib/components/actions/topic.svelte | 25 +++ src/lib/components/actions/topic.test.ts | 29 ++++ src/lib/components/author/author.svelte | 0 src/lib/components/error_block/error_block.svelte | 40 +++++ src/lib/components/error_block/error_block.test.ts | 32 ++++ src/lib/components/footer/footer.svelte | 30 ++++ src/lib/components/forum/forum.svelte | 13 ++ src/lib/components/forum/forum.test.ts | 73 +++++++++ src/lib/components/forum_list/forum_list.svelte | 42 ++++++ src/lib/components/forum_list/forum_list.test.ts | 94 ++++++++++++ src/lib/components/glyph/glyph.svelte | 41 +++++ src/lib/components/glyph/glyph.test.ts | 36 +++++ src/lib/components/header/header.svelte | 63 ++++++++ src/lib/components/header/header.test.ts | 33 ++++ src/lib/components/home/home.svelte | 6 + .../components/invalid_route/invalid_route.svelte | 6 + .../language_selector/language_selector.svelte | 26 ++++ .../language_selector/language_selector.test.ts | 48 ++++++ src/lib/components/loader/loader.svelte | 5 + src/lib/components/post/post.svelte | 50 ++++++ src/lib/components/post/post.test.ts | 128 ++++++++++++++++ src/lib/components/tag/tag.svelte | 13 ++ src/lib/components/tag/tag.test.ts | 62 ++++++++ src/lib/components/topic/topic.svelte | 44 ++++++ src/lib/components/topic/topic.test.ts | 168 +++++++++++++++++++++ .../components/topic_summary/topic_summary.svelte | 23 +++ .../components/topic_summary/topic_summary.test.ts | 47 ++++++ 27 files changed, 1177 insertions(+) create mode 100644 src/lib/components/actions/topic.svelte create mode 100644 src/lib/components/actions/topic.test.ts create mode 100644 src/lib/components/author/author.svelte create mode 100644 src/lib/components/error_block/error_block.svelte create mode 100644 src/lib/components/error_block/error_block.test.ts create mode 100644 src/lib/components/footer/footer.svelte create mode 100644 src/lib/components/forum/forum.svelte create mode 100644 src/lib/components/forum/forum.test.ts create mode 100644 src/lib/components/forum_list/forum_list.svelte create mode 100644 src/lib/components/forum_list/forum_list.test.ts create mode 100644 src/lib/components/glyph/glyph.svelte create mode 100644 src/lib/components/glyph/glyph.test.ts create mode 100644 src/lib/components/header/header.svelte create mode 100644 src/lib/components/header/header.test.ts create mode 100644 src/lib/components/home/home.svelte create mode 100644 src/lib/components/invalid_route/invalid_route.svelte create mode 100644 src/lib/components/language_selector/language_selector.svelte create mode 100644 src/lib/components/language_selector/language_selector.test.ts create mode 100644 src/lib/components/loader/loader.svelte create mode 100644 src/lib/components/post/post.svelte create mode 100644 src/lib/components/post/post.test.ts create mode 100644 src/lib/components/tag/tag.svelte create mode 100644 src/lib/components/tag/tag.test.ts create mode 100644 src/lib/components/topic/topic.svelte create mode 100644 src/lib/components/topic/topic.test.ts create mode 100644 src/lib/components/topic_summary/topic_summary.svelte create mode 100644 src/lib/components/topic_summary/topic_summary.test.ts (limited to 'src/lib/components') diff --git a/src/lib/components/actions/topic.svelte b/src/lib/components/actions/topic.svelte new file mode 100644 index 0000000..1311d06 --- /dev/null +++ b/src/lib/components/actions/topic.svelte @@ -0,0 +1,25 @@ + + +
  • + + {@html $_('header.action.reply.display')} + +
    • + + diff --git a/src/lib/components/actions/topic.test.ts b/src/lib/components/actions/topic.test.ts new file mode 100644 index 0000000..0037a7f --- /dev/null +++ b/src/lib/components/actions/topic.test.ts @@ -0,0 +1,29 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { render } from '@testing-library/svelte'; +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' + } + } }); + + expect(results.getByTitle('Reply').closest('a')) + .toHaveAttribute('href', '/reply/8ebaa211-fd9b-423a-8b4f-b57622007fde'); + }); +}); diff --git a/src/lib/components/author/author.svelte b/src/lib/components/author/author.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/error_block/error_block.svelte b/src/lib/components/error_block/error_block.svelte new file mode 100644 index 0000000..d25f507 --- /dev/null +++ b/src/lib/components/error_block/error_block.svelte @@ -0,0 +1,40 @@ + + +
    +

    {$_('error.generic.title')}

    +

    {message || $_('error.generic.message')}

    +
    + + diff --git a/src/lib/components/error_block/error_block.test.ts b/src/lib/components/error_block/error_block.test.ts new file mode 100644 index 0000000..d2ac458 --- /dev/null +++ b/src/lib/components/error_block/error_block.test.ts @@ -0,0 +1,32 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { render } from '@testing-library/svelte'; +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.' + } }); + + 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(); + }); +}); + diff --git a/src/lib/components/footer/footer.svelte b/src/lib/components/footer/footer.svelte new file mode 100644 index 0000000..5c171d2 --- /dev/null +++ b/src/lib/components/footer/footer.svelte @@ -0,0 +1,30 @@ + + + + + diff --git a/src/lib/components/forum/forum.svelte b/src/lib/components/forum/forum.svelte new file mode 100644 index 0000000..b886428 --- /dev/null +++ b/src/lib/components/forum/forum.svelte @@ -0,0 +1,13 @@ + + +

    {forum.glyph} {$_(forum.label)}

    + diff --git a/src/lib/components/forum/forum.test.ts b/src/lib/components/forum/forum.test.ts new file mode 100644 index 0000000..b3ce167 --- /dev/null +++ b/src/lib/components/forum/forum.test.ts @@ -0,0 +1,73 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { addMessages } from 'svelte-i18n'; + +import { render } from '@testing-library/svelte'; +import '$lib/i18n'; + +import Forum from './forum.svelte'; + +const internals = { + results: null +}; + +describe('Forum component', () => { + + beforeAll(() => { + + addMessages('en', { + 'test_forums.oleo': 'Oleo' + }); + }); + + 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() + } + ] + } + } }); + }); + + 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'); + }); +}); diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte new file mode 100644 index 0000000..3529de8 --- /dev/null +++ b/src/lib/components/forum_list/forum_list.svelte @@ -0,0 +1,42 @@ + + + + + diff --git a/src/lib/components/forum_list/forum_list.test.ts b/src/lib/components/forum_list/forum_list.test.ts new file mode 100644 index 0000000..be7d449 --- /dev/null +++ b/src/lib/components/forum_list/forum_list.test.ts @@ -0,0 +1,94 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { render } from '@testing-library/svelte'; +import '$lib/i18n'; + +import { addMessages } from 'svelte-i18n'; + +import ForumList from './forum_list.svelte'; + +const internals = { + 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...' + }); + }); + + 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 + } + ] + } }); + }); + + test('It should display each forum according to their position', () => { + + 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'); + }); +}); diff --git a/src/lib/components/glyph/glyph.svelte b/src/lib/components/glyph/glyph.svelte new file mode 100644 index 0000000..0559b98 --- /dev/null +++ b/src/lib/components/glyph/glyph.svelte @@ -0,0 +1,41 @@ + + + + + diff --git a/src/lib/components/glyph/glyph.test.ts b/src/lib/components/glyph/glyph.test.ts new file mode 100644 index 0000000..778353f --- /dev/null +++ b/src/lib/components/glyph/glyph.test.ts @@ -0,0 +1,36 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { render } from '@testing-library/svelte'; +import '$lib/i18n'; + +import Glyph from './glyph.svelte'; + +const internals = { + results: null +}; + +describe('Glyph component', () => { + + beforeEach(() => { + + 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(/^. . . .$/); + }); +}); diff --git a/src/lib/components/header/header.svelte b/src/lib/components/header/header.svelte new file mode 100644 index 0000000..e6c9348 --- /dev/null +++ b/src/lib/components/header/header.svelte @@ -0,0 +1,63 @@ + + +
    + +
    + + diff --git a/src/lib/components/header/header.test.ts b/src/lib/components/header/header.test.ts new file mode 100644 index 0000000..4107b2d --- /dev/null +++ b/src/lib/components/header/header.test.ts @@ -0,0 +1,33 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { render } from '@testing-library/svelte'; +import '$lib/i18n'; +import { enableTopicActions } from '$lib/stores/actions'; + +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); + + 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/lib/components/home/home.svelte b/src/lib/components/home/home.svelte new file mode 100644 index 0000000..9473bbb --- /dev/null +++ b/src/lib/components/home/home.svelte @@ -0,0 +1,6 @@ + + +

    {$_('home.title')}

    +

    {$_('home.content')}

    diff --git a/src/lib/components/invalid_route/invalid_route.svelte b/src/lib/components/invalid_route/invalid_route.svelte new file mode 100644 index 0000000..a75316d --- /dev/null +++ b/src/lib/components/invalid_route/invalid_route.svelte @@ -0,0 +1,6 @@ + + +

    {$_('error.invalid_url.title')}

    +

    {$_('error.invalid_url.message')}

    diff --git a/src/lib/components/language_selector/language_selector.svelte b/src/lib/components/language_selector/language_selector.svelte new file mode 100644 index 0000000..64a4ef9 --- /dev/null +++ b/src/lib/components/language_selector/language_selector.svelte @@ -0,0 +1,26 @@ + + + + + diff --git a/src/lib/components/language_selector/language_selector.test.ts b/src/lib/components/language_selector/language_selector.test.ts new file mode 100644 index 0000000..74156bc --- /dev/null +++ b/src/lib/components/language_selector/language_selector.test.ts @@ -0,0 +1,48 @@ +/** + * @jest-environment jsdom + */ + +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 '$lib/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'); + })(); + 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/loader/loader.svelte b/src/lib/components/loader/loader.svelte new file mode 100644 index 0000000..dad0957 --- /dev/null +++ b/src/lib/components/loader/loader.svelte @@ -0,0 +1,5 @@ + + +

    {$_('loader.message')}

    diff --git a/src/lib/components/post/post.svelte b/src/lib/components/post/post.svelte new file mode 100644 index 0000000..4e6c28f --- /dev/null +++ b/src/lib/components/post/post.svelte @@ -0,0 +1,50 @@ + + + +
    + {post.text} +
    +
    + + diff --git a/src/lib/components/post/post.test.ts b/src/lib/components/post/post.test.ts new file mode 100644 index 0000000..d43583e --- /dev/null +++ b/src/lib/components/post/post.test.ts @@ -0,0 +1,128 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { cleanup, render } from '@testing-library/svelte'; +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' + } + }, + + results: null +}; + +describe('Post component', () => { + + beforeEach(() => { + + internals.results = render(Post, { props: { + post: internals.basicPost + } }); + }); + + test('Should display the text of the post', () => { + + expect(internals.results.getByText('This is an example post qwerty')).toBeVisible(); + }); + + test('Should display date of the post', () => { + + expect(internals.results.getByText('2021-04-19T06:06:06.666Z')) + .toBeVisible(); + }); + + 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'); + }); + + test('Should display the glyph of the post author', () => { + + const glyphicon = internals.results.getByRole('img'); + + expect(glyphicon) + .toBeVisible(); + expect(glyphicon) + .toHaveTextContent(/^. . . .$/); + }); + + test('Should display author handle', () => { + + expect(internals.results.getByText('very_cool_user')) + .toBeVisible(); + }); + + 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(); + }); +}); diff --git a/src/lib/components/tag/tag.svelte b/src/lib/components/tag/tag.svelte new file mode 100644 index 0000000..86d0b82 --- /dev/null +++ b/src/lib/components/tag/tag.svelte @@ -0,0 +1,13 @@ + + +

    {$_('tag.title')}: {tag.id}

    + diff --git a/src/lib/components/tag/tag.test.ts b/src/lib/components/tag/tag.test.ts new file mode 100644 index 0000000..76304e6 --- /dev/null +++ b/src/lib/components/tag/tag.test.ts @@ -0,0 +1,62 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { render } from '@testing-library/svelte'; +import '$lib/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(); + }); + + 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 new file mode 100644 index 0000000..06f2aeb --- /dev/null +++ b/src/lib/components/topic/topic.svelte @@ -0,0 +1,44 @@ + + +
    +

    {topic.title}

    + + {#if topic.tags.length > 0} + + {/if} + {#each topic.posts as post, index} + + {/each} +
    diff --git a/src/lib/components/topic/topic.test.ts b/src/lib/components/topic/topic.test.ts new file mode 100644 index 0000000..985ca72 --- /dev/null +++ b/src/lib/components/topic/topic.test.ts @@ -0,0 +1,168 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { addMessages } from 'svelte-i18n'; + +import { cleanup, render } from '@testing-library/svelte'; +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: [] + } +}; + +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(); + }); + + 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'); + }); + }); +}); diff --git a/src/lib/components/topic_summary/topic_summary.svelte b/src/lib/components/topic_summary/topic_summary.svelte new file mode 100644 index 0000000..bfcf8ab --- /dev/null +++ b/src/lib/components/topic_summary/topic_summary.svelte @@ -0,0 +1,23 @@ + + +
  • + + + {topic.title} + + ({$_('topic.remaining_time', { + values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) } + })}) + +
    • + + diff --git a/src/lib/components/topic_summary/topic_summary.test.ts b/src/lib/components/topic_summary/topic_summary.test.ts new file mode 100644 index 0000000..a4c46bf --- /dev/null +++ b/src/lib/components/topic_summary/topic_summary.test.ts @@ -0,0 +1,47 @@ +/** + * @jest-environment jsdom + */ + +import '@testing-library/jest-dom/extend-expect'; + +import { render } from '@testing-library/svelte'; +import '$lib/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