Merge pull request #13 from KristofPeti/Add_signal

CFWEB-71 Add signal to product detail component.
ZEISS · Jan 15, 2024 · a42a596 · a42a596
2 parents 71fa130 + 03f5d22
commit a42a596
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/src/app/catalog/product/components/product-detail/product-detail.component.html b/src/app/catalog/product/components/product-detail/product-detail.component.html
@@ -7,12 +7,23 @@
   <div class="row">
     <div class="product-details" *ngIf="product$ | async as product">
       <img class="product-img" src="{{ product.image }}" alt="product image" />
+
       <div class="product-description">
         <h2>{{ product.title }}</h2>
+
         <h3>Price</h3>
         <p>{{ product.price }}</p>
+
+        <div>
+          <h3>Number of items</h3>
+          <button class="confirmation-button" (click)="decreaseProductNumber()">-</button>
+          {{ productNumber() }}
+          <button class="confirmation-button" (click)="increseProductNumber()">+</button>
+        </div>
+
         <h3>Ingredients</h3>
         <p>{{ product.description }}</p>
+
         <button class="confirmation-button" (click)="showConfirmation()">Buy Online</button>
       </div>
     </div>

diff --git a/src/app/catalog/product/components/product-detail/product-detail.component.spec.ts b/src/app/catalog/product/components/product-detail/product-detail.component.spec.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
@@ -60,4 +60,32 @@ describe('ProductDetailComponent', () => {
       expect(store.dispatch).toHaveBeenCalledWith(navigate({ url: '/' }));
     });
   });
+
+  describe('increseProductNumber', () => {
+    it('should increase product number', () => {
+      component.increseProductNumber();
+
+      expect(component.productNumber()).toBe(2);
+    });
+  });
+
+  describe('decreaseProductNumber', () => {
+    it('should decrease product number', () => {
+      component.productNumber = signal(2);
+
+      component.decreaseProductNumber();
+
+      expect(component.productNumber()).toBe(1);
+    });
+  });
+
+  describe('decreaseProductNumber', () => {
+    describe('when decrease called for original value', () => {
+      it('should keep original product number', () => {
+        component.decreaseProductNumber();
+
+        expect(component.productNumber()).toBe(1);
+      });
+    });
+  });
 });
diff --git a/src/app/catalog/product/components/product-detail/product-detail.component.ts b/src/app/catalog/product/components/product-detail/product-detail.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, signal } from '@angular/core';
 import { Store } from '@ngrx/store';
 
 import { selectCurrentProductDetails } from '@app/catalog/product/store/product.selectors';
@@ -21,6 +21,8 @@ import { ActivatedRoute } from '@angular/router';
 export class ProductDetailComponent implements OnInit {
   product$ = this.store.select(selectCurrentProductDetails);
 
+  productNumber = signal(1);
+
   constructor(private store: Store<StateWithCatalog>, private route: ActivatedRoute) {}
 
   backToProductOverview(): void {
@@ -31,6 +33,14 @@ export class ProductDetailComponent implements OnInit {
     this.store.dispatch(navigate({ url: '/order' }));
   }
 
+  increseProductNumber(): void {
+    this.productNumber.update((c) => c + 1);
+  }
+
+  decreaseProductNumber(): void {
+    this.productNumber.update((c) => (c > 1 ? c - 1 : 1));
+  }
+
   ngOnInit() {
     const productId: number = Number.parseInt(this.route.snapshot.paramMap.get('id'));
     this.store.dispatch(loadProductDetails({ productId: productId }));