类型错误：无法在“URL”上执行“createObjectURL”：找不到与提供的签名匹配的函数

Question

我有一个 angular 8 应用程序，我用 jasmine karma 做了一些单元测试。所以这是 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));

  }

}

Answer 1

似乎 karma chrome 不支持 deprecated createObjectURL。以下是让它与业力一起工作的方法：export class DossierPersonalDataComponent implements OnInit {&nbsp; dossier: DossierDto;&nbsp; editDossierForm: FormGroup;&nbsp; formBuilder = new FormBuilder();&nbsp; globalEditDossierErrors: ValidationErrors;&nbsp; dossierItems: DossierItemDto[] = [];&nbsp; profileImagefile: File;&nbsp; profileImageNeedsUpload = false;&nbsp; compWindow: any;&nbsp; constructor(&nbsp; &nbsp; private dossierService: DossierService,&nbsp; &nbsp; private route: ActivatedRoute,&nbsp; &nbsp; private sanitizer: DomSanitizer,&nbsp; &nbsp; private dossierFileService: DossierFileService,&nbsp; &nbsp; private errorProcessor: ErrorProcessor,&nbsp; &nbsp; private dialog: MatDialog&nbsp; ) {&nbsp; &nbsp; // this would help you to mock the "window" object in spec file&nbsp; &nbsp; this.compWindow = window;&nbsp; &nbsp; // please move below code to ngOnInit as standard practice of Angular.&nbsp; &nbsp; this.dossierItems = this.route.snapshot.data.dossierItems;&nbsp; &nbsp; this.editDossierForm = this.formBuilder.group({});&nbsp; &nbsp; this.editDossierForm.disable();&nbsp; &nbsp; this.dossier = this.route.snapshot.data.dossier;&nbsp; &nbsp; this.dossierItems = route.snapshot.data.dossierItems;&nbsp; &nbsp; this.profileImagefile = this.route.snapshot.data.profileImage;&nbsp; &nbsp; this.editDossierForm = this.formBuilder.group({&nbsp; &nbsp; &nbsp; firstName: this.formBuilder.control(this.dossier.firstName, [Validators.required, Validators.maxLength(255)]),&nbsp; &nbsp; &nbsp; lastName: this.formBuilder.control(this.dossier.lastName, [Validators.required, Validators.maxLength(255)]),&nbsp; &nbsp; &nbsp; mobile: this.formBuilder.control(this.dossier.mobile, [Validators.maxLength(255)]),&nbsp; &nbsp; &nbsp; company: this.formBuilder.control(this.dossier.company, [Validators.maxLength(255)]),&nbsp; &nbsp; &nbsp; buddy: this.formBuilder.control(this.dossier.buddy, [Validators.maxLength(255)]),&nbsp; &nbsp; &nbsp; supervisor: this.formBuilder.control(this.dossier.supervisor, [Validators.maxLength(255)]),&nbsp; &nbsp; &nbsp; dateOfBirth: this.formBuilder.control(this.dossier.dateOfBirth)&nbsp; &nbsp; });&nbsp; }&nbsp; ngOnInit(): void {&nbsp; &nbsp; this.editDossierForm.disable();&nbsp; }&nbsp; editName() {&nbsp; &nbsp; this.editDossierForm.enable();&nbsp; }&nbsp; get profileImageUrl() {&nbsp; &nbsp; return this.profileImagefile === null&nbsp; &nbsp; &nbsp; ? '/assets/placeholder.jpg'&nbsp; &nbsp; &nbsp; : this.sanitizer.bypassSecurityTrustUrl(this.compWindow.URL.createObjectURL(this.profileImagefile));&nbsp; }}在spec.ts文件中：describe('DossierPersonalDataComponent', () => {&nbsp; let component: DossierPersonalDataComponent;&nbsp; let fixture: ComponentFixture<DossierPersonalDataComponent>;&nbsp; const myWindow = {&nbsp; &nbsp; URL : {&nbsp; &nbsp; &nbsp; createObjectURL() { return 'something'; }&nbsp; &nbsp; }&nbsp; };&nbsp; beforeEach(async(() => {&nbsp; &nbsp; TestBed.configureTestingModule({&nbsp; &nbsp; &nbsp; imports: [HttpClientTestingModule, DossierModule, BrowserModule],&nbsp; &nbsp; &nbsp; declarations: [DossierPersonalDataComponent],&nbsp; &nbsp; &nbsp; providers: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DossierFileService,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ErrorProcessor,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; provide: ActivatedRoute,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; useValue: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; snapshot: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dossier: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; firstName: 'hello',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lastName: 'world',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mobile: '111-111-1111',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; company: 'carapax',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buddy: 'bud',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; supervisor: 'super',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dateOfBirth: '1900-01-01',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dossierItems: [], // mock&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; profileImage: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; provide: DomSanitizer,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; useValue: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sanitize: () => 'safeString',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bypassSecurityTrustHtml: () => 'safeString'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .compileComponents()&nbsp; &nbsp; &nbsp; .then(() => {&nbsp; &nbsp; &nbsp; &nbsp; fixture = TestBed.createComponent(DossierPersonalDataComponent);&nbsp; &nbsp; &nbsp; &nbsp; component = fixture.componentInstance;&nbsp; &nbsp; &nbsp; &nbsp; component.compWindow =&nbsp; myWindow; // this would override the value we are setting in constructor.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; fixture.detectChanges(); // once we have overridden it, now call "detectChanges"&nbsp; &nbsp; &nbsp; });&nbsp; }));&nbsp; it('should create', () => {&nbsp; &nbsp; expect(component).toBeTruthy();&nbsp; });&nbsp;});