From 664bf09ba590829541229f8b7be4c89ca968b7e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Sun, 23 Jun 2024 13:33:41 +0200
Subject: [PATCH] refactor: extract History into a molecule
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This allows for easier testing. The component is still complex, so it
requires more refactoring into smaller parts. But I can now safely do
that since I have specified the expected behaviour with a test.

I already discovered a bug while writing the tests: I want to group by
date irrespective of the timestamp. Therefore I need to parse the date
from the ISO timestamp of a commit.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 src/lib/components/molecules/History.svelte | 136 ++++
 src/lib/components/templates/Profile.svelte | 123 +---
 tests/components/molecules/History.test.ts  | 777 ++++++++++++++++++++
 3 files changed, 916 insertions(+), 120 deletions(-)
 create mode 100644 src/lib/components/molecules/History.svelte
 create mode 100644 tests/components/molecules/History.test.ts

diff --git a/src/lib/components/molecules/History.svelte b/src/lib/components/molecules/History.svelte
new file mode 100644
index 0000000..e81fa19
--- /dev/null
+++ b/src/lib/components/molecules/History.svelte
@@ -0,0 +1,136 @@
+<!--
+History molecule.
+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, GitCommit24, Repo24 } from 'svelte-octicons';
+
+	/**
+	 * Array of commits to display by date and project.
+	 */
+	export let commitsMap = [];
+
+	/**
+	 * Array of followings to look up.
+	 */
+	export let followingsMap = [];
+
+	/* Since I group commits by date and project I need to create a structure. */
+	const groupCommitsByDateAndProject = function (commitsMap) {
+		const groupByDateAndProject = {};
+		commitsMap
+			// Some commits couldn't be fetched from Vervis
+			.filter((commit) => Boolean(commit.id))
+			.forEach((commit) => {
+				const { committed, context } = commit;
+				// Committed is formatted as ISO date. Group by date no matter the time
+				const date = committed.slice(0, committed.indexOf('T'));
+
+				// Ensure key exists
+				if (!groupByDateAndProject[date]) {
+					groupByDateAndProject[date] = {};
+				}
+
+				// Ensure Array exists
+				if (!groupByDateAndProject[date][context]) {
+					groupByDateAndProject[date][context] = [];
+				}
+
+				groupByDateAndProject[date][context].push(commit);
+			});
+
+		return groupByDateAndProject;
+	};
+</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 -->
+				<!-- But align the icon to History heading -->
+				<div class="flex gap-6 -ms-6">
+					<span class="bg-white">
+						<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}
+						{#if commit.name}
+							<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
+								<!-- Commit body -->
+								<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>
+		</li>
+	{/each}
+{/each}
diff --git a/src/lib/components/templates/Profile.svelte b/src/lib/components/templates/Profile.svelte
index 7ec864a..2bda41d 100644
--- a/src/lib/components/templates/Profile.svelte
+++ b/src/lib/components/templates/Profile.svelte
@@ -13,19 +13,13 @@ 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,
-		NorthStar24,
-		Repo24,
-		Star16
-	} from 'svelte-octicons';
+	import { NorthStar24, Star16 } from 'svelte-octicons';
 
 	import Avatar from '../atoms/Avatar.svelte';
 	import BlockOrReport from '../atoms/BlockOrReport.svelte';
 	import Created from '../atoms/Created.svelte';
 	import DisplayName from '../atoms/DisplayName.svelte';
