Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何测试在angular 2中使用ViewContainerRef注入DOM的结果?_Javascript_Angular_Typescript_Jasmine - Fatal编程技术网

Javascript 如何测试在angular 2中使用ViewContainerRef注入DOM的结果?

Javascript 如何测试在angular 2中使用ViewContainerRef注入DOM的结果?,javascript,angular,typescript,jasmine,Javascript,Angular,Typescript,Jasmine,我有一个指示: @Directive({ selector: 'input[type=file][ngModel], input[type=file][formControlName], input[type=file][formControl]', host: { '(change)': 'filesSelected($event.target.files)', '(blur)': 'onTouched()' }, providers: [{ provid

我有一个指示:

@Directive({
  selector: 'input[type=file][ngModel], input[type=file][formControlName], input[type=file][formControl]',
  host: {
   '(change)': 'filesSelected($event.target.files)', 
   '(blur)': 'onTouched()'
  },
  providers: [{
    provide:  NG_VALUE_ACCESSOR,
    useExisting: forwardRef( () => FileValueAccessor),
    multi: true
  }]
})
export class FileValueAccessor implements ControlValueAccessor {
  onChange = (_) => {};
  onTouched = () => {};
  fileListComponent: ComponentRef<FileUploadListComponent>;
  files: File[] = [];

  constructor(
    private _renderer: Renderer,
    private _elementRef: ElementRef,
    private resolver: ComponentFactoryResolver,
    private viewContainer: ViewContainerRef) {
      const factory = this.resolver.resolveComponentFactory(FileUploadListComponent);
      this.fileListComponent = this.viewContainer.createComponent(factory);

      this.fileListComponent.instance.removeFileCb = (file) => this.removeFile(file);
    }

  removeFile(file) {
    this.files = this.files.filter((f: File): Boolean => f !== file);
    this.filesUpdated();
  }
  writeValue(value): void {
  }

  filesSelected(files: FileList) {
    for(let i in files) {
      const file = files[i];
      if (isFile(file) && this.files.findIndex((f: File) => f.name === file.name && f.size === file.size) === -1) {
        this.files.push(file);    
      }
    }

    this.filesUpdated();
  }

  filesUpdated() {
    this.fileListComponent.instance.files = this.files;
    this.onChange(this.files);
  }

  registerOnChange(fn: (_: FileList) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }

  setDisabledState(isDisabled: boolean): void {
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  }
}
但是我越来越

错误:此.fileListComponent上未实现= this.viewContainer.createComponent(工厂);从指令

值得注意的是,指令构造函数执行了两次,这是第二次出现错误

beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});
it('should update files', async(inject([FileValueAccessor, ViewContainerRef], (fileAccesser: FileValueAccessor, viewContainer: ViewContainerRef) => {
  const files = Array(8).fill(getFile(randomValidFileName()))
    fileAccesser.files = files;
    fileAccesser.filesUpdated();
    fixture.detectChanges();
    expect(fixture.elementRef.nativeElement.querySelectorAll('app-file-upload-list-item').length).toBe(8);
})))