OZG-2626 OZG-2886 show email settings if link exists

goofy-client/libs/navigation/src/lib/header-container/header-container.component.ts

@@ -9,7 +9,6 @@ import { Observable } from 'rxjs';
   styleUrls: ['./header-container.component.scss']
 })
 export class HeaderContainerComponent {
-
 	navigationCollapse$: Observable<boolean>;
 
 	constructor(

goofy-client/libs/test-utils/src/lib/helper.ts

@@ -26,3 +26,7 @@ export function dispatchEventFromFixture(fixture: ComponentFixture<any>, element
 export function getDebugElementFromFixtureByCss(fixture: ComponentFixture<any>, query: string): DebugElement {
 	return fixture.debugElement.query(By.css(query));
 }
+
+export function getElementFromDomRoot(fixture: ComponentFixture<any>, htmlElement: string): any {
+	return fixture.nativeElement.parentNode.querySelector(htmlElement);
+}

goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-container.component.html

-<goofy-client-icon-button-with-spinner icon="settings" toolTip="Einstellungen"
+<goofy-client-icon-button-with-spinner icon="settings" toolTip="Einstellungen" data-test-id="user-settings-button"
 	[matMenuTriggerFor]="settingsMenu">
 </goofy-client-icon-button-with-spinner>
 
-<mat-menu #settingsMenu="matMenu">
+<mat-menu #settingsMenu="matMenu" data-test-id="user-settings-menu">
 	<div class="menu-container" (click)="$event.stopPropagation()">
-		<goofy-client-user-settings-email-benachrichtigung
-			[userSettings$]="userSettings$"
+		<ng-container *ngIf="apiRoot$ | async as apiRoot">
+			<goofy-client-user-settings-email-benachrichtigung data-test-id="user-settings-email-benachrichtigung"
+				*ngIf="apiRoot.resource | hasLink: apiRootLinkRel.CURRENT_USER"
+				[userSettings]="userSettings$ | async"
 				(valueChanged)="changeNotificationsSendFor($event)"
 			></goofy-client-user-settings-email-benachrichtigung>
-		<goofy-client-user-settings-darkmode
+		</ng-container>
+		<goofy-client-user-settings-darkmode data-test-id="user-settings-dark-mode"
 			[darkMode$]="darkMode$"
 			(darkModeEmitter)="changeColorMode($event)"
 		></goofy-client-user-settings-darkmode>

goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-container.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ApiRootFacade, ApiRootLinkRel } from '@goofy-client/api-root-shared';
 import { AppService } from '@goofy-client/app-shared';
-import { mock } from '@goofy-client/test-utils';
+import { createStateResource, HasLinkPipe } from '@goofy-client/tech-shared';
+import { getElementFromDomRoot, mock } from '@goofy-client/test-utils';
 import { IconButtonWithSpinnerComponent } from '@goofy-client/ui';
 import { UserSettingsService } from '@goofy-client/user-settings-shared';
+import { createApiRootResource } from 'libs/api-root-shared/test/api-root';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { NotificationsSendFor } from 'libs/user-settings-shared/src/lib/user-settings.model';
 import { MockComponent } from 'ng-mocks';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
 import { UserSettingsContainerComponent } from './user-settings-container.component';
 import { UserSettingsDarkmodeComponent } from './user-settings-darkmode/user-settings-darkmode.component';
 import { UserSettingsEmailBenachrichtigungComponent } from './user-settings-email-benachrichtigung/user-settings-email-benachrichtigung.component';
@@ -14,15 +20,27 @@ import { UserSettingsEmailBenachrichtigungComponent } from './user-settings-emai
 describe('UserSettingsContainerComponent', () => {
 	let component: UserSettingsContainerComponent;
 	let fixture: ComponentFixture<UserSettingsContainerComponent>;
+	let menuButtonElement;
 
 	const darkModeSubj: BehaviorSubject<boolean> = new BehaviorSubject(false);
 	const appService = { ...mock(AppService), getDarkMode: () => darkModeSubj };
 	const userSettingsService = { ...mock(UserSettingsService), setUserSettings: jest.fn() };
+	const apiRootFacade = { ...mock(ApiRootFacade), getApiRoot: jest.fn() };
+
+	// const menu: string = getDataTestIdOf('user-settings-menu');
+	const menuButton = getDataTestIdOf('user-settings-button');
+	const emailBenachrichtigung: string = getDataTestIdOf('user-settings-email-benachrichtigung');
+	const darkMode: string = getDataTestIdOf('user-settings-dark-mode');
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-			imports: [MatMenuModule],
+			imports: [
+				NoopAnimationsModule,
+				MatButtonModule,
+				MatMenuModule
+			],
 			declarations: [
+				HasLinkPipe,
 				UserSettingsContainerComponent,
 				MockComponent(UserSettingsDarkmodeComponent),
 				MockComponent(UserSettingsEmailBenachrichtigungComponent),
@@ -36,6 +54,10 @@ describe('UserSettingsContainerComponent', () => {
 				{
 					provide: UserSettingsService,
 					useValue: userSettingsService
+				},
+				{
+					provide: ApiRootFacade,
+					useValue: apiRootFacade
 				}
 			],
 		});
@@ -44,13 +66,27 @@ describe('UserSettingsContainerComponent', () => {
 	beforeEach(() => {
 		fixture = TestBed.createComponent(UserSettingsContainerComponent);
 		component = fixture.componentInstance;
-		fixture.detectChanges();
+		fixture.autoDetectChanges(true);
+		menuButtonElement = fixture.nativeElement.querySelector(menuButton);
 	});
 
 	it('should create', () => {
 		expect(component).toBeTruthy();
 	});
 
+	describe('settings menu', () => {
+		it('should not have the menu open', async () => {
+		  const menu = getElementFromDomRoot(fixture, '.mat-menu-panel');
+		  expect(menu).toBeFalsy();
+		});
+
+		it('open the menu when clicking on the account button', async () => {
+		  menuButtonElement.click();
+		  const menu = getElementFromDomRoot(fixture, '.mat-menu-panel');
+		  expect(menu).toBeTruthy();
+		});
+	})
+
 	describe('change color mode', () => {
 
 		it('should call app service', () => {
@@ -60,6 +96,32 @@ describe('UserSettingsContainerComponent', () => {
 		})
 	})
 
+	describe('Toggle for "notifications send for"', () => {
+		it('should call apiRootFacade to get apiRoot', () => {
+			component.ngOnInit();
+
+			expect(apiRootFacade.getApiRoot).toHaveBeenCalled();
+		})
+
+		it('should show if link exists', () => {
+			component.apiRoot$ = of(createStateResource(createApiRootResource([ApiRootLinkRel.CURRENT_USER])));
+
+			menuButtonElement.click();
+			const element = getElementFromDomRoot(fixture, emailBenachrichtigung);
+
+			expect(element).toBeInTheDocument();
+		})
+
+		it('should hide if link not exists', () => {
+			component.apiRoot$ = of(createStateResource(createApiRootResource()));
+
+			menuButtonElement.click();
+			const element = getElementFromDomRoot(fixture, emailBenachrichtigung);
+
+			expect(element).not.toBeInTheDocument();
+		})
+	})
+
 	describe('change notifications send for', () => {
 
 		it('should call service with ALL', () => {
@@ -74,4 +136,13 @@ describe('UserSettingsContainerComponent', () => {
 			expect(userSettingsService.setUserSettings).toHaveBeenCalledWith({ notificationsSendFor: NotificationsSendFor.NONE });
 		})
 	})
+
+	describe('Toggle for "Dark mode"', () => {
+		it('should be visible', () => {
+			menuButtonElement.click();
+			const element = getElementFromDomRoot(fixture, darkMode);
+
+			expect(element).toBeInstanceOf(HTMLElement);
+		})
+	})
 });

goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-container.component.ts

 import { DOCUMENT } from '@angular/common';
 import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
+import { ApiRootFacade, ApiRootLinkRel, ApiRootResource } from '@goofy-client/api-root-shared';
 import { AppService, localStorageDark } from '@goofy-client/app-shared';
-import { StateResource } from '@goofy-client/tech-shared';
+import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared';
 import { UserSettingsService } from '@goofy-client/user-settings-shared';
 import { NotificationsSendFor, UserSettings, UserSettingsResource } from 'libs/user-settings-shared/src/lib/user-settings.model';
 import { Observable, of } from 'rxjs';
@@ -14,11 +15,15 @@ import { Observable, of } from 'rxjs';
 export class UserSettingsContainerComponent implements OnInit {
 	darkMode$: Observable<boolean> = of(true);
 	userSettings$: Observable<StateResource<UserSettingsResource>>;
+	apiRoot$: Observable<StateResource<ApiRootResource>> = of(createEmptyStateResource<ApiRootResource>());
+
+	readonly apiRootLinkRel = ApiRootLinkRel;
 
 	constructor(
 		private renderer: Renderer2,
 		private appService: AppService,
 		private userSettingsService: UserSettingsService,
+		private apiRootFacade: ApiRootFacade,
 		@Inject(DOCUMENT) private document: Document
 	) {
 		this.darkMode$ = this.appService.getDarkMode();
@@ -28,6 +33,7 @@ export class UserSettingsContainerComponent implements OnInit {
 
 	ngOnInit(): void {
 		this.userSettings$ = this.userSettingsService.getUserSettings();
+		this.apiRoot$ = this.apiRootFacade.getApiRoot();
 	}
 
 	private subscribeToDarkMode(): void {

goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-email-benachrichtigung/user-settings-email-benachrichtigung.component.html

-<ng-container *ngIf="(userSettings$ | async)?.resource as userSettings">
+<ng-container *ngIf="userSettings.resource">
 	<mat-slide-toggle data-test-id="toggle-notifications-send-for"
 		color="primary"
 		matTooltip="Benachrichtigung per E-Mail bei Eingang eines Antrags"
-		[checked]="getToggleStatus(userSettings)"
+		[checked]="getToggleStatus(userSettings.resource)"
 		(change)="valueChanged.emit($event.checked)">Benachrichtigung per E-Mail
 	</mat-slide-toggle>
 </ng-container>
\ No newline at end of file

goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-email-benachrichtigung/user-settings-email-benachrichtigung.component.spec.ts

@@ -8,7 +8,6 @@ import { dispatchEventFromFixture, mock } from '@goofy-client/test-utils';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { NotificationsSendFor } from 'libs/user-settings-shared/src/lib/user-settings.model';
 import { createUserSettings, createUserSettingsResource } from 'libs/user-settings-shared/test/user-settings';
-import { of } from 'rxjs';
 import { EventEmitter } from 'stream';
 import { UserSettingsEmailBenachrichtigungComponent } from './user-settings-email-benachrichtigung.component';
 
@@ -29,7 +28,7 @@ describe('UserSettingsEmailBenachrichtigungComponent', () => {
 			UserSettingsEmailBenachrichtigungComponent
 		);
 		component = fixture.componentInstance;
-		component.userSettings$ = of(createStateResource(createUserSettingsResource()));
+		component.userSettings = createStateResource(createUserSettingsResource());
 		component.valueChanged = { ...<any>mock(EventEmitter), emit: jest.fn() };
 		fixture.detectChanges();
 	});

goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-email-benachrichtigung/user-settings-email-benachrichtigung.component.ts

 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { StateResource } from '@goofy-client/tech-shared';
+import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared';
 import { NotificationsSendFor, UserSettings, UserSettingsResource } from '@goofy-client/user-settings-shared';
-import { Observable } from 'rxjs';
 
 @Component({
 	selector: 'goofy-client-user-settings-email-benachrichtigung',
@@ -9,7 +8,7 @@ import { Observable } from 'rxjs';
 	styleUrls: ['./user-settings-email-benachrichtigung.component.scss'],
 })
 export class UserSettingsEmailBenachrichtigungComponent {
-	@Input() userSettings$: Observable<StateResource<UserSettingsResource>>;
+	@Input() userSettings: StateResource<UserSettingsResource> = createEmptyStateResource<UserSettingsResource>();
 	@Output() valueChanged: EventEmitter<boolean> = new EventEmitter();
 
 	public getToggleStatus(userSettings: UserSettings): boolean {

goofy-client/libs/user-settings/src/test-setup.ts

+import '@testing-library/jest-dom';
 import 'jest-preset-angular/setup-jest';
 
 import { getTestBed } from '@angular/core/testing';
 import {
 	BrowserDynamicTestingModule,
-	platformBrowserDynamicTesting,
+	platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
 getTestBed().resetTestEnvironment();