test(ImageLoader): adding e2e tests

thisissoon · Aug 17, 2017 · 8c182ac · 8c182ac
1 parent 96b3f0c
commit 8c182ac
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -2,14 +2,14 @@
 [![Build Status][travis-badge]][travis-badge-url]
 [![Coverage Status][coveralls-badge]][coveralls-badge-url]
 
-A simple progressive/responsive/lazy loading image library for [Angular (2/4+)][angular] with no other dependencies that detects browser size and loads the appropriate image on when the element is in view
+A simple progressive/responsive/lazy loading image library for [Angular (2/4+)][angular] that detects browser size and loads the appropriate image only when the element is in view. This package requires [angular-inviewport][angular-inviewport]
 
 This is a simple library for [Angular][angular], implemented in the [Angular Package Format v4.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx).
 
 
 ## Install
 
-`npm i @thisissoon/angular-image-loader --save`
+`npm i @thisissoon/{angular-image-loader,angular-inviewport} --save`
 
 `app.module.ts`
 ```ts
@@ -77,3 +77,4 @@ export class AppComponent {
 [coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-image-loader/badge.svg?branch=master
 [coveralls-badge-url]: https://coveralls.io/github/thisissoon/angular-image-loader?branch=master
 [angular]: https://angular.io/
+[angular-inviewport]: https://github.com/thisissoon/angular-inviewport
diff --git a/integration/e2e/app.e2e-spec.ts b/integration/e2e/app.e2e-spec.ts
@@ -12,9 +12,50 @@ describe('ImageLoader Lib E2E Tests', function () {
     });
   });
 
-  // describe('lazy load image', () => {
-  //   it('should load image on when in viewport', () => {
+  describe('lazy load image', () => {
+    beforeEach(() => browser.driver.manage().window().setSize(300, 580));
 
-  //   });
-  // });
+    it('should load image on when in viewport', () => {
+      expect(element(by.css('sn-image-loader.sn-image-not-loaded')).isPresent()).toBeTruthy();
+      expect
+        (element(by.css('sn-image-loader.sn-image-not-loaded .foo'))
+          .getAttribute('src'))
+          .toEqual('http://via.placeholder.com/35x15?text=placeholder');
+      browser.executeScript('window.scrollTo(0, window.innerHeight * 1.5)');
+      browser.sleep(1000);
+      expect(element(by.css('sn-image-loader.sn-image-loaded')).isPresent()).toBeTruthy();
+      expect
+        (element(by.css('sn-image-loader.sn-image-loaded .foo'))
+          .getAttribute('srcset'))
+          .toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
+    });
+  });
+
+  describe('responsive image', () => {
+    beforeEach(() => browser.driver.manage().window().setSize(300, 580));
+
+    it('should load correct image for device size', () => {
+      browser.executeScript('window.scrollTo(0, window.innerHeight * 1.5)');
+      browser.sleep(1000);
+      expect(element(by.css('sn-image-loader.sn-image-loaded')).isPresent()).toBeTruthy();
+      expect
+        (element(by.css('sn-image-loader.sn-image-loaded .foo'))
+          .getAttribute('srcset'))
+          .toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
+
+      browser.driver.manage().window().setSize(768, 580);
+      browser.sleep(1000);
+      expect
+        (element(by.css('sn-image-loader.sn-image-loaded .foo'))
+          .getAttribute('srcset'))
+          .toEqual('http://via.placeholder.com/350x250?text=md+1x 1x, http://via.placeholder.com/700x500?text=md+2x 2x');
+
+      browser.driver.manage().window().setSize(1024, 580);
+      browser.sleep(1000);
+      expect
+        (element(by.css('sn-image-loader.sn-image-loaded .foo'))
+          .getAttribute('srcset'))
+          .toEqual('http://via.placeholder.com/700x400?text=lg+1x 1x, http://via.placeholder.com/1400x800?text=lg+2x 2x');
+    });
+  });
 });
diff --git a/integration/package-lock.json b/integration/package-lock.json
diff --git a/integration/package.json b/integration/package.json
@@ -32,6 +32,7 @@
     "@angular/platform-browser": "^4.3.4",
     "@angular/platform-browser-dynamic": "^4.3.4",
     "@thisissoon/angular-image-loader": "../dist/",
+    "@thisissoon/angular-inviewport": "^1.0.1",
     "core-js": "^2.4.1",
     "rxjs": "5.4.3",
     "systemjs": "0.19.40",

diff --git a/integration/src/app/app.component.css b/integration/src/app/app.component.css
@@ -1,58 +1,27 @@
 :host {
   display: block;
   font-family: Roboto, sans-serif;
-  padding-top: 100px;
 }
 
-.foo {
-  align-items: center;
-  background-color: #563d7c;
-  color: #ffffff;
-  display: flex;
-  height: 100px;
-  justify-content: center;
-  left: 0;
-  position: fixed;
-  right: 0;
-  text-align: center;
-  top: 0;
-  transition: all .35s ease-in-out;
-}
-
-.foo .down,
-.foo .up {
-  display: none;
-}
-
-.foo.sn-scrolling-down .down,
-.foo.sn-scrolling-up .up {
-  display: block;
+.spacer {
+  min-height: 150vh;
 }
 
-.foo.sn-minimise {
-  background-color: #007bff;
-  height: 50px;
+:host /deep/ .foo {
+  transition: all .35s ease-in-out;
+  width: 150px;
 }
 
-.bar {
-  align-items: center;
-  background-color: #d4edda;
-  color: #ffffff;
-  display: flex;
-  height: 100px;
-  justify-content: center;
-  text-align: center;
-  transition: all .35s ease-in-out;
+@media (min-width: 768px) {
+  :host /deep/ .foo {
+    width: 500px;
+  }
 }
 
-.bar.sn-affix {
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 9999;
+:host /deep/ .sn-image-not-loaded .foo {
+  filter: blur(20px);
 }
 
-.spacer {
-  height: 150vh;
+:host /deep/ .sn-image-loaded .foo {
+  filter: blur(0px);
 }
diff --git a/integration/src/app/app.component.html b/integration/src/app/app.component.html
@@ -1,11 +1,8 @@
 <h1>Scroll down ↓</h1>
-<nav class="foo" imageLoader [debounce]="0">
-  My nav&nbsp;
-  <span class="down">Going down</span>
-  <span class="up">Going up</span>
-</nav>
 <div class="spacer"></div>
-<div class="bar" imageLoader [debounce]="0">
-  Sticky when scrolled passed
-</div>
+<sn-image-loader
+  [image]="image"
+  [sizes]="sizes"
+  imgClass="foo"
+></sn-image-loader>
 <div class="spacer"></div>
diff --git a/integration/src/app/app.component.ts b/integration/src/app/app.component.ts
@@ -1,8 +1,32 @@
 import { Component } from '@angular/core';
+import { ResponsiveImage, Breakpoint, Size } from '@thisissoon/angular-image-loader';
 
 @Component({
   selector: 'integration-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent { }
+export class AppComponent {
+  sizes: Breakpoint[] = [
+    { size: 'xs', width: 0},
+    { size: 'md', width: 768},
+    { size: 'lg', width: 992},
+  ];
+
+  image: ResponsiveImage = {
+    placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
+    fallback: 'http://via.placeholder.com/350x150?text=fallback',
+    xs: {
+      '@1x': 'http://via.placeholder.com/150x350?text=xs+1x',
+      '@2x': 'http://via.placeholder.com/300x700?text=xs+2x'
+    },
+    md: {
+      '@1x': 'http://via.placeholder.com/350x250?text=md+1x',
+      '@2x': 'http://via.placeholder.com/700x500?text=md+2x'
+    },
+    lg: {
+      '@1x': 'http://via.placeholder.com/700x400?text=lg+1x',
+      '@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
+    }
+  };
+}
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@thisissoon/angular-image-loader",
   "version": "0.0.0",
-  "description": "A simple progressive/responsive/lazy loading image library for Angular 2/4+ with no other dependencies that detects browser size and loads the appropriate image on when the element is in view",
+  "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",
     "angular 2",

diff --git a/src/lib/src/module.ts b/src/lib/src/module.ts
@@ -5,9 +5,10 @@ import { InViewportModule } from '@thisissoon/angular-inviewport';
 import { ImageLoaderComponent } from './image-loader.component';
 
 /**
- * A simple progressive/responsive/lazy loading image library
- * for Angular 2/4+ with no other dependencies that detects browser size and
- * loads the appropriate image on when the element is in view.
+ * 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
  *
  * @export
  * @class ImageLoaderModule