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>
This commit is contained in:
André Jaenisch
parent
67b09e1233
commit
35addf5a77
3 changed files with 251 additions and 48 deletions
65
src/lib/components/atoms/CommitBody.svelte
Normal file
65
src/lib/components/atoms/CommitBody.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
<!-- 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>
|
||||
<CommitBody {commit} />
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
180
tests/components/atoms/CommitBody.test.ts
Normal file
180
tests/components/atoms/CommitBody.test.ts
Normal file
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue