Proyecto: creando product component

Clase 12 de 23 • Curso de Angular: Unit Testing para Componentes

Contenido del curso

Introducción

Componentes

Componentes con dependencias

Directivas

Pipes

Próximos pasos

23
Continúa con el Curso de Testing en Formularios y Routing
00:56 min

Tomar examen

Comentarios

Nicolas Molina

teacher•

La API que se esta usando es esta 👉

Cesar Elías Armendariz Ruano

student•

Normalmente utilizamos nuestras dependencias para conectar nuestros servicios y los servicios conectar con nuestros components.

primero creamos el componente product

ng g c components/product

luego hacemos que obtenga el producto a renderizar con un Input

product.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Product } from 'src/app/models/product.model';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})

export class ProductComponent implements OnInit {

  @Input() product!: Product;

  constructor() { }

  ngOnInit(): void {
  }

}

hacemos que se renderize en el html

product.component.html

<div>
  <figure>
    <img [src]="product.images[0]" alt="">
    <figcaption>
      {{product.title}} - {{product.price}}
    </figcaption>
  </figure>
  <p>{{ product.description }}</p>
</div>

finalmente lo integramos en products component

products.component.html

<section class="container">
  <h2>Products Component</h2>
  <div class="my-grid">
    <app-product
      *ngFor="let product of products"
      [product]="product">
  </app-product>
  </div>
</section>

Ana Velez Ossa

student•

<img src="https://picsum.photos/id/{{product.id}}/400/?blur" alt="">

Si no esta visualizando la imagen con [src]="product.images[0]"

José Valentin Abundo Hernandez

student•

Si las imagenes no se ven puedes modificar un poco el servicio getAll

 getAll(limit?: number, offset?: number): Observable<Product[]> {
    let params = new HttpParams();
    if (limit && offset != null) {
      params = params.set('limit', limit);
      params = params.set('offset', offset);
    }
    return this.http.get<Product[]>(`${this.apiUrl}/products`, { params })
    .pipe(
      retry(3),
      map(products => products.map((item, idx) => {
        return {
          ...item,
          taxes: item.price > 0 ? .19 * item.price : 0,
          images: item.images.map(() => `https://picsum.photos/200?random=${idx}`)
        }
      }))
    );
  }

Adrian Silva

student•

Cuando arranqué esta saga de curso de testing, me costó bastante entenderlo, pero ya me estoy sintiendo bastante comodo con este tema. Gracias a Jehová primeramente y al equipo de Platzi👏👏👏

import { Component, Input, OnInit } from '@angular/core';
import { Product } from 'src/app/models/product.model';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})

export class ProductComponent implements OnInit {

  @Input() product!: Product;

  constructor() { }

  ngOnInit(): void {
  }

}

<div>
  <figure>
    <img [src]="product.images[0]" alt="">
    <figcaption>
      {{product.title}} - {{product.price}}
    </figcaption>
  </figure>
  <p>{{ product.description }}</p>
</div>

<section class="container">
  <h2>Products Component</h2>
  <div class="my-grid">
    <app-product
      *ngFor="let product of products"
      [product]="product">
  </app-product>
  </div>
</section>

 getAll(limit?: number, offset?: number): Observable<Product[]> {
    let params = new HttpParams();
    if (limit && offset != null) {
      params = params.set('limit', limit);
      params = params.set('offset', offset);
    }
    return this.http.get<Product[]>(`${this.apiUrl}/products`, { params })
    .pipe(
      retry(3),
      map(products => products.map((item, idx) => {
        return {
          ...item,
          taxes: item.price > 0 ? .19 * item.price : 0,
          images: item.images.map(() => `https://picsum.photos/200?random=${idx}`)
        }
      }))
    );
  }

Proyecto: creando product component

Introducción

Unit Testing en Angular para Componentes

Creando el proyecto

Primera prueba

Componentes

Creando un componente & nativeElement

DebugElement & ByCss

Componentes con Inputs

Simulando el clic

Componentes con Outputs

Pruebas aisladas al componente

Pruebas con componente padre

Resolviendo el reto

Componentes con dependencias