fix(Demo app): Updated dom query functions to target bottom image comp. Added tests for top image co

Author: jackhkmatthews

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');
     });
 
   });

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'));
   }
 }