refactor: extract commit body to an atom

In order to reduce the complexity of a component I broke out the body
part of a commit into its own component.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

src/lib/components/atoms/CommitBody.svelte

@@ -0,0 +1,65 @@
+<!--
+CommitBody 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 { Copy16, FileDirectory16 } from 'svelte-octicons';
+
+	/**
+	 * The commit to display.
+	 */
+	export let commit = {
+		name: ''
+	};
+
+	const i18n = {
+		actions: {
+			browse: 'page.profile.history.activities.commits.actions.browse',
+			copy: 'page.profile.history.activities.commits.actions.copy'
+		},
+		relative_time: 'page.profile.history.activities.commits.relative_time'
+	};
+</script>
+
+<div class="flex w-full justify-between gap-4 border border-surface-100">
+	<!-- Detail text -->
+	<div class="flex flex-col flex-1">
+		<span class="text-surface-500">{commit.name}</span>
+		<span class="text-surface-400"
+			>{$_(i18n.relative_time, {
+				values: { relativeTime: $date(new Date(commit.committed)) }
+			})}</span
+		>
+	</div>
+	<!-- SHA -->
+	<div class="flex">
+		<button type="button" class="btn-icon border border-surface-100 rounded bg-white self-start">
+			<Copy16 fill="currentColor" />
+			<span class="sr-only">{$_(i18n.actions.copy)}</span>
+		</button>
+		<!-- Since I cannot successfully define font-mono here, enforce a minimum width for equally sized buttons -->
+		<button
+			type="button"
+			class="btn border border-surface-100 rounded bg-white min-w-32 self-start"
+		>
+			{commit.hash.slice(0, 8)}
+		</button>
+	</div>
+	<!-- Browse -->
+	<div>
+		<button type="button" class="btn-icon border border-surface-100 rounded bg-white">
+			<FileDirectory16 fill="currentColor" />
+			<span class="sr-only">{$_(i18n.actions.browse)}</span>
+		</button>
+	</div>
+</div>

src/lib/components/molecules/History.svelte

@@ -13,7 +13,9 @@ You should have received a copy of the GNU Affero General Public License along w
 
 <script>
 	import { _, date } from 'svelte-i18n';
