Merge pull request #3 from thisissoon/feature/load-event

Jack Matthews · web-flow · commit df4dcf204a6f · 2017-12-13T14:30:44.000Z
Feature/load event
diff --git a/.travis.yml b/.travis.yml
@@ -18,3 +18,9 @@ script:
   - npm run test -- --no-progress --code-coverage --single-run --browser=ChromeNoSandbox
   - npm run e2e -- --no-progress
   - npm run coverage
+addons:
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
diff --git a/e2e/app.e2e-spec.ts b/e2e/app.e2e-spec.ts
@@ -4,6 +4,8 @@ import { browser } from 'protractor';
 describe('ImageLoader Lib E2E Tests', function () {
   let page: AppPage;
 
+  const browserWaitTimeout = 10000;
+
   beforeEach(() => page = new AppPage());
 
   beforeEach(() => page.navigateTo());
@@ -16,6 +18,18 @@ describe('ImageLoader Lib E2E Tests', function () {
     });
   });
 
+  describe('placeholder image', () => {
+    beforeEach(() => page.setWindowSize(300, 580));
+
+    it('should load placeholder image', () => {
+      expect(page.getImageElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder');
+    });
+
+    it('should update placeholder loaded boolean on init', () => {
+      expect(page.getplaceholderBooleanElement().getText()).toEqual('true');
+    });
+  });
+
   describe('lazy load image', () => {
     beforeEach(() => page.setWindowSize(300, 580));
 
@@ -25,34 +39,94 @@ 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);
+      page.scrollTo(0, 580 * 1.5)
+        .then(() => {
+          browser.wait(() => page.getLoadedImageElement());
+        });
+
       imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
       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');
+
+    });
+
+    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());
+        });
+
+      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);
+      page.scrollTo(0, 580 * 1.5)
+        .then(() => {
+          browser.wait(() => page.getLoadedImageElement());
+        });
 
       const imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
       let 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);
+      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);
+        });
+
       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);
+      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);
+        });
+
       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());
+        });
+
+      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);
+        });
+      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);
+        });
+      expect(page.getFullResCountElement().getText()).toEqual('3');
+    });
+
   });
+
 });
 
diff --git a/e2e/app.po.ts b/e2e/app.po.ts
@@ -6,13 +6,11 @@ export class AppPage {
   }
 
   scrollTo(x: number = 0, y: number = 0) {
-    browser.executeScript(`window.scrollTo(${x}, ${y})`);
-    browser.sleep(200);
+    return browser.executeScript(`window.scrollTo(${x}, ${y})`);
   }
 
   setWindowSize(x: number, y: number) {
-    browser.driver.manage().window().setSize(x, y);
-    browser.sleep(200);
+    return browser.driver.manage().window().setSize(x, y);
   }
 
   getImageLoaderComp() {
@@ -22,4 +20,20 @@ export class AppPage {
   getImageElement() {
     return element(by.css('sn-image-loader .foo'));
   }
+
+  getLoadedImageElement() {
+    return element(by.css('.sn-image-loaded')).isPresent();
+  }
+
+  getLoadedImageElementBySrcSet(srcSet) {
+    return element(by.css(`img[srcSet="${srcSet}"]`)).isPresent();
+  }
+
+  getplaceholderBooleanElement() {
+    return element(by.css('.placeholder-boolean'));
+  }
+
+  getFullResCountElement() {
+    return element(by.css('.full-res-count'));
+  }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "codelyzer": "^4.0.1",
     "core-js": "^2.4.1",
     "coveralls": "^3.0.0",
+    "cz-conventional-changelog": "^2.1.0",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -84,5 +85,10 @@
     "tslint": "~5.7.0",
     "typescript": "~2.4.2",
     "zone.js": "^0.8.14"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,13 @@
 <h1>Scroll down ↓</h1>
+<h3>Placeholder image loaded: <span class="placeholder-boolean">{{ imagePlaceholderLoaded }}</span></h3>
 <div class="spacer"></div>
+<h3>imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>
 <sn-image-loader
   [image]="image"
   [sizes]="sizes"
   imgClass="foo"
+  alt="lorem ipsum"
+  (imagePlaceholderLoaded)="onPlaceholderLoad($event)"
+  (imageLoaded)="onFullResLoad($event)"
 ></sn-image-loader>
 <div class="spacer"></div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ResponsiveImage, Breakpoint, Size } from './image-loader';
+import { ImageLoadedEvent } from './image-loader/shared';
 
 @Component({
   selector: 'sn-root',
@@ -29,4 +30,40 @@ export class AppComponent {
       '@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
     }
   };
+
+  /**
+   * Set to true on placeholder loaded event.
+   *
+   * @type {boolean}
+   * @memberof AppComponent
+   */
+  imagePlaceholderLoaded = false;
+
+  /**
+   * Incremented on each image load event.
+   *
+   * @type {number}
+   * @memberof AppComponent
+   */
+  imageLoadedEventCount = 0;
+
+  /**
+   * Increments event count on each image loaded event.
+   * Counter displayed in component template.
+   *
+   * @memberof AppComponent
+   */
+  public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
+    this.imagePlaceholderLoaded = true;
+  }
+
+  /**
+   * Increments event count on each image loaded event.
+   * Counter displayed in component template.
+   *
+   * @memberof AppComponent
+   */
+  public onFullResLoad(imageLoadedEvent: ImageLoadedEvent) {
+    this.imageLoadedEventCount++;
+  }
 }
diff --git a/src/app/image-loader/image-loader.component.html b/src/app/image-loader/image-loader.component.html
@@ -6,7 +6,8 @@
   [class]="imgClass"
   inViewport
   (inViewportChange)="onInViewportChange($event)"
-  [debounce]="0">
+  [debounce]="0"
+  (load)="onImageLoad($event)">
 
 <img
   #dummyImg
diff --git a/src/app/image-loader/image-loader.component.spec.ts b/src/app/image-loader/image-loader.component.spec.ts
@@ -1,8 +1,10 @@
 import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
 
 import { ImageLoaderComponent } from './image-loader.component';
 import { Breakpoint, ResponsiveImage } from './shared/image.model';
+import { ImageLoadedEvent } from './index';
 
 describe('ImageLoaderComponent', () => {
   let fixture: ComponentFixture<ImageLoaderComponent>;
@@ -56,6 +58,14 @@ describe('ImageLoaderComponent', () => {
     expect(spy).toHaveBeenCalled();
   });
 
+  it('should set fire placeholder loaded event on image load when loaded is false', () => {
+    const spy = spyOn(component.imagePlaceholderLoaded, 'emit');
+    component.loaded = false;
+    const imageElement = fixture.debugElement.query(By.css('img'));
+    imageElement.triggerEventHandler('load', null);
+    expect(spy).toHaveBeenCalled();
+  });
+
   it('should set supportsSrcSet value', () => {
     component.supportsSrcSet = false;
     const img = document.createElement('img');
@@ -145,6 +155,14 @@ describe('ImageLoaderComponent', () => {
       .toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
   });
 
+  it('should emit a full res loaded event on image load when loaded is true', () => {
+    const spy = spyOn(component.imageLoaded, 'emit');
+    component.loaded = true;
+    const imageElement = fixture.debugElement.query(By.css('img'));
+    imageElement.triggerEventHandler('load', null);
+    expect(spy).toHaveBeenCalled();
+  });
+
   it('should complete observable', () => {
     const spy = spyOn(component.ngUnsubscribe$, 'complete');
     component.ngOnDestroy();
diff --git a/src/app/image-loader/image-loader.component.ts b/src/app/image-loader/image-loader.component.ts
diff --git a/src/app/image-loader/shared/image-loaded-event.model.ts b/src/app/image-loader/shared/image-loaded-event.model.ts
diff --git a/src/app/image-loader/shared/index.ts b/src/app/image-loader/shared/index.ts
