Pruebas de Integración Básicas

src/app/app.module.ts

@@ -2,15 +2,23 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import { MedicosComponent } from './intermedias/espias/medicos.component';
+import { MedicosComponent } from './unitarias/avanzadas/espias/medicos.component';
+import { MedicoComponent } from './integradas/basicas/medico/medico.component';
+import { HospitalComponent } from './integradas/basicas/hospital/hospital.component';
+import { IncrementadorComponent } from './integradas/intermedias/incrementador/incrementador.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
     AppComponent,
-    MedicosComponent
+    MedicosComponent,
+    MedicoComponent,
+    HospitalComponent,
+    IncrementadorComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/integradas/basicas/hospital/hospital.component.html

@@ -0,0 +1 @@
+<p>hospital works!</p>

src/app/integradas/basicas/hospital/hospital.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HospitalComponent } from './hospital.component';
+
+describe('HospitalComponent', () => {
+  let component: HospitalComponent;
+  let fixture: ComponentFixture<HospitalComponent>;
+
+  beforeEach(async () => {
+    // await TestBed.configureTestingModule({
+    //   declarations: [ HospitalComponent ]
+    // })
+    // .compileComponents();
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HospitalComponent ]
+    })
+
+    fixture = TestBed.createComponent(HospitalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('Debe de crear un HospitalComponent', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/integradas/basicas/hospital/hospital.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hospital',
+  templateUrl: './hospital.component.html',
+  styleUrls: ['./hospital.component.css']
+})
+export class HospitalComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/integradas/basicas/medico/medico.component.html

@@ -0,0 +1 @@
+<p>medico works!</p>

src/app/integradas/basicas/medico/medico.component.spec.ts

@@ -0,0 +1,39 @@
+import { HttpClientModule } from '@angular/common/http';
+import { TestBed, ComponentFixture } from '@angular/core/testing'
+import { MedicoComponent } from './medico.component';
+import { MedicoService } from './medico.service';
+
+describe('Medico Component', () => {
+
+    let component: MedicoComponent;
+    let fixture: ComponentFixture<MedicoComponent>;
+
+    beforeEach( () => {
+
+        // En las pruebas unitarias creariamos la instancia de MedicoComponente, pero en las integradas no se hace así
+        // 
+        // component = new MedicoComponent();
+
+        TestBed.configureTestingModule({
+            declarations: [ MedicoComponent ],
+            providers: [ MedicoService ], // En el caso de que el MedicoComponent requiriese un servicio iria en providers
+            imports: [ HttpClientModule ], // O si usara otro tipo de importaciones como otros módulos iria en imports
+        });
+
+        fixture = TestBed.createComponent(MedicoComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('Debe de crearse el componente', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('Debe de retornar el nombre del médico', () => {
+
+        const nombre = 'Juan';
+        const resp = component.saludarMedico(nombre);
+
+        expect(resp).toContain(nombre);
+    });
+
+});

src/app/integradas/basicas/medico/medico.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { MedicoService } from './medico.service';
+
+@Component({
+  selector: 'app-medico',
+  templateUrl: './medico.component.html',
+  styles: []
+})
+export class MedicoComponent implements OnInit {
+
+  medicos: any[] = [];
+
+
+  constructor(private _medicoService: MedicoService) { }
+
+  ngOnInit(): void {
+  }
+
+  saludarMedico(medico: string){
+    return `Hola ${medico}`;
+  }
+
+  obtenerMedicos(){
+    this._medicoService.getMedicos()
+        .subscribe((medicos: any) => this.medicos = medicos )
+  }
+}

src/app/integradas/basicas/medico/medico.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MedicoService {
+
+  constructor(public http: HttpClient) { }
+
+  getMedicos(){
+    return this.http.get('...');
+  }
+}

src/app/integradas/intermedias/incrementador/incrementador.component.html

@@ -0,0 +1,19 @@
+<h3>
+    {{ leyenda }} - {{ progreso }}
+</h3>
+
+<div class="input-group">
+    <span class="input-group-btn">
+    <button class="btn btn-primary" type="button" (click)="cambiarValor(-5)">
+        <i class="mdi mdi-minus"></i>
+    </button>
+  </span>
+
+    <input #txtProgress type="number" class="form-control" name="progreso" [(ngModel)]="progreso" (ngModelChange)="onChanges($event)" min="1" max="100">
+
+    <span class="input-group-btn">
+      <button class="btn btn-primary" type="button" (click)="cambiarValor(+5)">
+          <i class="mdi mdi-plus"></i>
+      </button>
+    </span>
+</div>

src/app/integradas/intermedias/incrementador/incrementador.component.spec.ts

@@ -0,0 +1,65 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { IncrementadorComponent } from './incrementador.component';
+
+
+describe('Incremendator Component', () => {
+
+    let component: IncrementadorComponent;
+    let fixture: ComponentFixture<IncrementadorComponent>;
+
+    beforeEach( () => {
+        TestBed.configureTestingModule({
+            declarations: [ IncrementadorComponent ],
+            imports: [ FormsModule ]
+        });
+
+        fixture = TestBed.createComponent(IncrementadorComponent);
+        component = fixture.componentInstance;
+
+    });
+
+    it('Debe de mostrar la leyenda', () => {
+        component.leyenda = 'Progreso de carga';
+        fixture.detectChanges(); // Disparar la detección de cambios de Angular
+        const elem: HTMLElement = fixture.debugElement.query(By.css('h3')).nativeElement; // By.css('.form-control') - By.css('#form-control')
+
+        expect(elem.innerHTML).toContain('Progreso de carga')
+    });
+
+    it('Debe de mostrar en el input el valor del progreso', () => {
+        component.cambiarValor(5);
+        fixture.detectChanges();
+
+        // Fuera de esta funcion el input aún no habría cambiado su valor
+        fixture.whenStable().then( () => {
+            const input = fixture.debugElement.query(By.css('input')).nativeElement;
+            expect(input.value).toBe('55');
+        })
+
+        expect(true).toBeTruthy(); // To avoid SPEC HAS NO EXPECTATIONS
+    });
+
+    it('Debe de incrementar/decrementar en 5, con un click en el botón', () => {
+        const botones = fixture.debugElement.queryAll(By.css('.btn-primary'));
+
+        botones[0].triggerEventHandler('click', null);
+        expect(component.progreso).toBe(45);
+
+        // botones[1].triggerEventHandler('click', null);
+        // expect(component.progreso).toBe(50);
+    });
+
+    it('Debe de mostrar el progreso en el H3', () => {
+
+        const botones = fixture.debugElement.queryAll(By.css('.btn-primary'));
+        botones[0].triggerEventHandler('click',null);
+        fixture.detectChanges();
+
+        const progress = fixture.debugElement.query(By.css('h3')).nativeElement;
+        expect(progress.innerHTML).toContain(45);
+
+    });
+
+});

src/app/integradas/intermedias/incrementador/incrementador.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input, Output, ViewChild, OnInit, EventEmitter, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'app-incrementador',
+  templateUrl: './incrementador.component.html',
+  styles: []
+})
+export class IncrementadorComponent implements OnInit {
+
+  @ViewChild('txtProgress') txtProgress!: ElementRef;
+
+  // tslint:disable-next-line:no-input-rename
+  @Input('nombre') leyenda: string = 'Leyenda';
+  @Input() progreso: number = 50;
+
+  // tslint:disable-next-line:no-output-rename
+  @Output('actualizaValor') cambioValor: EventEmitter<number> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() { }
+
+  onChanges( newValue: number ) {
+
+    if ( newValue >= 100 ) {
+      this.progreso = 100;
+    }else if ( newValue <= 0 ) {
+      this.progreso = 0;
+    }else {
+      this.progreso = newValue;
+    }
+
+    this.txtProgress.nativeElement.value = this.progreso;
+
+    this.cambioValor.emit( this.progreso );
+
+  }
+
+  cambiarValor( valor: number ) {
+
+    if ( this.progreso >= 100 && valor > 0 ) {
+      this.progreso = 100;
+      return;
+    }
+
+    if ( this.progreso <= 0 && valor < 0 ) {
+      this.progreso = 0;
+      return;
+    }
+
+    this.progreso = this.progreso + valor;
+
+    this.cambioValor.emit( this.progreso );
+
+  }
+
+}

src/app/integradas/intermedias/incrementador/incrementador.component.unit.spec.ts

@@ -0,0 +1,16 @@
+import { IncrementadorComponent } from './incrementador.component'
+
+describe('Incrementador Component Unit', () => {
+
+    let component: IncrementadorComponent;
+
+    beforeEach( () => component = new IncrementadorComponent());
+
+    it('No debe de pasar de 100 el progreso', () => {
+        component.progreso = 100;
+        component.cambiarValor(5);
+
+        expect(component.progreso).toBe(100);
+    });
+
+});