fix: prevent dangling list item
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:
parent
8ca9125fba
commit
be36d6af3b
5 changed files with 206 additions and 57 deletions
54
src/lib/components/atoms/HistoryFallback.svelte
Normal file
54
src/lib/components/atoms/HistoryFallback.svelte
Normal 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>
|
|
@ -12,14 +12,28 @@ You should have received a copy of the GNU Affero General Public License along w
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { _ } from 'svelte-i18n';
|
||||||
|
|
||||||
import CommitBody from '../atoms/CommitBody.svelte';
|
import CommitBody from '../atoms/CommitBody.svelte';
|
||||||
import CommitDate from '../atoms/CommitDate.svelte';
|
import CommitDate from '../atoms/CommitDate.svelte';
|
||||||
|
import HistoryFallback from '../atoms/HistoryFallback.svelte';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Array of commits to display by date and project.
|
* Array of commits to display by date and project.
|
||||||
*/
|
*/
|
||||||
export let commitsMap = [];
|
export let commitsMap = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Required context for populating the template.
|
||||||
|
*/
|
||||||
|
export let data = {
|
||||||
|
user: {
|
||||||
|
created_with: '',
|
||||||
|
instance: '',
|
||||||
|
username: ''
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Array of followings to look up.
|
* Array of followings to look up.
|
||||||
*/
|
*/
|
||||||
|
@ -59,6 +73,11 @@ You should have received a copy of the GNU Affero General Public License along w
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<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(groupCommitsByDateAndProject(commitsMap)) as commitsByDateAndProject}
|
||||||
{#each Object.entries(commitsByDateAndProject[1]) as commitsByProject}
|
{#each Object.entries(commitsByDateAndProject[1]) as commitsByProject}
|
||||||
<li class="mb-8">
|
<li class="mb-8">
|
||||||
|
@ -80,3 +99,13 @@ You should have received a copy of the GNU Affero General Public License along w
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
{/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>
|
||||||
|
{/if}
|
||||||
|
</ul>
|
||||||
|
|
|
@ -12,8 +12,8 @@ You should have received a copy of the GNU Affero General Public License along w
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { _, date } from 'svelte-i18n';
|
import { _ } from 'svelte-i18n';
|
||||||
import { NorthStar24, Star16 } from 'svelte-octicons';
|
import { Star16 } from 'svelte-octicons';
|
||||||
|
|
||||||
import Avatar from '../atoms/Avatar.svelte';
|
import Avatar from '../atoms/Avatar.svelte';
|
||||||
import BlockOrReport from '../atoms/BlockOrReport.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 -->
|
<!-- History -->
|
||||||
<div class="flex flex-1 flex-col px-4">
|
<div class="flex flex-1 flex-col px-4">
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<h2 class="h2 font-semibold leading-tight text-base">
|
<History
|
||||||
{$_('page.profile.history.heading')}
|
commitsMap={data?.user?.commitsMap || []}
|
||||||
</h2>
|
{data}
|
||||||
<ul>
|
followingsMap={data?.user?.followingsMap || []}
|
||||||
{#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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
95
tests/components/atoms/HistoryFallback.test.ts
Normal file
95
tests/components/atoms/HistoryFallback.test.ts
Normal 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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -46,7 +46,7 @@ describe('History.svelte', () => {
|
||||||
const listItems = screen.queryAllByRole('listitem');
|
const listItems = screen.queryAllByRole('listitem');
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
expect(listItems).toHaveLength(0);
|
expect(listItems).toHaveLength(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue