4 consejos para escribir pruebas unitarias de Angular, ¡ven y echa un vistazo!

Ideas de prueba:

• 1. Si las pruebas unitarias son posibles, intente dar prioridad a las pruebas unitarias.
• 2. Si las pruebas unitarias no son posibles, pruebe a través de una capa de embalaje. Por ejemplo, encapsule la prueba en un componente, pero es más débil que. pruebas de integración
• 3. Pruebas de integración
• 4. Pruebas E2E

La dificultad de la prueba también aumenta gradualmente y cuanto más tiempo lleva. Si desea simplificar las pruebas, durante el desarrollo, debe aclarar conscientemente sus ideas y escribir código que sea simple y eficiente ~.

La pila de tecnología de prueba utilizada en este artículo: Angular12 + Jasmine Aunque la sintaxis de otras tecnologías de prueba es diferente, la idea general es similar. [Recomendación del tutorial relacionado: "tutorial angular"]

Consejos: Determinación del caso de prueba de Jasmine, cuáles son los métodos, puede encontrarlo aquí, haga clic en el componente en mi

prueba unitaria

, el valor predeterminado es la instancia del objeto a probar creado por Angular usando la siguiente sintaxis

beforeEach(() => { 
  accesorio = TestBed.createComponent(BannerComponent); 
  componente = accesorio.componentInstance; 
  accesorio.detectChanges(); 
});

Prueba de función

1. Llamada a función sin valor de retorno

prueba de función(índice:número,fn:Función){
 si(nota){
     fn(índice);
 }
} ¿

Cómo realizar la prueba?

Ejemplo de contador: prueba directa del valor de retorno undefinido

const res = componente.test(1,() => {}));
  expect(res).tobeUndefinido();

Práctica recomendada:

# Utilice Jasmine
 it('debería obtener datos correctos al llamar a test',() =>{
     parámetro constante = {
       fn: () => {}
    }
   spyOn(parámetro,'fn')
   componente.prueba(1,param.fn);
   esperar(param.fn).toHaveBeenCalled();
 })

Instrucción de estructura HostListener prueba

las instrucciones de estructura. Las palabras de uso común son ocultar, mostrar y bucles para mostrar dichas funciones

.
 @Directive({ selector: '[ImageURlError]' })
clase de exportación ImageUrlErrorDirective implementa OnChanges {
  constructor (el privado: ElementRef) {}
  
  @HostListener('error')
  error público() { 
      this.el.nativeElement.style.display = 'ninguno';
  } 
} ¿

Cómo realizar la prueba?

Idea de prueba:

• la imagen no se activa hasta que hay un error al cargar la imagen. Luego, busque una manera de activar el error.
• El comando generalmente se adjunta al elemento de imagen del componente, simplemente use errorEvent en dispath

#1. Agregue un componente personalizado y agregue la directiva personalizada @Component({.
  plantilla: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
clase TestHostComponent {

}

#2. Cree una instancia de la vista del componente personalizado y envíe el evento de error.
antes de cada(waitForAsync(() => {
    TestBed.configureTestingModule({
        declaraciones: [
            componenteHostdeprueba,
            Error de URL de imagen
        ]
    });
}));

antes de cada uno(() => { 
 accesorio = TestBed.createComponent(TestHostComponent); 
 componente = accesorio.componentInstance; 
 accesorio.detectChanges();
});
  
it('debería permitir solo números', () => {
    evento constante = nuevo ErrorEvent('error', {} como cualquiera);
    imagen const = fix.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); // Simplemente envíe el evento y el método error() se ejecutará en este momento});

haga un buen uso de los modificadores públicos, privados y protegidos

en angular, spec

.ts puede acceder; pero no se permiten modificaciones privadas y protegidas;

toque la pizarra

• si planea realizar pruebas unitarias y probar cada método, utilice public apropiadamente --- Dificultad *
• Si no planea probar cada método, luego puede pasar Organice los datos, llame a la entrada y pase la prueba de integración

prueba

evento de clic La activación del evento de clic puede incluir una llamada directa a js o imitar el mouse para activar el evento de clic.

#xx.componente.ts
@Componente({
 selecotr: 'lista-de-héroes-del-panel'
})
clase DashBoardHeroComponent {
    tarjetas públicas = [{
        haga clic en: () => {
            .....
        }
    }]
}
#html
<dashboard-hero-list [tarjetas]="tarjetas" clase="tarjeta">
</dashboard-hero-list>`

¿Cómo realizar la prueba?

Idea de prueba:

• pruebe el componente directamente, no utilice
• la colección de objetos que contienen eventos de clic devueltos por el Host y llame al clic uno por uno, para mejorar la cobertura del código

('debe obtener datos correctos cuando llame al clic', () => {
    tarjetas constantes = tarjetas.componentes;
    ¿tarjetas?.forEach(tarjeta => {
        si(tarjeta.clic){
            card.click(nuevo evento('clic'));
        }
    });
    esperar(tarjetas?.longitud).toBe(1);
});

Otras ideas de referencia de clic:

Idea 1:

• use TestHostComponent para envolver el componente que necesita ser probado
• y luego use fix.nativeElement.querySelector('.card') para encontrar el elemento de clic vinculado al componente
• ; active DispatchEvent, eso es todo.

Idea 2:

• pruebe el componente directamente, sin usar Host

• y luego use fix.nativeElement.querySelector('.card') para encontrar el elemento de clic vinculado

• use triggerEventHandler('click');