user-profile-in-header.component.spec.ts

/*
 * Copyright (C) 2023 Das Land Schleswig-Holstein vertreten durch den
 * Ministerpräsidenten des Landes Schleswig-Holstein
 * Staatskanzlei
 * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
 *
 * Lizenziert unter der EUPL, Version 1.2 oder - sobald
 * diese von der Europäischen Kommission genehmigt wurden -
 * Folgeversionen der EUPL ("Lizenz");
 * Sie dürfen dieses Werk ausschließlich gemäß
 * dieser Lizenz nutzen.
 * Eine Kopie der Lizenz finden Sie hier:
 *
 * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
 *
 * Sofern nicht durch anwendbare Rechtsvorschriften
 * gefordert oder in schriftlicher Form vereinbart, wird
 * die unter der Lizenz verbreitete Software "so wie sie
 * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
 * ausdrücklich oder stillschweigend - verbreitet.
 * Die sprachspezifischen Genehmigungen und Beschränkungen
 * unter der Lizenz sind dem Lizenztext zu entnehmen.
 */
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 { 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';
import { DropdownMenuButtonItemComponent, DropdownMenuComponent, LogoutIconComponent } from '@ods/system';
import { getDataTestIdAttributeOf, getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { createUserProfileResource } from 'libs/user-profile-shared/test/user-profile';
import { MockComponent } from 'ng-mocks';
import { UserProfileInHeaderComponent } from './user-profile-in-header.component';

describe('UserProfileInHeaderComponent', () => {
  let component: UserProfileInHeaderComponent;
  let fixture: ComponentFixture<UserProfileInHeaderComponent>;

  const logoutButton: string = getDataTestIdAttributeOf('logout-button');
  const userIconDropDownMenu: string = getDataTestIdOf('user-icon-dropdown-menu');

  const userProfile: UserProfileResource = createUserProfileResource();

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        UserProfileInHeaderComponent,
        MatIcon,
        MockComponent(UserIconComponent),
        MockComponent(DropdownMenuComponent),
        MockComponent(DropdownMenuButtonItemComponent),
        MockComponent(LogoutIconComponent),
      ],
      imports: [NoopAnimationsModule],
    }).compileComponents();

    fixture = TestBed.createComponent(UserProfileInHeaderComponent);
    component = fixture.componentInstance;
    component.currentUserResource = createStateResource(userProfile);
    component.logoutEmitter = useFromMock(mock(EventEmitter<void>));
    fixture.detectChanges();
  });

  it('should create', () => {
    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);
      });
    });
  });

  describe('template', () => {
    describe('click on logout button', () => {
      it('should emit logout event', () => {
        dispatchEventFromFixture(fixture, logoutButton, 'itemClicked');

        expect(component.logoutEmitter.emit).toHaveBeenCalled();
      });
    });

    describe('user icon button', () => {
      it('should have user name inside aria label', () => {
        const buttonLabel: string = 'Benutzerkonto label';
        jest.spyOn(component, 'buttonLabel', 'get').mockReturnValue(buttonLabel);

        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', () => {
        component.currentUserResource = null;

        fixture.detectChanges();

        const abmeldenDropDownButton: DropdownMenuComponent = getElementComponentFromFixtureByCss(fixture, userIconDropDownMenu);
        expect(abmeldenDropDownButton.label).toEqual('Benutzerkonto');
      });
    });
  });
});