Ошибка модульного тестирования ngxf-uploader Невозможно выполнить привязку к ngxf-validate, так как это не известное свойство div

Question

Я пытаюсь протестировать свой компонент, который включает FileUploaderComponent (ngxf-uploader), но у меня есть ошибка в моей консоли:

spec.ts

describe('RepairFormComponent', () => {
    let fixture;
    let component: RepairFormComponent;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                ReactiveFormsModule,
                FormsModule,
            ],
            declarations: [
                RepairFormComponent,
                FileUploaderComponent,
            ],
            providers: [
                NgxfUploaderService,
            ]
        }).compileComponents();
    }));

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

    it('should create the repair form', () => expect(component).toBeDefined());
});

repair-component.html

...
<apx-file-uploader formControlName="statementAttachment" [maxFilesAmount]="1"></apx-file-uploader>
...

file-uploader.component.html

...
    <div class="uploader__wrapper" [ngClass]="{'_max-files-uploaded':showMaxFileCountWarning}"
         (ngxf-select)="upload($event)"
         (ngxf-drop)="upload($event)"
         [ngxf-validate]="{min: minSize, max: maxSize, skipInvalid: skipInvalid}"
         drop-class="drop"
         multiple>
...

Вот сообщение об ошибке, котороеЯ получаю

Ошибка: ошибки синтаксического анализа шаблона:

Невозможно выполнить привязку к 'ngxf-validate', поскольку это не известное свойство 'div'.("(ngxf-select) =" upload ($ event) "(ngxf-drop) =" upload ($ event) "[ОШИБКА ->] [ngxf-validate] =" {min: minSize, max: maxSize, skipInvalid: skipInvalid} "drop-class =" drop ""): ng: ///DynamicTestModule/FileUploaderComponent.html@...

Answer 1

Я думаю, вы забыли импортировать NgxfUploaderModule в свой файл spec.ts.

import NgxfUploaderModule в массиве импорта, как показано ниже.

import { NgxfUploaderModule } from 'ngxf-uploader'; // import statement

describe('RepairFormComponent', () => {
    let fixture;
    let component: RepairFormComponent;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                ReactiveFormsModule,
                FormsModule,
                NgxfUploaderModule
            ],
            declarations: [
                RepairFormComponent,
                FileUploaderComponent,
            ],
            providers: [
                NgxfUploaderService,
            ]
        }).compileComponents();
    }));

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

    it('should create the repair form', () => expect(component).toBeDefined());
});

Надеюсь, это поможет!