Se agregan pruebas unitarias del componente de listar cafés

package.json

@@ -18,9 +18,11 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "@faker-js/faker": "^8.4.1",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0-rc.2",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
+    "faker": "^6.6.6",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/app.component.spec.ts

@@ -1,15 +1,18 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { CoffeeListComponent } from './coffee/coffee-list/coffee-list.component';
+import { HttpClientModule } from '@angular/common/http';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule, HttpClientModule
       ],
       declarations: [
-        AppComponent
+        AppComponent,
+        CoffeeListComponent
       ],
     }).compileComponents();
   });
@@ -30,6 +33,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, parcial-sem4');
+    expect(compiled.querySelector('h1')?.textContent).toContain('El aroma mágico');
   });
 });

src/app/coffee/coffee-list/coffee-list.component.spec.ts

@@ -2,27 +2,107 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
-
 import { CoffeeListComponent } from './coffee-list.component';
+import { HttpClientModule } from '@angular/common/http';
+import { Coffee } from '../coffee';
+import { CoffeeService } from '../coffee.service';
+import { faker } from '@faker-js/faker';
 
 describe('CoffeeListComponent', () => {
   let component: CoffeeListComponent;
   let fixture: ComponentFixture<CoffeeListComponent>;
+  let debug: DebugElement;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CoffeeListComponent ]
+      imports: [HttpClientModule],
+      declarations: [ CoffeeListComponent ],
+      providers: [ CoffeeService ]
     })
     .compileComponents();
   }));
 
+  //  function generateCoffee(): any {
+  //   return {
+  //     id: faker.string.uuid(), // Genera un ID único
+  //     title: faker.word.noun(), // Genera un título de película aleatorio
+  //     poster: faker.image.url(), // Genera una URL de póster de película aleatoria
+  //     duration: faker.random.numeric(), // Genera una duración aleatoria en minutos
+  //     country: faker.location.country(), // Genera un país aleatorio
+  //     releaseDate: faker.date.soon({ refDate: '2023-01-01T00:00:00.000Z' }), // Genera una fecha de lanzamiento aleatoria en formato ISO
+  //     popularity: faker.random.numeric()  // Genera un nivel de popularidad aleatorio
+  //   };
+  // }   
+
   beforeEach(() => {
     fixture = TestBed.createComponent(CoffeeListComponent);
     component = fixture.componentInstance;
+    const numberOfElements = 3;
+
+    for(let i = 0; i < numberOfElements; i++) {
+      const coffee = new Coffee(
+        faker.number.int(),
+        faker.person.firstName(),
+        faker.location.country(),
+        faker.location.city(),
+        faker.string.uuid(),
+        faker.number.int(),
+        faker.image.url()        
+      );
+      component.coffees.push(coffee);   
+    }
+
     fixture.detectChanges();
+    debug = fixture.debugElement;
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have a table row with 4 th elements', () => {
+    // Obtener la tabla desde el componente
+    const table = fixture.debugElement.query(By.css('table'));
+
+    // Obtener todas las filas de la tabla
+    const rows = table.queryAll(By.css('tr'));
+
+    // Filtrar las filas que contienen exactamente 4 elementos th
+    const rowWith4Th = rows.find(row => {
+      const thElements = row.queryAll(By.css('th'));
+      return thElements.length === 4;
+    });
+
+    // Verificar que se encontró una fila con 4 th
+    expect(rowWith4Th).toBeTruthy();
+  });
+
+
+  it('should have 3 tr elements in tbody', () => {
+    // Obtener el tbody desde el componente
+    const tbody = fixture.debugElement.query(By.css('tbody'));
+
+    // Obtener todos los tr dentro del tbody
+    const trElements = tbody.queryAll(By.css('tr'));
+
+    // Verificar que haya exactamente 3 tr elements
+    expect(trElements.length).toBe(3);
+  });
+
+
+
+it('should display Coffee names correctly', () => {
+  // Obtener todos los elementos td en la segunda columna de la tabla
+  const tdElements = fixture.debugElement.queryAll(By.css('td:nth-child(2)'));
+
+  // Verificar que el número de elementos coincide con el número de coffees
+  expect(tdElements.length).toEqual(component.coffees.length);
+
+  // Iterar sobre los elementos y verificar que el texto coincide con los nombres de los coffees
+  tdElements.forEach((td, index) => {
+      const CoffeeName = td.nativeElement.textContent.trim(); // Obtener el texto del td y eliminar los espacios en blanco alrededor
+      expect(CoffeeName).toEqual(component.coffees[index].nombre); // Verificar que el texto coincide con el nombre del coffee correspondiente
+  });
+});
+
 });

src/app/coffee/coffee.service.spec.ts

@@ -2,10 +2,12 @@
 
 import { TestBed, async, inject } from '@angular/core/testing';
 import { CoffeeService } from './coffee.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('Service: Coffee', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
       providers: [CoffeeService]
     });
   });