refactor: extract CommitDate into component

This way the History molecule is only concerned with mapping the list of
commits to the appropriate structure and iterating over it. The markup
is deferred to separate components now.

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

src/lib/components/atoms/CommitDate.svelte

@@ -0,0 +1,52 @@
+<!--
+CommitDate 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 { GitCommit24, Repo24 } from 'svelte-octicons';
+
+	/**
+	 * The commit date as ISOString.
+	 */
+	export let commitDate = '1970-01-01';
+
+	/**
+	 * Number of commits on this repo at this date.
+	 */
+	export let numberOfCommits = 0;
+
+	/**
+	 * The name of the repo the commit is associated with.
+	 */
+	export let repoName = '';
+
+	const i18n = {
+		numberOfCommits: 'page.profile.history.activities.commits.number'
+	};
+</script>
+
+<div class="flex gap-6 -ms-6">
+	<span class="bg-white">
+		<GitCommit24 fill="currentColor" />
+	</span>
+	<span class="flex gap-6 -ms-3">
+		<!-- Pluralisation: https://lokalise.com/blog/svelte-i18n/#Pluralization_with_Svelte_i18n -->
+		{$date(new Date(commitDate))} - {$_(i18n.numberOfCommits, {
+			values: { number: numberOfCommits }
+		})}
+		<span class="flex gap-2">
+			<Repo24 fill="currentColor" />
+			{repoName}
+		</span>
+	</span>
+</div>

src/lib/components/molecules/History.svelte

@@ -12,10 +12,8 @@ You should have received a copy of the GNU Affero General Public License along w
 -->
 
 <script>
-	import { _, date } from 'svelte-i18n';
-	import { GitCommit24, Repo24 } from 'svelte-octicons';
-
 	import CommitBody from '../atoms/CommitBody.svelte';
