forge/Anvil
1
0
Fork 0
Code Pull requests Activity

fix: prevent dangling list item

Browse source 
By moving the fallback text into its own component I was able to move
the list element into the History molecule. Its API has changed
accordingly. I have written tests to prevent regressions.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-07-02 11:02:38 +02:00
parent 8ca9125fba
commit be36d6af3b
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
5 changed files with 206 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/lib/components/atoms/HistoryFallback.svelte Normal file
View file

@ -0,0 +1,54 @@
<!--
HistoryFallback atom.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import { _, date } from 'svelte-i18n';
import { NorthStar24 } from 'svelte-octicons';
/**
* Service with which username was created on the instance.
*/
export let created_with = '';
/**
* Instance to show in fallback.
*/
export let instance = '';
/**
* Username to show in fallback.
*/
export let username = '';
</script>
<!-- Commit day -->
<span class="relative">
<span class="absolute ltr:-left-3 rtl:-right-3">
<NorthStar24 fill="currentColor" />
</span>
<span class="ms-4">
{$date(new Date('2023-04-23'))} - {$_('page.profile.history.activities.setup.summary')}
</span>
</span>
<!-- Commits -->
<span class="ms-6 mt-8">
<span class="border box-decoration-clone px-4 py-2 leading-10">
{$_('page.profile.history.activities.setup.description', {
values: {
created_with,
instance,
username
}
})}
</span>
</span>

69
src/lib/components/molecules/History.svelte
View file

