Trying to test a function in Jasmine which returns `expected a spy but got a function`

Question

The code is basically for a thumbnail-uploader accepting only SVGs. The problem is at new FileReader() and new Image().Can't understand the error Expected a spy but got a function upon it's execution. Function that I'm trying to test.The function is for a NgbModal that shows up for the preview purpose of uploading a thumbnail.The uploaded thumbnail first loads on the modal then at the component

  onFileChanged(file: File): void {
    this.uploadedImageMimeType = file.type;
    this.invalidImageWarningIsShown = false;
    this.invalidTagsAndAttributes = {
      tags: [],
      attrs: []
    };
    if (this.isUploadedImageSvg()) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () =>{
        this.imgSrc = reader.result as string;
        this.updateBackgroundColor(this.tempBgColor);
        this.img = new Image();

        this.img.onload = () => {
          //   Setting a default height of 300px and width of
          //   150px since most browsers use these dimensions
          //   for SVG files that do not have an explicit
          //   height and width defined.
          this.setImageDimensions(
            this.img.naturalHeight || 150,
            this.img.naturalWidth || 300);
        };
        this.img.src = this.imgSrc;
        this.uploadedImage = this.imgSrc;
        this.invalidTagsAndAttributes = (
          this.svgSanitizerService.getInvalidSvgTagsAndAttrsFromDataUri(
            this.imgSrc));
        this.tags = this.invalidTagsAndAttributes.tags;
        this.attrs = this.invalidTagsAndAttributes.attrs;
        if (this.tags.length > 0 || this.attrs.length > 0) {
          this.reset();
        }
      };
    } else {
      this.reset();
      this.invalidImageWarningIsShown = true;
    }
  }

The test which I wrote for it

class MockImageObject {
  source = null;
  onload = null;
  constructor() {
    this.onload = () => {
      return 'Fake onload executed';
    };
  }
  set src(url) {
    this.onload();
  }
}

class MockReaderObject {
  result = null;
  onload = null;
  constructor() {
    this.onload = () => {
      return 'Fake onload executed';
    };
  }
  readAsDataURL(file) {
    this.onload();
    return 'The file is loaded';
  }
}

it('should load a image file in onchange event and save it if it\'s a' +
    ' svg file', fakeAsync(() => {
    // This is just a mocked base 64 in order to test the FileReader event
    // and its result property.
    const dataBase64Mock = 'PHN2ZyB4bWxucz0iaHR0cDo';
    const arrayBuffer = Uint8Array.from(
      window.atob(dataBase64Mock), c => c.charCodeAt(0));
    const file = new File([arrayBuffer], 'thumbnail.png', {
      type: 'image/svg+xml'
    });
    component.uploadedImageMimeType = file.type;
    component.invalidImageWarningIsShown = false;
    component.invalidTagsAndAttributes = {
      tags: [],
      attrs: []
    };
    // This throws "Argument of type 'mockReaderObject' is not assignable to
    // parameter of type 'HTMLImageElement'.". This is because
    // 'HTMLImageElement' has around 250 more properties. We have only defined
    // the properties we need in 'mockReaderObject'.
    // @ts-expect-error
    spyOn(window, 'FileReader').and.returnValue(new MockReaderObject());
    const image = document.createElement('img');
    spyOn(window, 'Image').and.returnValue(image);

    // This throws "Argument of type 'mockImageObject' is not assignable to
    // parameter of type 'HTMLImageElement'.". This is because
    // 'HTMLImageElement' has around 250 more properties. We have only defined
    // the properties we need in 'mockImageObject'.
    // @ts-expect-error
    spyOn(window, 'Image').and.returnValue(new mockImageObject());
    // ---- Dispatch on load event ----
    image.dispatchEvent(new Event('load'));

    expect(component.invalidImageWarningIsShown).toBe(false);
    component.onInvalidImageLoaded();

    expect(component.invalidImageWarningIsShown).toBe(true);
    component.onFileChanged(file);

    // ---- Dispatch on load event ----
    expect(component.invalidTagsAndAttributes).toEqual({
      tags: [],
      attrs: []
    });
    expect(component.uploadedImage).toBe(null);
    expect(component.invalidImageWarningIsShown).toBe(false);

    // ---- Save information ----
    component.confirm();
    expect(component.confirm).toHaveBeenCalled();
  }));

Any help is highly appreciated!

Answer 1

The problem is that component.confirm in the following statement is not a Spy but a function.

expect(component.confirm).toHaveBeenCalled();

see toHaveBeenCalled(expected) in Jasmine documentation.

Solution

Somewhere in front of this line, you need to create a Spy as follows:

spyOn(component, 'confirm').and.callThrough();

Please note however that this expect will never fail since you explicitly invoke component.confirm() in your test in the line before.