From 1419348298620a97728edb6589bab5a069ddff66 Mon Sep 17 00:00:00 2001 From: Ortwin Date: Wed, 27 Mar 2024 13:42:11 +0100 Subject: [PATCH] fixed appending page to user-data --- angular.json | 16 +---- src/app/pages/page/page.component.html | 4 +- src/app/pages/page/page.component.ts | 17 ++---- src/app/services/user-data.service.spec.ts | 70 ++++++++++------------ src/app/services/user-data.service.ts | 14 +++-- 5 files changed, 48 insertions(+), 73 deletions(-) diff --git a/angular.json b/angular.json index a4fe6e5..3ecefba 100644 --- a/angular.json +++ b/angular.json @@ -66,26 +66,14 @@ "development": { "optimization": false, "extractLicenses": false, - "sourceMap": true, - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.development.ts" - } - ] + "sourceMap": true }, "dev-spa": { "optimization": false, "extractLicenses": false, "sourceMap": true, "ssr": false, - "prerender": false, - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.dev-spa.ts" - } - ] + "prerender": false } }, "defaultConfiguration": "production" diff --git a/src/app/pages/page/page.component.html b/src/app/pages/page/page.component.html index d73b4a7..dd956aa 100644 --- a/src/app/pages/page/page.component.html +++ b/src/app/pages/page/page.component.html @@ -36,14 +36,14 @@ @if (page.nextIndex !== undefined) { + (click)="complete(page.data)" [disabled]="page.nextDisabled()"> Weiter  } @else { + routerLink="/" [disabled]="page.nextDisabled()" (click)="complete(page.data)"> Abschließen  diff --git a/src/app/pages/page/page.component.ts b/src/app/pages/page/page.component.ts index 3f04b07..74efc42 100644 --- a/src/app/pages/page/page.component.ts +++ b/src/app/pages/page/page.component.ts @@ -44,7 +44,6 @@ export class PageComponent { readonly unitIndex = +this.route.snapshot.params['unit']; private step = 0; - done = false; continue!: (args: ContinueEventArgs) => void; readonly userDataService = inject(UserDataService); @@ -66,12 +65,11 @@ export class PageComponent { data, prevIndex: prev, nextIndex: next, + nextDisabled: () => this.step !== page.content.length }); }), - tap(page => { - this.initBreakpoints(page.content, page.slug); - document.title = page.title + " | Why App"; - }) + tap(page => this.continue = this.initBreakpoints(page.content, page.slug)), + tap(page => document.title = page.title + " | Why App") ); private initBreakpoints(content: PageContent[], pageId: string) { @@ -84,15 +82,14 @@ export class PageComponent { }, [] as number[]); next(); - this.continue = (args) => { + return (args: ContinueEventArgs) => { this.userDataService.save(this.unitIndex, { [pageId]: args.data }); if (args.completed) { next(); - this.done = this.step === content.length; } - } + }; } show(index: number): 'expanded' | 'collapsed' { @@ -108,8 +105,4 @@ export class PageComponent { } }); } - - get disabled() { - return !this.done; - } } diff --git a/src/app/services/user-data.service.spec.ts b/src/app/services/user-data.service.spec.ts index 7f69121..ec8f23d 100644 --- a/src/app/services/user-data.service.spec.ts +++ b/src/app/services/user-data.service.spec.ts @@ -2,42 +2,22 @@ import { TestBed } from '@angular/core/testing'; import { UserDataService, localKey } from './user-data.service'; -function createMockStorage() { - let storage: Record = {}; - return { - setItem(key: string, value: string) { - storage[key] = value || ''; - }, - getItem(key: string) { - return key in storage ? storage[key] : null; - }, - clear() { - storage = {}; - }, - removeItem(key: string) { - delete storage[key]; - }, - get length() { - return Object.keys(storage).length; - }, - } as unknown as Storage; -} - describe('UserDataService', () => { let service: UserDataService; - const initialData = { 0: { name: 'John Doe' } }; + let localStore: Record = {}; + const initialData: Record = { name: 'John Doe' }; beforeEach(() => { TestBed.configureTestingModule({ - providers: [ - UserDataService, - { provide: 'localStorage', useValue: createMockStorage() } - ] + providers: [UserDataService] }); + spyOn(window.localStorage, 'getItem').and.callFake((key) => key in localStore ? localStore[key] : null); + spyOn(window.localStorage, 'setItem').and.callFake((key, value) => (localStore[key] = value + '')); + spyOn(window.localStorage, 'clear').and.callFake(() => (localStore = {})); + window.localStorage.setItem(localKey, JSON.stringify({ 0: initialData })); + service = TestBed.inject(UserDataService<{}>); - localStorage.clear(); - localStorage.setItem(localKey, JSON.stringify(initialData)); }); it('should be created', () => { @@ -45,33 +25,45 @@ describe('UserDataService', () => { }); it('should contain initial data', () => { - expect(service.userData()).toEqual(initialData); + expect(service.userData()).toEqual({ 0: initialData }); }); it('should get initial entry', () => { - expect(service.getEntry(0)).toEqual(initialData[0]); + expect(service.getEntry(0)).toEqual(initialData); + }); + + it('should append new entry', () => { + // Arrange + const newData = { name: 'Jane Doe' }; + + // Act + service.save(1, newData); + + // Assert + expect(service.getEntry(1)).toEqual(newData); + expect(service.getEntry(0)).toEqual(initialData); }); - it('should add new data without overwriting existing data', () => { + it('should append new property', () => { // Arrange - const newData = { 1: { name: 'Jane Doe' } }; + const newData = { color: 'purple' }; // Act - service.save(1, newData[1]); + service.save(0, newData); // Assert - expect(service.getEntry(1)).toEqual(newData[1]); - expect(service.getEntry(0)).toEqual(initialData[0]); + expect(service.getEntry(0)['color']).toEqual(newData['color']); + expect(service.getEntry(0)['name']).toEqual(initialData['name']); }); - it('should overwrite data if the same id is used', () => { + it('should update existing entry', () => { // Arrange - const updatedData = { 1: { name: 'Jane Doe' } }; + const updatedData = { name: 'Jane Doe' }; // Act - service.save(1, updatedData[1]); + service.save(0, updatedData); // Assert - expect(service.getEntry(1)).toEqual(updatedData[1]); + expect(service.getEntry(0)).toEqual(updatedData); }); }); diff --git a/src/app/services/user-data.service.ts b/src/app/services/user-data.service.ts index e328386..580e2fb 100644 --- a/src/app/services/user-data.service.ts +++ b/src/app/services/user-data.service.ts @@ -35,12 +35,14 @@ export class UserDataService { } save(id: number | string, data: Record) { - const obj = { - ...this.userData(), - [id]: data - }; - this.userData.set(obj); - localStorage.setItem(localKey, JSON.stringify(obj)); + this.userData.update(obj => ({ + ...obj, + [id]: { + ...obj[id], + ...data + } + })); + localStorage.setItem(localKey, JSON.stringify(this.userData())); } clear() {