@ -12,14 +12,28 @@ You should have received a copy of the GNU Affero General Public License along w
-->
<script>
import { _ } from 'svelte-i18n';
import CommitBody from '../atoms/CommitBody.svelte';
import CommitDate from '../atoms/CommitDate.svelte';
import HistoryFallback from '../atoms/HistoryFallback.svelte';
/**
* Array of commits to display by date and project.
*/
export let commitsMap = [];
/**
* Required context for populating the template.
*/
export let data = {
user: {
created_with: '',
instance: '',
username: ''
}
};
/**
* Array of followings to look up.
*/
@ -59,24 +73,39 @@ You should have received a copy of the GNU Affero General Public License along w
};
</script>
{#each Object.entries(groupCommitsByDateAndProject(commitsMap)) as commitsByDateAndProject}
{#each Object.entries(commitsByDateAndProject[1]) as commitsByProject}
<li class="mb-8">
<!-- Indent the whole block by 6 -->
<div class="flex flex-col gap-6 ps-6">
<CommitDate
commitDate={commitsByDateAndProject[0]}
numberOfCommits={commitsByProject[1].length}
repoName={getRepoNameById(commitsByProject[0])}
/>
<ul>
{#each commitsByProject[1] as commit}
<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
<CommitBody {commit} />
</li>
{/each}
</ul>
</div>
<h2 class="h2 font-semibold leading-tight text-base">
{$_('page.profile.history.heading')}
</h2>
<ul>
{#if commitsMap.length > 0}
{#each Object.entries(groupCommitsByDateAndProject(commitsMap)) as commitsByDateAndProject}
{#each Object.entries(commitsByDateAndProject[1]) as commitsByProject}
<li class="mb-8">
<!-- Indent the whole block by 6 -->
<div class="flex flex-col gap-6 ps-6">
<CommitDate
commitDate={commitsByDateAndProject[0]}
numberOfCommits={commitsByProject[1].length}
repoName={getRepoNameById(commitsByProject[0])}
/>
<ul>
{#each commitsByProject[1] as commit}
<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
<CommitBody {commit} />
</li>
{/each}
</ul>
</div>
</li>
{/each}
{/each}
{:else}
<li class="flex flex-col ltr:border-l-2 rtl:border-r-2 ms-2">
<HistoryFallback
created_with={data.user.created_with}
instance={data.user.instance}
username={data.user.username}
/>
</li>
{/each}
{/each}
{/if}
</ul>

43
src/lib/components/templates/Profile.svelte
View file

@ -12,8 +12,8 @@ You should have received a copy of the GNU Affero General Public License along w
-->
<script>
import { _, date } from 'svelte-i18n';
import { NorthStar24, Star16 } from 'svelte-octicons';
import { _ } from 'svelte-i18n';
import { Star16 } from 'svelte-octicons';
import Avatar from '../atoms/Avatar.svelte';
import BlockOrReport from '../atoms/BlockOrReport.svelte';
@ -188,40 +188,11 @@ You should have received a copy of the GNU Affero General Public License along w
<!-- History -->
<div class="flex flex-1 flex-col px-4">
<div class="space-y-6">
<h2 class="h2 font-semibold leading-tight text-base">
{$_('page.profile.history.heading')}
</h2>
<ul>
{#if data?.user?.commitsMap}
<History commitsMap={data.user.commitsMap} followingsMap={data.user.followingsMap} />
{:else}
<li class="flex flex-col ltr:border-l-2 rtl:border-r-2 ms-2">
<!-- Commit day -->
<span class="relative">
<span class="absolute ltr:-left-3 rtl:-right-3">
<NorthStar24 fill="currentColor" />
</span>
<span class="ms-4">
{$date(new Date('2023-04-23'))} - {$_(
'page.profile.history.activities.setup.summary'
)}
</span>
</span>
<!-- Commits -->
<span class="ms-6 mt-8">
<span class="border box-decoration-clone px-4 py-2 leading-10">
{$_('page.profile.history.activities.setup.description', {
values: {
created_with: data.user.created_with,
instance: data.user.instance,
username: data.user.username
}
})}
</span>
</span>
</li>
{/if}
</ul>
<History
commitsMap={data?.user?.commitsMap || []}
{data}
followingsMap={data?.user?.followingsMap || []}
/>
</div>
</div>
</section>

95
tests/components/atoms/HistoryFallback.test.ts Normal file
View file

@ -0,0 +1,95 @@
/* Component test for HistoryFallback atom.
* Copyright (C) 2024 André Jaenisch
* SPDX-FileCopyrightText: 2024 André Jaenisch
* SPDX-License-Identifier: AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/svelte';
import { init, locale, register } from 'svelte-i18n';
import HistoryFallback from '../../../src/lib/components/atoms/HistoryFallback.svelte';
import enMessages from '../../../src/lib/i18n/locales/en.json';
describe('HistoryFallback.svelte', () => {
beforeEach(() => {
register('en', () => import('../../../src/lib/i18n/locales/en.json'));
init({ fallbackLocale: 'en', initialLocale: 'en' });
locale.set('en');
});
it('should mount', () => {
// Arrange
// TODO: Figure out why beforeEach is not executed
register('en', () => import('../../../src/lib/i18n/locales/en.json'));
init({ fallbackLocale: 'en', initialLocale: 'en' });
locale.set('en');
const created_with = 'Anvil';
const instance = 'example.com';
const username = 'John_Doe';
// Act
const { container } = render(HistoryFallback, {
created_with,
instance,
username
});
// Assert
expect(container).toBeTruthy();
});
it('should show a date', () => {
// Arrange
// TODO: Figure out why beforeEach is not executed
register('en', () => import('../../../src/lib/i18n/locales/en.json'));
init({ fallbackLocale: 'en', initialLocale: 'en' });
locale.set('en');
const created_with = 'Anvil';
const instance = 'example.com';
const username = 'John_Doe';
// Act
render(HistoryFallback, {
created_with,
instance,
username
});
const date = screen.getByText(new RegExp('4/23/23'));
// Assert
expect(date).toBeInTheDocument();
});
it('should show a description', () => {
// Arrange
// TODO: Figure out why beforeEach is not executed
register('en', () => import('../../../src/lib/i18n/locales/en.json'));
init({ fallbackLocale: 'en', initialLocale: 'en' });
locale.set('en');
const created_with = 'Anvil';
const instance = 'example.com';
const username = 'John_Doe';
// Act
render(HistoryFallback, {
created_with,
instance,
username
});
const created_with_content = screen.getByText(new RegExp(created_with));
const instance_content = screen.getByText(new RegExp(instance));
const username_content = screen.getByText(new RegExp(username));
// Assert
expect(created_with_content).toBeInTheDocument();
expect(instance_content).toBeInTheDocument();
expect(username_content).toBeInTheDocument();
});
});

2
tests/components/molecules/History.test.ts
View file

@ -46,7 +46,7 @@ describe('History.svelte', () => {
const listItems = screen.queryAllByRole('listitem');
// Assert
expect(listItems).toHaveLength(0);
expect(listItems).toHaveLength(1);
});
});