forge/Anvil
1
0
Fork 0
Code Pull requests Activity

refactor: extract MainMenuDetails into component

Browse source 
This way, MainMenu is only responsible for aggregating the UI.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-07-11 12:19:25 +02:00
parent 26b3fc3ff0
commit 5d1bada084
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
9 changed files with 375 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/lib/components/molecules/MainMenu.svelte Normal file
View file

@ -0,0 +1,25 @@
<!--
Main menu 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 { _ } from 'svelte-i18n';
import MainMenuActions from '../atoms/MainMenuActions.svelte';
import MainMenuSummary from '../atoms/MainMenuSummary.svelte';
import MainMenuDetails from './MainMenuDetails.svelte';
</script>
<div class="flex flex-col gap-6 h-full px-8 py-6 bg-surface-50 border-surface-200">
<MainMenuSummary />
<MainMenuDetails />
<MainMenuActions />
</div>

101
src/lib/components/molecules/MainMenuDetails.svelte Normal file
View file

@ -0,0 +1,101 @@
<!--
Main menu details 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 { _ } from 'svelte-i18n';
import {
ChevronDown24,
Code24,
CommentDiscussion24,
FileDirectory24,
GitBranch24,
GitCommit24,
GitPullRequest24,
IssueOpened24,
ListUnordered24,
Person24,
PersonAdd24,
Repo24,
Tag24,
TriangleDown24
} from 'svelte-octicons';
</script>
<div class="flex -mx-2">
<div class="flex flex-1 gap-2 bg-surface-50 border-surface-300 drop-shadow p-2">
<Repo24 fill="currentColor" />
<span class="text-primary-600 semibold flex-1 self-center"> Project Name </span>
<TriangleDown24 fill="currentColor" />
</div>
</div>
<div class="flex flex-col -mt-6">
<div class="flex flex-col bg-white border-surface-300 rounded-border px-4">
<div class="flex gap-4 bg-white">
<Code24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.repository')}</span>
<ChevronDown24 fill="currentColor" />
</div>
<div class="flex flex-col ps-4">
<div class="flex gap-4 bg-white">
<FileDirectory24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.files')}</span>
</div>
<div class="flex gap-4 bg-white">
<GitBranch24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.branches')}</span>
</div>
<div class="flex gap-4 bg-white">
<GitCommit24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.commits')}</span>
</div>
<div class="flex gap-4 bg-white">
<Tag24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.tags')}</span>
</div>
</div>
<div class="flex gap-4 bg-white">
<IssueOpened24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.issues')}</span>
<span class="text-surface-500 text-center bg-secondary-200 rounded-full min-w-6">2</span>
</div>
<div class="flex gap-4 bg-white">
<GitPullRequest24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.merge_requests')}</span>
<span
class="text-surface-500 text-center bg-secondary-200 rounded-full min-w-6 self-baseline"
>2</span
>
</div>
<div class="flex gap-4 bg-white">
<Person24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.people')}</span>
<ChevronDown24 fill="currentColor" />
</div>
<div class="flex flex-col ps-4">
<div class="flex gap-4 bg-white">
<PersonAdd24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.roles')}</span>
</div>
<div class="flex gap-4 bg-white">
<CommentDiscussion24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.moderation')}</span>
</div>
</div>
<div class="flex gap-4 bg-white">
<ListUnordered24 fill="currentColor" />
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.overview')}</span>
<ChevronDown24 fill="currentColor" />
</div>
</div>
</div>

13
src/lib/i18n/locales/bg.json
View file

@ -101,6 +101,19 @@
"issues": "",
"notifications": "",
"prs": ""
},
"details": {
"branches": "",
"commits": "",
"files": "",
"issues": "",
"merge_requests": "",
"moderation": "",
"overview": "",
"people": "",
"repository": "",
"roles": "",
"tags": ""
}
},
"projects": {

13
src/lib/i18n/locales/de.json
View file

@ -101,6 +101,19 @@
"issues": "",
"notifications": "",
"prs": ""
},
"details": {
"branches": "",
"commits": "",
"files": "",
"issues": "",
"merge_requests": "",
"moderation": "",
"overview": "",
"people": "",
"repository": "",
"roles": "",
"tags": ""
}
},
"projects": {

13
src/lib/i18n/locales/en.json
View file

@ -101,6 +101,19 @@
"issues": "{number}{blockElementOpen}{number, plural, one{ issue} other{ issues}} open{blockElementClose}",
"notifications": "{number}{blockElementOpen} unread {number, plural, one{ notification} other{ notifications}}{blockElementClose}",
"prs": "{number}{blockElementOpen}{number, plural, one{ pull request} other{ pull requests}} open{blockElementClose}"
},
"details": {
"branches": "Branches",
"commits": "Commits",
"files": "Files",
"issues": "Issues",
"merge_requests": "Merge Requests",
"moderation": "Moderation",
"overview": "Overview",
"people": "People",
"repository": "Repository",
"roles": "Roles",
"tags": "Tags"
}
},
"projects": {

13
src/lib/i18n/locales/he.json
View file

@ -101,6 +101,19 @@
"issues": "",
"notifications": "",
"prs": ""
},
"details": {
"branches": "",
"commits": "",
"files": "",
"issues": "",
"merge_requests": "",
"moderation": "",
"overview": "",
"people": "",
"repository": "",
"roles": "",
"tags": ""
}
},
"projects": {

13
src/lib/i18n/locales/pl.json
View file

@ -101,6 +101,19 @@
"issues": "",
"notifications": "",
"prs": ""
},
"details": {
"branches": "",
"commits": "",
"files": "",
"issues": "",
"merge_requests": "",
"moderation": "",
"overview": "",
"people": "",
"repository": "",
"roles": "",
"tags": ""
}
},
"projects": {

26
stories/molecules/MainMenuDetails.stories.ts Normal file
View file

@ -0,0 +1,26 @@
/* Stories for MainMenuDetails 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 type { Meta, StoryObj } from '@storybook/svelte';
import MainMenuDetails from '$lib/components/molecules/MainMenuDetails.svelte';
const meta = {
title: 'Molecules/MainMenuDetails',
component: MainMenuDetails,
tags: ['autodocs']
} satisfies Meta<MainMenuDetails>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Plain: Story = {};

158
tests/components/molecules/MainMenuDetails.test.ts Normal file
View file

@ -0,0 +1,158 @@
/* Component test for MainMenuDetails 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 MainMenuDetails from '../../../src/lib/components/molecules/MainMenuDetails.svelte';
import enMessages from '../../../src/lib/i18n/locales/en.json';
describe('MainMenuDetails.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(MainMenuDetails);
// Assert
expect(container).toBeTruthy();
});
it('should have a project name', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText('Project Name')).toBeInTheDocument();
});
it('should have a repository item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.repository)).toBeInTheDocument();
});
it('should have a files item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.files)).toBeInTheDocument();
});
it('should have a branches item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.branches)).toBeInTheDocument();
});
it('should have a commits item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.commits)).toBeInTheDocument();
});
it('should have an issues item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.issues)).toBeInTheDocument();
});
it('should have a merge requests item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.merge_requests)).toBeInTheDocument();
});
it('should have a people item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.people)).toBeInTheDocument();
});
it('should have a roles item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.roles)).toBeInTheDocument();
});
it('should have a moderation item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.moderation)).toBeInTheDocument();
});
it('should have an overview item', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuDetails);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.details.overview)).toBeInTheDocument();
});
});