Merge branch 'master' into hotfix/load-correct-img-when-inviewport

CHANGELOG.md

@@ -2,6 +2,37 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="1.2.0"></a>
+# [1.2.0](https://github.com/thisissoon/angular-image-loader/compare/v1.2.0-rc.0...v1.2.0) (2017-12-14)
+
+
+
+<a name="1.2.0-rc.0"></a>
+# [1.2.0-rc.0](https://github.com/thisissoon/angular-image-loader/compare/v1.1.1...v1.2.0-rc.0) (2017-12-14)
+
+
+### Code Refactoring
+
+* **image-loader component:** Name change, placeholderLoaded and fullResLoaded updated to imageL ([31aee45](https://github.com/thisissoon/angular-image-loader/commit/31aee45))
+
+
+### Features
+
+* **app component:** updated app component implementation of image-loader component to match updated ([b420de7](https://github.com/thisissoon/angular-image-loader/commit/b420de7))
+* **image-loaded-event.model.ts:** image loaded event model added for use by the image loader compon ([8ea1749](https://github.com/thisissoon/angular-image-loader/commit/8ea1749))
+* **image-loader component:** Event outputs from image loader component added for placeholder image ([f564434](https://github.com/thisissoon/angular-image-loader/commit/f564434))
+* **image-loader component:** installed commitizen config module ([1c0653a](https://github.com/thisissoon/angular-image-loader/commit/1c0653a))
+* **ImageLoader:** implemented output event for image loaded. ([43e7e1d](https://github.com/thisissoon/angular-image-loader/commit/43e7e1d))
+
+
+### BREAKING CHANGES
+
+* **image-loader component:** Variable name changes affect the image-loader component API
+* **app component:** image-loader components updated inputs and outputs implemented
+* **image-loader component:** The inputs and outputs to the image-loader component have changed
+
+
+
 <a name="1.1.1"></a>
 ## [1.1.1](https://github.com/thisissoon/angular-image-loader/compare/v1.1.0...v1.1.1) (2017-12-04)
 

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thisissoon/angular-image-loader",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A simple progressive/responsive/lazy loading image library for Angular (2/4+) that detects browser size and loads the appropriate image only when the element is in view. This package requires angular-inviewport",
   "keywords": [
     "angular",

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,