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>
This commit is contained in:
André Jaenisch 2024-06-23 15:37:22 +02:00
parent 35addf5a77
commit 548c05cfda
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
4 changed files with 161 additions and 384 deletions

View file

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

View file

@ -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 -->
<!-- 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 -->
<CommitDate
commitDate={commitsByDateAndProject[0]}
numberOfCommits={commitsByProject[1].length}
repoName={getRepoNameById(commitsByProject[0])}
/>
<ul>
{#each commitsByProject[1] as commit}
<li class="ltr:border-l-2 rtl:border-r-2 ms-2">

View file

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

View file

@ -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', () => {