From 6aaed031dc585a9cad0f0f60c06112df6f9f5e72 Mon Sep 17 00:00:00 2001 From: ako-tech Date: Wed, 19 Oct 2022 11:59:13 +0200 Subject: [PATCH 1/3] refactor initial to reactiveforms --- src/app/app.module.ts | 4 ++-- src/app/checkout/checkout.component.html | 30 ++++++++++++------------ src/app/checkout/checkout.component.ts | 24 ++++++++++++++----- 3 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0530101..3c376ee 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @@ -7,7 +7,7 @@ import { CheckoutComponent } from './checkout/checkout.component'; @NgModule({ declarations: [AppComponent, CheckoutComponent], - imports: [BrowserModule, FormsModule], + imports: [BrowserModule, ReactiveFormsModule], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/app/checkout/checkout.component.html b/src/app/checkout/checkout.component.html index 116d14b..10dd7de 100644 --- a/src/app/checkout/checkout.component.html +++ b/src/app/checkout/checkout.component.html @@ -1,40 +1,40 @@ -
+ -
+
Dirección de Entrega
-
+
Dirección de Facturación
@@ -42,10 +42,10 @@ 
-Template-Driven
+Reactive
 
-NgForm.value:
-{{ f.value | json }}
+FormGroup.value:
+{{ form.value | json }}
 
-Status: {{ f.status }}
+Status: {{ form.status }}
diff --git a/src/app/checkout/checkout.component.ts b/src/app/checkout/checkout.component.ts index 46596ff..8bab4e3 100644 --- a/src/app/checkout/checkout.component.ts +++ b/src/app/checkout/checkout.component.ts @@ -1,16 +1,28 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; @Component({ selector: 'ako-checkout', templateUrl: './checkout.component.html', styleUrls: ['./checkout.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class CheckoutComponent implements OnInit { + form = this.fb.group({ + fullName: '', + email: '', + deliveryAddress: this.fb.group({ + line1: '', + city: '', + zipCode: '', + }), + billingAddress: this.fb.group({ + line1: '', + city: '', + zipCode: '', + }), + }); + constructor(private fb: FormBuilder) {} - constructor() { } - - ngOnInit(): void { - } - + ngOnInit(): void {} } From 1a75da99816f45358db355c998432e48aef45cd2 Mon Sep 17 00:00:00 2001 From: ako-tech Date: Wed, 19 Oct 2022 12:29:16 +0200 Subject: [PATCH 2/3] refactor to addressComponent --- src/app/address/address.component.html | 15 +++++++++ src/app/address/address.component.scss | 0 src/app/address/address.component.ts | 43 ++++++++++++++++++++++++ src/app/app.module.ts | 3 +- src/app/checkout/checkout.component.html | 38 +++++---------------- src/app/checkout/checkout.component.ts | 13 ++----- 6 files changed, 71 insertions(+), 41 deletions(-) create mode 100644 src/app/address/address.component.html create mode 100644 src/app/address/address.component.scss create mode 100644 src/app/address/address.component.ts diff --git a/src/app/address/address.component.html b/src/app/address/address.component.html new file mode 100644 index 0000000..77fc1b9 --- /dev/null +++ b/src/app/address/address.component.html @@ -0,0 +1,15 @@ +
+ {{ legend }} + + + +
diff --git a/src/app/address/address.component.scss b/src/app/address/address.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/address/address.component.ts b/src/app/address/address.component.ts new file mode 100644 index 0000000..be28087 --- /dev/null +++ b/src/app/address/address.component.ts @@ -0,0 +1,43 @@ +import { + ChangeDetectionStrategy, + Component, + inject, + Input, + OnInit, +} from '@angular/core'; +import { + ControlContainer, + FormControl, + FormGroup, + Validators, +} from '@angular/forms'; + +export function generateAddressFormGroup(): FormGroup { + return new FormGroup({ + line1: new FormControl('', Validators.required), + city: new FormControl(''), + zipCode: new FormControl(''), + }); +} + +@Component({ + selector: 'ako-address', + templateUrl: './address.component.html', + styleUrls: ['./address.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + viewProviders: [ + { + provide: ControlContainer, + useFactory: () => + inject(ControlContainer, { skipSelf: true, host: true }), + }, + ], +}) +export class AddressComponent implements OnInit { + @Input() groupName = ''; + @Input() legend = ''; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3c376ee..acde013 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,9 +4,10 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { CheckoutComponent } from './checkout/checkout.component'; +import { AddressComponent } from './address/address.component'; @NgModule({ - declarations: [AppComponent, CheckoutComponent], + declarations: [AppComponent, CheckoutComponent, AddressComponent], imports: [BrowserModule, ReactiveFormsModule], bootstrap: [AppComponent], }) diff --git a/src/app/checkout/checkout.component.html b/src/app/checkout/checkout.component.html index 10dd7de..57cc861 100644 --- a/src/app/checkout/checkout.component.html +++ b/src/app/checkout/checkout.component.html @@ -7,36 +7,14 @@ Correo Electrónico -
- Dirección de Entrega - - - -
-
- Dirección de Facturación - - - -
+ + diff --git a/src/app/checkout/checkout.component.ts b/src/app/checkout/checkout.component.ts index 8bab4e3..e8cc81d 100644 --- a/src/app/checkout/checkout.component.ts +++ b/src/app/checkout/checkout.component.ts @@ -1,5 +1,6 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { FormBuilder } from '@angular/forms'; +import { generateAddressFormGroup } from '../address/address.component'; @Component({ selector: 'ako-checkout', @@ -11,16 +12,8 @@ export class CheckoutComponent implements OnInit { form = this.fb.group({ fullName: '', email: '', - deliveryAddress: this.fb.group({ - line1: '', - city: '', - zipCode: '', - }), - billingAddress: this.fb.group({ - line1: '', - city: '', - zipCode: '', - }), + deliveryAddress: generateAddressFormGroup(), + billingAddress: generateAddressFormGroup(), }); constructor(private fb: FormBuilder) {} From 9aa9116a14f4f986a7defc603ba95acb8e2d3bcc Mon Sep 17 00:00:00 2001 From: ako-tech Date: Fri, 19 May 2023 17:24:35 +0200 Subject: [PATCH 3/3] add address component testing example --- src/app/address/address.component.spec.ts | 60 +++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/app/address/address.component.spec.ts diff --git a/src/app/address/address.component.spec.ts b/src/app/address/address.component.spec.ts new file mode 100644 index 0000000..871e9f2 --- /dev/null +++ b/src/app/address/address.component.spec.ts @@ -0,0 +1,60 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Component } from '@angular/core'; +import { FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { By } from '@angular/platform-browser'; +import { + AddressComponent, + generateAddressFormGroup, +} from './address.component'; + +/* + Si solo necesitamos testear la lógica de la clase +*/ +describe('AddressComponent Class Testing', () => { + let component: AddressComponent; + + beforeEach(() => { + component = new AddressComponent(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); + +/* + Si necesitamos testear algo del template +*/ +@Component({ + template: `
+ +
`, +}) +class WrapperComponent { + form = new FormGroup({ + testAddress: generateAddressFormGroup(), + }); +} +describe('AddressComponent Template Testing', () => { + let fixture: ComponentFixture; + let component: AddressComponent; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [WrapperComponent, AddressComponent], + imports: [ReactiveFormsModule], + // providers: [{ provide: ControlContainer, useValue: fgd }], + }).compileComponents(); + + fixture = TestBed.createComponent(WrapperComponent); + fixture.detectChanges(); + component = fixture.debugElement.query( + By.directive(AddressComponent) + ).componentInstance; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +});