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

OZG-4321 cleanup; use own component for user-profile in header

parent 4d1a9686
Branches
Tags
No related merge requests found
Showing
with 168 additions and 73 deletions
......@@ -17,7 +17,14 @@
"tsConfig": "apps/admin/tsconfig.app.json",
"assets": ["apps/admin/src/favicon.ico", "apps/admin/src/assets"],
"styles": ["apps/admin/src/styles.scss"],
"scripts": []
"scripts": [],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/@angular",
"node_modules/include-media",
"node_modules/typeface-roboto"
]
}
},
"configurations": {
"production": {
......
......@@ -2,17 +2,18 @@
<header class="flex items-center justify-between bg-white p-6" data-test-id="admin-header">
<div class="text-ozgblue font-extrabold">OZG-Cloud Administration</div>
<div>
<p data-test-id="user-profile-initials">{{ currentUserInitials }}</p>
<button data-test-id="logout" (click)="authService.logout()">Logout</button>
<user-profile-button-container data-test-id="user-profile-button"></user-profile-button-container>
</div>
</header>
<div class="relative flex w-full flex-auto justify-center">
<div class="w-96 bg-slate-300 p-6"><nav></nav></div>
<div class="w-96 bg-slate-300 p-6">
<nav>
NAV
</nav>
</div>
<main class="flex-auto bg-slate-200 p-6">
<h2></h2>
<router-outlet></router-outlet>
</main>
</div>
<router-outlet></router-outlet>
<span data-test-id="build-version">Version: {{ apiRoot.buildVersion }}</span>
</ng-container>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { AuthService } from '../service/auth.service';
import {
Mock,
mock,
dispatchEventFromFixture,
existsAsHtmlElement,
notExistsAsHtmlElement,
} from '@alfa-client/test-utils';
import { AuthService } from '../common/auth/auth.service';
import { Mock, mock, existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
import { ApiRootService } from '@alfa-client/api-root-shared';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { createEmptyStateResource, createStateResource } from '@alfa-client/tech-shared';
import { of } from 'rxjs';
import { createApiRootResource } from 'libs/api-root-shared/test/api-root';
import { MockComponent } from 'ng-mocks';
import { UserProfileInHeaderComponent } from 'libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component';
import { PostfachMenuItemComponent } from '../pages/postfach/postfach-menu-item.component/postfach-menu-item.component';
import { UserProfileButtonContainerComponent } from '../common/user-profile-button-container/user-profile.button-container.component';
describe('AppComponent', () => {
let component: AppComponent;
......@@ -23,15 +18,18 @@ describe('AppComponent', () => {
const adminHeader: string = getDataTestIdOf('admin-header');
const buildVersion: string = getDataTestIdOf('build-version');
const userProfileInitials: string = getDataTestIdOf('user-profile-initials');
const logout: string = getDataTestIdOf('logout');
const userProfileButton: string = getDataTestIdOf('user-profile-button');
const authService: Mock<AuthService> = mock(AuthService);
const apiRootService: Mock<ApiRootService> = mock(ApiRootService);
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AppComponent, MockComponent(UserProfileInHeaderComponent)],
declarations: [
AppComponent,
MockComponent(UserProfileButtonContainerComponent),
MockComponent(PostfachMenuItemComponent),
],
imports: [RouterTestingModule],
providers: [
{
......@@ -52,16 +50,10 @@ describe('AppComponent', () => {
fixture.detectChanges();
});
it.skip('FIXME should render title', () => {
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Welcome admin');
});
it(`should have as title 'admin'`, () => {
const app = fixture.componentInstance;
const appTitle: string = fixture.componentInstance.title;
expect(app.title).toEqual('admin');
expect(appTitle).toEqual('admin');
});
describe('ngOnInit', () => {
......@@ -81,12 +73,6 @@ describe('AppComponent', () => {
});
describe('do after logged in', () => {
it('should call authService to getCurrentUserInitials', () => {
component.doAfterLoggedIn();
expect(authService.getCurrentUserInitials).toHaveBeenCalled();
});
it('should call apiRootService to getApiRoot', () => {
component.doAfterLoggedIn();
......@@ -101,19 +87,7 @@ describe('AppComponent', () => {
notExistsAsHtmlElement(fixture, adminHeader);
});
describe('user profile initials', () => {
beforeEach(() => {
component.apiRoot$ = of(createStateResource(createApiRootResource()));
});
it('should show if apiRoot exists', () => {
fixture.detectChanges();
existsAsHtmlElement(fixture, userProfileInitials);
});
});
describe('logout button', () => {
describe('user profile button', () => {
beforeEach(() => {
component.apiRoot$ = of(createStateResource(createApiRootResource()));
});
......@@ -121,14 +95,7 @@ describe('AppComponent', () => {
it('should show if apiRoot exists', () => {
fixture.detectChanges();
existsAsHtmlElement(fixture, logout);
});
it('should call authService logout on logoutEmitter event', () => {
fixture.detectChanges();
dispatchEventFromFixture(fixture, logout, 'click');
expect(authService.logout).toHaveBeenCalled();
existsAsHtmlElement(fixture, userProfileButton);
});
});
......
import { ApiRootService } from '@alfa-client/api-root-shared';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { AuthService } from '../service/auth.service';
import { StateResource } from '@alfa-client/tech-shared';
import { UserProfileResource } from '@alfa-client/user-profile-shared';
import { AuthService } from '../common/auth/auth.service';
@Component({
selector: 'app-root',
......@@ -14,8 +12,6 @@ export class AppComponent implements OnInit {
readonly title = 'admin';
public apiRoot$: Observable<any>;
public currentUserStateResource: StateResource<UserProfileResource>;
public currentUserInitials: string;
constructor(
public authService: AuthService,
......@@ -27,7 +23,6 @@ export class AppComponent implements OnInit {
}
doAfterLoggedIn(): void {
this.currentUserInitials = this.authService.getCurrentUserInitials();
this.apiRoot$ = this.apiRootService.getApiRoot();
}
}
import { ApiRootModule } from '@alfa-client/api-root-shared';
import { ENVIRONMENT_CONFIG, EnvironmentModule } from '@alfa-client/environment-shared';
import { CommonModule } from '@angular/common';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
......@@ -16,11 +16,11 @@ import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { initializeKeycloak } from './app.config';
import { appRoutes } from './app.routes';
import { UserProfileModule } from '@alfa-client/user-profile';
import { OAuthModule } from 'angular-oauth2-oidc';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UserProfileButtonContainerComponent } from '../common/user-profile-button-container/user-profile.button-container.component';
@NgModule({
declarations: [AppComponent],
declarations: [AppComponent, UserProfileButtonContainerComponent],
imports: [
CommonModule,
TestbtnComponent,
......@@ -35,13 +35,8 @@ import { OAuthModule } from 'angular-oauth2-oidc';
StoreModule.forRoot({}),
EffectsModule.forRoot(),
StoreRouterConnectingModule.forRoot(),
UserProfileModule,
//Wird aktuell wegen dem import vom ApiRootModule benoetigt
OAuthModule.forRoot({
resourceServer: {
sendAccessToken: true,
},
}),
FormsModule,
ReactiveFormsModule,
],
providers: [
{
......
......@@ -6,7 +6,7 @@ import { TOKEN_EXPIRED_TYPE } from './auth.const';
import { KeycloakProfile } from 'keycloak-js';
import { StateResource, createStateResource } from '@alfa-client/tech-shared';
import { UserProfileResource } from '@alfa-client/user-profile-shared';
import { createUserProfileResource } from '../../../../libs/user-profile-shared/test/user-profile';
import { createUserProfileResource } from '../../../../../libs/user-profile-shared/test/user-profile';
describe('AuthService', () => {
let service: AuthService;
......
<div class="dropdown">
<button (click)="showDropDown()" class="dropbtn" data-test-id="drop-down-button">{{ currentUserInitials }}</button>
<div id="myDropdown" class="dropdown-content">
<span style="cursor: pointer" (click)="authService.logout()" data-test-id="logout">Abmelden</span>
</div>
</div>
.dropbtn {
background-color: #666666;
color: white;
padding: 16px;
cursor: pointer;
border-radius: 30px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #666666;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
z-index: 1;
}
.show {
display: block;
}
import {
dispatchEventFromFixture,
getElementFromFixture,
mock,
Mock,
} from '@alfa-client/test-utils';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AuthService } from '../auth/auth.service';
import { UserProfileButtonContainerComponent } from './user-profile.button-container.component';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
describe('UserProfileButtonContainerComponent', () => {
let component: UserProfileButtonContainerComponent;
let fixture: ComponentFixture<UserProfileButtonContainerComponent>;
const authService: Mock<AuthService> = mock(AuthService);
const dropDownButton: string = getDataTestIdOf('drop-down-button');
const logout: string = getDataTestIdOf('logout');
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [UserProfileButtonContainerComponent],
imports: [RouterTestingModule],
providers: [
{
provide: AuthService,
useValue: authService,
},
],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UserProfileButtonContainerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('ngOnInit', () => {
it('should call authService to get current user initials', () => {
component.ngOnInit();
expect(authService.getCurrentUserInitials).toHaveBeenCalled();
});
});
describe('button', () => {
it('should call showDropDown on click', () => {
component.showDropDown = jest.fn();
dispatchEventFromFixture(fixture, dropDownButton, 'click');
expect(component.showDropDown).toHaveBeenCalled();
});
it('should show initials', () => {
const userInitials: string = 'AV';
component.currentUserInitials = userInitials;
fixture.detectChanges();
const buttonElement: HTMLElement = getElementFromFixture(fixture, dropDownButton);
expect(buttonElement.textContent).toEqual('AV');
});
});
describe('abmelden', () => {
it('should call authService logout', () => {
dispatchEventFromFixture(fixture, logout, 'click');
expect(authService.logout).toHaveBeenCalled();
});
});
});
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth/auth.service';
@Component({
selector: 'user-profile-button-container',
templateUrl: './user-profile-button-container.component.html',
styleUrls: ['./user-profile-button-container.component.scss'],
})
export class UserProfileButtonContainerComponent implements OnInit {
public currentUserInitials: string;
constructor(public authService: AuthService) {}
ngOnInit(): void {
this.currentUserInitials = this.authService.getCurrentUserInitials();
}
public showDropDown(): void {
document.getElementById('myDropdown').classList.toggle('show');
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment