CursosEmpresasBlogLiveConfPrecios

Promesas simulando click

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

Clase anteriorSiguiente clase

Contenido del curso

Introducción
  • 1
    Unit Testing en Angular para Componentes

    Unit Testing en Angular para Componentes

    01:24
  • 2
    Creando el proyecto

    Creando el proyecto

    04:29
  • 3
    Primera prueba

    Primera prueba

    17:28
Componentes
  • 4
    Creando un componente & nativeElement

    Creando un componente & nativeElement

    15:45
  • 5
    DebugElement & ByCss

    DebugElement & ByCss

    09:58
  • 6
    Componentes con Inputs

    Componentes con Inputs

    14:06
  • 7
    Simulando el clic

    Simulando el clic

    15:08
  • 8
    Componentes con Outputs

    Componentes con Outputs

    08:01
  • 9
    Pruebas aisladas al componente

    Pruebas aisladas al componente

    15:32
  • 10
    Pruebas con componente padre

    Pruebas con componente padre

    15:43
  • 11
    Resolviendo el reto

    Resolviendo el reto

    10:32
Componentes con dependencias
  • 12
    Proyecto: creando product component

    Proyecto: creando product component

    05:22
  • 13
    Componentes con dependencias

    Componentes con dependencias

    13:36
  • 14
    Pruebas a getAllProducts

    Pruebas a getAllProducts

    15:09
  • 15
    FakeAsync and tick

    FakeAsync and tick

    17:16
  • 16
    Pruebas a promesas

    Pruebas a promesas

    09:32
  • 17
    Promesas simulando click

    Promesas simulando click

    08:23
Directivas
  • 18
    Creando la Directiva

    Creando la Directiva

    10:11
  • 19
    Pruebas a Directiva

    Pruebas a Directiva

    14:25
  • 20
    Directiva con ngModel

    Directiva con ngModel

    09:22
Pipes
  • 21
    Creando pipe

    Creando pipe

    07:37
  • 22
    Testing pipes

    Testing pipes

    14:51
Próximos pasos
  • 23
    Continúa con el Curso de Testing en Formularios y Routing

    Continúa con el Curso de Testing en Formularios y Routing

    00:56
    Cesar Elías Armendariz Ruano

    Cesar Elías Armendariz Ruano

    student•
    hace 3 años

    cuando simulamos eventos desde el render es necesario usar el fakeasync y tick

    products.component.html

    <section class="container">   <h2>Products Component</h2>   <h4>Rta</h4>   <button class="btn-promise" (click)="callPromise()">Call promise</button>   <p class="rta">{{ rta }}</p>   <div class="my-grid">     <app-product       *ngFor="let product of products"       [product]="product">   </app-product>   </div>   <button class="btn-products" [disabled]="status === 'loading'" (click)="getAllProducts()">     <span *ngIf="status === 'init' || status === 'success'">Load more</span>     <span *ngIf="status === 'loading'">Loading...</span>     <span *ngIf="status === 'error'">Error</span>     </button> </section>
    describe('test for callPromise', () => {     it('should call to promise', async() => {       // Arrange       const mockMsg = 'my mock string';       valueService.getPromiseValue.and.returnValue(Promise.resolve(mockMsg));       // Act       await component.callPromise();       fixture.detectChanges();       // Assert       expect(component.rta).toEqual(mockMsg);       expect(valueService.getPromiseValue).toHaveBeenCalled();     });     it('should show "my mock string" in <p> when btn was clicked', fakeAsync(() => {       // Arrange       const mockMsg = 'my mock string';       valueService.getPromiseValue.and.returnValue(Promise.resolve(mockMsg));       const btnDe = fixture.debugElement.query(By.css('.btn-promise'));       // Act       btnDe.triggerEventHandler('click', null);       tick();       fixture.detectChanges();       const rtaDe = fixture.debugElement.query(By.css('p.rta'));       // Assert       expect(component.rta).toEqual(mockMsg);       expect(valueService.getPromiseValue).toHaveBeenCalled();       expect(rtaDe.nativeElement.textContent).toEqual(mockMsg);     }));   });

    Reto

    it('should change the status "loading" to "error" when btn-products was clicked', fakeAsync(() => {       // Arrange       productService.getAll.and.returnValue(defer(() => Promise.reject('error')));       const btnDe = fixture.debugElement.query(By.css('.btn-products'));       // Act       btnDe.triggerEventHandler('click', null);       fixture.detectChanges();       expect(component.status).toEqual('loading');       tick(4000); // exec, obs, setTimeout, promise       fixture.detectChanges();       // Assert       expect(component.status).toEqual('error');     }));
    Luis Enrique Villalobos Melendez

    Luis Enrique Villalobos Melendez

    student•
    hace 3 años

    ¿Por qué al agregarle el await al trigger del botón pasa correctamente la prueba?

    it('should show "mocking string" in <p> when button was clicked', async () => { // arrange const mockMessage = 'mocking string'; valueService.getPromiseValue.and.returnValue(Promise.resolve(mockMessage)); const buttonDebug = fixture.debugElement.query(By.css('.btn-promise')); // act await buttonDebug.triggerEventHandler('click', null); fixture.detectChanges(); const pDebug = fixture.debugElement.query(By.css('p.rta')); // assert expect(component.rta).toEqual(mockMessage); expect(valueService.getPromiseValue).toHaveBeenCalled(); expect(pDebug.nativeElement.textContent).toEqual(mockMessage); });
    Jorge Luis Silva Medina

    Jorge Luis Silva Medina

    student•
    hace 3 años

    Nico duda, es una buena practica agregar clases a los elementos HTML como identificadores para realizarles pruebas?

    Ana Velez Ossa

    Ana Velez Ossa

    student•
    hace 2 años

    La solución al reto:

    it('should change the status "loading" to "error"', fakeAsync(() => { const productsMock = generateManyProducts(10); productService.getAll.and.returnValue(defer(() => Promise.reject('error'))); const btnDeb = fixture.debugElement.query(By.css('.btn-getAllProducts')); fixture.detectChanges(); btnDeb.triggerEventHandler('click', null); expect(component.status).toEqual('loading'); tick(4000); fixture.detectChanges(); expect(component.status).toEqual('error'); }));
    Danny Alejandro fernandez gallego

    Danny Alejandro fernandez gallego

    student•
    hace 3 años

    La solución al reto:

    it('Test for status "loading" to "sucess"', fakeAsync(()=>{ //Arrange const productsMock = generateManyProducts(10); productsService.getAll.and.returnValue(defer(()=>Promise.reject('error'))); //Act const btnCall = fixture.debugElement.query(By.css('.btn-call')) btnCall.triggerEventHandler('click', null) fixture.detectChanges(); expect(component.status).toEqual('loading') //Asert tick(4000); fixture.detectChanges(); expect(component.status).toEqual('error'); expect(productsService.getAll).toHaveBeenCalled(); }));
    Carlos Alejandro Hernández Mejía

    Carlos Alejandro Hernández Mejía

    student•
    hace 3 años

    Mi solución al reto:

    it('should change the status property from "loading" to "success" when the getAll method from ProductService returns an array of products', fakeAsync(() => { // Arrange const productsMock = generateManyProducts(5); productServiceSpy.getAll.and.returnValue( defer(() => Promise.resolve(productsMock)) ); spyOn(component, 'getProducts').and.callThrough(); const debugButton = fixture.debugElement.query(By.css('button[name="loadMore"]')); // Act debugButton.triggerEventHandler('click', null); fixture.detectChanges(); expect(component.status).toEqual('loading'); tick(); fixture.detectChanges(); // Assert expect(component.getProducts).toHaveBeenCalledTimes(1); expect(component.status).toEqual('success'); })); it('should change the status property from "loading" to "error" when the getAll method from ProductService return an error', fakeAsync(() => { // Arrange const errorMock = new HttpErrorResponse({ status: 404 }); productServiceSpy.getAll.and.returnValue( defer(() => Promise.reject(errorMock)) ); spyOn(component, 'getProducts').and.callThrough(); const debugButton = fixture.debugElement.query(By.css('button[name="loadMore"]')); // Act debugButton.triggerEventHandler('click', null); fixture.detectChanges(); expect(component.status).toEqual('loading'); tick(); fixture.detectChanges(); // Assert expect(component.getProducts).toHaveBeenCalledTimes(1); expect(component.status).toEqual('error'); }));
    Armando Rivera

    Armando Rivera

    student•
    hace 4 años

    Mi solución al reto

    it('should change the status "loading" => "success" by clicking the button', fakeAsync(() => { // Arrange const productsMock = generateManyProducts(); productService.getAll.and.returnValue( defer(() => Promise.resolve(productsMock)) ); const debugButton = fixture.debugElement.query( By.css('.getAllProductsButton') ); // Act debugButton.triggerEventHandler('click', null); fixture.detectChanges(); const debugSpanButtonBefore = fixture.debugElement.query( By.css('.getAllProductsButton span') ).nativeElement; expect(debugSpanButtonBefore.textContent).toContain('Loading'); tick(); // Exec all pending observers, promises, setTimeout, etc; fixture.detectChanges(); const debugSpanButtonAfter = fixture.debugElement.query( By.css('.getAllProductsButton span') ).nativeElement; // Assert expect(component.status).toEqual('success'); expect(debugSpanButtonAfter.textContent).toContain('Load more'); }));

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads