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

OZG-2626 OZG-2866 refactor user-settings-container

parent f6ba88d2
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 286 additions and 226 deletions
goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-container.component.html
+ 1
− 19
View file @ e5de12a0
<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">
<div class="menu-container" (click)="$event.stopPropagation()">
<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>
</ng-container>
<goofy-client-user-settings-darkmode data-test-id="user-settings-dark-mode"
[darkMode$]="darkMode$"
(darkModeEmitter)="changeColorMode($event)"
></goofy-client-user-settings-darkmode>
</div>
</mat-menu>
<goofy-client-user-settings [apiRoot]="apiRoot$ | async"></goofy-client-user-settings>
\ No newline at end of file
goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-container.component.scss
+ 0
− 8
View file @ e5de12a0
.menu-container {
margin: 12px 16px;
}
goofy-client-icon-button-with-spinner,
mat-slide-toggle {
display: block;
}
goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-container.component.spec.ts
+ 7
− 94
View file @ e5de12a0
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 { createStateResource, HasLinkPipe } from '@goofy-client/tech-shared';
import { getElementFromDomRoot, getElementFromFixture, 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 { ApiRootFacade } from '@goofy-client/api-root-shared';
import { Mock, mock } from '@goofy-client/test-utils';
import { MockComponent } from 'ng-mocks';
import { BehaviorSubject, of } from 'rxjs';
import { UserSettingsComponent } from '../user-settings/user-settings.component';
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';
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 menuButton = getDataTestIdOf('user-settings-button');
const emailBenachrichtigung: string = getDataTestIdOf('user-settings-email-benachrichtigung');
const darkMode: string = getDataTestIdOf('user-settings-dark-mode');
const apiRootFacade: Mock<ApiRootFacade> = { ...mock(ApiRootFacade), getApiRoot: jest.fn() };
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
NoopAnimationsModule,
MatButtonModule,
MatMenuModule
],
declarations: [
HasLinkPipe,
UserSettingsContainerComponent,
MockComponent(UserSettingsDarkmodeComponent),
MockComponent(UserSettingsEmailBenachrichtigungComponent),
MockComponent(IconButtonWithSpinnerComponent)
MockComponent(UserSettingsComponent)
],
providers: [
{
provide: AppService,
useValue: appService,
},
{
provide: UserSettingsService,
useValue: userSettingsService
},
{
provide: ApiRootFacade,
useValue: apiRootFacade
......@@ -66,69 +30,18 @@ describe('UserSettingsContainerComponent', () => {
fixture = TestBed.createComponent(UserSettingsContainerComponent);
component = fixture.componentInstance;
fixture.autoDetectChanges(true);
menuButtonElement = getElementFromFixture(fixture, menuButton);
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('change color mode', () => {
it('should call app service', () => {
component.changeColorMode(true);
expect(appService.setDarkMode).toHaveBeenCalledWith(true);
})
})
describe('ngOnInit', () => {
describe('Toggle for "notifications send for"', () => {
it('should call apiRootFacade to get apiRoot', () => {
it('should call apiRoot facade', () => {
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', () => {
component.changeNotificationsSendFor(true);
expect(userSettingsService.setUserSettings).toHaveBeenCalledWith({ notificationsSendFor: NotificationsSendFor.ALL });
})
it('should call service with NONE', () => {
component.changeNotificationsSendFor(false);
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
+ 4
− 51
View file @ e5de12a0
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 { Component, OnInit } from '@angular/core';
import { ApiRootFacade, ApiRootResource } from '@goofy-client/api-root-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';
@Component({
......@@ -13,55 +9,12 @@ import { Observable, of } from 'rxjs';
styleUrls: ['./user-settings-container.component.scss'],
})
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();
apiRoot$: Observable<StateResource<ApiRootResource>> = of(createEmptyStateResource<ApiRootResource>());
this.subscribeToDarkMode();
}
constructor(private apiRootFacade: ApiRootFacade) { }
ngOnInit(): void {
this.userSettings$ = this.userSettingsService.getUserSettings();
this.apiRoot$ = this.apiRootFacade.getApiRoot();
}
private subscribeToDarkMode(): void {
this.darkMode$.subscribe((darkMode) =>
darkMode
? this.addClass(localStorageDark)
: this.removeClass(localStorageDark)
);
}
private addClass(styleClass: string): void {
this.renderer.addClass(this.document.body, styleClass);
}
private removeClass(styleClass: string): void {
this.renderer.removeClass(this.document.body, styleClass);
}
changeColorMode(darkMode: boolean): void {
this.appService.setDarkMode(darkMode);
}
changeNotificationsSendFor(toggleValue: boolean): void {
this.userSettingsService.setUserSettings(this.createUserSettings(toggleValue));
}
private createUserSettings(toggleValue: boolean): UserSettings {
const notificationsSendFor: NotificationsSendFor = toggleValue ? NotificationsSendFor.ALL : NotificationsSendFor.NONE;
return { notificationsSendFor };
}
}
\ No newline at end of file
goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-darkmode/user-settings-darkmode.component.html
+ 6
− 6
View file @ e5de12a0
<mat-slide-toggle
color="primary"
[checked]="darkMode$ | async"
(change)="darkModeEmitter.emit($event.checked)"
>Dark Mode
</mat-slide-toggle>
<goofy-client-slide-toggle data-test-id="toggle-dark-mode"
label="Dark Mode"
[checked]="darkMode"
(valueChanged)="valueChanged.emit($event)">
</goofy-client-slide-toggle>
goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-darkmode/user-settings-darkmode.component.scss
+ 3
− 0
View file @ e5de12a0
goofy-client-slide-toggle {
display: block;
}
\ No newline at end of file
goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-darkmode/user-settings-darkmode.component.spec.ts
+ 6
− 3
View file @ e5de12a0
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UiModule } from '@goofy-client/ui';
import { SlideToggleComponent } from 'libs/ui/src/lib/ui/slide-toggle/slide-toggle.component';
import { MockComponent } from 'ng-mocks';
import { UserSettingsDarkmodeComponent } from './user-settings-darkmode.component';
describe('UserSettingsDarkmodeComponent', () => {
......@@ -8,8 +9,10 @@ describe('UserSettingsDarkmodeComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [UiModule],
declarations: [UserSettingsDarkmodeComponent],
declarations: [
UserSettingsDarkmodeComponent,
MockComponent(SlideToggleComponent)
],
}).compileComponents();
fixture = TestBed.createComponent(UserSettingsDarkmodeComponent);
......
goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-darkmode/user-settings-darkmode.component.ts
+ 3
− 4
View file @ e5de12a0
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Observable, of } from 'rxjs';
@Component({
selector: 'goofy-client-user-settings-darkmode',
......@@ -7,8 +6,8 @@ import { Observable, of } from 'rxjs';
styleUrls: ['./user-settings-darkmode.component.scss'],
})
export class UserSettingsDarkmodeComponent {
@Input() darkMode$: Observable<boolean> = of(true);
@Output() public darkModeEmitter: EventEmitter<boolean> =
new EventEmitter();
@Input() darkMode: boolean;
@Output() valueChanged: EventEmitter<boolean> = new EventEmitter();
}
goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-email-benachrichtigung/user-settings-email-benachrichtigung.component.html
+ 9
− 6
View file @ e5de12a0
<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.resource)"
(change)="valueChanged.emit($event.checked)">Benachrichtigung per E-Mail
</mat-slide-toggle>
<goofy-client-slide-toggle data-test-id="toggle-notifications-send-for"
label="Benachrichtigung per E-Mail"
toolTip="Benachrichtigung per E-Mail bei Eingang eines Antrags"
[disabled]="userSettings.resource | notHasLink: userSettingsLinkRel.EDIT"
[checked]="isChecked(userSettings.resource)"
(valueChanged)="valueChanged.emit($event)">
</goofy-client-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.scss
+ 3
− 2
View file @ e5de12a0
mat-slide-toggle {
goofy-client-slide-toggle {
margin-bottom: 0.5rem;
display: block;
}
\ 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
+ 47
− 30
View file @ e5de12a0
import { EventEmitter } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatRippleModule } from '@angular/material/core';
import { MatMenuModule } from '@angular/material/menu';
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { createStateResource } from '@goofy-client/tech-shared';
import { dispatchEventFromFixture, mock } from '@goofy-client/test-utils';
import { createEmptyStateResource, createStateResource, NotHasLinkPipe } from '@goofy-client/tech-shared';
import { dispatchEventFromFixture, getElementFromFixture, Mock, mock, useFromMock } from '@goofy-client/test-utils';
import { UserSettingsLinkRel } from '@goofy-client/user-settings-shared';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { NotificationsSendFor } from 'libs/user-settings-shared/src/lib/user-settings.model';
import { SlideToggleComponent } from 'libs/ui/src/lib/ui/slide-toggle/slide-toggle.component';
import { NotificationsSendFor, UserSettings } from 'libs/user-settings-shared/src/lib/user-settings.model';
import { createUserSettings, createUserSettingsResource } from 'libs/user-settings-shared/test/user-settings';
import { EventEmitter } from 'stream';
import { MockComponent } from 'ng-mocks';
import { UserSettingsEmailBenachrichtigungComponent } from './user-settings-email-benachrichtigung.component';
describe('UserSettingsEmailBenachrichtigungComponent', () => {
let component: UserSettingsEmailBenachrichtigungComponent;
let fixture: ComponentFixture<UserSettingsEmailBenachrichtigungComponent>;
const toggle: string = getDataTestIdOf('toggle-notifications-send-for');
const userSettings = createUserSettings();
const notificationSensForToggle: string = getDataTestIdOf('toggle-notifications-send-for');
const valueChangedEmitter: Mock<EventEmitter<boolean>> = { ...mock(EventEmitter), emit: jest.fn() };
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MatMenuModule, MatRippleModule],
declarations: [UserSettingsEmailBenachrichtigungComponent, MatSlideToggle],
declarations: [
NotHasLinkPipe,
UserSettingsEmailBenachrichtigungComponent,
MockComponent(SlideToggleComponent)
],
}).compileComponents();
fixture = TestBed.createComponent(
UserSettingsEmailBenachrichtigungComponent
);
fixture = TestBed.createComponent(UserSettingsEmailBenachrichtigungComponent);
component = fixture.componentInstance;
component.userSettings = createStateResource(createUserSettingsResource());
component.valueChanged = { ...<any>mock(EventEmitter), emit: jest.fn() };
component.userSettings = createEmptyStateResource();
component.valueChanged = useFromMock(valueChangedEmitter);
fixture.detectChanges();
});
......@@ -37,33 +38,49 @@ describe('UserSettingsEmailBenachrichtigungComponent', () => {
expect(component).toBeTruthy();
});
it('should show toggle', () => {
const element = fixture.nativeElement.querySelector(toggle);
expect(element).toBeInstanceOf(HTMLElement);
})
describe('toggle', () => {
describe('toggle status', () => {
it('should be set if userSettings.notificationsSendFor is ALL', () => {
userSettings.notificationsSendFor = NotificationsSendFor.ALL;
it('should be active if notificationsSendFor is ALL', () => {
const userSettings: UserSettings = { ...createUserSettings(), notificationsSendFor: NotificationsSendFor.ALL };
const result: boolean = component.getToggleStatus(userSettings);
const result: boolean = component.isChecked(userSettings);
expect(result).toBeTruthy();
})
it('should not be set if userSettings.notificationsSendFor is NONE', () => {
userSettings.notificationsSendFor = NotificationsSendFor.NONE;
it('should be not active if notificationsSendFor is NONE', () => {
const userSettings: UserSettings = { ...createUserSettings(), notificationsSendFor: NotificationsSendFor.NONE };
const result: boolean = component.getToggleStatus(userSettings);
const result: boolean = component.isChecked(userSettings);
expect(result).toBeFalsy();
})
it('should emit value if toggled', () => {
dispatchEventFromFixture(fixture, toggle, 'change');
component.userSettings = createStateResource(createUserSettingsResource());
fixture.detectChanges();
dispatchEventFromFixture(fixture, notificationSensForToggle, 'valueChanged');
expect(component.valueChanged.emit).toHaveBeenCalled();
})
it('should be deactivated if edit link is missing', () => {
component.userSettings = createStateResource(createUserSettingsResource());
fixture.detectChanges();
const element = getElementFromFixture(fixture, notificationSensForToggle);
expect(element).toHaveAttribute('ng-reflect-disabled', 'true');
})
it('should be activated if edit link exist', () => {
component.userSettings = createStateResource(createUserSettingsResource([UserSettingsLinkRel.EDIT]));
fixture.detectChanges();
const element = getElementFromFixture(fixture, notificationSensForToggle);
expect(element).toHaveAttribute('ng-reflect-disabled', 'false');
})
})
});
goofy-client/libs/user-settings/src/lib/user-settings-container/user-settings-email-benachrichtigung/user-settings-email-benachrichtigung.component.ts
+ 7
− 3
View file @ e5de12a0
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared';
import { NotificationsSendFor, UserSettings, UserSettingsResource } from '@goofy-client/user-settings-shared';
import { NotificationsSendFor, UserSettings, UserSettingsLinkRel, UserSettingsResource } from '@goofy-client/user-settings-shared';
@Component({
selector: 'goofy-client-user-settings-email-benachrichtigung',
......@@ -8,10 +8,14 @@ import { NotificationsSendFor, UserSettings, UserSettingsResource } from '@goofy
styleUrls: ['./user-settings-email-benachrichtigung.component.scss'],
})
export class UserSettingsEmailBenachrichtigungComponent {
@Input() userSettings: StateResource<UserSettingsResource> = createEmptyStateResource<UserSettingsResource>();
@Output() valueChanged: EventEmitter<boolean> = new EventEmitter();
public getToggleStatus(userSettings: UserSettings): boolean {
readonly userSettingsLinkRel = UserSettingsLinkRel;
public isChecked(userSettings: UserSettings): boolean {
return userSettings.notificationsSendFor === NotificationsSendFor.ALL;
}
}
\ No newline at end of file
goofy-client/libs/user-settings/src/lib/user-settings-darkmode-container/user-settings-darkmode-container.component.html 0 → 100644
+ 4
− 0
View file @ e5de12a0
<goofy-client-user-settings-darkmode
[darkMode]="darkMode$ | async"
(valueChanged)="changeColorMode($event)">
</goofy-client-user-settings-darkmode>
\ No newline at end of file
goofy-client/libs/user-settings/src/lib/user-settings-darkmode-container/user-settings-darkmode-container.component.spec.ts 0 → 100644
+ 47
− 0
View file @ e5de12a0
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppService } from '@goofy-client/app-shared';
import { mock } from '@goofy-client/test-utils';
import { MockComponent } from 'ng-mocks';
import { BehaviorSubject } from 'rxjs';
import { UserSettingsDarkmodeComponent } from '../user-settings-container/user-settings-darkmode/user-settings-darkmode.component';
import { UserSettingsDarkmodeContainerComponent } from './user-settings-darkmode-container.component';
describe('UserSettingsDarkmodeContainerComponent', () => {
let component: UserSettingsDarkmodeContainerComponent;
let fixture: ComponentFixture<UserSettingsDarkmodeContainerComponent>;
const darkModeSubj: BehaviorSubject<boolean> = new BehaviorSubject(false);
const appService = { ...mock(AppService), getDarkMode: () => darkModeSubj };
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [
UserSettingsDarkmodeContainerComponent,
MockComponent(UserSettingsDarkmodeComponent)
],
providers: [
{
provide: AppService,
useValue: appService,
}
]
}).compileComponents();
fixture = TestBed.createComponent(UserSettingsDarkmodeContainerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('change color mode', () => {
it('should call app service', () => {
component.changeColorMode(true);
expect(appService.setDarkMode).toHaveBeenCalledWith(true);
})
})
});
\ No newline at end of file
goofy-client/libs/user-settings/src/lib/user-settings-darkmode-container/user-settings-darkmode-container.component.ts 0 → 100644
+ 46
− 0
View file @ e5de12a0
import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
import { AppService, localStorageDark } from '@goofy-client/app-shared';
import { Observable } from 'rxjs';
@Component({
selector: 'goofy-client-user-settings-darkmode-container',
templateUrl: './user-settings-darkmode-container.component.html',
styleUrls: ['./user-settings-darkmode-container.component.scss'],
})
export class UserSettingsDarkmodeContainerComponent implements OnInit {
darkMode$: Observable<boolean>;
constructor(
private renderer: Renderer2,
private appService: AppService,
@Inject(DOCUMENT) private document: Document
) { }
ngOnInit(): void {
this.darkMode$ = this.appService.getDarkMode();
this.subscribeToDarkMode();
}
private subscribeToDarkMode(): void {
this.darkMode$.subscribe((darkMode) =>
darkMode
? this.addClass(localStorageDark)
: this.removeClass(localStorageDark)
);
}
private addClass(styleClass: string): void {
this.renderer.addClass(this.document.body, styleClass);
}
private removeClass(styleClass: string): void {
this.renderer.removeClass(this.document.body, styleClass);
}
public changeColorMode(darkMode: boolean): void {
this.appService.setDarkMode(darkMode);
}
}
\ No newline at end of file
goofy-client/libs/user-settings/src/lib/user-settings-email-benachrichtigung-container/user-settings-email-benachrichtigung-container.component.html 0 → 100644
+ 4
− 0
View file @ e5de12a0
<goofy-client-user-settings-email-benachrichtigung
[userSettings]="userSettings$ | async"
(valueChanged)="changeNotificationsSendFor($event)">
</goofy-client-user-settings-email-benachrichtigung>
\ No newline at end of file
goofy-client/libs/user-settings/src/lib/user-settings-email-benachrichtigung-container/user-settings-email-benachrichtigung-container.component.spec.ts 0 → 100644
+ 60
− 0
View file @ e5de12a0
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { mock } from '@goofy-client/test-utils';
import { NotificationsSendFor, UserSettingsService } from '@goofy-client/user-settings-shared';
import { MockComponent } from 'ng-mocks';
import { UserSettingsEmailBenachrichtigungComponent } from '../user-settings-container/user-settings-email-benachrichtigung/user-settings-email-benachrichtigung.component';
import { UserSettingsEmailBenachrichtigungContainerComponent } from './user-settings-email-benachrichtigung-container.component';
describe('UserSettingsEmailBenachrichtigungContainerComponent', () => {
let component: UserSettingsEmailBenachrichtigungContainerComponent;
let fixture: ComponentFixture<UserSettingsEmailBenachrichtigungContainerComponent>;
const userSettingsService = { ...mock(UserSettingsService), setUserSettings: jest.fn() };
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [
UserSettingsEmailBenachrichtigungContainerComponent,
MockComponent(UserSettingsEmailBenachrichtigungComponent)
],
providers: [
{
provide: UserSettingsService,
useValue: userSettingsService
}
],
}).compileComponents();
fixture = TestBed.createComponent(UserSettingsEmailBenachrichtigungContainerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('ngOnInit', () => {
it('should call userSettings service', () => {
component.ngOnInit();
expect(userSettingsService.getUserSettings).toHaveBeenCalled();
})
})
describe('change notifications send for', () => {
it('should call service with ALL', () => {
component.changeNotificationsSendFor(true);
expect(userSettingsService.setUserSettings).toHaveBeenCalledWith({ notificationsSendFor: NotificationsSendFor.ALL });
})
it('should call service with NONE', () => {
component.changeNotificationsSendFor(false);
expect(userSettingsService.setUserSettings).toHaveBeenCalledWith({ notificationsSendFor: NotificationsSendFor.NONE });
})
})
});
goofy-client/libs/user-settings/src/lib/user-settings-email-benachrichtigung-container/user-settings-email-benachrichtigung-container.component.ts 0 → 100644
+ 29
− 0
View file @ e5de12a0
import { Component } from '@angular/core';
import { StateResource } from '@goofy-client/tech-shared';
import { NotificationsSendFor, UserSettings, UserSettingsResource, UserSettingsService } from '@goofy-client/user-settings-shared';
import { Observable } from 'rxjs';
@Component({
selector: 'goofy-client-user-settings-email-benachrichtigung-container',
templateUrl: './user-settings-email-benachrichtigung-container.component.html',
styleUrls: ['./user-settings-email-benachrichtigung-container.component.scss']
})
export class UserSettingsEmailBenachrichtigungContainerComponent {
userSettings$: Observable<StateResource<UserSettingsResource>>;
constructor(private userSettingsService: UserSettingsService) { }
ngOnInit(): void {
this.userSettings$ = this.userSettingsService.getUserSettings();
}
changeNotificationsSendFor(toggleValue: boolean): void {
this.userSettingsService.setUserSettings(this.createUserSettings(toggleValue));
}
private createUserSettings(toggleValue: boolean): UserSettings {
const notificationsSendFor: NotificationsSendFor = toggleValue ? NotificationsSendFor.ALL : NotificationsSendFor.NONE;
return { notificationsSendFor };
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum - Datenschutz - Barrierefreiheit