Angular tests failing with Failed to execute 'send' on 'XMLHttpRequest'

Question

I am trying to test my angular 4.1.0 component -

export class CellComponent implements OnInit {
  lines: Observable>;
  @Input() dep         


        

Answer 1

For me this message appear when a mock is falsy in my tests : usually you provide mockService in your tests bootstrap. If your mock is incomplete or falsy, then angular return this stupid error.

More information on my case here

Answer 2

This is a problem of the new Angular Cli. Run your test with --sourcemaps=false and you will get the right error messages.

See details here: https://github.com/angular/angular-cli/issues/7296

EDIT:

Shorthand for this is:

ng test -sm=false

As of angular 6 the command is:

ng test --source-map=false

Answer 3

What I would be doing is:

Add console.log() s, line after line in ngOnint() and find out how far it goes , then inspect the line which it wont pass through.

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);
        })
    }

This was failing on my test with the same error in this post. As shown above, I had two console.logs. First one passed thorugh , but the second one not. So I realized the issue is on line const id = params.get('id'); and I fixed it.

Hope this will help someone.

Answer 4

As suggested above here: https://stackoverflow.com/a/45570571/7085047 my problem was in my ngOnInit. I was calling a mock swagger-generated REST controller proxy. It was returning null, and I was subscribing to that null, which doesn't work...

The error came back:

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

I fixed the issue using ts-mockito: https://github.com/NagRock/ts-mockito

I added code to create a mock instance like this:

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);

And then added the instance to the test's providers array like this:

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

Answer 5

I faced the same issue and I've found out that to fix it you have to set your inputs for the component in the method beforeEach as shown below:

beforeEach(() => {
    fixture = TestBed.createComponent(CellComponent );
    cmp = fixture.debugElement.componentInstance;
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    fixture.detectChanges();
});

This will definitely resolve your issue.