如何为img标签的onerror调用的函数编写jasmine单元测试用例答案

【问题标题】：How to write jasmine unit test case for the function to be called upon onerror of img tag如何为img标签的onerror调用的函数编写jasmine单元测试用例
【发布时间】：2019-06-19 14:04:58
【问题描述】：

下面是我正在使用的代码，但是这个测试用例失败了

//test case 
    it('should display default image if the image link in people finder result doesnot exist', fakeAsync(() => {
      debugger
      component.resultsItem = MOCK_RESULTSET.results[9];
      component.resultsItem.imageUrl = "https://domain/gxc3/files/Employee_Images/Test.jpg";
      fixture.detectChanges();
      tick(3000);
      el = fixture.debugElement.queryAll(By.css('.item-person-type'))[0].nativeElement;
      console.log(el);
      let src = el.getAttribute('src');
      expect(src).toBe("assets/img/user-icon.jpg");
    }));

//image tag

 <img class='item-person-type' title="{{resultsItem.text}}"
           [src]="resultsItem.imageUrl ? resultsItem.imageUrl : 'assets/img/user-icon.jpg'"
           (click)="onResultLinkClick(resultsItem)"
           (error)="getImageUrl()" />


//component function

getImageUrl() {
    try {
      var gxcUrl: string = this.resultsItem.imageUrl;
      this.resultsItem.imageUrl = 'assets/img/user-icon.jpg';
      var extensions = this._appSettingsService.appSettings.probableGxcImageExtensions;
      var imageExists = false;
      var probableImageUrls = [];
      extensions.forEach(function (extension) {
        let probableImageUrl = gxcUrl.replace(".jpg", extension);
        probableImageUrls.push(probableImageUrl);
      })
      let observables = probableImageUrls.map(probableImageUrl => this.checkImage(probableImageUrl))
      let source = Observable.forkJoin(observables);
      source.subscribe(response => {
        for (var i = 0; i < response.length; ++i) {
          if (response[i]) {
            imageExists = true;
            this.resultsItem.imageUrl = probableImageUrls[i];
            break;
          }
        }
        if (!imageExists) {
          this.resultsItem.imageUrl = 'assets/img/user-icon.jpg';
        }
      });
    }
    catch (e) {
      this.resultsItem.imageUrl = 'assets/img/user-icon.jpg';
    }
  }

  checkImage(src): Observable<Boolean> {
    return Observable.create((observer: Observer<boolean>) => {
      let img = new Image();
      // img.crossOrigin = 'Anonymous';
      img.src = src;
      if (!img.complete) {
        img.onload = () => {
          observer.next(true);
          observer.complete();
        };
        img.onerror = (err) => {
          observer.next(false);
          observer.complete();
        };
      } else {
        observer.next(true);
        observer.complete();
      }
    });
  };

只要图像没有加载，getImageUrl 方法就会被调用，它会替换当前图像 (.jpg) 源的扩展名，如果找不到任何图像，则使用不同的扩展名（如 .png 或 .jpeg）再次搜索它的扩展名然后显示默认图像。

【问题讨论】：

您需要了解依赖注入这一行代码let img = new Image(); 阻止您测试与该img 对象相关的任何内容，如果您希望能够测试它，您需要提供工厂为您创建图像，然后您将能够使用模拟工厂对象对其进行测试，该对象将返回您监视的模拟图像对象

标签： angular typescript unit-testing jasmine

【解决方案1】：

测试难以访问的对象部分的一般解决方案是将其创建移至工厂，例如，如果您有：

class A {
  run() {
    const v = new B(x, y);
    v.doSomeStuff(z, t);
  }
}

你可以这样做：

class A {
  constructor(private bFactory) {}

  run() {
    const v = this.bFactory(x, y);
    v.doSomeStuff(z, t);
  }
}

然后在测试中你可以注入这样的东西：

const bMock = { doSomeStuff: jasmine.createSpy('doSomeStuff') }; 
const bFactoryMock = jasmine.createSpy('bFactoryMock').and.return(bMock);
const tested = new A(bFactoryMock);

tested.run():

expect(bFactoryMock).toHaveBeenCalledWith(something, something);
expect(bMock.doSomeStuff).toHaveBeenCalledWith(something, something);

【讨论】：

这对您有帮助吗？