+	import CommitDate from '../atoms/CommitDate.svelte';
 
 	/**
 	 * Array of commits to display by date and project.
@@ -53,34 +51,24 @@ You should have received a copy of the GNU Affero General Public License along w
 
 		return groupByDateAndProject;
 	};
+
+	const getRepoNameById = function (repoId) {
+		const candidate = followingsMap.find((following) => following.id === repoId);
+
+		return candidate?.name || '';
+	};
 </script>
 
 {#each Object.entries(groupCommitsByDateAndProject(commitsMap)) as commitsByDateAndProject}
 	{#each Object.entries(commitsByDateAndProject[1]) as commitsByProject}
-		<!-- Commit day -->
 		<li>
 			<!-- Indent the whole block by 6 -->
 			<div class="flex flex-col gap-6 ps-6">
-				<!-- Commit date -->
+				<CommitDate
-				<!-- But align the icon to History heading -->
+					commitDate={commitsByDateAndProject[0]}
-				<div class="flex gap-6 -ms-6">
+					numberOfCommits={commitsByProject[1].length}
-					<span class="bg-white">
+					repoName={getRepoNameById(commitsByProject[0])}
-						<GitCommit24 fill="currentColor" />
+				/>
-					</span>
-					<!-- And align the date with the commits below -->
-					<span class="flex gap-6 -ms-3">
-						<!-- Pluralisation: https://lokalise.com/blog/svelte-i18n/#Pluralization_with_Svelte_i18n -->
-						{$date(new Date(commitsByDateAndProject[0]))} - {$_(
-							'page.profile.history.activities.commits.number',
-							{ values: { number: commitsByProject[1].length } }
-						)}
-						<span class="flex gap-2">
-							<Repo24 fill="currentColor" />
-							{followingsMap.find((following) => following.id === commitsByProject[0]).name}
-						</span>
-					</span>
-				</div>
-				<!-- Commits -->
 				<ul>
 					{#each commitsByProject[1] as commit}
 						<li class="ltr:border-l-2 rtl:border-r-2 ms-2">

tests/components/atoms/CommitDate.test.ts

@@ -0,0 +1,97 @@
+/* Component test for CommitDate 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 CommitDate from '../../../src/lib/components/atoms/CommitDate.svelte';
+import enMessages from '../../../src/lib/i18n/locales/en.json';
+
+describe('CommitDate.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');
+
+		// Act
+		const { container } = render(CommitDate);
+
+		// Assert
+		expect(container).toBeTruthy();
+	});
+
+	it('should list the date of 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 commitDate = new Date('1970-01-01').toISOString();
+		const numberOfCommits = 1;
+		const repoName = 'Anvil';
+
+		// Act
+		render(CommitDate, { commitDate, numberOfCommits, repoName });
+		const dateOfCommit = screen.getByText(new RegExp('1/1/70'));
+
+		// Assert
+		expect(dateOfCommit).toBeInTheDocument();
+	});
+
+	it('should list the number of commits', () => {
+		// 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 commitDate = new Date().toISOString();
+		const numberOfCommits = 1;
+		const repoName = 'Anvil';
+
+		// Act
+		render(CommitDate, { commitDate, numberOfCommits, repoName });
+		const commitNumber = screen.getByText(/1 commit/);
+
+		// Assert
+		expect(commitNumber).toBeInTheDocument();
+	});
+
+	it('should list the repo 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 commitDate = new Date().toISOString();
+		const numberOfCommits = 1;
+		const repoName = 'Anvil';
+
+		// Act
+		render(CommitDate, { commitDate, numberOfCommits, repoName });
+		const nameOfRepo = screen.getByText(repoName);
+
+		// Assert
+		expect(nameOfRepo).toBeInTheDocument();
+	});
+});

tests/components/molecules/History.test.ts

@@ -114,366 +114,6 @@ describe('History.svelte', () => {
 						// One listitem because of date and one for the commit
 						expect(listItems).toHaveLength(1 + 1);
 					});
-
-					it('should list 1 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 commitsMap = [
-							{
-								'@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'
-							}
-						];
-
-						const followingsMap = [
-							{
-								'@context': [
-									'https://www.w3.org/ns/activitystreams',
-									'https://w3id.org/security/v2',
-									'https://forgefed.org/ns'
-								],
-								id: 'https://fig.fr33domlover.site/repos/9nOkn',
-								inbox: 'https://fig.fr33domlover.site/repos/9nOkn/inbox',
-								outbox: 'https://fig.fr33domlover.site/repos/9nOkn/outbox',
-								followers: 'https://fig.fr33domlover.site/repos/9nOkn/followers',
-								publicKey: [
-									'https://fig.fr33domlover.site/akey1',
-									'https://fig.fr33domlover.site/akey2'
-								],
-								type: 'Repository',
-								name: 'Very fun demo',
-								summary: 'Testing MR demo',
-								team: null,
-								versionControlSystem: 'https://forgefed.org/ns#git',
-								sendPatchesTo: 'https://fig.fr33domlover.site/looms/9nOkn',
-								cloneUri: 'https://fig.fr33domlover.site/repos/9nOkn',
-								collaborators: 'https://fig.fr33domlover.site/repos/9nOkn/collabs',
-								context: 'https://fig.fr33domlover.site/repos/9nOkn/projects'
-							}
-						];
-
-						// Act
-						render(History, { commitsMap, followingsMap });
-						const numberOfCommits = screen.getByText(/1 commit/);
-
-						// Assert
-						expect(numberOfCommits).toBeInTheDocument();
-					});
-
-					it('should list the project', () => {
-						// 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 commitsMap = [
-							{
-								'@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'
-							}
-						];
-
-						const followingsMap = [
-							{
-								'@context': [
-									'https://www.w3.org/ns/activitystreams',
-									'https://w3id.org/security/v2',
-									'https://forgefed.org/ns'
-								],
-								id: 'https://fig.fr33domlover.site/repos/9nOkn',
-								inbox: 'https://fig.fr33domlover.site/repos/9nOkn/inbox',
-								outbox: 'https://fig.fr33domlover.site/repos/9nOkn/outbox',
-								followers: 'https://fig.fr33domlover.site/repos/9nOkn/followers',
-								publicKey: [
-									'https://fig.fr33domlover.site/akey1',
-									'https://fig.fr33domlover.site/akey2'
-								],
-								type: 'Repository',
-								name: 'Very fun demo',
-								summary: 'Testing MR demo',
-								team: null,
-								versionControlSystem: 'https://forgefed.org/ns#git',
-								sendPatchesTo: 'https://fig.fr33domlover.site/looms/9nOkn',
-								cloneUri: 'https://fig.fr33domlover.site/repos/9nOkn',
-								collaborators: 'https://fig.fr33domlover.site/repos/9nOkn/collabs',
-								context: 'https://fig.fr33domlover.site/repos/9nOkn/projects'
-							}
-						];
-
-						// Act
-						render(History, { commitsMap, followingsMap });
-						const numberOfCommits = screen.getByText(followingsMap[0].name);
-
-						// Assert
-						expect(numberOfCommits).toBeInTheDocument();
-					});
-
-					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 commitsMap = [
-							{
-								'@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'
-							}
-						];
-
-						const followingsMap = [
-							{
-								'@context': [
-									'https://www.w3.org/ns/activitystreams',
-									'https://w3id.org/security/v2',
-									'https://forgefed.org/ns'
-								],
-								id: 'https://fig.fr33domlover.site/repos/9nOkn',
-								inbox: 'https://fig.fr33domlover.site/repos/9nOkn/inbox',
-								outbox: 'https://fig.fr33domlover.site/repos/9nOkn/outbox',
-								followers: 'https://fig.fr33domlover.site/repos/9nOkn/followers',
-								publicKey: [
-									'https://fig.fr33domlover.site/akey1',
-									'https://fig.fr33domlover.site/akey2'
-								],
-								type: 'Repository',
-								name: 'Very fun demo',
-								summary: 'Testing MR demo',
-								team: null,
-								versionControlSystem: 'https://forgefed.org/ns#git',
-								sendPatchesTo: 'https://fig.fr33domlover.site/looms/9nOkn',
-								cloneUri: 'https://fig.fr33domlover.site/repos/9nOkn',
-								collaborators: 'https://fig.fr33domlover.site/repos/9nOkn/collabs',
-								context: 'https://fig.fr33domlover.site/repos/9nOkn/projects'
-							}
-						];
-
-						// Act
-						render(History, { commitsMap, followingsMap });
-						const numberOfCommits = screen.getByText(commitsMap[0].name);
-
-						// Assert
-						expect(numberOfCommits).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 commitsMap = [
-							{
-								'@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'
-							}
-						];
-
-						const followingsMap = [
-							{
-								'@context': [
-									'https://www.w3.org/ns/activitystreams',
-									'https://w3id.org/security/v2',
-									'https://forgefed.org/ns'
-								],
-								id: 'https://fig.fr33domlover.site/repos/9nOkn',
-								inbox: 'https://fig.fr33domlover.site/repos/9nOkn/inbox',
-								outbox: 'https://fig.fr33domlover.site/repos/9nOkn/outbox',
-								followers: 'https://fig.fr33domlover.site/repos/9nOkn/followers',
-								publicKey: [
-									'https://fig.fr33domlover.site/akey1',
-									'https://fig.fr33domlover.site/akey2'
-								],
-								type: 'Repository',
-								name: 'Very fun demo',
-								summary: 'Testing MR demo',
-								team: null,
-								versionControlSystem: 'https://forgefed.org/ns#git',
-								sendPatchesTo: 'https://fig.fr33domlover.site/looms/9nOkn',
-								cloneUri: 'https://fig.fr33domlover.site/repos/9nOkn',
-								collaborators: 'https://fig.fr33domlover.site/repos/9nOkn/collabs',
-								context: 'https://fig.fr33domlover.site/repos/9nOkn/projects'
-							}
-						];
-
-						// Act
-						render(History, { commitsMap, followingsMap });
-						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 commitsMap = [
-							{
-								'@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'
-							}
-						];
-
-						const followingsMap = [
-							{
-								'@context': [
-									'https://www.w3.org/ns/activitystreams',
-									'https://w3id.org/security/v2',
-									'https://forgefed.org/ns'
-								],
-								id: 'https://fig.fr33domlover.site/repos/9nOkn',
-								inbox: 'https://fig.fr33domlover.site/repos/9nOkn/inbox',
-								outbox: 'https://fig.fr33domlover.site/repos/9nOkn/outbox',
-								followers: 'https://fig.fr33domlover.site/repos/9nOkn/followers',
-								publicKey: [
-									'https://fig.fr33domlover.site/akey1',
-									'https://fig.fr33domlover.site/akey2'
-								],
-								type: 'Repository',
-								name: 'Very fun demo',
-								summary: 'Testing MR demo',
-								team: null,
-								versionControlSystem: 'https://forgefed.org/ns#git',
-								sendPatchesTo: 'https://fig.fr33domlover.site/looms/9nOkn',
-								cloneUri: 'https://fig.fr33domlover.site/repos/9nOkn',
-								collaborators: 'https://fig.fr33domlover.site/repos/9nOkn/collabs',
-								context: 'https://fig.fr33domlover.site/repos/9nOkn/projects'
-							}
-						];
-
-						// Act
-						render(History, { commitsMap, followingsMap });
-						const shaButton = screen.getByRole('button', { name: commitsMap[0].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 commitsMap = [
-							{
-								'@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'
-							}
-						];
-
-						const followingsMap = [
-							{
-								'@context': [
-									'https://www.w3.org/ns/activitystreams',
-									'https://w3id.org/security/v2',
-									'https://forgefed.org/ns'
-								],
-								id: 'https://fig.fr33domlover.site/repos/9nOkn',
-								inbox: 'https://fig.fr33domlover.site/repos/9nOkn/inbox',
-								outbox: 'https://fig.fr33domlover.site/repos/9nOkn/outbox',
-								followers: 'https://fig.fr33domlover.site/repos/9nOkn/followers',
-								publicKey: [
-									'https://fig.fr33domlover.site/akey1',
-									'https://fig.fr33domlover.site/akey2'
-								],
-								type: 'Repository',
-								name: 'Very fun demo',
-								summary: 'Testing MR demo',
-								team: null,
-								versionControlSystem: 'https://forgefed.org/ns#git',
-								sendPatchesTo: 'https://fig.fr33domlover.site/looms/9nOkn',
-								cloneUri: 'https://fig.fr33domlover.site/repos/9nOkn',
-								collaborators: 'https://fig.fr33domlover.site/repos/9nOkn/collabs',
-								context: 'https://fig.fr33domlover.site/repos/9nOkn/projects'
-							}
-						];
-
-						// Act
-						render(History, { commitsMap, followingsMap });
-						const browseButton = screen.getByRole('button', { name: 'Browse' });
-
-						// Assert
-						expect(browseButton).toBeInTheDocument();
-					});
 				});
 
 				describe('when there are multiple commits', () => {