lundi 2 octobre 2017

`Error: Failed to execute 'send' on 'XMLHttpRequest'` in a Karma test in Angular

I have an Angular component and corresponding spec file for Karma tests. I use Primeng for UI components, and in this case it is a radio button component. Problem is that I have two radio button inputs, one is rendered using static values from the component itself, the other is rendered using data from server, which is mocked in a test. This is how my component looks:

@Component({
template: `
<div *ngFor="let unitRange of unitRanges">
<p-radioButton [value]="unitRange.value" [label]="unitRange.label" formControlName="unitRange" name="unitRange"></p-radioButton>
<div *ngFor="let offerType of offerTypes">
<p-radioButton [value]="offerType.value" [label]="offerType.label" formControlName="negotiationTypeID" name="negotiationTypeID"></p-radioButton>
</div>
</div>
    `
}) 
export class SearchCriteriaComponent {
    form: FormGroup;
    public offerTypes: SelectItem[] = [{value: 1, label: 'Sell'}, {value: 2, label: 'Buy'}];
    public unitRanges: SelectItem[] = [];

    constructor(protected fb: FormBuilder, protected searchService: SearchService) {
        this.form = fb.group({
          'unitRange': ['']
          'negotiationTypeID': [this.offerTypes[0].value]
         });
    }

    ngOnInit() {
        this.searchService.getOfferSearchLookups().then(response => this.unitRanges = response)
    }
}

And this is my test:

const unitRanges = [{value: 1, label: '1 unit'}, {value: 2, label: '2 unit'}, {value: 1, label: '3 unit'}], 
export const searchServiceStub = {
  getOfferSearchLookups() {
   return Promise.resolve(unitRanges);
  }
} // mock the service 

describe('SearchCriteriaComponent', () => {
   let component: SearchCriteriaComponent;
   let fixture: ComponentFixture<SearchCriteriaComponent>;

   beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ SearchCriteriaComponent ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MultiSelectModule,
    RadioButtonModule,
    NoopAnimationsModule // used for mocking animations for Primeng components
  ],
  providers: [
      {provide: CommodityService, useValue: commoditiesServiceStub},
      {provide: SearchService, useValue: searchServiceStub}
    ]
})
  .compileComponents(); }));
}); 

beforeEach(() => {
    fixture = TestBed.createComponent(SearchCriteriaComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); 
   });

  it('should be created', () => {
      expect(component).toBeTruthy();
  });

  it('should load the initial radiobuttons', async(() => {
    fixture.detectChanges(); // test fails here, without any  expectation
  }));
});

(I have omitted th import statements for the sake of brevity. Also the template is not inline and resides in a separate HTML file, I have just put it here for it to be easier to read and comprehend). When I comment out the first radiobutton component in my template, the test runs unfailingly. When I use the first radiobutton though, it gives me an error Failed: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///RadioButtonModule/RadioButton.ngfactory.js'.. So, for the radiobuttons rendered with local data from the component, tests work fine, but with async data, it fails. What is the meaning of this, and how can it be fixed?

Aucun commentaire:

Enregistrer un commentaire