La API que se esta usando es esta 👉https://api.escuelajs.co/docs/
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
Proyecto: creando product component
Componentes con dependencias
Pruebas a getAllProducts
FakeAsync and tick
Pruebas a promesas
Promesas simulando click
Directivas
Creando la Directiva
Pruebas a Directiva
Directiva con ngModel
Pipes
Creando pipe
Testing pipes
Próximos pasos
Continúa con el Curso de Testing en Formularios y Routing
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
15 Días
13 Hrs
37 Min
19 Seg
Proyecto: creando product component
12/23Recursos
Aportes 5
Preguntas 0
Ordenar por:
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">
<h1>Products Component</h1>
<div class="my-grid">
<app-product
*ngFor="let product of products"
[product]="product">
</app-product>
</div>
</section>
```ts
```
Si no esta visualizando la imagen con \[src]="product.images\[0]"
Si las imagenes no se ven puedes modificar un poco el servicio getAll
```js
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}`)
}
}))
);
}
```
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👏👏👏
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?