test(ImageLoader): fixed flaky integration tests

fix #9

Author: edoparearyee

e2e/app.e2e-spec.ts

@@ -6,23 +6,27 @@ describe('ImageLoader Lib E2E Tests', function () {
 
   const browserWaitTimeout = 10000;
 
-  beforeEach(() => page = new AppPage());
-
-  beforeEach(() => page.navigateTo());
-
-  beforeEach(() => page.scrollTo());
+  beforeEach(() => {
+    page = new AppPage();
+    page.navigateTo();
+    page.scrollTo();
+  });
 
   afterEach(() => {
-    browser.manage().logs().get('browser').then((browserLog: any[]) => {
-      expect(browserLog).toEqual([]);
-    });
+    // ensure no errors appear in console
+    browser.manage()
+      .logs()
+      .get('browser')
+      .then((browserLog) => {
+        expect(browserLog).toEqual([]);
+      });
   });
 
   describe('placeholder image', () => {
-    beforeEach(() => page.setWindowSize(300, 580));
+    beforeEach(() => page.setWindowSize(400, 580));
 
     it('should load placeholder image', () => {
-      expect(page.getImageBottomElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder');
+      expect(page.getImageBottomElement().getAttribute('src')).toEqual('http://via.placeholder.com/40x40?text=placeholder');
     });
 
     it('should update placeholder loaded boolean on init', () => {
@@ -31,39 +35,37 @@ describe('ImageLoader Lib E2E Tests', function () {
   });
 
   describe('inviewport image on load', () => {
-    beforeEach(() => page.setWindowSize(300, 580));
+    beforeEach(() => page.setWindowSize(400, 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');
+      expect(imgSrc).toEqual('http://via.placeholder.com/400x400?text=xs+1x 1x, http://via.placeholder.com/800x800?text=xs+2x 2x');
 
 
     });
 
   });
 
   describe('lazy load image', () => {
-    beforeEach(() => page.setWindowSize(300, 580));
+    beforeEach(() => page.setWindowSize(400, 580));
 
     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');
+      expect(imgSrc).toEqual('http://via.placeholder.com/40x40?text=placeholder');
 
       page.scrollTo(0, 580 * 2);
       browser.wait(() => page.getLoadedImageBottomElement());
 
       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');
+      expect(imgSrc).toEqual('http://via.placeholder.com/400x400?text=xs+1x 1x, http://via.placeholder.com/800x800?text=xs+2x 2x');
 
     });
 
@@ -80,37 +82,37 @@ describe('ImageLoader Lib E2E Tests', function () {
   describe('responsive image', () => {
 
     it('should load correct image for "xs" device size', () => {
-      page.setWindowSize(300, 580);
+      page.setWindowSize(400, 580);
       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');
+      expect(imgSrc).toEqual('http://via.placeholder.com/400x400?text=xs+1x 1x, http://via.placeholder.com/800x800?text=xs+2x 2x');
     });
 
     it('should load correct image for "md" device size', () => {
       page.setWindowSize(768, 580);
-      page.scrollTo(0, 580 * 2);
+      page.scrollTo(0, 580 * 2.5);
       browser.wait(() => page.getLoadedImageBottomElement());
 
       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');
+      expect(imgSrc).toEqual('http://via.placeholder.com/768x400?text=md+1x 1x, http://via.placeholder.com/1536x800?text=md+2x 2x');
     });
 
     it('should load correct image for "lg" device size', () => {
       page.setWindowSize(1024, 580);
-      page.scrollTo(0, 580 * 2);
+      page.scrollTo(0, 580 * 2.5);
       browser.wait(() => page.getLoadedImageBottomElement());
 
       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');
+      expect(imgSrc).toEqual('http://via.placeholder.com/1024x400?text=lg+1x 1x, http://via.placeholder.com/2048x800?text=lg+2x 2x');
     });
 
     it('should update image loaded event count on window resize when image in viewport', () => {
       expect(page.getBottomFullResCountElement().getText()).toEqual('0');
 
-      page.setWindowSize(320, 580);
+      page.setWindowSize(400, 580);
       page.scrollTo(0, 580 * 3);
       browser.wait(() => page.getLoadedImageBottomElement());
       expect(page.getBottomFullResCountElement().getText()).toEqual('1');

e2e/app.po.ts

@@ -6,11 +6,25 @@ export class AppPage {
   }
 
   scrollTo(x: number = 0, y: number = 0) {
-    return browser.executeScript(`window.scrollTo(${x}, ${y})`);
+    browser.executeScript(`return window.scrollTo(${x}, ${y});`);
+    return browser.wait(() =>
+      this.getScrollYPosition()
+        .then((posY) => posY === y));
   }
 
   setWindowSize(x: number, y: number) {
-    return browser.driver.manage().window().setSize(x, y);
+    browser.driver.manage().window().setSize(x, y);
+    return browser.wait(() =>
+      this.getWindowSize()
+        .then((size: any) => size.height === y && size.width === x));
+  }
+
+  getWindowSize() {
+    return browser.executeScript(`return { height: window.outerHeight, width: window.outerWidth };`);
+  }
+
+  getScrollYPosition() {
+    return browser.executeScript('return window.pageYOffset;');
   }
 
   getImageTopLoaderComp() {

protractor.conf.js

@@ -19,7 +19,7 @@ exports.config = {
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
-    defaultTimeoutInterval: 30000,
+    defaultTimeoutInterval: 10000,
     print: function() {}
   },
   onPrepare() {

src/app/app.component.scss

@@ -9,13 +9,7 @@
 
 :host ::ng-deep .img {
   transition: all .35s ease-in-out;
-  width: 150px;
-}
-
-@media (min-width: 768px) {
-  :host ::ng-deep .img {
-    width: 500px;
-  }
+  width: 100%;
 }
 
 :host ::ng-deep .sn-image-not-loaded .img {

src/app/app.component.ts

@@ -15,23 +15,23 @@ export class AppComponent {
   ];
 
   image: ResponsiveImage = {
-    placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
-    fallback: 'http://via.placeholder.com/350x150?text=fallback',
+    placeholder: 'http://via.placeholder.com/40x40?text=placeholder',
+    fallback: 'http://via.placeholder.com/400x400?text=fallback',
     images: [
       {
         size: 'xs',
-        x1: 'http://via.placeholder.com/150x350?text=xs+1x',
-        x2: 'http://via.placeholder.com/300x700?text=xs+2x'
+        x1: 'http://via.placeholder.com/400x400?text=xs+1x',
+        x2: 'http://via.placeholder.com/800x800?text=xs+2x'
       },
       {
         size: 'md',
-        x1: 'http://via.placeholder.com/350x250?text=md+1x',
-        x2: 'http://via.placeholder.com/700x500?text=md+2x'
+        x1: 'http://via.placeholder.com/768x400?text=md+1x',
+        x2: 'http://via.placeholder.com/1536x800?text=md+2x'
       },
       {
         size: 'lg',
-        x1: 'http://via.placeholder.com/700x400?text=lg+1x',
-        x2: 'http://via.placeholder.com/1400x800?text=lg+2x'
+        x1: 'http://via.placeholder.com/1024x400?text=lg+1x',
+        x2: 'http://via.placeholder.com/2048x800?text=lg+2x'
       }
     ]
   };