fixed appending page to user-data

ortwic · Mar 27, 2024 · 1419348 · 1419348
1 parent cad2095
commit 1419348
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 73 deletions.
diff --git 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
@@ -36,14 +36,14 @@
         @if (page.nextIndex !== undefined) {
             <a role="button" mat-button color="primary" aria-label="Weiter"
                [routerLink]="[ '/p', unitIndex, page.nextIndex ]" 
-               (click)="complete(page.data)" [disabled]="disabled">
+               (click)="complete(page.data)" [disabled]="page.nextDisabled()">
                 <span class="next">
                     <mat-icon fontIcon="arrow_forward" /> Weiter&nbsp;
                 </span>
             </a>
         } @else {
             <a role="button" mat-button color="primary" aria-label="Abschließen"
-               routerLink="/" [disabled]="disabled" (click)="complete(page.data)">
+               routerLink="/" [disabled]="page.nextDisabled()" (click)="complete(page.data)">
                 <span class="next">            
                     <mat-icon fontIcon="check_small" /> Abschließen&nbsp;
                 </span>

diff --git 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
@@ -2,76 +2,68 @@ import { TestBed } from '@angular/core/testing';
 
 import { UserDataService, localKey } from './user-data.service';
 
-function createMockStorage() {
-  let storage: Record<string, string> = {};
-  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<string, string> = {};
+  const initialData: Record<string, unknown> = { 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', () => {
     expect(service).toBeTruthy();
   });
 
   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
@@ -35,12 +35,14 @@ export class UserDataService<T = unknown> {
     }
 
     save(id: number | string, data: Record<string, T>) {
-        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() {