OZG-7405 restore removed code

- Restore skipped tests.
- Add removed aria label to the new drop-down menu component.

alfa-client/libs/design-system/src/test-setup.ts

@@ -21,13 +21,11 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
+import '@testing-library/jest-dom';
 import 'jest-preset-angular/setup-jest';
 
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 getTestBed().resetTestEnvironment();
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {

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

@@ -25,6 +25,8 @@
 -->
 <ods-dropdown-menu
   buttonClass="rounded-full p-1 hover:bg-neutral-100 focus:bg-neutral-200 focus:outline-none dark:hover:bg-neutral-700 dark:focus:bg-neutral-600"
+  [label]="buttonLabel"
+  data-test-id="user-icon-dropdown-menu"
 >
   <alfa-user-icon
     button-content

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

@@ -21,10 +21,11 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { createEmptyStateResource, createStateResource } from '@alfa-client/tech-shared';
-import { getElementFromDomRoot, getElementFromFixture } from '@alfa-client/test-utils';
+import { createStateResource } from '@alfa-client/tech-shared';
+import { dispatchEventFromFixture, getElementComponentFromFixtureByCss, mock, useFromMock } from '@alfa-client/test-utils';
 import { UserIconComponent } from '@alfa-client/user-profile';
-import { UserProfileResource, getUserName } from '@alfa-client/user-profile-shared';
+import { getUserName, UserProfileResource } from '@alfa-client/user-profile-shared';
+import { EventEmitter } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -39,7 +40,7 @@ describe('UserProfileInHeaderComponent', () => {
   let fixture: ComponentFixture<UserProfileInHeaderComponent>;
 
   const logoutButton: string = getDataTestIdOf('logout-button');
-  const userIconButton: string = getDataTestIdOf('user-icon-button');
+  const userIconDropDownMenu: string = getDataTestIdOf('user-icon-dropdown-menu');
 
   const userProfile: UserProfileResource = createUserProfileResource();
 
@@ -59,6 +60,7 @@ describe('UserProfileInHeaderComponent', () => {
     fixture = TestBed.createComponent(UserProfileInHeaderComponent);
     component = fixture.componentInstance;
     component.currentUserResource = createStateResource(userProfile);
+    component.logoutEmitter = useFromMock(mock(EventEmitter<void>));
     fixture.detectChanges();
   });
 
@@ -83,34 +85,33 @@ describe('UserProfileInHeaderComponent', () => {
     });
   });
 
-  // TODO: Remove code. UI testing should be in E2E not in Unit Tests.
-  describe.skip('template', () => {
+  describe('template', () => {
     describe('click on logout button', () => {
       it('should emit logout event', () => {
-        jest.spyOn(component.logoutEmitter, 'emit');
-
-        getElementFromFixture(fixture, userIconButton).click();
-        getElementFromDomRoot(fixture, logoutButton).click();
+        dispatchEventFromFixture(fixture, logoutButton, 'itemClicked');
 
         expect(component.logoutEmitter.emit).toHaveBeenCalled();
       });
     });
 
-    describe('button', () => {
+    describe('user icon 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 buttonLabel: string = 'Benutzerkonto label';
+        jest.spyOn(component, 'buttonLabel', 'get').mockReturnValue(buttonLabel);
 
-        expect(button).toHaveAttribute('aria-label', expect.stringContaining(label));
+        fixture.detectChanges();
+
+        const abmeldenDropDownButton: DropdownMenuComponent = getElementComponentFromFixtureByCss(fixture, userIconDropDownMenu);
+        expect(abmeldenDropDownButton.label).toEqual(buttonLabel);
       });
 
       it('should not have user name inside aria label if no user loaded', () => {
-        const button: HTMLButtonElement = getElementFromFixture(fixture, userIconButton);
-        component.currentUserResource = createEmptyStateResource();
+        component.currentUserResource = null;
 
         fixture.detectChanges();
 
-        expect(button).toHaveAttribute('aria-label', expect.stringContaining('Benutzerkonto'));
+        const abmeldenDropDownButton: DropdownMenuComponent = getElementComponentFromFixtureByCss(fixture, userIconDropDownMenu);
+        expect(abmeldenDropDownButton.label).toEqual('Benutzerkonto');
       });
     });
   });