Skip to content
Snippets Groups Projects
Commit e52d5255 authored by OZGCloud's avatar OZGCloud
Browse files

OZG-6108 Use new components for nav bar

parent 21062981
Branches
Tags
No related merge requests found
......@@ -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="
......
......@@ -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);
});
});
......
......@@ -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,
......
......@@ -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';
......
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');
});
});
});
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>
......
......@@ -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>`,
}),
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment