Skip to content

Commit 96b3f0c

Browse files
edoparearyeeedoparearyee
committed
test(ImageLoader): adding unit tests
1 parent 04cf7a5 commit 96b3f0c

File tree

3 files changed

+132
-18
lines changed

3 files changed

+132
-18
lines changed

‎src/demo/app/app.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { ResponsiveImage, Breakpoint, Size } from 'angular-image-loader';
88
})
99
export class AppComponent {
1010
sizes: Breakpoint[] = [
11-
{ size: Size.XS, width: 0},
12-
{ size: Size.MD, width: 768},
13-
{ size: Size.LG, width: 992},
11+
{ size: 'xs', width: 0},
12+
{ size: 'md', width: 768},
13+
{ size: 'lg', width: 992},
1414
];
1515

1616
image: ResponsiveImage = {

‎src/lib/src/image-loader.component.spec.ts‎

Lines changed: 127 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,33 @@ import { TestBed, async, ComponentFixture } from '@angular/core/testing';
22
import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
33

44
import { ImageLoaderComponent } from './image-loader.component';
5+
import { Breakpoint, ResponsiveImage } from './image.model';
56

67
describe('ImageLoaderComponent', () => {
78
let fixture: ComponentFixture<ImageLoaderComponent>;
8-
let app: ImageLoaderComponent;
9+
let component: ImageLoaderComponent;
10+
let sizes: Breakpoint[] = [
11+
{ size: 'xs', width: 0},
12+
{ size: 'md', width: 768},
13+
{ size: 'lg', width: 992},
14+
];
15+
16+
let image: ResponsiveImage = {
17+
placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
18+
fallback: 'http://via.placeholder.com/350x150?text=fallback',
19+
xs: {
20+
'@1x': 'http://via.placeholder.com/150x350?text=xs+1x',
21+
'@2x': 'http://via.placeholder.com/300x700?text=xs+2x'
22+
},
23+
md: {
24+
'@1x': 'http://via.placeholder.com/350x250?text=md+1x',
25+
'@2x': 'http://via.placeholder.com/700x500?text=md+2x'
26+
},
27+
lg: {
28+
'@1x': 'http://via.placeholder.com/700x400?text=lg+1x',
29+
'@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
30+
}
31+
};
932

1033
beforeEach(async(() => {
1134
TestBed.configureTestingModule({
@@ -21,11 +44,110 @@ describe('ImageLoaderComponent', () => {
2144

2245
beforeEach(() => {
2346
fixture = TestBed.createComponent(ImageLoaderComponent);
24-
app = fixture.debugElement.componentInstance;
47+
component = fixture.debugElement.componentInstance;
48+
component.image = image;
49+
component.sizes = sizes;
2550
fixture.detectChanges();
2651
});
2752

28-
it('should create component', async(() => {
29-
expect(app).toBeTruthy();
30-
}));
53+
it('should set placeholder on init', () => {
54+
const spy = spyOn(component, 'setPlaceholder');
55+
component.ngOnInit();
56+
expect(spy).toHaveBeenCalled();
57+
});
58+
59+
it('should set supportsSrcSet value', () => {
60+
component.supportsSrcSet = false;
61+
const img = document.createElement('img');
62+
let srcSupport = false;
63+
if ('srcset' in img) {
64+
srcSupport = true;
65+
}
66+
component.ngAfterViewInit();
67+
expect(component.supportsSrcSet).toEqual(srcSupport);
68+
});
69+
70+
it('should preload image if in viewport', () => {
71+
const spy = spyOn(component, 'preloadImage');
72+
component.supportsSrcSet = false;
73+
component.size = 'xs';
74+
component.loaded = false;
75+
component.onInViewportChange(true);
76+
expect(spy).toHaveBeenCalled(); ;
77+
});
78+
79+
it('should NOT preload image if NOT in viewport', () => {
80+
component.supportsSrcSet = false;
81+
component.size = 'xs';
82+
component.loaded = false;
83+
component.onInViewportChange(false);
84+
expect(component.preloadSrc).toEqual('');
85+
});
86+
87+
it('should set correct device size', () => {
88+
component.size = 'xs';
89+
component.onWidthChange(900);
90+
expect(component.size).toEqual('md');
91+
92+
component.onWidthChange(992);
93+
expect(component.size).toEqual('lg');
94+
95+
component.onWidthChange(320);
96+
expect(component.size).toEqual('xs');
97+
});
98+
99+
it('should emit next value of observable', () => {
100+
const spy = spyOn(component.width$, 'next');
101+
component.onResize(992);
102+
expect(spy).toHaveBeenCalledWith(992);
103+
});
104+
105+
it('should set placeholder image as empty string', () => {
106+
component.image = null;
107+
component.src = '';
108+
component.setPlaceholder();
109+
expect(component.src).toEqual('');
110+
});
111+
112+
it('should preload image', () => {
113+
component.inViewport = true;
114+
component.supportsSrcSet = false;
115+
component.size = 'xs';
116+
component.loaded = false;
117+
component.preloadImage();
118+
expect(component.preloadSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x');
119+
120+
component.supportsSrcSet = true;
121+
component.preloadImage();
122+
expect(component.preloadSrcset)
123+
.toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
124+
});
125+
126+
it('should set src to preloaded image url', () => {
127+
component.inViewport = true;
128+
component.supportsSrcSet = false;
129+
component.size = 'xs';
130+
component.loaded = false;
131+
component.preloadImage();
132+
expect(component.preloadSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x');
133+
134+
component.onImagePreload();
135+
expect(component.src).toEqual('http://via.placeholder.com/150x350?text=xs+1x');
136+
137+
component.supportsSrcSet = true;
138+
component.loaded = false;
139+
component.preloadImage();
140+
expect(component.preloadSrcset)
141+
.toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
142+
143+
component.onImagePreload();
144+
expect(component.srcset)
145+
.toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
146+
});
147+
148+
it('should complete observable', () => {
149+
const spy = spyOn(component.ngUnsubscribe$, 'complete');
150+
component.ngOnDestroy();
151+
expect(spy).toHaveBeenCalled();
152+
});
31153
});

‎src/lib/src/image-loader.component.ts‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -91,13 +91,6 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
9191
* @memberof ImageLoaderComponent
9292
*/
9393
public size: Size = 'xs';
94-
/**
95-
* Retina value for image to display
96-
*
97-
* @type {Retina}
98-
* @memberof ImageLoaderComponent
99-
*/
100-
public retina: Retina = '@1x';
10194
/**
10295
* Set of images for different viewports
10396
*
@@ -126,7 +119,7 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
126119
* @type {Subject<void>}
127120
* @memberof ImageLoaderComponent
128121
*/
129-
private ngUnsubscribe$ = new Subject<void>();
122+
public ngUnsubscribe$ = new Subject<void>();
130123
/**
131124
* Reference to dummy image element
132125
*
@@ -179,7 +172,6 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
179172
const dummyImg: HTMLElement = this.dummyImg.nativeElement;
180173
if ('srcset' in dummyImg) {
181174
this.supportsSrcSet = true;
182-
this.retina = '@2x';
183175
}
184176
this.width$
185177
.takeUntil(this.ngUnsubscribe$)
@@ -245,7 +237,7 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
245237
const imageRetina = this.image[this.size]['@2x'];
246238
this.supportsSrcSet ?
247239
this.preloadSrcset = `${imageNormal} 1x, ${imageRetina} 2x` :
248-
this.preloadSrc = this.preloadSrc;
240+
this.preloadSrc = `${imageNormal}`;
249241
}
250242
}
251243
/**

0 commit comments

Comments
 (0)