+	import History from '../molecules/History.svelte';
 	import Project from '../molecules/Project.svelte';
 
 	/**
@@ -74,31 +68,6 @@ You should have received a copy of the GNU Affero General Public License along w
 			})
 			.flat(1);
 	};
-
-	/* Since I group commits by date and project I need to create a structure. */
-	const groupCommitsByDateAndProject = function (commitsMap) {
-		const groupByDateAndProject = {};
-		commitsMap
-			// Some commits couldn't be fetched from Vervis
-			.filter((commit) => Boolean(commit.id))
-			.forEach((commit) => {
-				const { committed, context } = commit;
-
-				// Ensure key exists
-				if (!groupByDateAndProject[committed]) {
-					groupByDateAndProject[committed] = {};
-				}
-
-				// Ensure Array exists
-				if (!groupByDateAndProject[committed][context]) {
-					groupByDateAndProject[committed][context] = [];
-				}
-
-				groupByDateAndProject[committed][context].push(commit);
-			});
-
-		return groupByDateAndProject;
-	};
 </script>
 
 <section class="w-full mx-auto flex px-8 pt-8">
@@ -224,93 +193,7 @@ You should have received a copy of the GNU Affero General Public License along w
 			</h2>
 			<ul>
 				{#if data?.user?.commitsMap}
-					{#each Object.entries(groupCommitsByDateAndProject(data.user.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 -->
-									<!-- But align the icon to History heading -->
-									<div class="flex gap-6 -ms-6">
-										<span class="bg-white">
-											<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" />
-												{data.user.followingsMap.find(
-													(following) => following.id === commitsByProject[0]
-												).name}
-											</span>
-										</span>
-									</div>
-									<!-- Commits -->
-									<ul>
-										{#each commitsByProject[1] as commit}
-											{#if commit.name}
-												<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
-													<!-- Commit body -->
-													<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>
-							</li>
-						{/each}
-					{/each}
+					<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 -->
diff --git a/tests/components/molecules/History.test.ts b/tests/components/molecules/History.test.ts
new file mode 100644
index 0000000..155dbe5
--- /dev/null
+++ b/tests/components/molecules/History.test.ts
@@ -0,0 +1,777 @@
+/* Component test for History molecule.
+ * 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 History from '../../../src/lib/components/molecules/History.svelte';
+import enMessages from '../../../src/lib/i18n/locales/en.json';
+
+describe('History.svelte', () => {
+	beforeEach(() => {
+		register('en', () => import('../../../src/lib/i18n/locales/en.json'));
+		init({ fallbackLocale: 'en', initialLocale: 'en' });
+		locale.set('en');
+	});
+
+	it('should mount', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		const { container } = render(History);
+
+		// Assert
+		expect(container).toBeTruthy();
+	});
+
+	describe('when there are no commits', () => {
+		it('should show nothing', () => {
+			// Arrange
+			const commitsMap = [];
+			const followingsMap = [];
+
+			// Act
+			render(History, { commitsMap, followingsMap });
+			const listItems = screen.queryAllByRole('listitem');
+
+			// Assert
+			expect(listItems).toHaveLength(0);
+		});
+	});
+
+	describe('when there are commits', () => {
+		describe('when they are all on the same date', () => {
+			describe('when they are all on the same project', () => {
+				describe('when there is a single commit', () => {
+					it('should show the commit by date and 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 listItems = screen.getAllByRole('listitem');
+
+						// Assert
+						// 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', () => {
+					it('should group all commits together', () => {
+						// 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'
+							},
+							{
+								'@context': ['https://www.w3.org/ns/activitystreams', 'https://forgefed.org/ns'],
+								id: 'https://fig.fr33domlover.site/repos/9nOkn/commits/d6e409a6b536e026c95f64d2732946ba0136ddb1',
+								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: 'Add more cool content',
+								hash: 'd6e409a6b536e026c95f64d2732946ba0136ddb1',
+								created: '2022-09-28T17:01:30Z',
+								committed: '2022-09-28T17: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 listItems = screen.getAllByRole('listitem');
+
+						// Assert
+						// One listitem for the date and two due to commits
+						expect(listItems).toHaveLength(1 + 2);
+					});
+				});
+			});
+
+			describe('when they are on different projects', () => {
+				it('should spread them out', () => {
+					// 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/Pn9Yn/commits/36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+							type: 'Commit',
+							context: 'https://fig.fr33domlover.site/repos/Pn9Yn',
+							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'
+						},
+						{
+							'@context': ['https://www.w3.org/ns/activitystreams', 'https://forgefed.org/ns'],
+							id: 'https://fig.fr33domlover.site/repos/9nOkn/commits/d6e409a6b536e026c95f64d2732946ba0136ddb1',
+							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: 'Add more cool content',
+							hash: 'd6e409a6b536e026c95f64d2732946ba0136ddb1',
+							created: '2022-09-28T17:01:30Z',
+							committed: '2022-09-28T17: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/Pn9Yn',
+							inbox: 'https://fig.fr33domlover.site/repos/Pn9Yn/inbox',
+							outbox: 'https://fig.fr33domlover.site/repos/Pn9Yn/outbox',
+							followers: 'https://fig.fr33domlover.site/repos/Pn9Yn/followers',
+							publicKey: [
+								'https://fig.fr33domlover.site/akey1',
+								'https://fig.fr33domlover.site/akey2'
+							],
+							type: 'Repository',
+							name: 'Anvil',
+							summary: 'Mirror of Anvil so I can develop its UI',
+							team: null,
+							versionControlSystem: 'https://forgefed.org/ns#git',
+							cloneUri: 'https://fig.fr33domlover.site/repos/Pn9Yn',
+							collaborators: 'https://fig.fr33domlover.site/repos/Pn9Yn/collabs',
+							context: 'https://fig.fr33domlover.site/repos/Pn9Yn/projects'
+						},
+						{
+							'@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 listItems = screen.getAllByRole('listitem');
+
+					// Assert
+					// Two listitems for the projects and two due to commits
+					expect(listItems).toHaveLength(2 + 2);
+				});
+			});
+		});
+
+		describe('when they are on different dates', () => {
+			it('should spread them out', () => {
+				// 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/Pn9Yn/commits/36e1bb146fa3a6fb5c8d490f76ff4cca5f8f2e78',
+						type: 'Commit',
+						context: 'https://fig.fr33domlover.site/repos/Pn9Yn',
+						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'
+					},
+					{
+						'@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'
+					},
+					{
+						'@context': ['https://www.w3.org/ns/activitystreams', 'https://forgefed.org/ns'],
+						id: 'https://fig.fr33domlover.site/repos/9nOkn/commits/d6e409a6b536e026c95f64d2732946ba0136ddb1',
+						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: 'Add more cool content',
+						hash: 'd6e409a6b536e026c95f64d2732946ba0136ddb1',
+						created: '2022-09-27T17:01:30Z',
+						committed: '2022-09-27T17: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/Pn9Yn',
+						inbox: 'https://fig.fr33domlover.site/repos/Pn9Yn/inbox',
+						outbox: 'https://fig.fr33domlover.site/repos/Pn9Yn/outbox',
+						followers: 'https://fig.fr33domlover.site/repos/Pn9Yn/followers',
+						publicKey: [
+							'https://fig.fr33domlover.site/akey1',
+							'https://fig.fr33domlover.site/akey2'
+						],
+						type: 'Repository',
+						name: 'Anvil',
+						summary: 'Mirror of Anvil so I can develop its UI',
+						team: null,
+						versionControlSystem: 'https://forgefed.org/ns#git',
+						cloneUri: 'https://fig.fr33domlover.site/repos/Pn9Yn',
+						collaborators: 'https://fig.fr33domlover.site/repos/Pn9Yn/collabs',
+						context: 'https://fig.fr33domlover.site/repos/Pn9Yn/projects'
+					},
+					{
+						'@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 listItems = screen.getAllByRole('listitem');
+
+				// Assert
+				// 2 listitems for the dates, 2 for the projects and 2 for the commits
+				// Or something like that.
+				expect(listItems).toHaveLength(2 + 2 + 2);
+			});
+		});
+	});
+});