TypeError:无法在"URL"上执行"createObjectURL":找不到与提供的签名匹配的函数 [英] TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided

问题描述

我有一个angular 8应用程序，我用Jasmine Karma做了一些单元测试.这就是component.ts:

I have a angular 8 application and I do some unit testing with jasmine karma. So this is the component.ts:

export class DossierPersonalDataComponent implements OnInit {
  dossier: DossierDto;
  editDossierForm: FormGroup;
  formBuilder = new FormBuilder();
  globalEditDossierErrors: ValidationErrors;
  dossierItems: DossierItemDto[] = [];
  profileImagefile: File;
  profileImageNeedsUpload = false;

  constructor(
    private dossierService: DossierService,
    private route: ActivatedRoute,
    private sanitizer: DomSanitizer,
    private dossierFileService: DossierFileService,
    private errorProcessor: ErrorProcessor,
    private dialog: MatDialog
  ) {
    this.dossierItems = this.route.snapshot.data.dossierItems;
    this.editDossierForm = this.formBuilder.group({});
    this.editDossierForm.disable();

    this.dossier = this.route.snapshot.data.dossier;
    this.dossierItems = route.snapshot.data.dossierItems;
    this.profileImagefile = this.route.snapshot.data.profileImage;

    this.editDossierForm = this.formBuilder.group({
      firstName: this.formBuilder.control(this.dossier.firstName, [Validators.required, Validators.maxLength(255)]),
      lastName: this.formBuilder.control(this.dossier.lastName, [Validators.required, Validators.maxLength(255)]),
      mobile: this.formBuilder.control(this.dossier.mobile, [Validators.maxLength(255)]),
      company: this.formBuilder.control(this.dossier.company, [Validators.maxLength(255)]),
      buddy: this.formBuilder.control(this.dossier.buddy, [Validators.maxLength(255)]),
      supervisor: this.formBuilder.control(this.dossier.supervisor, [Validators.maxLength(255)]),
      dateOfBirth: this.formBuilder.control(this.dossier.dateOfBirth)
    });
  }
  ngOnInit(): void {
    this.editDossierForm.disable();
  }

  editName() {
    this.editDossierForm.enable();
  }

  get profileImageUrl() {
    return this.profileImagefile === null
      ? '/assets/placeholder.jpg'
      : this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));
  }
}

这是规格文件:

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

  beforeEach(async(() => {


    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, DossierModule, BrowserModule],
      declarations: [DossierPersonalDataComponent],
      providers: [
          DossierFileService,
          ErrorProcessor,
          {
            provide: ActivatedRoute,
            useValue: {
              snapshot: {
                data: {
                  dossier: {
                    firstName: 'hello',
                    lastName: 'world',
                    mobile: '111-111-1111',
                    company: 'carapax',
                    buddy: 'bud',
                    supervisor: 'super',
                    dateOfBirth: '1900-01-01',
                  },
                  dossierItems: [], // mock
                  profileImage: '',
                }
              }
            }
          },
        {
          provide: DomSanitizer,
          useValue: {
            sanitize: () => 'safeString',
            bypassSecurityTrustHtml: () => 'safeString'
          }
        }
      ]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(DossierPersonalDataComponent);
        component = fixture.componentInstance;
      });
  }));


  it('should create', () => {
    fixture.detectChanges();
    expect(component).toBeTruthy();
  }); 
});

但是当我运行测试时，出现此错误:

But so when I run the tests, I get this error:

DossierPersonalDataComponent > should create
TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

在覆盖率文件中，我看到的是黄色:

And in the coverage file I see this as yellow:

get profileImageUrl() {
    return this.profileImagefile === null
      ? '/assets/placeholder.jpg'
      : this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));
  }

所以这是黄色的部分

? '/assets/placeholder.jpg'

未涵盖分支机构.

那我要改变什么?

谢谢

我正在使用谷歌浏览器

我改为:

provide: ActivatedRoute,
            useValue: {
              snapshot: {
                data: {
                  dossier: {
                    firstName: 'hello',
                    lastName: 'world',
                    mobile: '111-111-1111',
                    company: 'carapax',
                    buddy: 'bud',
                    supervisor: 'super',
                    dateOfBirth: '1900-01-01',
                  },
                  dossierItems: [], // mock
                  profileImagefile: null,
                }
              }
            }

