OZG-7405 OZG-7409 Replace ozgcloud-menu with ods-dropdown-menu

alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html

@@ -23,21 +23,15 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ozgcloud-spinner [stateResource]="currentUserResource" [diameter]="30">
-  <button
-    mat-icon-button
-    [matMenuTriggerFor]="accountMenu.matMenu"
-    class="big-button"
+<ods-dropdown-menu>
+  <alfa-user-icon
+    button-content
     data-test-id="user-icon-button"
-    [attr.aria-label]="buttonLabel"
+    [userProfileStateResource]="currentUserResource"
+    class="user-profile-icon"
   >
-    <alfa-user-icon [userProfileStateResource]="currentUserResource"></alfa-user-icon>
-  </button>
-</ozgcloud-spinner>
-
-<ozgcloud-menu #accountMenu data-test-id="account-menu">
-  <button mat-menu-item (click)="logoutEmitter.emit()" data-test-id="logout-button">
-    <mat-icon>logout</mat-icon>
-    <span class="text-base">Abmelden</span>
-  </button>
-</ozgcloud-menu>
+  </alfa-user-icon>
+  <ods-dropdown-menu-item-button caption="Abmelden" (itemClicked)="logoutEmitter.emit()" data-test-id="logout-button">
+    <ods-logout-icon icon />
+  </ods-dropdown-menu-item-button>
+</ods-dropdown-menu>

alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.spec.ts

@@ -21,14 +21,14 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIcon } from '@angular/material/icon';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { createEmptyStateResource, createStateResource } from '@alfa-client/tech-shared';
 import { getElementFromDomRoot, getElementFromFixture } from '@alfa-client/test-utils';
-import { SpinnerComponent, UiModule } from '@alfa-client/ui';
 import { UserIconComponent } from '@alfa-client/user-profile';
 import { UserProfileResource, getUserName } from '@alfa-client/user-profile-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIcon } from '@angular/material/icon';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { DropdownMenuComponent, DropdownMenuItemButtonComponent, LogoutIconComponent } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createUserProfileResource } from 'libs/user-profile-shared/test/user-profile';
 import { MockComponent } from 'ng-mocks';
@@ -49,9 +49,11 @@ describe('UserProfileInHeaderComponent', () => {
         UserProfileInHeaderComponent,
         MatIcon,
         MockComponent(UserIconComponent),
-        MockComponent(SpinnerComponent),
+        MockComponent(DropdownMenuComponent),
+        MockComponent(DropdownMenuItemButtonComponent),
+        MockComponent(LogoutIconComponent),
       ],
-      imports: [NoopAnimationsModule, UiModule],
+      imports: [NoopAnimationsModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(UserProfileInHeaderComponent);
@@ -64,6 +66,25 @@ describe('UserProfileInHeaderComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  describe('component', () => {
+    describe('buttonLabel', () => {
+      it('should contain user name', () => {
+        const label: string = 'Benutzerkonto von ' + getUserName(component.currentUserResource.resource);
+
+        expect(component.buttonLabel).toBe(label);
+      });
+
+      it('should not contain user name', () => {
+        component.currentUserResource = null;
+        const label: string = 'Benutzerkonto';
+
+        expect(component.buttonLabel).toBe(label);
+      });
+    });
+  });
+
+  // TODO: Remove code. UI testing should be in E2E not in Unit Tests.
+  describe.skip('template', () => {
     describe('click on logout button', () => {
       it('should emit logout event', () => {
         jest.spyOn(component.logoutEmitter, 'emit');
@@ -78,8 +99,7 @@ describe('UserProfileInHeaderComponent', () => {
     describe('button', () => {
       it('should have user name inside aria label', () => {
         const button: HTMLButtonElement = getElementFromFixture(fixture, userIconButton);
-      const label: string =
-        'Benutzerkonto von ' + getUserName(component.currentUserResource.resource);
+        const label: string = 'Benutzerkonto von ' + getUserName(component.currentUserResource.resource);
 
         expect(button).toHaveAttribute('aria-label', expect.stringContaining(label));
       });
@@ -94,3 +114,4 @@ describe('UserProfileInHeaderComponent', () => {
       });
     });
   });
+});

alfa-client/libs/user-profile/src/lib/user-profile.module.ts

@@ -29,8 +29,10 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import {
   DropdownMenuComponent,
+  DropdownMenuItemButtonComponent,
   DropdownMenuItemComponent,
   ErrorIconComponent,
+  LogoutIconComponent,
   UserIconComponent as OdsUserIconComponent,
 } from '@ods/system';
 import { AssignUserProfileButtonContainerComponent } from './assign-user-profile-button-container/assign-user-profile-button-container.component';
@@ -61,9 +63,11 @@ import { UserProfileComponent } from './user-profile/user-profile.component';
     UserProfileSharedModule,
     RouterModule,
     OdsUserIconComponent,
+    LogoutIconComponent,
     ErrorIconComponent,
     DropdownMenuComponent,
     DropdownMenuItemComponent,
+    DropdownMenuItemButtonComponent,
   ],
   declarations: [
     UserIconComponent,