Myujth

I'm trying to mock the default DOM Image object for unit testing an Angular service.

The service is simple, it checks the "webP" format support :

import Injectable from '@angular/core';
import Promise from 'es6-promise';
import environment from '../../../../environments/environment';

@Injectable(
 providedIn: 'root'
)
export class AppLoadService 

 constructor() 
 

 initializeApp(): Promise<any> 
 return new Promise((resolve) => 
 console.log(`initializeApp:: inside promise`);
 if (typeof Image === 'undefined') 
 console.log(`initializeApp:: Image undefined`);
 resolve();
 return;
 
 const webP = new Image();
 webP.onload = () => 
 console.log(`initializeApp:: WebP support: true`);
 environment.webP = true;
 resolve();
 ;
 webP.onerror = () => 
 console.log(`initializeApp:: WebP support: false`);
 resolve();
 ;
 webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
 );
 

I found a way to check the webP support (default in chromium where Karma is running), and a way to check fallback on Image undefined.

But I cannot find a way to checks the onerror fallback...

Here is my spec file :

import TestBed from '@angular/core/testing';
import AppLoadService from './app-load.service';
import environment from '../../../../environments/environment';

describe('AppLoadService', () => 
 let service: AppLoadService;
 const originalImage = Image;

 beforeEach(() => TestBed.configureTestingModule());

 beforeEach(() => 
 service = TestBed.get(AppLoadService);
 );

 it('should be created', () => 
 expect(service).toBeTruthy();
 );

 it('should resolve with webP', (done) => 
 const test = () => 
 Image = originalImage;
 service.initializeApp().then(() => 
 expect(environment.webP).toBe(true);
 done();
 );
 ;
 test();
 );

 it('should resolve without webP (A)', (done) => 
 const test = () => 
 Image = undefined;
 service.initializeApp().then(() => 
 expect(environment.webP).toBe(false);
 done();
 );
 ;
 test();
 );

 it('should resolve without webP (B)', (done) => 
 // How to force Image to throw "onerror" ?
 const test = () => 
 Image = originalImage;
 service.initializeApp().then(() => 
 expect(environment.webP).toBe(false);
 done();
 );
 ;
 test();
 );
);

The question is on should resolve without webP (B) test, at the end of the file..

Moreover, is there a better way to check undefined Image object or onload callback ?

Thanks !

EDIT

Can't get it works as it is, so I change the service constructor to provide "Image" dependency.

constructor(@Inject('Image') image: typeof Image) 
 this.image = image;

Have to load the module like that :

providers: [
 AppLoadService,
 // [...]
 provide: 'Image', useValue: Image,
]

And each resolve() now includes environment.webP result. Otherwise, individual test are a real pain, environment is randomly rewritten before being tested.

With a simple Mock it works like this :

import TestBed from '@angular/core/testing';
import AppLoadService from './app-load.service';

class MockImageFail 
 public onerror: Function;
 private _src: string;

 set src(src) 
 this._src = src;
 if (this.onerror) 
 this.onerror();
 
 


describe('AppLoadService', () => 

 beforeEach(() => 
 TestBed.configureTestingModule(
 providers: [provide: 'Image', useValue: Image]
 );
 );

 it('should be created', () => 
 const service = TestBed.get(AppLoadService);
 expect(service).toBeTruthy();
 );

 it('should resolve with webP', (done) => 
 const service = TestBed.get(AppLoadService);
 service.initializeApp().then((supportWebP) => 
 expect(supportWebP).toBe(true);
 done();
 );
 );

 it('should not resolve without webP (A)', (done) => 
 TestBed.overrideProvider('Image', useValue: undefined);
 const service = TestBed.get(AppLoadService);
 service.initializeApp().then((supportWebP) => 
 expect(supportWebP).toBe(false);
 done();
 );
 );

 it('should not resolve without webP (B)', (done) => 
 TestBed.overrideProvider('Image', useValue: MockImageFail);
 const service = TestBed.get(AppLoadService);
 service.initializeApp().then((supportWebP) => 
 expect(supportWebP).toBe(false);
 done();
 );
 );
);

I'm not really happy with that and I'm sure there is another better way :/