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>

src/lib/components/atoms/HistoryFallback.svelte

@@ -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>

src/lib/components/molecules/History.svelte

@@ -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}
+<h2 class="h2 font-semibold leading-tight text-base">
-	{#each Object.entries(commitsByDateAndProject[1]) as commitsByProject}
+	{$_('page.profile.history.heading')}
-		<li class="mb-8">
+</h2>
-			<!-- Indent the whole block by 6 -->
+<ul>
-			<div class="flex flex-col gap-6 ps-6">
+	{#if commitsMap.length > 0}
-				<CommitDate
+		{#each Object.entries(groupCommitsByDateAndProject(commitsMap)) as commitsByDateAndProject}
-					commitDate={commitsByDateAndProject[0]}
+			{#each Object.entries(commitsByDateAndProject[1]) as commitsByProject}
-					numberOfCommits={commitsByProject[1].length}
+				<li class="mb-8">
-					repoName={getRepoNameById(commitsByProject[0])}
+					<!-- Indent the whole block by 6 -->
-				/>
+					<div class="flex flex-col gap-6 ps-6">
-				<ul>
+						<CommitDate
-					{#each commitsByProject[1] as commit}
+							commitDate={commitsByDateAndProject[0]}
-						<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
+							numberOfCommits={commitsByProject[1].length}
-							<CommitBody {commit} />
+							repoName={getRepoNameById(commitsByProject[0])}
-						</li>
+						/>
-					{/each}
+						<ul>
-				</ul>
+							{#each commitsByProject[1] as commit}
-			</div>
+								<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}
+	{/if}
-{/each}
+</ul>

src/lib/components/templates/Profile.svelte

@@ -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 { _ } from 'svelte-i18n';
-	import { NorthStar24, Star16 } from 'svelte-octicons';
+	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">
+			<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>
 </section>

tests/components/atoms/HistoryFallback.test.ts

@@ -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();
+	});
+});

tests/components/molecules/History.test.ts

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