angular 2+ test failing in pipeline but feature is working

Question

I dont know anything about testing and the feature is working completely but failing in pipeline.

Here is my spec.ts file code

let component: CustomerDocumentUploaderComponent;

beforeEach(()=>{
    let clientFilter:ClientFilterService = {} as any;
    component = new CustomerDocumentUploaderComponent(clientFilter);        
});

it("Upload button should enabled when description is specified", ()=>{
    component.uploader.addToQueue([new File([], "testFile")]);
    component.uploader.queue.map(f => (f as FileItem).formData.description = "test description");

    expect(component.isUploadDisabled()).toBe(false);
});

Here is my component.ts file

export class CustomerDocumentUploaderComponent implements OnInit {

@Output()
fileUploaded = new EventEmitter();

uploader: FileUploader;

@ViewChild('fileInput', { static: false })
fileInput: ElementRef;

isUploadDisabled() {
    return this.uploader.queue.some(fi => (fi as any).description == null) || this.uploader.queue.length == 0;
}
}

Above is the complete code... I'm using ng2-fileupload directory in this and the description is a custom property that created here. So, upload will be enable only when description property has any value.

This feature is working perfect but test is failing and unfortunately, I dont have any knowledge about angular testing and all.

Here is html code

<div class="form-group">
    <input class="form-control" #fileInput type="file" id="file" name="file" accept=".doc, .docx, .png, .jpg, .pdf, .xls, .xlsx, .csv, .ppt, .pptx" 
           ng2FileSelect [uploader]="uploader" multiple [required]="true" />
</div>
<div *ngFor="let fileItem of uploader.queue">
    <hr />
    <div class="form-group">
        <input class="form-control" type="text" id="description" name="description" [(ngModel)]="fileItem.file.name" [required]="true" disabled="disabled" />
    </div>
    <div class="form-group">
        <label for="value">Description</label>
        <input class="form-control" type="text" id="description" name="description" [(ngModel)]="fileItem.description" [required]="true" />
    </div>
</div>
<div>
    <div>
        <div *ngIf="uploader.isUploading">
            Uploading:
            <div class="progress">
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
            </div>
        </div>
        <label>
            <button class="btn btn-primary" (click)="uploader.uploadAll()" [disabled]="isUploadDisabled()">
                <span class="fa fa-upload"></span> Upload
            </button>
        </label>
    </div>
</div>

Answer 1

it("Upload button should enabled when description is specified", ()=>{
component.uploader.addToQueue([new File([], "testFile.doc")]);
component.uploader.queue.map(f => (f as FileItem).formData.description = "test description");

expect(component.isUploadDisabled()).toBe(false);

});

I just required to write the extension and the error finish.