From 5f03694a58511159248b79e6b64fb8adcb444210 Mon Sep 17 00:00:00 2001 From: Jack Matthews Date: Wed, 3 Jan 2018 13:10:13 +0000 Subject: [PATCH 1/3] fix(component): moved initial width update function from constructor to ngOnInit Function call moved to onInit so that default sizes array is updated before initial size is calculated from window width. Demo app component also updated to highlight use case which was causing an error. --- src/app/app.component.html | 26 ++++++++++++++----- src/app/app.component.scss | 8 +++--- .../image-loader/image-loader.component.ts | 5 ++-- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index ae7e872..99cc9ba 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,13 +1,25 @@ -

Scroll down ↓

-

Placeholder image loaded: {{ imagePlaceholderLoaded }}

-
-

imageLoaded event count: {{ imageLoadedEventCount }}

+

Top image

+ +

Scroll down for bottom image ↓

+

Bottom image placeholder loaded: {{ imagePlaceholderLoaded }}

+
+ +

Bottom image

+ +

Bottom image imageLoaded event count: {{ imageLoadedEventCount }}

diff --git a/src/app/app.component.scss b/src/app/app.component.scss index f3dfb39..c4afc55 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -7,21 +7,21 @@ min-height: 150vh; } -:host ::ng-deep .foo { +:host ::ng-deep .img { transition: all .35s ease-in-out; width: 150px; } @media (min-width: 768px) { - :host ::ng-deep .foo { + :host ::ng-deep .img { width: 500px; } } -:host ::ng-deep .sn-image-not-loaded .foo { +:host ::ng-deep .sn-image-not-loaded .img { filter: blur(20px); } -:host ::ng-deep .sn-image-loaded .foo { +:host ::ng-deep .sn-image-loaded .img { filter: blur(0px); } diff --git a/src/app/image-loader/image-loader.component.ts b/src/app/image-loader/image-loader.component.ts index 7ee8d76..f38ecb7 100644 --- a/src/app/image-loader/image-loader.component.ts +++ b/src/app/image-loader/image-loader.component.ts @@ -192,15 +192,14 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy { * * @memberof ImageLoaderComponent */ - constructor(private windowRef: WindowRef) { - this.onWidthChange(this.windowRef.innerWidth); - } + constructor(private windowRef: WindowRef) {} /** * Set placeholder image as image on component init * * @memberof ImageLoaderComponent */ public ngOnInit(): void { + this.onWidthChange(this.windowRef.innerWidth); this.setPlaceholder(); } /** From d3e06d1c897b68eb28194cd145d56cd0675338e9 Mon Sep 17 00:00:00 2001 From: Jack Matthews Date: Wed, 3 Jan 2018 13:11:21 +0000 Subject: [PATCH 2/3] fix(Demo app): Updated dom query functions to target bottom image comp. Added tests for top image co --- e2e/app.e2e-spec.ts | 86 +++++++++++++++++++++++++++------------------ e2e/app.po.ts | 30 +++++++++++----- 2 files changed, 73 insertions(+), 43 deletions(-) diff --git a/e2e/app.e2e-spec.ts b/e2e/app.e2e-spec.ts index 5c43e04..0658a1c 100644 --- a/e2e/app.e2e-spec.ts +++ b/e2e/app.e2e-spec.ts @@ -22,39 +22,57 @@ describe('ImageLoader Lib E2E Tests', function () { beforeEach(() => page.setWindowSize(300, 580)); it('should load placeholder image', () => { - expect(page.getImageElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder'); + expect(page.getImageBottomElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder'); }); it('should update placeholder loaded boolean on init', () => { - expect(page.getplaceholderBooleanElement().getText()).toEqual('true'); + expect(page.getBottomPlaceholderBooleanElement().getText()).toEqual('true'); }); }); + describe('inviewport image on load', () => { + beforeEach(() => page.setWindowSize(300, 580)); + + it('should load full res image if image is in viewport on page load', () => { + + page.setWindowSize(300, 580); + browser.wait(() => page.getLoadedImageTopElement()); + + const imageLoaderCompClass = page.getImageTopLoaderComp().getAttribute('class'); + const imgSrc = page.getImageTopElement().getAttribute('srcset'); + expect(imageLoaderCompClass).toContain('sn-image-loaded'); + expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x'); + + + }); + + }); + describe('lazy load image', () => { beforeEach(() => page.setWindowSize(300, 580)); - it('should load image on when in viewport', () => { - let imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class'); - let imgSrc = page.getImageElement().getAttribute('src'); + it('should load image when scrolled into viewport', () => { + let imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class'); + let imgSrc = page.getImageBottomElement().getAttribute('src'); expect(imageLoaderCompClass).toContain('sn-image-not-loaded'); expect(imgSrc).toEqual('http://via.placeholder.com/35x15?text=placeholder'); - page.scrollTo(0, 580 * 1.5); - browser.wait(() => page.getLoadedImageElement()); + page.scrollTo(0, 580 * 2); + browser.wait(() => page.getLoadedImageBottomElement()); - imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class'); - imgSrc = page.getImageElement().getAttribute('srcset'); + imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class'); + imgSrc = page.getImageBottomElement().getAttribute('srcset'); expect(imageLoaderCompClass).toContain('sn-image-loaded'); expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x'); }); - it('should update full res image event count on when in viewport', () => { - expect(page.getFullResCountElement().getText()).toEqual('0'); + it('should update full res image event count scroll into viewport', () => { + expect(page.getBottomFullResCountElement().getText()).toEqual('0'); - page.scrollTo(0, 580 * 1.5); - browser.wait(() => page.getLoadedImageElement()); - expect(page.getFullResCountElement().getText()).toEqual('1'); + page.scrollTo(0, 580 * 2); + browser.wait(() => page.getLoadedImageBottomElement()); + expect(page.getBottomFullResCountElement().getText()).toEqual('1'); }); }); @@ -63,49 +81,49 @@ describe('ImageLoader Lib E2E Tests', function () { it('should load correct image for "xs" device size', () => { page.setWindowSize(300, 580); - page.scrollTo(0, 580 * 1.5); - browser.wait(() => page.getLoadedImageElement()); - const imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class'); - const imgSrc = page.getImageElement().getAttribute('srcset'); + page.scrollTo(0, 580 * 2); + browser.wait(() => page.getLoadedImageBottomElement()); + const imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class'); + const imgSrc = page.getImageBottomElement().getAttribute('srcset'); expect(imageLoaderCompClass).toContain('sn-image-loaded'); expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x'); }); it('should load correct image for "md" device size', () => { page.setWindowSize(768, 580); - page.scrollTo(0, 580 * 1.5); - browser.wait(() => page.getLoadedImageElement()); + page.scrollTo(0, 580 * 2.5); + browser.wait(() => page.getLoadedImageBottomElement()); - const imgSrc = page.getImageElement().getAttribute('srcset'); + const imgSrc = page.getImageBottomElement().getAttribute('srcset'); expect(imgSrc).toEqual('http://via.placeholder.com/350x250?text=md+1x 1x, http://via.placeholder.com/700x500?text=md+2x 2x'); }); it('should load correct image for "lg" device size', () => { page.setWindowSize(1024, 580); - page.scrollTo(0, 580 * 1.5); - browser.wait(() => page.getLoadedImageElement()); + page.scrollTo(0, 580 * 2); + browser.wait(() => page.getLoadedImageBottomElement()); - const imgSrc = page.getImageElement().getAttribute('srcset'); + const imgSrc = page.getImageBottomElement().getAttribute('srcset'); expect(imgSrc).toEqual('http://via.placeholder.com/700x400?text=lg+1x 1x, http://via.placeholder.com/1400x800?text=lg+2x 2x'); }); it('should update image loaded event count on window resize when image in viewport', () => { - expect(page.getFullResCountElement().getText()).toEqual('0'); + expect(page.getBottomFullResCountElement().getText()).toEqual('0'); page.setWindowSize(320, 580); - page.scrollTo(0, 580 * 1.5); - browser.wait(() => page.getLoadedImageElement()); - expect(page.getFullResCountElement().getText()).toEqual('1'); + page.scrollTo(0, 580 * 3); + browser.wait(() => page.getLoadedImageBottomElement()); + expect(page.getBottomFullResCountElement().getText()).toEqual('1'); page.setWindowSize(768, 580); - page.scrollTo(0, 580 * 1.5); - browser.wait(() => page.getLoadedImageElement()); - expect(page.getFullResCountElement().getText()).toEqual('2'); + page.scrollTo(0, 580 * 3); + browser.wait(() => page.getLoadedImageBottomElement()); + expect(page.getBottomFullResCountElement().getText()).toEqual('2'); page.setWindowSize(1024, 580); - page.scrollTo(0, 580 * 1.5); - browser.wait(() => page.getLoadedImageElement()); - expect(page.getFullResCountElement().getText()).toEqual('3'); + page.scrollTo(0, 580 * 3); + browser.wait(() => page.getLoadedImageBottomElement()); + expect(page.getBottomFullResCountElement().getText()).toEqual('3'); }); }); diff --git a/e2e/app.po.ts b/e2e/app.po.ts index 90f6728..b14ba34 100644 --- a/e2e/app.po.ts +++ b/e2e/app.po.ts @@ -13,27 +13,39 @@ export class AppPage { return browser.driver.manage().window().setSize(x, y); } - getImageLoaderComp() { - return element(by.css('sn-image-loader')); + getImageTopLoaderComp() { + return element(by.css('.sn-image-loader--top')); } - getImageElement() { - return element(by.css('sn-image-loader .foo')); + getImageBottomLoaderComp() { + return element(by.css('.sn-image-loader--bottom')); } - getLoadedImageElement() { - return element(by.css('.sn-image-loaded')).isPresent(); + getImageTopElement() { + return element(by.css('.sn-image-loader--top .img')); + } + + getImageBottomElement() { + return element(by.css('.sn-image-loader--bottom .img')); + } + + getLoadedImageBottomElement() { + return element(by.css('.sn-image-loader--bottom.sn-image-loaded')).isPresent(); + } + + getLoadedImageTopElement() { + return element(by.css('.sn-image-loader--top.sn-image-loaded')).isPresent(); } getLoadedImageElementBySrcSet(srcSet) { - return element(by.css(`img[srcSet="${srcSet}"]`)).isPresent(); + return element(by.css(`.img--bottom[srcSet="${srcSet}"]`)).isPresent(); } - getplaceholderBooleanElement() { + getBottomPlaceholderBooleanElement() { return element(by.css('.placeholder-boolean')); } - getFullResCountElement() { + getBottomFullResCountElement() { return element(by.css('.full-res-count')); } } From 2ab97020f92197d07d2c497f75f48664800fafe5 Mon Sep 17 00:00:00 2001 From: Jack Matthews Date: Wed, 3 Jan 2018 14:19:35 +0000 Subject: [PATCH 3/3] test(demo app): adjusted scroll distance on e2e test --- e2e/app.e2e-spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/app.e2e-spec.ts b/e2e/app.e2e-spec.ts index 0658a1c..9bef1e3 100644 --- a/e2e/app.e2e-spec.ts +++ b/e2e/app.e2e-spec.ts @@ -91,7 +91,7 @@ describe('ImageLoader Lib E2E Tests', function () { it('should load correct image for "md" device size', () => { page.setWindowSize(768, 580); - page.scrollTo(0, 580 * 2.5); + page.scrollTo(0, 580 * 2); browser.wait(() => page.getLoadedImageBottomElement()); const imgSrc = page.getImageBottomElement().getAttribute('srcset');