feat(demo): add checkout form models and country field (#2615)

apps/demo/src/app/checkout/components/forms/address-form/factories/address-form.factory.spec.ts

@@ -6,7 +6,7 @@ import {
 
 import { AddressFormFactory } from './address-form.factory';
 
-describe('Daffodil Demo | Checkout | Forms | Address Form | Factories | AddressFormFactory', () => {
+describe('@daffodil/demo | AddressFormFactory', () => {
 
   let addressFormFactory;
 
@@ -41,6 +41,7 @@ describe('Daffodil Demo | Checkout | Forms | Address Form | Factories | AddressF
           street: '',
           city: '',
           state: '',
+          country: '',
           postcode: '',
           telephone: '',
         };
@@ -62,6 +63,7 @@ describe('Daffodil Demo | Checkout | Forms | Address Form | Factories | AddressF
           street: 'street',
           city: 'city',
           state: 'another state',
+          country: 'another state',
           postcode: 'postcode',
           telephone: 'telephone',
         };

apps/demo/src/app/checkout/components/forms/address-form/factories/address-form.factory.ts

@@ -1,25 +1,27 @@
 import { Injectable } from '@angular/core';
 import {
-  UntypedFormGroup,
-  UntypedFormBuilder,
+  FormBuilder,
   Validators,
 } from '@angular/forms';
 
+import { AddressFormGroup } from '../models/address-form.type';
+
 @Injectable({
   providedIn: 'root',
 })
 export class AddressFormFactory {
 
   constructor(
-    private fb: UntypedFormBuilder,
+    private fb: FormBuilder,
   ) {}
 
-  create(address): UntypedFormGroup {
+  create(address): AddressFormGroup {
     return this.fb.group({
       firstname: [address ? address.firstname : '', Validators.required],
       lastname: [address ? address.lastname : '', Validators.required],
       street: [address ? address.street : '', Validators.required],
       city: [address ? address.city : '', Validators.required],
+      country: [address ? address.state : '', Validators.required],
       state: [address ? address.state : '', Validators.required],
       postcode: [address ? address.postcode : '', Validators.required],
       telephone: [address ? address.telephone : ''],

apps/demo/src/app/checkout/components/forms/address-form/models/address-form.type.ts

@@ -0,0 +1,20 @@
+import {
+  FormControl,
+  FormGroup,
+} from '@angular/forms';
+
+import {
+  DaffCountry,
+  DaffSubdivision,
+} from '@daffodil/geography';
+
+export type AddressFormGroup = FormGroup<{
+  firstname: FormControl<string>;
+  lastname: FormControl<string>;
+  street: FormControl<string>;
+  city: FormControl<string>;
+  country: FormControl<DaffCountry['id']>;
+  state: FormControl<DaffSubdivision['id']>;
+  postcode: FormControl<string>;
+  telephone: FormControl<string>;
+}>;

apps/demo/src/app/checkout/components/payment/payment-form/models/payment-form.type.ts

@@ -0,0 +1,11 @@
+import { FormGroup } from '@angular/forms';
+
+import { AddressFormGroup } from '../../../forms/address-form/models/address-form.type';
+import { PaymentInfoFormGroup } from '../../payment-info-form/models/payment-form.type';
+
+export type PaymentFormGroup = FormGroup<{
+  paymentInfo: PaymentInfoFormGroup;
+  address: AddressFormGroup;
+}>;
+
+

apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.spec.ts

@@ -71,10 +71,8 @@ describe('PaymentFormComponent', () => {
   let paymentFormComponent: PaymentFormComponent;
   let addressFormComponent: MockAddressFormComponent;
   let paymentInfoFormComponent: MockPaymentInfoFormComponent;
-  const addressFormFactorySpy = jasmine.createSpyObj('AddressFormFactory', ['create']);
-  let stubAddressFormGroup: UntypedFormGroup;
-  const paymentInfoFormFactorySpy = jasmine.createSpyObj('PaymentInfoFormFactory', ['create']);
-  let stubPaymentInfoFormGroup: UntypedFormGroup;
+  let addressFormFactory: AddressFormFactory;
+  let paymentInfoFormFactory: PaymentInfoFormFactory;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -91,28 +89,22 @@ describe('PaymentFormComponent', () => {
         MockPaymentInfoFormComponent,
         PaymentFormComponent,
       ],
-      providers: [
-        { provide: AddressFormFactory, useValue: addressFormFactorySpy },
-        { provide: PaymentInfoFormFactory, useValue: paymentInfoFormFactorySpy },
-      ],
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
+    store = TestBed.inject(Store);
+    addressFormFactory = TestBed.inject(AddressFormFactory);
+    paymentInfoFormFactory = TestBed.inject(PaymentInfoFormFactory);
+
     stubPaymentInfo = null;
     stubBillingAddress = null;
     stubBillingAddressIsShippingAddress = false;
-    stubAddressFormGroup = new AddressFormFactory(new UntypedFormBuilder()).create(stubPaymentInfo);
-    stubAddressFormGroup.markAsDirty();
-    stubAddressFormGroup.markAsTouched();
-    addressFormFactorySpy.create.and.returnValue(stubAddressFormGroup);
-    stubPaymentInfoFormGroup = new PaymentInfoFormFactory(new UntypedFormBuilder()).create(stubBillingAddress);
-    paymentInfoFormFactorySpy.create.and.returnValue(stubPaymentInfoFormGroup);
 
-    fixture = TestBed.createComponent(WrapperComponent);
-    store = TestBed.inject(Store);
     spyOn(store, 'dispatch');
+
+    fixture = TestBed.createComponent(WrapperComponent);
     wrapper = fixture.componentInstance;
     wrapper.paymentInfoValue = stubPaymentInfo;
     wrapper.billingAddressValue = stubBillingAddress;
@@ -146,7 +138,7 @@ describe('PaymentFormComponent', () => {
   describe('on <demo-address-form>', () => {
 
     it('should set formGroup', () => {
-      expect(<UntypedFormGroup> addressFormComponent.formGroup).toEqual(<UntypedFormGroup> paymentFormComponent.form.controls['address']);
+      expect(addressFormComponent.formGroup).toEqual(paymentFormComponent.form.controls.address);
     });
 
     it('should set formSubmitted', () => {
@@ -157,30 +149,14 @@ describe('PaymentFormComponent', () => {
   describe('on <demo-payment-info-form>', () => {
 
     it('should set formGroup', () => {
-      expect(<UntypedFormGroup> paymentInfoFormComponent.formGroup).toEqual(<UntypedFormGroup> paymentFormComponent.form.controls['paymentInfo']);
+      expect(paymentInfoFormComponent.formGroup).toEqual(paymentFormComponent.form.controls.paymentInfo);
     });
 
     it('should set formSubmitted', () => {
       expect(paymentInfoFormComponent.submitted).toEqual(false);
     });
   });
 
-  describe('ngOnInit', () => {
-
-    it('should call PaymentInfoFormFactory with paymentInfo', () => {
-      expect(paymentInfoFormFactorySpy.create).toHaveBeenCalledWith(stubPaymentInfo);
-    });
-
-    it('should call AddressFormFactory with billingAddress', () => {
-      expect(addressFormFactorySpy.create).toHaveBeenCalledWith(stubBillingAddress);
-    });
-
-    it('sets form.value to returned factory values', () => {
-      expect(paymentFormComponent.form.value.address).toEqual(stubAddressFormGroup.value);
-      expect(paymentFormComponent.form.value.paymentInfo).toEqual(stubPaymentInfoFormGroup.value);
-    });
-  });
-
   describe('when checkbox is clicked', () => {
 
     it('should emit toggleBillingAddressIsShippingAddress', () => {
@@ -221,9 +197,9 @@ describe('PaymentFormComponent', () => {
 
       beforeEach(() => {
         const formBuilder = new UntypedFormBuilder();
-        paymentFormComponent.form = formBuilder.group({
-          address: stubAddressFormGroup,
-          paymentInfo: stubPaymentInfoFormGroup,
+        paymentFormComponent.form.patchValue({
+          address: null,
+          paymentInfo: null,
         });
       });
 
@@ -277,12 +253,12 @@ describe('PaymentFormComponent', () => {
 
         describe('and paymentInfoForm is valid', () => {
 
-          const expectedPaymentInfo: PaymentInfo = {
+          const expectedPaymentInfo = {
             name: 'valid',
-            cardnumber: 2,
-            month: 2,
-            year: 2,
-            securitycode: 2,
+            cardnumber: '2',
+            month: '2',
+            year: '2',
+            securitycode: '2',
           };
 
           beforeEach(() => {
@@ -310,38 +286,36 @@ describe('PaymentFormComponent', () => {
     describe('when form is valid', () => {
 
       beforeEach(() => {
-        stubPaymentInfoFormGroup.setValue({
-          name: 'valid',
-          cardnumber: 'valid',
-          month: '01',
-          year: 'valid',
-          securitycode: 'valid',
-        });
-        stubAddressFormGroup.setValue({
-          firstname: 'valid',
-          lastname: 'valid',
-          street: 'valid',
-          city: 'valid',
-          state: 'California',
-          postcode: 'valid',
-          telephone: 'valid',
-        });
-        const formBuilder = new UntypedFormBuilder();
-        paymentFormComponent.form = formBuilder.group({
-          address: stubAddressFormGroup,
-          paymentInfo: stubPaymentInfoFormGroup,
+        paymentFormComponent.form.patchValue({
+          address: {
+            firstname: 'valid',
+            lastname: 'valid',
+            street: 'valid',
+            city: 'valid',
+            state: 'California',
+            country: 'US',
+            postcode: 'valid',
+            telephone: 'valid',
+          },
+          paymentInfo: {
+            name: 'valid',
+            cardnumber: 'valid',
+            month: '01',
+            year: 'valid',
+            securitycode: 'valid',
+          },
         });
         fixture.detectChanges();
       });
 
       it('should emit updatePaymentInfo', () => {
         paymentFormComponent.onSubmit();
-        expect(paymentFormComponent.updatePaymentInfo.emit).toHaveBeenCalledWith(stubPaymentInfoFormGroup.value);
+        expect(paymentFormComponent.updatePaymentInfo.emit).toHaveBeenCalledWith(paymentFormComponent.form.value.paymentInfo);
       });
 
       it('should emit updateBillingAddress with expected object', () => {
         paymentFormComponent.onSubmit();
-        expect(paymentFormComponent.updateBillingAddress.emit).toHaveBeenCalledWith(stubAddressFormGroup.value);
+        expect(paymentFormComponent.updateBillingAddress.emit).toHaveBeenCalledWith(paymentFormComponent.form.value.address);
       });
 
       it('should call store.dispatch with an EnablePlaceOrderButton action', () => {

apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts

@@ -5,15 +5,13 @@ import {
   Output,
   EventEmitter,
 } from '@angular/core';
-import {
-  UntypedFormGroup,
-  UntypedFormBuilder,
-} from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { Store } from '@ngrx/store';
 
 import { PaymentInfo } from '@daffodil/checkout';
 import { DaffAddress } from '@daffodil/core';
 
+import { PaymentFormGroup } from './models/payment-form.type';
 import { EnablePlaceOrderButton } from '../../../actions/checkout.actions';
 import * as fromDemoCheckout from '../../../reducers';
 import { AddressFormFactory } from '../../forms/address-form/factories/address-form.factory';
@@ -33,7 +31,7 @@ export class PaymentFormComponent implements OnInit {
   @Output() updateBillingAddress: EventEmitter<any> = new EventEmitter();
   @Output() toggleBillingAddressIsShippingAddress: EventEmitter<any> = new EventEmitter();
 
-  form: UntypedFormGroup;
+  form: PaymentFormGroup;
 
   constructor(
     private fb: UntypedFormBuilder,

apps/demo/src/app/checkout/components/payment/payment-info-form/components/payment-info-form/payment-info-form.component.ts

@@ -1,12 +1,9 @@
 import {
   Component,
-  OnInit,
   Input,
 } from '@angular/core';
-import {
-  UntypedFormGroup,
-  FormControl,
-} from '@angular/forms';
+
+import { PaymentInfoFormGroup } from '../../models/payment-form.type';
 
 interface MonthOption {
   label: string;
@@ -25,7 +22,7 @@ interface YearOption {
 })
 export class PaymentInfoFormComponent {
 
-  @Input() formGroup: UntypedFormGroup;
+  @Input() formGroup: PaymentInfoFormGroup;
   @Input() submitted: boolean;
 
   constructor() { }

apps/demo/src/app/checkout/components/payment/payment-info-form/models/payment-form.type.ts

@@ -0,0 +1,14 @@
+import {
+  FormControl,
+  FormGroup,
+} from '@angular/forms';
+
+export type PaymentInfoFormGroup = FormGroup<{
+  name: FormControl<string>;
+  cardnumber: FormControl<string>;
+  month: FormControl<string>;
+  year: FormControl<string>;
+  securitycode: FormControl<string>;
+}>;
+
+

apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.spec.ts

@@ -95,7 +95,7 @@ describe('ShippingFormComponent', () => {
     wrapper.editModeValue = false;
     wrapper.shippingAddressValue = stubShippingAddress;
 
-    stubAddressFormGroup = new AddressFormFactory(new UntypedFormBuilder()).create(stubShippingAddress).value;
+    stubAddressFormGroup = TestBed.inject(AddressFormFactory).create(stubShippingAddress);
     addressFormFactorySpy.create.and.returnValue(stubAddressFormGroup);
 
     fixture.detectChanges();
@@ -149,10 +149,6 @@ describe('ShippingFormComponent', () => {
       expect(addressFormFactorySpy.create).toHaveBeenCalledWith(stubShippingAddress);
     });
 
-    it('sets form.value.address to addressFormFactory.create()', () => {
-      expect(shippingFormComponent.form.value.address).toEqual(stubAddressFormGroup);
-    });
-
     it('sets form.value.shippingOption to shippingOptionFormService.getShippingOptionFormGroup()', () => {
       expect(shippingFormComponent.form.value.shippingOption).toEqual(shippingOptionFormService.getShippingOptionFormGroup().value);
     });