From 991d173275b57e3e6f1080ccf7a26e2054925ce6 Mon Sep 17 00:00:00 2001 From: Peter Lauck Date: Tue, 21 Nov 2023 01:06:26 +0000 Subject: [PATCH 1/2] feat(demo): add address form model and country field --- .../factories/address-form.factory.ts | 10 ++++++---- .../address-form/models/address-form.type.ts | 20 +++++++++++++++++++ .../shipping-form.component.spec.ts | 2 +- 3 files changed, 27 insertions(+), 5 deletions(-) create mode 100644 apps/demo/src/app/checkout/components/forms/address-form/models/address-form.type.ts diff --git a/apps/demo/src/app/checkout/components/forms/address-form/factories/address-form.factory.ts b/apps/demo/src/app/checkout/components/forms/address-form/factories/address-form.factory.ts index 0b6c9fc079..1c4057ca69 100644 --- a/apps/demo/src/app/checkout/components/forms/address-form/factories/address-form.factory.ts +++ b/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 : ''], diff --git a/apps/demo/src/app/checkout/components/forms/address-form/models/address-form.type.ts b/apps/demo/src/app/checkout/components/forms/address-form/models/address-form.type.ts new file mode 100644 index 0000000000..49f39892bd --- /dev/null +++ b/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; + lastname: FormControl; + street: FormControl; + city: FormControl; + country: FormControl; + state: FormControl; + postcode: FormControl; + telephone: FormControl; +}>; diff --git a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.spec.ts b/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.spec.ts index d711121b52..86985afd4c 100644 --- a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.spec.ts +++ b/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(); From 478e94ff7fe926a284fdbba6c60c568bbdfb9a77 Mon Sep 17 00:00:00 2001 From: Peter Lauck Date: Wed, 22 Nov 2023 15:59:20 +0000 Subject: [PATCH 2/2] fix test adn add payment form --- .../factories/address-form.factory.spec.ts | 4 +- .../payment-form/models/payment-form.type.ts | 11 ++ .../payment-form.component.spec.ts | 102 +++++++----------- .../payment-form/payment-form.component.ts | 8 +- .../payment-info-form.component.ts | 9 +- .../models/payment-form.type.ts | 14 +++ .../shipping-form.component.spec.ts | 4 - 7 files changed, 72 insertions(+), 80 deletions(-) create mode 100644 apps/demo/src/app/checkout/components/payment/payment-form/models/payment-form.type.ts create mode 100644 apps/demo/src/app/checkout/components/payment/payment-info-form/models/payment-form.type.ts diff --git a/apps/demo/src/app/checkout/components/forms/address-form/factories/address-form.factory.spec.ts b/apps/demo/src/app/checkout/components/forms/address-form/factories/address-form.factory.spec.ts index a85de701aa..594c52fd97 100644 --- a/apps/demo/src/app/checkout/components/forms/address-form/factories/address-form.factory.spec.ts +++ b/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', }; diff --git a/apps/demo/src/app/checkout/components/payment/payment-form/models/payment-form.type.ts b/apps/demo/src/app/checkout/components/payment/payment-form/models/payment-form.type.ts new file mode 100644 index 0000000000..d215ae213a --- /dev/null +++ b/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; +}>; + + diff --git a/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.spec.ts b/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.spec.ts index 4701001137..4d63cedfcd 100644 --- a/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.spec.ts +++ b/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 ', () => { it('should set formGroup', () => { - expect( addressFormComponent.formGroup).toEqual( paymentFormComponent.form.controls['address']); + expect(addressFormComponent.formGroup).toEqual(paymentFormComponent.form.controls.address); }); it('should set formSubmitted', () => { @@ -157,7 +149,7 @@ describe('PaymentFormComponent', () => { describe('on ', () => { it('should set formGroup', () => { - expect( paymentInfoFormComponent.formGroup).toEqual( paymentFormComponent.form.controls['paymentInfo']); + expect(paymentInfoFormComponent.formGroup).toEqual(paymentFormComponent.form.controls.paymentInfo); }); it('should set formSubmitted', () => { @@ -165,22 +157,6 @@ describe('PaymentFormComponent', () => { }); }); - 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', () => { diff --git a/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts b/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts index 2379f992fd..812f694eee 100644 --- a/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts +++ b/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 = new EventEmitter(); @Output() toggleBillingAddressIsShippingAddress: EventEmitter = new EventEmitter(); - form: UntypedFormGroup; + form: PaymentFormGroup; constructor( private fb: UntypedFormBuilder, diff --git a/apps/demo/src/app/checkout/components/payment/payment-info-form/components/payment-info-form/payment-info-form.component.ts b/apps/demo/src/app/checkout/components/payment/payment-info-form/components/payment-info-form/payment-info-form.component.ts index 482e638dfe..90fb3500d7 100644 --- a/apps/demo/src/app/checkout/components/payment/payment-info-form/components/payment-info-form/payment-info-form.component.ts +++ b/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() { } diff --git a/apps/demo/src/app/checkout/components/payment/payment-info-form/models/payment-form.type.ts b/apps/demo/src/app/checkout/components/payment/payment-info-form/models/payment-form.type.ts new file mode 100644 index 0000000000..718e7529c1 --- /dev/null +++ b/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; + cardnumber: FormControl; + month: FormControl; + year: FormControl; + securitycode: FormControl; +}>; + + diff --git a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.spec.ts b/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.spec.ts index 86985afd4c..0054a9f073 100644 --- a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.spec.ts +++ b/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.spec.ts @@ -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); });