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/forum_list | |
| parent | a7cf03c192470cbab13edeb1aec99e0c66dede10 (diff) | |
Apply formatting
Diffstat (limited to 'src/lib/components/forum_list')
| -rw-r--r-- | src/lib/components/forum_list/forum_list.svelte | 22 | ||||
| -rw-r--r-- | src/lib/components/forum_list/forum_list.test.ts | 136 |
2 files changed, 77 insertions, 81 deletions
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'); + }); }); |