angular - with - writing karma unit tests




Testes angulares falhando com Falha ao executar 'enviar' em 'XMLHttpRequest' (8)

Eu estou tentando testar o meu componente angular 4.1.0 -

export class CellComponent implements OnInit {
  lines: Observable<Array<ILine>>;
  @Input() dep: string;
  @Input() embedded: boolean;
  @Input() dashboard: boolean;
  constructor(
    public dataService: CellService,
    private route: ActivatedRoute,
    private router: Router, private store: Store<AppStore>) {
  }
}

No entanto, um simples "deve criar" teste lança este erro enigmático ...

NetworkError: falha ao executar 'send' em 'XMLHttpRequest': falha ao carregar 'ng: ///DynamicTestModule/module.ngfactory.js'.

então eu encontrei this pergunta, o que sugere que o problema é que o componente tem @Input)_ params que não estão definidos, no entanto, se eu modificar meu teste da seguinte forma:

  it('should create', inject([CellComponent], (cmp: CellComponent) => {
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    expect(cmp).toBeTruthy();
  }));

então eu ainda recebo o mesmo problema, da mesma forma, se eu remover as anotações @Input() do componente, ainda não há diferença. Como posso fazer com que esses testes sejam aprovados?


Como sugerido acima aqui: https://.com/a/45570571/7085047 meu problema estava no meu ngOnInit . Eu estava chamando um proxy de controlador REST gerado por swagger. Ele estava retornando null, e eu estava assinando esse null, o que não funciona ...

O erro voltou:

Failed to load ng:///DynamicTestModule/MockNodeDashboardComponent_Host.ngfactory.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Corrigi o problema usando ts-mockito: https://github.com/NagRock/ts-mockito

Eu adicionei código para criar uma instância de simulação como esta:

import { mock, instance, when } from 'ts-mockito';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { MockScenario } from './vcmts-api-client/model/MockScenario';

const MockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = mock(VcmtsnodemockresourceApi);
const obs = Observable.create((observer: Observer<MockScenario[]>) => {
  observer.next(new Array<MockScenario>());
  observer.complete();
});
when(MockVcmtsnodemockresourceApi.getMockScenariosUsingGET()).thenReturn(obs);
const instanceMockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = instance(MockVcmtsnodemockresourceApi);

Em seguida, adicionamos a instância à matriz de provedores do teste desta forma:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ...
      providers: [
        ...
        { provide: VcmtsnodemockresourceApi, useValue: instanceMockVcmtsnodemockresourceApi },
        ...
      ]        
    }).compileComponents();
  }));

Este é um problema do novo Angular Cli. Execute seu teste com --sourcemaps=false e você receberá as mensagens de erro corretas.

Veja detalhes aqui: github.com/angular/angular-cli/issues/7296

EDITAR:

Taquigrafia para isso é:

ng test -sm=false

A partir do ângulo 6, o comando é:

ng test --source-map=false


Eu também tive esse erro, que verdade seja dita é bastante não verbal.

Foi relacionado com as chamadas HTTP através dos meus serviços

Eu uso myService.ts com 2 métodos

get();
getAll();

Eu estou zombando deste serviço: mockMyService.ts

O erro estava aqui porque meu componente estava usando o método getAll () que eu esqueci de implementar no mockMyService, então eu adicionei o método:

private mockObjects = [
{
  'id': '1',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data bidon'
},
{
  'id': '2',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data au pif'
},
{
  'id': '3',
  'champ1': 'FUNC',
  'champ2': 3,
  'champ3': 'Data quelconque'
},
 ];

getAll(): Observable<any> {
  return Observable.of(this.mockObjects);
}

Erro foi embora :)


Eu tive o mesmo problema usando angualar cli 6, eu usei essa tag para obter a mensagem de erro certa:

ng test --source-map=false

Talvez ajude alguém :).


No meu caso, o culpado era observable.timeout(x).retry(y) aplicado em algum lugar no nível observable.timeout(x).retry(y) Observable no nível da classe de serviço, e novamente no componente que estava usando esse serviço.

Tudo funcionou corretamente no navegador até o angular-cli 1.4. Então começou a falhar durante os testes de Karma (com um erro tão bobo). A solução foi, obviamente, arrumar esses operadores de timeout / retry.


O que eu estaria fazendo é:

Adicione console.log () s, linha após linha em ngOnint () e descubra até onde vai, então inspecione a linha que não passará.

Ex:

ngOnInit() {
    this.route.paramMap
        .switchMap(params => {
            this.busy = true;
            this.updateErrors(null);

            console.log(params);

            **const id = params.get('id');**
            console.log(id);

            if (id === 'new') {
                this.editMode = true;
                return Observable.of(GroupComponent.newGroup());
            }
            return this.apiService.getGroup(id);
        })
    }

Isso estava falhando no meu teste com o mesmo erro neste post. Como mostrado acima, eu tinha dois console.logs. O primeiro passou por ele, mas o segundo não. Então eu percebi que o problema está na linha const id = params.get ('id'); e eu consertei.

Espero que isso ajude alguém.


Para o meu caso, houve um problema de dados simulado e, no caso de Array , eu estava retornando string do mock.

someApi = fixture.debugElement.injector.get(SomeApi);
spyOn(someApi, 'someMethod')
  .and.returnValue(Observable.of('this is not a string but array'));

A mensagem de erro é realmente perturbadora e não estava dizendo o erro real. A execução do ng test --source=false apontou o erro e a linha corretos e me ajudou a corrigi-lo rapidamente.

Muitas vezes acontece quando você mira dados incompletos ou incorretos.


Você pode definir a propriedade input () para o valor padrão em component.ts

@Input() tableColumns: Array<any> = [];  
@Input() pageObj: any = '';

OU

Modifique seu arquivo component.spec.ts da seguinte maneira,

beforeEach(() => {  
   fixture = TestBed.createComponent(MyComponent);  
   component = fixture.componentInstance;  
   component.tableColumns = [];  
   component.pageObj = '';  
   fixture.detectChanges();  
});




angular-cli