test(ImageLoader): fix flakly e2e tests

Author: edoparearyee

e2e/app.e2e-spec.ts

@@ -39,10 +39,8 @@ describe('ImageLoader Lib E2E Tests', function () {
       expect(imageLoaderCompClass).toContain('sn-image-not-loaded');
       expect(imgSrc).toEqual('http://via.placeholder.com/35x15?text=placeholder');
 
-      page.scrollTo(0, 580 * 1.5)
-        .then(() => {
-          browser.wait(() => page.getLoadedImageElement());
-        });
+      page.scrollTo(0, 580 * 1.5);
+      browser.wait(() => page.getLoadedImageElement());
 
       imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
       imgSrc = page.getImageElement().getAttribute('srcset');
@@ -54,75 +52,59 @@ describe('ImageLoader Lib E2E Tests', function () {
     it('should update full res image event count on when in viewport', () => {
       expect(page.getFullResCountElement().getText()).toEqual('0');
 
-      page.scrollTo(0, 580 * 1.5)
-        .then(() => {
-          browser.wait(() => page.getLoadedImageElement());
-        });
-
+      page.scrollTo(0, 580 * 1.5);
+      browser.wait(() => page.getLoadedImageElement());
       expect(page.getFullResCountElement().getText()).toEqual('1');
     });
 
   });
 
   describe('responsive image', () => {
-    beforeEach(() => page.setWindowSize(300, 580));
-
-    it('should load correct image for device size', () => {
-      page.scrollTo(0, 580 * 1.5)
-        .then(() => {
-          browser.wait(() => page.getLoadedImageElement());
-        });
 
+    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');
-      let imgSrc = page.getImageElement().getAttribute('srcset');
+      const imgSrc = page.getImageElement().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');
+    });
 
-      page.setWindowSize(768, 580)
-        .then(() => {
-          browser.wait(() => page.getLoadedImageElementBySrcSet(
-            'http://via.placeholder.com/350x250?text=md+1x 1x, http://via.placeholder.com/700x500?text=md+2x 2x'
-          ), browserWaitTimeout);
-        });
+    it('should load correct image for "md" device size', () => {
+      page.setWindowSize(768, 580);
+      page.scrollTo(0, 580 * 1.5);
+      browser.wait(() => page.getLoadedImageElement());
 
-      imgSrc = page.getImageElement().getAttribute('srcset');
+      const imgSrc = page.getImageElement().getAttribute('srcset');
       expect(imgSrc).toEqual('http://via.placeholder.com/350x250?text=md+1x 1x, http://via.placeholder.com/700x500?text=md+2x 2x');
+    });
 
-      page.setWindowSize(1024, 580)
-        .then(() => {
-          browser.wait(() => page.getLoadedImageElementBySrcSet(
-            'http://via.placeholder.com/700x400?text=lg+1x 1x, http://via.placeholder.com/1400x800?text=lg+2x 2x'
-          ), browserWaitTimeout);
-        });
+    it('should load correct image for "lg" device size', () => {
+      page.setWindowSize(1024, 580);
+      page.scrollTo(0, 580 * 1.5);
+      browser.wait(() => page.getLoadedImageElement());
 
-      imgSrc = page.getImageElement().getAttribute('srcset');
+      const imgSrc = page.getImageElement().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');
 
-      page.scrollTo(0, 580 * 1.5)
-        .then(() => {
-          browser.wait(() => page.getLoadedImageElement());
-        });
-
+      page.setWindowSize(320, 580);
+      page.scrollTo(0, 580 * 1.5);
+      browser.wait(() => page.getLoadedImageElement());
       expect(page.getFullResCountElement().getText()).toEqual('1');
 
-      page.setWindowSize(768, 580)
-        .then(() => {
-          browser.wait(() => page.getLoadedImageElementBySrcSet(
-            'http://via.placeholder.com/350x250?text=md+1x 1x, http://via.placeholder.com/700x500?text=md+2x 2x'
-          ), browserWaitTimeout);
-        });
+      page.setWindowSize(768, 580);
+      page.scrollTo(0, 580 * 1.5);
+      browser.wait(() => page.getLoadedImageElement());
       expect(page.getFullResCountElement().getText()).toEqual('2');
 
-      page.setWindowSize(1024, 580)
-        .then(() => {
-          browser.wait(() => page.getLoadedImageElementBySrcSet(
-            'http://via.placeholder.com/700x400?text=lg+1x 1x, http://via.placeholder.com/1400x800?text=lg+2x 2x'
-          ), browserWaitTimeout);
-        });
+      page.setWindowSize(1024, 580);
+      page.scrollTo(0, 580 * 1.5);
+      browser.wait(() => page.getLoadedImageElement());
       expect(page.getFullResCountElement().getText()).toEqual('3');
     });
 

protractor.conf.js

@@ -11,7 +11,7 @@ exports.config = {
   capabilities: {
     browserName: 'chrome',
     chromeOptions: {
-      args: ['--headless', '--no-sandbox', '--window-size=1024,768']
+      args: ['--no-sandbox', '--window-size=1024,768']
     }
   },
   directConnect: true,