但没有变化

推荐答案

似乎业力镶边不支持已弃用的createObjectURL.要使其与业力一起使用，您将必须执行以下操作:

It seems that the karma chrome is not supporting the deprecated createObjectURL. Here is how you'll have to do to make it work with karma:

export class DossierPersonalDataComponent implements OnInit {
  dossier: DossierDto;
  editDossierForm: FormGroup;
  formBuilder = new FormBuilder();
  globalEditDossierErrors: ValidationErrors;
  dossierItems: DossierItemDto[] = [];
  profileImagefile: File;
  profileImageNeedsUpload = false;
  compWindow: any;

  constructor(
    private dossierService: DossierService,
    private route: ActivatedRoute,
    private sanitizer: DomSanitizer,
    private dossierFileService: DossierFileService,
    private errorProcessor: ErrorProcessor,
    private dialog: MatDialog
  ) {
    // this would help you to mock the "window" object in spec file
    this.compWindow = window;
    // please move below code to ngOnInit as standard practice of Angular.

    this.dossierItems = this.route.snapshot.data.dossierItems;
    this.editDossierForm = this.formBuilder.group({});
    this.editDossierForm.disable();

    this.dossier = this.route.snapshot.data.dossier;
    this.dossierItems = route.snapshot.data.dossierItems;
    this.profileImagefile = this.route.snapshot.data.profileImage;

    this.editDossierForm = this.formBuilder.group({
      firstName: this.formBuilder.control(this.dossier.firstName, [Validators.required, Validators.maxLength(255)]),
      lastName: this.formBuilder.control(this.dossier.lastName, [Validators.required, Validators.maxLength(255)]),
      mobile: this.formBuilder.control(this.dossier.mobile, [Validators.maxLength(255)]),
      company: this.formBuilder.control(this.dossier.company, [Validators.maxLength(255)]),
      buddy: this.formBuilder.control(this.dossier.buddy, [Validators.maxLength(255)]),
      supervisor: this.formBuilder.control(this.dossier.supervisor, [Validators.maxLength(255)]),
      dateOfBirth: this.formBuilder.control(this.dossier.dateOfBirth)
    });
  }
  ngOnInit(): void {
    this.editDossierForm.disable();
  }

  editName() {
    this.editDossierForm.enable();
  }

  get profileImageUrl() {
    return this.profileImagefile === null
      ? '/assets/placeholder.jpg'
      : this.sanitizer.bypassSecurityTrustUrl(this.compWindow.URL.createObjectURL(this.profileImagefile));
  }
}

在 spec.ts 文件中:

describe('DossierPersonalDataComponent', () => {
  let component: DossierPersonalDataComponent;
  let fixture: ComponentFixture<DossierPersonalDataComponent>;
  const myWindow = {
    URL : {
      createObjectURL() { return 'something'; }
    }
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, DossierModule, BrowserModule],
      declarations: [DossierPersonalDataComponent],
      providers: [
          DossierFileService,
          ErrorProcessor,
          {
            provide: ActivatedRoute,
            useValue: {
              snapshot: {
                data: {
                  dossier: {
                    firstName: 'hello',
                    lastName: 'world',
                    mobile: '111-111-1111',
                    company: 'carapax',
                    buddy: 'bud',
                    supervisor: 'super',
                    dateOfBirth: '1900-01-01',
                  },
                  dossierItems: [], // mock
                  profileImage: '',
                }
              }
            }
          },
        {
          provide: DomSanitizer,
          useValue: {
            sanitize: () => 'safeString',
            bypassSecurityTrustHtml: () => 'safeString'
          }
        }
      ]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(DossierPersonalDataComponent);
        component = fixture.componentInstance;
        component.compWindow =  myWindow; // this would override the value we are setting in constructor. 
        fixture.detectChanges(); // once we have overridden it, now call "detectChanges"
      });
  }));


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

这篇关于TypeError:无法在"URL"上执行"createObjectURL":找不到与提供的签名匹配的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！