test(img): add tests for the img component

src/components/card/test/images/main.html

@@ -26,7 +26,8 @@
       <ion-avatar item-left>
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
       </ion-avatar>
-      <h2>Card With An Inset Picture, H2 text</h2>
+      <h2>Card with large avatar</h2>
+      <h3>h3 text</h3>
       <p>Isn't it beautiful.</p>
     </ion-item>
 
@@ -39,9 +40,10 @@
 
 <style>
   ion-avatar img {
-    width: 80px !important;
+    width: 80px;
     height: 80px;
   }
+
   img {
     height: 100px;
   }

src/components/img/test/basic/app-module.ts

@@ -1,11 +1,38 @@
-import { Component, NgModule } from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
 import { IonicApp, IonicModule } from '../../../..';
 
 
+@Component({
+  selector: '<my-img>',
+  template: '<ion-img [width]="width" [height]="height" [src]="src"></ion-img>'
+})
+export class MyImg {
+  @Input() width: any;
+  @Input() height: any;
+  @Input() src: any;
+}
+
 @Component({
   templateUrl: 'main.html'
 })
 export class E2EPage {
+  images = [
+    {
+      width: '100',
+      height: '44',
+      src: 'http://localhost:8000/dist/e2e/img/img/batmobile.jpg'
+    },
+    {
+      width: '100',
+      height: '75',
+      src: 'http://localhost:8000/dist/e2e/img/img/knight-rider.jpg'
+    },
+    {
+      width: '100',
+      height: '68',
+      src: 'http://localhost:8000/dist/e2e/img/img/general-lee.jpg'
+    }
+  ];
 
 }
 
@@ -21,7 +48,8 @@ export class E2EApp {
 @NgModule({
   declarations: [
     E2EApp,
-    E2EPage
+    E2EPage,
+    MyImg
   ],
   imports: [
     IonicModule.forRoot(E2EApp)

src/components/img/test/basic/main.html

@@ -7,7 +7,7 @@
 
 <ion-content>
 
-  <ion-list>
+  <ion-list no-margin>
 
     <ion-item>
 
@@ -69,8 +69,20 @@
 
   <div padding>
     Default ion-img w/in content, display: inline-block.
-    <ion-img alt="Smokey" width="220" height="165" src="http://localhost:8000/dist/e2e/img/img/bandit.jpg"></ion-img>
+    <ion-img alt="Smokey" width="150" height="112" src="http://localhost:8000/dist/e2e/img/img/bandit.jpg"></ion-img>
     has width, height and alt set.
   </div>
 
+  <p margin>
+    custom component <code>&lt;my-img&gt;</code> inside of a loop of <code>&lt;ion-col&gt;</code> elements
+    which passes the width, height, and img src from an array of data to the <code>&lt;ion-img&gt;</code>
+  </p>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col *ngFor="let image of images">
+        <my-img [width]="image.width" [height]="image.height" [src]="image.src"></my-img>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>

src/components/img/test/cards/app-module.ts

@@ -0,0 +1,40 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  items = [];
+
+  constructor() {
+    for (var i = 0; i < 100; i++) {
+      this.items.push(i);
+    }
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}

src/components/img/test/cards/main.html

@@ -0,0 +1,38 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Img Cards</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-card *ngFor="let item of items">
+    <ion-card-header>
+      Item {{ item }}
+    </ion-card-header>
+
+    <ion-item *ngIf="item % 2 == 0">
+      <ion-img width="68px" height="50px" item-left src="http://localhost:8000/dist/e2e/img/img/ghostbusters.jpg"></ion-img>
+      <h2>Item thumbnail right</h2>
+      <h3>ion-img left</h3>
+      <ion-thumbnail item-right>
+        <ion-img src="http://localhost:8000/dist/e2e/img/img/bandit.jpg"></ion-img>
+      </ion-thumbnail>
+    </ion-item>
+
+    <ion-item *ngIf="item % 2 == 1">
+      <ion-avatar item-left>
+        <ion-img src="http://localhost:8000/dist/e2e/img/img/blues-brothers.jpg"></ion-img>
+      </ion-avatar>
+      <h2>Item avatar left</h2>
+      <h3>ion-img right</h3>
+      <p>Isn't it beautiful.</p>
+      <ion-img width="68px" height="50px" item-right src="http://localhost:8000/dist/e2e/img/img/ghostbusters.jpg"></ion-img>
+    </ion-item>
+
+  </ion-card>
+
+</ion-content>

src/components/img/test/list/app-module.ts

@@ -0,0 +1,65 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  items: {avatar: string, thumbnail: string, id: number}[] = [];
+
+  constructor() {
+    for (var i = 0; i < 100; i++) {
+      this.items.push({
+        id: i,
+        avatar: getRandomImg(),
+        thumbnail: getRandomImg()
+      });
+    }
+  }
+
+}
+
+const images = [
+  'bandit.jpg',
+  'batmobile.jpg',
+  'blues-brothers.jpg',
+  'bueller.jpg',
+  'delorean.jpg',
+  'eleanor.jpg',
+  'general-lee.jpg',
+  'ghostbusters.jpg',
+  'knight-rider.jpg',
+  'mirth-mobile.jpg'
+];
+
+function getRandomImg(): string {
+  let imgString = images[Math.floor(Math.random() * images.length)];
+  let src = 'http://localhost:8000/dist/e2e/img/img/' + imgString;
+  return src;
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}

src/components/img/test/list/main.html

@@ -0,0 +1,28 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>Img: Long List</ion-title>
+  </ion-navbar>
+</ion-header>
+
+
+<ion-content>
+
+  <ion-list>
+
+    <ion-item *ngFor="let item of items">
+
+      <ion-avatar item-left>
+        <ion-img [src]="item.avatar"></ion-img>
+      </ion-avatar>
+
+      Item: {{ item.id }}
+
+      <ion-thumbnail item-right>
+        <ion-img [src]="item.thumbnail"></ion-img>
+      </ion-thumbnail>
+
+    </ion-item>
+
+  </ion-list>
+
+</ion-content>