Skip to content

Commit 4d1b5ae

Browse files
author
Jack Matthews
authored
Merge pull request #6 from thisissoon/hotfix/width-set-onInit
Hotfix/width set onInit
2 parents ce5b13c + 2ab9702 commit 4d1b5ae

File tree

5 files changed

+98
-57
lines changed

5 files changed

+98
-57
lines changed

‎e2e/app.e2e-spec.ts‎

Lines changed: 52 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -22,39 +22,57 @@ describe('ImageLoader Lib E2E Tests', function () {
2222
beforeEach(() => page.setWindowSize(300, 580));
2323

2424
it('should load placeholder image', () => {
25-
expect(page.getImageElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder');
25+
expect(page.getImageBottomElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder');
2626
});
2727

2828
it('should update placeholder loaded boolean on init', () => {
29-
expect(page.getplaceholderBooleanElement().getText()).toEqual('true');
29+
expect(page.getBottomPlaceholderBooleanElement().getText()).toEqual('true');
3030
});
3131
});
3232

33+
describe('inviewport image on load', () => {
34+
beforeEach(() => page.setWindowSize(300, 580));
35+
36+
it('should load full res image if image is in viewport on page load', () => {
37+
38+
page.setWindowSize(300, 580);
39+
browser.wait(() => page.getLoadedImageTopElement());
40+
41+
const imageLoaderCompClass = page.getImageTopLoaderComp().getAttribute('class');
42+
const imgSrc = page.getImageTopElement().getAttribute('srcset');
43+
expect(imageLoaderCompClass).toContain('sn-image-loaded');
44+
expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
45+
46+
47+
});
48+
49+
});
50+
3351
describe('lazy load image', () => {
3452
beforeEach(() => page.setWindowSize(300, 580));
3553

36-
it('should load image on when in viewport', () => {
37-
let imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
38-
let imgSrc = page.getImageElement().getAttribute('src');
54+
it('should load image when scrolled into viewport', () => {
55+
let imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class');
56+
let imgSrc = page.getImageBottomElement().getAttribute('src');
3957
expect(imageLoaderCompClass).toContain('sn-image-not-loaded');
4058
expect(imgSrc).toEqual('http://via.placeholder.com/35x15?text=placeholder');
4159

42-
page.scrollTo(0, 580 * 1.5);
43-
browser.wait(() => page.getLoadedImageElement());
60+
page.scrollTo(0, 580 * 2);
61+
browser.wait(() => page.getLoadedImageBottomElement());
4462

45-
imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
46-
imgSrc = page.getImageElement().getAttribute('srcset');
63+
imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class');
64+
imgSrc = page.getImageBottomElement().getAttribute('srcset');
4765
expect(imageLoaderCompClass).toContain('sn-image-loaded');
4866
expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
4967

5068
});
5169

52-
it('should update full res image event count on when in viewport', () => {
53-
expect(page.getFullResCountElement().getText()).toEqual('0');
70+
it('should update full res image event count scroll into viewport', () => {
71+
expect(page.getBottomFullResCountElement().getText()).toEqual('0');
5472

55-
page.scrollTo(0, 580 * 1.5);
56-
browser.wait(() => page.getLoadedImageElement());
57-
expect(page.getFullResCountElement().getText()).toEqual('1');
73+
page.scrollTo(0, 580 * 2);
74+
browser.wait(() => page.getLoadedImageBottomElement());
75+
expect(page.getBottomFullResCountElement().getText()).toEqual('1');
5876
});
5977

6078
});
@@ -63,49 +81,49 @@ describe('ImageLoader Lib E2E Tests', function () {
6381

6482
it('should load correct image for "xs" device size', () => {
6583
page.setWindowSize(300, 580);
66-
page.scrollTo(0, 580 * 1.5);
67-
browser.wait(() => page.getLoadedImageElement());
68-
const imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
69-
const imgSrc = page.getImageElement().getAttribute('srcset');
84+
page.scrollTo(0, 580 * 2);
85+
browser.wait(() => page.getLoadedImageBottomElement());
86+
const imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class');
87+
const imgSrc = page.getImageBottomElement().getAttribute('srcset');
7088
expect(imageLoaderCompClass).toContain('sn-image-loaded');
7189
expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
7290
});
7391

7492
it('should load correct image for "md" device size', () => {
7593
page.setWindowSize(768, 580);
76-
page.scrollTo(0, 580 * 1.5);
77-
browser.wait(() => page.getLoadedImageElement());
94+
page.scrollTo(0, 580 * 2);
95+
browser.wait(() => page.getLoadedImageBottomElement());
7896

79-
const imgSrc = page.getImageElement().getAttribute('srcset');
97+
const imgSrc = page.getImageBottomElement().getAttribute('srcset');
8098
expect(imgSrc).toEqual('http://via.placeholder.com/350x250?text=md+1x 1x, http://via.placeholder.com/700x500?text=md+2x 2x');
8199
});
82100

83101
it('should load correct image for "lg" device size', () => {
84102
page.setWindowSize(1024, 580);
85-
page.scrollTo(0, 580 * 1.5);
86-
browser.wait(() => page.getLoadedImageElement());
103+
page.scrollTo(0, 580 * 2);
104+
browser.wait(() => page.getLoadedImageBottomElement());
87105

88-
const imgSrc = page.getImageElement().getAttribute('srcset');
106+
const imgSrc = page.getImageBottomElement().getAttribute('srcset');
89107
expect(imgSrc).toEqual('http://via.placeholder.com/700x400?text=lg+1x 1x, http://via.placeholder.com/1400x800?text=lg+2x 2x');
90108
});
91109

92110
it('should update image loaded event count on window resize when image in viewport', () => {
93-
expect(page.getFullResCountElement().getText()).toEqual('0');
111+
expect(page.getBottomFullResCountElement().getText()).toEqual('0');
94112

95113
page.setWindowSize(320, 580);
96-
page.scrollTo(0, 580 * 1.5);
97-
browser.wait(() => page.getLoadedImageElement());
98-
expect(page.getFullResCountElement().getText()).toEqual('1');
114+
page.scrollTo(0, 580 * 3);
115+
browser.wait(() => page.getLoadedImageBottomElement());
116+
expect(page.getBottomFullResCountElement().getText()).toEqual('1');
99117

100118
page.setWindowSize(768, 580);
101-
page.scrollTo(0, 580 * 1.5);
102-
browser.wait(() => page.getLoadedImageElement());
103-
expect(page.getFullResCountElement().getText()).toEqual('2');
119+
page.scrollTo(0, 580 * 3);
120+
browser.wait(() => page.getLoadedImageBottomElement());
121+
expect(page.getBottomFullResCountElement().getText()).toEqual('2');
104122

105123
page.setWindowSize(1024, 580);
106-
page.scrollTo(0, 580 * 1.5);
107-
browser.wait(() => page.getLoadedImageElement());
108-
expect(page.getFullResCountElement().getText()).toEqual('3');
124+
page.scrollTo(0, 580 * 3);
125+
browser.wait(() => page.getLoadedImageBottomElement());
126+
expect(page.getBottomFullResCountElement().getText()).toEqual('3');
109127
});
110128

111129
});

‎e2e/app.po.ts‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,39 @@ export class AppPage {
1313
return browser.driver.manage().window().setSize(x, y);
1414
}
1515

16-
getImageLoaderComp() {
17-
return element(by.css('sn-image-loader'));
16+
getImageTopLoaderComp() {
17+
return element(by.css('.sn-image-loader--top'));
1818
}
1919

20-
getImageElement() {
21-
return element(by.css('sn-image-loader .foo'));
20+
getImageBottomLoaderComp() {
21+
return element(by.css('.sn-image-loader--bottom'));
2222
}
2323

24-
getLoadedImageElement() {
25-
return element(by.css('.sn-image-loaded')).isPresent();
24+
getImageTopElement() {
25+
return element(by.css('.sn-image-loader--top .img'));
26+
}
27+
28+
getImageBottomElement() {
29+
return element(by.css('.sn-image-loader--bottom .img'));
30+
}
31+
32+
getLoadedImageBottomElement() {
33+
return element(by.css('.sn-image-loader--bottom.sn-image-loaded')).isPresent();
34+
}
35+
36+
getLoadedImageTopElement() {
37+
return element(by.css('.sn-image-loader--top.sn-image-loaded')).isPresent();
2638
}
2739

2840
getLoadedImageElementBySrcSet(srcSet) {
29-
return element(by.css(`img[srcSet="${srcSet}"]`)).isPresent();
41+
return element(by.css(`.img--bottom[srcSet="${srcSet}"]`)).isPresent();
3042
}
3143

32-
getplaceholderBooleanElement() {
44+
getBottomPlaceholderBooleanElement() {
3345
return element(by.css('.placeholder-boolean'));
3446
}
3547

36-
getFullResCountElement() {
48+
getBottomFullResCountElement() {
3749
return element(by.css('.full-res-count'));
3850
}
3951
}

‎src/app/app.component.html‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
1-
<h1>Scroll down ↓</h1>
2-
<h3>Placeholder image loaded: <span class="placeholder-boolean">{{ imagePlaceholderLoaded }}</span></h3>
3-
<div class="spacer"></div>
4-
<h3>imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>
1+
<h3>Top image</h3>
52
<sn-image-loader
63
[image]="image"
74
[sizes]="sizes"
8-
imgClass="foo"
5+
imgClass="img img--top"
96
alt="lorem ipsum"
10-
(imagePlaceholderLoaded)="onPlaceholderLoad($event)"
11-
(imageLoaded)="onFullResLoad($event)"
7+
class="sn-image-loader sn-image-loader--top"
8+
></sn-image-loader>
9+
10+
<h1>Scroll down for bottom image ↓</h1>
11+
<h3>Bottom image placeholder loaded: <span class="placeholder-boolean">{{ imagePlaceholderLoaded }}</span></h3>
12+
<div class="spacer"></div>
13+
14+
<h3>Bottom image</h3>
15+
<sn-image-loader
16+
[image]="image"
17+
[sizes]="sizes"
18+
imgClass="img img--bottom"
19+
alt="lorem ipsum"
20+
(imagePlaceholderLoaded)="onPlaceholderLoad($event)"
21+
(imageLoaded)="onFullResLoad($event)"
22+
class="sn-image-loader sn-image-loader--bottom"
1223
></sn-image-loader>
24+
<h3>Bottom image imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>
1325
<div class="spacer"></div>

‎src/app/app.component.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,21 @@
77
min-height: 150vh;
88
}
99

10-
:host ::ng-deep .foo {
10+
:host ::ng-deep .img {
1111
transition: all .35s ease-in-out;
1212
width: 150px;
1313
}
1414

1515
@media (min-width: 768px) {
16-
:host ::ng-deep .foo {
16+
:host ::ng-deep .img {
1717
width: 500px;
1818
}
1919
}
2020

21-
:host ::ng-deep .sn-image-not-loaded .foo {
21+
:host ::ng-deep .sn-image-not-loaded .img {
2222
filter: blur(20px);
2323
}
2424

25-
:host ::ng-deep .sn-image-loaded .foo {
25+
:host ::ng-deep .sn-image-loaded .img {
2626
filter: blur(0px);
2727
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -192,15 +192,14 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
192192
*
193193
* @memberof ImageLoaderComponent
194194
*/
195-
constructor(private windowRef: WindowRef) {
196-
this.onWidthChange(this.windowRef.innerWidth);
197-
}
195+
constructor(private windowRef: WindowRef) {}
198196
/**
199197
* Set placeholder image as image on component init
200198
*
201199
* @memberof ImageLoaderComponent
202200
*/
203201
public ngOnInit(): void {
202+
this.onWidthChange(this.windowRef.innerWidth);
204203
this.setPlaceholder();
205204
}
206205
/**

0 commit comments

Comments
 (0)