-	import { Copy16, FileDirectory16, GitCommit24, Repo24 } from 'svelte-octicons';
+	import { GitCommit24, Repo24 } from 'svelte-octicons';
+
+	import CommitBody from '../atoms/CommitBody.svelte';
 
 	/**
 	 * Array of commits to display by date and project.
@@ -81,53 +83,9 @@ You should have received a copy of the GNU Affero General Public License along w
 				<!-- Commits -->
 				<ul>
 					{#each commitsByProject[1] as commit}
-						{#if commit.name}
+						<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
-							<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
+							<CommitBody {commit} />
-								<!-- Commit body -->
+						</li>
-								<div class="flex w-full justify-between gap-4 border border-surface-100">
-									<!-- Detail text -->
-									<div class="flex flex-col flex-1">
-										<span class="text-surface-500">{commit.name}</span>
-										<span class="text-surface-400"
-											>{$_('page.profile.history.activities.commits.relative_time', {
-												values: { relativeTime: $date(new Date(commit.committed)) }
-											})}</span
-										>
-									</div>
-									<!-- SHA -->
-									<div class="flex">
-										<button
-											type="button"
-											class="btn-icon border border-surface-100 rounded bg-white self-start"
-										>
-											<Copy16 fill="currentColor" />
-											<span class="sr-only"
-												>{$_('page.profile.history.activities.commits.actions.copy')}</span
-											>
-										</button>
-										<!-- Since I cannot successfully define font-mono here, enforce a minimum width for equally sized buttons -->
-										<button
-											type="button"
-											class="btn border border-surface-100 rounded bg-white min-w-32 self-start"
-										>
-											{commit.hash.slice(0, 8)}
-										</button>
-									</div>
-									<!-- Browse -->
-									<div>
-										<button
-											type="button"
-											class="btn-icon border border-surface-100 rounded bg-white"
-										>
-											<FileDirectory16 fill="currentColor" />
-											<span class="sr-only"
-												>{$_('page.profile.history.activities.commits.actions.browse')}</span
-											>
-										</button>
-									</div>
-								</div>
-							</li>
-						{/if}
 					{/each}
 				</ul>
 			</div>

tests/components/atoms/CommitBody.test.ts

@@ -0,0 +1,180 @@
+/* Component test for CommitBody 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 CommitBody from '../../../src/lib/components/atoms/CommitBody.svelte';
+import enMessages from '../../../src/lib/i18n/locales/en.json';
+
+describe('CommitBody.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 commit = {
+			'@context': ['https://www.w3.org/ns/activitystreams', 'https://forgefed.org/ns'],
+			id: 'https://fig.fr33domlover.site/repos/9nOkn/commits/36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			type: 'Commit',
+			context: 'https://fig.fr33domlover.site/repos/9nOkn',
+			attributedTo: 'https://fig.fr33domlover.site/people/qn870',
+			committedBy: {
+				name: 'vervis',
+				mbox: 'mailto:vervis@vervis.vervis'
+			},
+			name: 'Best commit ever',
+			hash: '36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			created: '2022-09-28T16:01:30Z',
+			committed: '2022-09-28T16:06:36Z'
+		};
+
+		// Act
+		const { container } = render(CommitBody, { commit });
+
+		// Assert
+		expect(container).toBeTruthy();
+	});
+
+	it('should list the commit name', () => {
+		// 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 commit = {
+			'@context': ['https://www.w3.org/ns/activitystreams', 'https://forgefed.org/ns'],
+			id: 'https://fig.fr33domlover.site/repos/9nOkn/commits/36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			type: 'Commit',
+			context: 'https://fig.fr33domlover.site/repos/9nOkn',
+			attributedTo: 'https://fig.fr33domlover.site/people/qn870',
+			committedBy: {
+				name: 'vervis',
+				mbox: 'mailto:vervis@vervis.vervis'
+			},
+			name: 'Best commit ever',
+			hash: '36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			created: '2022-09-28T16:01:30Z',
+			committed: '2022-09-28T16:06:36Z'
+		};
+
+		// Act
+		render(CommitBody, { commit });
+		const commitName = screen.getByText(commit.name);
+
+		// Assert
+		expect(commitName).toBeInTheDocument();
+	});
+
+	it('should have a button to copy the SHA', () => {
+		// 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 commit = {
+			'@context': ['https://www.w3.org/ns/activitystreams', 'https://forgefed.org/ns'],
+			id: 'https://fig.fr33domlover.site/repos/9nOkn/commits/36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			type: 'Commit',
+			context: 'https://fig.fr33domlover.site/repos/9nOkn',
+			attributedTo: 'https://fig.fr33domlover.site/people/qn870',
+			committedBy: {
+				name: 'vervis',
+				mbox: 'mailto:vervis@vervis.vervis'
+			},
+			name: 'Best commit ever',
+			hash: '36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			created: '2022-09-28T16:01:30Z',
+			committed: '2022-09-28T16:06:36Z'
+		};
+
+		// Act
+		render(CommitBody, { commit });
+		const copyButton = screen.getByRole('button', { name: 'Copy' });
+
+		// Assert
+		expect(copyButton).toBeInTheDocument();
+	});
+
+	it('should have a button with the commit SHA', () => {
+		// 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 commit = {
+			'@context': ['https://www.w3.org/ns/activitystreams', 'https://forgefed.org/ns'],
+			id: 'https://fig.fr33domlover.site/repos/9nOkn/commits/36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			type: 'Commit',
+			context: 'https://fig.fr33domlover.site/repos/9nOkn',
+			attributedTo: 'https://fig.fr33domlover.site/people/qn870',
+			committedBy: {
+				name: 'vervis',
+				mbox: 'mailto:vervis@vervis.vervis'
+			},
+			name: 'Best commit ever',
+			hash: '36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			created: '2022-09-28T16:01:30Z',
+			committed: '2022-09-28T16:06:36Z'
+		};
+
+		// Act
+		render(CommitBody, { commit });
+		const shaButton = screen.getByRole('button', { name: commit.hash.slice(0, 8) });
+
+		// Assert
+		expect(shaButton).toBeInTheDocument();
+	});
+
+	it('should have a button to browse the commit', () => {
+		// 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 commit = {
+			'@context': ['https://www.w3.org/ns/activitystreams', 'https://forgefed.org/ns'],
+			id: 'https://fig.fr33domlover.site/repos/9nOkn/commits/36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			type: 'Commit',
+			context: 'https://fig.fr33domlover.site/repos/9nOkn',
+			attributedTo: 'https://fig.fr33domlover.site/people/qn870',
+			committedBy: {
+				name: 'vervis',
+				mbox: 'mailto:vervis@vervis.vervis'
+			},
+			name: 'Best commit ever',
+			hash: '36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+			created: '2022-09-28T16:01:30Z',
+			committed: '2022-09-28T16:06:36Z'
+		};
+
+		// Act
+		render(CommitBody, { commit });
+		const browseButton = screen.getByRole('button', { name: 'Browse' });
+
+		// Assert
+		expect(browseButton).toBeInTheDocument();
+	});
+});