4 dicas para escrever testes de unidade Angular, venha dar uma olhada!

Ideias de teste:

• 1. Se o teste unitário for possível, tente dar prioridade ao teste unitário.
• 2. Se o teste unitário não for possível, teste através de uma camada de embalagem. Por exemplo, encapsulando o teste em um componente, mas é mais fraco do que. testes de integração
• 3. Testes de integração
• 4. Testes E2E

A dificuldade do teste também aumenta gradualmente e mais tempo leva. Se você deseja simplificar os testes, durante o desenvolvimento, você deve esclarecer conscientemente suas ideias e escrever um código que seja simples e eficiente ~.

A pilha de tecnologia de teste usada neste artigo: Angular12 + Jasmine Embora a sintaxe de outras tecnologias de teste seja diferente, a ideia geral é semelhante. [Recomendação do tutorial relacionado: "tutorial angular"]

Dicas: Determinação do caso de teste Jasmine, quais são os métodos, você pode encontrá-los aqui, clique no componente em meu

teste de unidade

, o padrão é a instância do objeto a ser testado criado por Angular usando a seguinte sintaxe

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

Teste de função

1. Chamada de função sem valor de retorno

function test(index:number,fn:Function){
 se(fn){
     fn(índice);
 }
}

Como testar?

Exemplo de contador: testando diretamente o valor de retorno undefined

const res = component.test(1,() => {}));
  expect(res).tobeUndefined();

Prática recomendada:

# Use Jasmine
 it('deve obter dados corretos ao chamar o teste',() =>{
     parâmetro const = {
       fn: () => {}
    }
   espião(param,'fn')
   componente.teste(1,param.fn);
   expect(param.fn).toHaveBeenCalled();
 })

Instrução de estrutura HostListener testa

instruções de estrutura Palavras comumente usadas são ocultação, exibição e loops for para exibir tais funções

.
 @Directive({seletor: '[ImageURlError]' })
classe de exportação ImageUrlErrorDirective implementa OnChanges {
  construtor (el privado: ElementRef) {}
  
  @HostListener('erro')
  erro público() { 
      this.el.nativeElement.style.display = 'nenhum';
  } 
}

Como testar?

Ideia de teste:

• a imagem não é acionada até que haja um erro no carregamento da imagem. Em seguida, encontre uma maneira de acionar o erro.
• O comando geralmente é anexado ao elemento de imagem do componente, basta usar errorEvent no dispath

#1. . Adicione um componente personalizado e adicione a diretiva personalizada @Component({
  modelo: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
classe TestHostComponent {

}

#2. Instancie a visualização do componente personalizado e envie errorEvent
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        declarações: [
            TestHostComponent,
            ImageURlError
        ]
    });
}));

beforeEach(() => { 
 fixture = TestBed.createComponent(TestHostComponent); 
 componente = fixture.componentInstance; 
 fixture.detectChanges();
});
  
it('deve permitir apenas números', () => {
    evento const = new ErrorEvent('erro', {} como qualquer);
    imagem const = fixture.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //Basta despachar o evento e o método error() será executado neste momento});

Faça bom uso dos modificadores públicos, privados e protegidos

. .ts pode acessar; mas modificações privadas e protegidas não são permitidas,

bata no quadro-negro

• se você planeja fazer testes unitários e testar cada método, então use public apropriadamente --- Dificuldade *
• Se você não planeja testar cada método, então você pode passar Organizar os dados, chamar a entrada e passar no teste de dificuldade de integração ***

teste

O acionamento do evento de clique pode incluir js direto chamando clique ou imitando o mouse para acionar o evento de clique.

#xx.component.ts
@Componente({
 selecotr: 'lista de heróis do painel'
})
classe DashBoardHeroComponent {
    cartões públicos = [{
        clique em: () => {
            .....
        }
    }]
}
#html
<dashboard-hero-list [cartões]="cartões" class="cartão">
</dashboard-hero-list>`

Como testar?

Idéia de teste:

• teste o componente diretamente, não use
• a coleção de objetos contendo eventos de clique retornados pelo Host, e chame click um por um, para que a cobertura do código seja melhorada

('deve obter dados corretos quando chamar click', () => {
    cartões const = componente.cards;
    cartões?.forEach(cartão => {
        if(cartão.clique){
            card.click(novo Evento('clique'));
        }
    });
    esperar(cartões?.comprimento).toBe(1);
});

Outras ideias de referência de clique:

Ideia 1:

• Use TestHostComponent para agrupar o componente que precisa ser testado
• e, em seguida, use fixture.nativeElement.querySelector('.card') para encontrar o elemento de clique vinculado ao componente
• ; acione dispatchEvent, é isso.

Idéia 2:

• teste o componente diretamente, sem usar Host

• e depois use fixture.nativeElement.querySelector('.card') para encontrar o elemento de clique vinculado

• use triggerEventHandler('click');