From e52d5255641c568d6f0f289d5eaee2892fe2f393 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 5 Sep 2024 16:15:11 +0200
Subject: [PATCH] OZG-6108 Use new components for nav bar
---
.../apps/admin/src/app/app.component.html | 16 +++++++-----
.../apps/admin/src/app/app.component.spec.ts | 26 ++++++++++++++-----
alfa-client/apps/admin/src/app/app.module.ts | 8 ++++++
alfa-client/libs/design-system/src/index.ts | 2 ++
.../nav-item/nav-item.component.spec.ts | 24 +++++++++++++++++
.../lib/navbar/nav-item/nav-item.component.ts | 5 ++--
.../src/lib/navbar/navbar/navbar.stories.ts | 1 +
7 files changed, 68 insertions(+), 14 deletions(-)
diff --git a/alfa-client/apps/admin/src/app/app.component.html b/alfa-client/apps/admin/src/app/app.component.html
index adbd608ba8..66f83dc085 100644
--- a/alfa-client/apps/admin/src/app/app.component.html
+++ b/alfa-client/apps/admin/src/app/app.component.html
@@ -16,12 +16,16 @@
></user-profile-button-container>
</header>
<div class="flex h-screen w-full justify-center overflow-y-auto">
- <nav class="h-full w-72 bg-slate-100 p-4">
- <admin-navigation
- *ngIf="apiRoot | hasLink: ApiRootLinkRel.CONFIGURATION"
- data-test-id="navigation"
- ></admin-navigation>
- </nav>
+ <ods-navbar data-test-id="navigation">
+ <ng-container *ngIf="apiRoot | hasLink: ApiRootLinkRel.CONFIGURATION">
+ <ods-nav-item caption="Organisationseinheiten" to="/organisationseinheiten">
+ <ods-orga-unit-icon icon />
+ </ods-nav-item>
+ <ods-nav-item caption="Postfach" to="/postfach">
+ <ods-mailbox-icon icon />
+ </ods-nav-item>
+ </ng-container>
+ </ods-navbar>
<main class="flex-1 overflow-y-auto bg-white px-6 py-4">
<router-outlet
*ngIf="
diff --git a/alfa-client/apps/admin/src/app/app.component.spec.ts b/alfa-client/apps/admin/src/app/app.component.spec.ts
index d46fcd163a..9dc1460ef4 100644
--- a/alfa-client/apps/admin/src/app/app.component.spec.ts
+++ b/alfa-client/apps/admin/src/app/app.component.spec.ts
@@ -14,7 +14,13 @@ import {
} from '@alfa-client/test-utils';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router, RouterOutlet } from '@angular/router';
-import { AdminLogoIconComponent } from '@ods/system';
+import {
+ AdminLogoIconComponent,
+ MailboxIconComponent,
+ NavItemComponent,
+ NavbarComponent,
+ OrgaUnitIconComponent,
+} from '@ods/system';
import { AuthenticationService } from 'authentication';
import { NavigationComponent } from 'libs/admin-settings/src/lib/navigation/navigation.component';
import { createApiRootResource } from 'libs/api-root-shared/test/api-root';
@@ -50,8 +56,12 @@ describe('AppComponent', () => {
AppComponent,
MockComponent(NavigationComponent),
MockComponent(AdminLogoIconComponent),
+ MockComponent(OrgaUnitIconComponent),
+ MockComponent(MailboxIconComponent),
MockComponent(UserProfileButtonContainerComponent),
MockComponent(UnavailablePageComponent),
+ MockComponent(NavbarComponent),
+ MockComponent(NavItemComponent),
HasLinkPipe,
MockDirective(RouterOutlet),
],
@@ -149,20 +159,24 @@ describe('AppComponent', () => {
describe('navigation', () => {
beforeEach(() => {});
- it('should exist if configuration link exists', () => {
+ it('should show links if configuration link exists', () => {
component.apiRootStateResource$ = of(
createStateResource(createApiRootResource([ApiRootLinkRel.CONFIGURATION])),
);
-
fixture.detectChanges();
- existsAsHtmlElement(fixture, navigationSelector);
+ const navbarElement: HTMLElement = getElementFromFixture(fixture, navigationSelector);
+
+ expect(navbarElement.children.length).toBeGreaterThan(0);
});
- it('should not exist if configuration resource not available', () => {
+ it('should not not show links if configuration resource not available', () => {
+ component.apiRootStateResource$ = of(createStateResource(createApiRootResource([])));
fixture.detectChanges();
- notExistsAsHtmlElement(fixture, navigationSelector);
+ const navbarElement: HTMLElement = getElementFromFixture(fixture, navigationSelector);
+
+ expect(navbarElement.children.length).toBe(0);
});
});
diff --git a/alfa-client/apps/admin/src/app/app.module.ts b/alfa-client/apps/admin/src/app/app.module.ts
index 425e65dea5..0c4fd5127e 100644
--- a/alfa-client/apps/admin/src/app/app.module.ts
+++ b/alfa-client/apps/admin/src/app/app.module.ts
@@ -16,6 +16,10 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import {
AdminLogoIconComponent,
LogoutIconComponent,
+ MailboxIconComponent,
+ NavItemComponent,
+ NavbarComponent,
+ OrgaUnitIconComponent,
PopupComponent,
PopupListItemComponent,
} from '@ods/system';
@@ -42,7 +46,11 @@ import { appRoutes } from './app.routes';
AdminLogoIconComponent,
PopupComponent,
PopupListItemComponent,
+ NavItemComponent,
+ NavbarComponent,
+ OrgaUnitIconComponent,
LogoutIconComponent,
+ MailboxIconComponent,
RouterModule.forRoot(appRoutes),
BrowserModule,
BrowserAnimationsModule,
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 96f436e7bc..8adc00f2d8 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -20,7 +20,9 @@ export * from './lib/icons/exclamation-icon/exclamation-icon.component';
export * from './lib/icons/file-icon/file-icon.component';
export * from './lib/icons/iconVariants';
export * from './lib/icons/logout-icon/logout-icon.component';
+export * from './lib/icons/mailbox-icon/mailbox-icon.component';
export * from './lib/icons/office-icon/office-icon.component';
+export * from './lib/icons/orga-unit-icon/orga-unit-icon.component';
export * from './lib/icons/save-icon/save-icon.component';
export * from './lib/icons/search-icon/search-icon.component';
export * from './lib/icons/send-icon/send-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
index 40e017cc07..d28fcaa589 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
@@ -1,13 +1,26 @@
+import { getElementFromFixture, Mock, mock } from '@alfa-client/test-utils';
+import { importProvidersFrom } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router, RouterModule } from '@angular/router';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { NavItemComponent } from './nav-item.component';
describe('NavItemComponent', () => {
let component: NavItemComponent;
let fixture: ComponentFixture<NavItemComponent>;
+ const router: Mock<Router> = mock(Router);
+
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [NavItemComponent],
+ providers: [
+ {
+ provide: Router,
+ useValue: router,
+ },
+ importProvidersFrom(RouterModule.forRoot([])),
+ ],
}).compileComponents();
fixture = TestBed.createComponent(NavItemComponent);
@@ -18,4 +31,15 @@ describe('NavItemComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ describe('routerLink', () => {
+ it('should set href', () => {
+ component.to = '/';
+ fixture.detectChanges();
+
+ const linkElement = getElementFromFixture(fixture, getDataTestIdOf('link-to-/'));
+
+ expect(linkElement).toHaveProperty('href');
+ });
+ });
});
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
index d0500aeedb..f78a872978 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
@@ -1,11 +1,11 @@
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterLink, RouterLinkActive } from '@angular/router';
@Component({
selector: 'ods-nav-item',
standalone: true,
- imports: [CommonModule, RouterModule],
+ imports: [CommonModule, RouterLink, RouterLinkActive],
template: `<a
[routerLink]="to"
routerLinkActive="bg-selected-light border-selected"
@@ -15,6 +15,7 @@ import { RouterModule } from '@angular/router';
'outline-2 outline-offset-4 outline-focus focus-visible:border-background-200',
]"
role="menuitem"
+ [attr.data-test-id]="'link-to-' + to"
>
<ng-content select="[icon]" />
<p class="text-left text-sm text-text">{{ caption }}</p>
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
index 75c8278d68..fa5b213b2e 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
@@ -36,6 +36,7 @@ export const Default: Story = {
template: `<ods-navbar>
<ods-nav-item caption="First link" to="/"><ods-office-icon icon /></ods-nav-item>
<ods-nav-item caption="Second link" to="/second"><ods-office-icon icon /></ods-nav-item>
+ <hr />
<ods-nav-item caption="Third link" to="/third"><ods-office-icon icon /></ods-nav-item>
</ods-navbar>`,
}),
--
GitLab