feat(demo): render cart totals from totals dict (#2618)

graycoreio · Nov 22, 2023 · 2bafc50 · 2bafc50
1 parent da882b1
commit 2bafc50
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 42 deletions.
diff --git a/apps/demo/src/app/cart/components/cart-totals/cart-totals.component.html b/apps/demo/src/app/cart/components/cart-totals/cart-totals.component.html
@@ -1,21 +1,21 @@
 <div class="demo-cart-totals">
   <demo-cart-totals-item>
     <ng-container cart-total-label>Subtotal</ng-container>
-    <ng-container cart-total-value>{{ cart.subtotal | currency }}</ng-container>
+    <ng-container cart-total-value>{{ subtotal.value | currency }}</ng-container>
   </demo-cart-totals-item>
 
   <demo-cart-totals-item>
     <ng-container cart-total-label>Estimated Shipping</ng-container>
-    <ng-container cart-total-value>FREE (HC)</ng-container>
+    <ng-container cart-total-value>{{shipping.value | currency}}</ng-container>
   </demo-cart-totals-item>
 
   <demo-cart-totals-item>
     <ng-container cart-total-label>Estimated Tax</ng-container>
-    <ng-container cart-total-value>{{ 0 | currency }}</ng-container>
+    <ng-container cart-total-value>{{ tax.value | currency }}</ng-container>
   </demo-cart-totals-item>
 
   <demo-cart-totals-item emphasize="true" class="demo-cart-totals__total">
     <ng-container cart-total-label>Estimated Total</ng-container>
-    <ng-container cart-total-value>{{ cart.grand_total | currency }}</ng-container>
+    <ng-container cart-total-value>{{ grandTotal.value | currency }}</ng-container>
   </demo-cart-totals-item>
 </div>
diff --git a/apps/demo/src/app/cart/components/cart-totals/cart-totals.component.spec.ts b/apps/demo/src/app/cart/components/cart-totals/cart-totals.component.spec.ts
@@ -1,3 +1,7 @@
+import {
+  CommonModule,
+  CurrencyPipe,
+} from '@angular/common';
 import {
   Component,
   Input,
@@ -9,14 +13,17 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { DaffCart } from '@daffodil/cart';
+import {
+  DaffCart,
+  DaffCartTotalTypeEnum,
+} from '@daffodil/cart';
 import {
   DaffCartItemFactory,
   DaffCartFactory,
 } from '@daffodil/cart/testing';
-import { DaffMockCurrencyPipe } from '@daffodil/core/testing';
 
 import { CartTotalsComponent } from './cart-totals.component';
+import { CartTotalsItemComponent } from '../cart-totals-item/cart-totals-item.component';
 import { CartTotalsItemModule } from '../cart-totals-item/cart-totals-item.module';
 
 @Component({ template: '<demo-cart-totals [cart]="cartValue"></demo-cart-totals>' })
@@ -28,8 +35,7 @@ describe('CartTotalsComponent', () => {
   let wrapper: WrapperComponent;
   let fixture: ComponentFixture<WrapperComponent>;
   let cartTotalsComponent: CartTotalsComponent;
-  let cartTotalsItemComponent: any;
-  let currencyPipe;
+  let currencyPipe: CurrencyPipe;
   let cartFactory: DaffCartFactory;
   let cartItemFactory: DaffCartItemFactory;
 
@@ -40,25 +46,27 @@ describe('CartTotalsComponent', () => {
       declarations: [
         WrapperComponent,
         CartTotalsComponent,
-        DaffMockCurrencyPipe,
       ],
       imports: [
         CartTotalsItemModule,
       ],
+      providers: [
+        CurrencyPipe,
+      ],
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
     cartFactory = TestBed.inject(DaffCartFactory);
     cartItemFactory = TestBed.inject(DaffCartItemFactory);
+    currencyPipe = TestBed.inject(CurrencyPipe);
 
     mockCart = cartFactory.create({
       items: cartItemFactory.createMany(2),
     });
     fixture = TestBed.createComponent(WrapperComponent);
     wrapper = fixture.componentInstance;
-    currencyPipe = spyOn(DaffMockCurrencyPipe.prototype, 'transform');
 
     wrapper.cartValue = mockCart;
 
@@ -71,62 +79,42 @@ describe('CartTotalsComponent', () => {
   });
 
   describe('on estimated shipping <demo-cart-totals-item>', () => {
-
-    beforeEach(() => {
-      cartTotalsItemComponent = fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[1].nativeElement;
-    });
-
     it('should set label', () => {
-      expect(cartTotalsItemComponent.innerHTML).toContain('Estimated Shipping');
+      expect(fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[1].nativeElement.innerHTML).toContain('Estimated Shipping');
     });
 
     it('should set value', () => {
-      expect(cartTotalsItemComponent.innerHTML).toContain('FREE (HC)');
+      expect(fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[1].nativeElement.innerHTML).toContain(currencyPipe.transform(mockCart.totals[DaffCartTotalTypeEnum.shipping].value));
     });
   });
 
   describe('on estimated tax on <demo-cart-totals-item>', () => {
-
-    beforeEach(() => {
-      cartTotalsItemComponent = fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[2].nativeElement;
-    });
-
     it('should set label', () => {
-      expect(cartTotalsItemComponent.innerHTML).toContain('Estimated Tax');
+      expect(fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[2].nativeElement.innerHTML).toContain('Estimated Tax');
     });
 
-    it('should call the angular CurrencyPipe.transform with cartTax', () => {
-      expect(currencyPipe).toHaveBeenCalledWith(0);
+    it('should set value', () => {
+      expect(fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[2].nativeElement.innerHTML).toContain(currencyPipe.transform(mockCart.totals[DaffCartTotalTypeEnum.tax].value));
     });
   });
 
   describe('on subtotal <demo-cart-totals-item>', () => {
-
-    beforeEach(() => {
-      cartTotalsItemComponent = fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[0].nativeElement;
-    });
-
     it('should set label', () => {
-      expect(cartTotalsItemComponent.innerHTML).toContain('Subtotal');
+      expect(fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[0].nativeElement.innerHTML).toContain('Subtotal');
     });
 
-    it('should call the angular CurrencyPipe.transform with cart subtotal', () => {
-      expect(currencyPipe).toHaveBeenCalledWith(mockCart.subtotal);
+    it('should set value', () => {
+      expect(fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[0].nativeElement.innerHTML).toContain(currencyPipe.transform(mockCart.totals[DaffCartTotalTypeEnum.subtotalExcludingTax].value));
     });
   });
 
   describe('on estimated total <demo-cart-totals-item>', () => {
-
-    beforeEach(() => {
-      cartTotalsItemComponent = fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[3].nativeElement;
-    });
-
     it('should set label', () => {
-      expect(cartTotalsItemComponent.innerHTML).toContain('Estimated Total');
+      expect(fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[3].nativeElement.innerHTML).toContain('Estimated Total');
     });
 
-    it('should call the angular CurrencyPipe.transform with cart grand_total', () => {
-      expect(currencyPipe).toHaveBeenCalledWith(cartTotalsComponent.cart.grand_total);
+    it('should set value', () => {
+      expect(fixture.debugElement.queryAll(By.css('demo-cart-totals-item'))[3].nativeElement.innerHTML).toContain(currencyPipe.transform(mockCart.totals[DaffCartTotalTypeEnum.grandTotal].value));
     });
   });
 });
diff --git a/apps/demo/src/app/cart/components/cart-totals/cart-totals.component.ts b/apps/demo/src/app/cart/components/cart-totals/cart-totals.component.ts
@@ -3,7 +3,11 @@ import {
   Input,
 } from '@angular/core';
 
-import { DaffCart } from '@daffodil/cart';
+import {
+  DaffCart,
+  DaffCartTotal,
+  DaffCartTotalTypeEnum,
+} from '@daffodil/cart';
 
 @Component({
   selector: 'demo-cart-totals',
@@ -12,4 +16,20 @@ import { DaffCart } from '@daffodil/cart';
 })
 export class CartTotalsComponent {
   @Input() cart: DaffCart;
+
+  get subtotal(): DaffCartTotal {
+    return this.cart.totals[DaffCartTotalTypeEnum.subtotalExcludingTax];
+  }
+
+  get shipping(): DaffCartTotal {
+    return this.cart.totals[DaffCartTotalTypeEnum.shipping];
+  }
+
+  get tax(): DaffCartTotal {
+    return this.cart.totals[DaffCartTotalTypeEnum.tax];
+  }
+
+  get grandTotal(): DaffCartTotal {
+    return this.cart.totals[DaffCartTotalTypeEnum.grandTotal];
+  }
 }