Cmarks: Session one work

package.json

@@ -3,12 +3,12 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
+    "ng": "$(npm bin)/ng",
+    "start": "$(npm bin)/ng serve",
+    "build": "$(npm bin)/ng build",
+    "test": "$(npm bin)/ng test",
+    "lint": "$(npm bin)/ng lint",
+    "e2e": "$(npm bin)/ng e2e"
   },
   "private": true,
   "dependencies": {

src/app/app.component.html

@@ -1,18 +1,8 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
+<div>
+  <h1> Welcome to your {{title}}! </h1>
 </div>
-<h2>Favorite Pokemon: {{ favoritePokemon }}</h2>
-<div *ngIf="isPikachu()">Pick a Pokemon Alex likes!!</div>
-<input type="text" #favoritePokemonInput placeholder="Change favorite">
-<button (click)="changePokemon(favoritePokemonInput.value)">Change</button>
-<!--<input type="text" placeholder="Change favorite" [(ngModel)]="favoritePokemon">-->
-<!--<button>Change</button>-->
 
-<ul>
-  <li *ngFor="let p of pokemon" [ngClass]="getFavoriteClass(p)">Pokedex number {{p.id}} Name: {{p.name}}</li>
-</ul>
+<search-find-pokemon></search-find-pokemon>
 
+<app-display-favorite-pokemon></app-display-favorite-pokemon>

src/app/app.component.spec.ts

@@ -1,13 +1,23 @@
 import { TestBed, async } from '@angular/core/testing';
 
+import { PokemonApiService } from './pokemon-api.service';
+import { SearchPokemonComponent } from './search-pokemon/search-pokemon.component';
+import { SearchFindPokemonComponent } from './search-find-pokemon/search-find-pokemon.component';
+import { DisplayFavoritePokemonComponent } from './display-favorite-pokemon/display-favorite-pokemon.component';
+import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+			providers: [PokemonApiService],
       declarations: [
-        AppComponent
+				AppComponent,
+				SearchPokemonComponent,
+				SearchFindPokemonComponent,
+				DisplayFavoritePokemonComponent
       ],
+      imports : [ FormsModule ]
     }).compileComponents();
   }));
 
@@ -17,16 +27,10 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'app'`, async(() => {
+  it(`should have as title 'pokedex'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
+    expect(app.title).toEqual('Pokedex');
   }));
 
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
-  }));
 });

src/app/app.component.ts

@@ -7,29 +7,7 @@ import {Pokemon} from './shared/models/pokemon.model';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'Pokemon';
-  favoritePokemon = 'Charmander';
-  pokemon: Pokemon[] = [
-    new Pokemon(1, 'Bulbasaur'),
-    new Pokemon(2, 'Ivysaur'),
-    new Pokemon(3, 'Venusaur'),
-    new Pokemon(4, 'Charmander'),
-    new Pokemon(5, 'Charmeleon'),
-    new Pokemon(6, 'Charizard'),
-    { id: 25, name: 'Pikachu', height: 4, weight: 40 }
-  ];
 
-  changePokemon(newValue) {
-    this.favoritePokemon = newValue;
-  }
+  title = 'Pokedex';
 
-  isPikachu(): boolean {
-    return this.favoritePokemon.toLowerCase() === 'pikachu';
-  }
-
-  getFavoriteClass(pk: Pokemon): string {
-    if (pk.name.toLowerCase() === this.favoritePokemon.toLowerCase()) {
-      return 'yellow-background';
-    }
-  }
 }

src/app/app.module.ts

@@ -1,18 +1,26 @@
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
+import { PokemonApiService } from './pokemon-api.service';
 import { AppComponent } from './app.component';
-import { FormsModule } from '@angular/forms';
+
+import { SearchFindPokemonComponent } from './search-find-pokemon/search-find-pokemon.component';
+import { DisplayFavoritePokemonComponent } from './display-favorite-pokemon/display-favorite-pokemon.component';
+import { SearchPokemonComponent } from './search-pokemon/search-pokemon.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    SearchFindPokemonComponent,
+    DisplayFavoritePokemonComponent,
+    SearchPokemonComponent
   ],
   imports: [
-    BrowserModule,
-    FormsModule
+		BrowserModule,
+		FormsModule
   ],
-  providers: [],
+  providers: [PokemonApiService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/display-favorite-pokemon/display-favorite-pokemon.component.html

@@ -0,0 +1,8 @@
+<div class="display-favorite-pokemon-component">
+  <ul class="favorite-pokemon-list">
+	  <li class="favorite-pokemon-item">
+		<img class="pokemon-image" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/21.png" />
+		<span class="pokemon-name">spearow</span>
+	  </li>
+  </ul>
+</div>

src/app/display-favorite-pokemon/display-favorite-pokemon.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DisplayFavoritePokemonComponent } from './display-favorite-pokemon.component';
+
+describe('DisplayFavoritePokemonComponent', () => {
+  let component: DisplayFavoritePokemonComponent;
+  let fixture: ComponentFixture<DisplayFavoritePokemonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DisplayFavoritePokemonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DisplayFavoritePokemonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/display-favorite-pokemon/display-favorite-pokemon.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-display-favorite-pokemon',
+  templateUrl: './display-favorite-pokemon.component.html',
+  styleUrls: ['./display-favorite-pokemon.component.scss']
+})
+export class DisplayFavoritePokemonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pokemon-api-service-data.ts

@@ -0,0 +1,87 @@
+export default {
+	"count": 811,
+	"previous": null,
+	"results": [
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/results/1/",
+			"name": "bulbasaur"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2v2/pokemon/2/",
+			"name": "ivysaur"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/3/",
+			"name": "venusaur"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/4/",
+			"name": "charmander"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/5/",
+			"name": "charmeleon"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/6/",
+			"name": "charmandercharizard"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/7/",
+			"name": "squirtle"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/8/",
+			"name": "wartortle"
+		},
+		{
+			"url": "https://pokeapi.co/squirtleapi/v2/pokemon/9/",
+			"name": "blastoise"
+		},
+		{
+			"url": "https://wartortlepokeapi.co/api/v2/pokemon/10/",
+			"name": "caterpie"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/11/",
+			"name": "metapod"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/12/",
+			"name": "butterfree"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/13/",
+			"name": "weedle"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/14/",
+			"name": "kakuna"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/previousokemon/15/",
+			"name": "beedrill"
+		},
+		{
+			"url": "https://pokeapi.coco/api/v2/pokemon/16/",
+			"name": "pidgey"
+		},
+		{
+			"url": "https:/pokeapi/pokeapi.co/api/v2/pokemon/17/",
+			"name": "pidgeotto"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/18/",
+			"name": "pidgeot"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/19/",
+			"name": "rattata"
+		},
+		{
+			"url": "https://pokeapi.co/api/v2/pokemon/20/",
+			"name": "raticate"
+		}
+	],
+	"next": "https://pokeapi.co/api/v2/pokemon/?offset=20"
+};

src/app/pokemon-api.service.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PokemonApiService } from './pokemon-api.service';
+
+describe('PokemonApiService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PokemonApiService]
+    });
+  });
+
+  it('should return the total pokemon', inject([PokemonApiService], (service: PokemonApiService) => {
+    expect(service.getTotal()).toBe(811);
+  }));
+
+	it('should return the list of pokemon', inject([PokemonApiService], (service: PokemonApiService) => {
+    expect(service.getList().length).toBe(20);
+  }));
+
+	it('should return the url for the next page of the list', inject([PokemonApiService], (service: PokemonApiService) => {
+		expect(service.getNext()).toBe('https://pokeapi.co/api/v2/pokemon/?offset=20');
+  }));
+
+  it('should return the url for the previous page of the list', inject([PokemonApiService], (service: PokemonApiService) => {
+		expect(service.getPrev()).toBe(null);
+  }));
+});

src/app/pokemon-api.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+// mock data for the list
+import listMockData from './pokemon-api-service-data';
+
+@Injectable()
+export class PokemonApiService {
+  list = listMockData;
+
+	constructor() { }
+
+	getList(){
+		return this.list.results;
+	}
+
+	getNext(){
+		return this.list.next
+	}
+
+	getPrev(){
+		return this.list.previous;
+  }
+
+	getTotal(){
+		return this.list.count;
+	}
+
+}

src/app/search-find-pokemon/search-find-pokemon.component.html

@@ -0,0 +1,13 @@
+<div class="search-and-identify-pokemon-component">
+<app-search-pokemon></app-search-pokemon>
+<!--
+  <div class="back-next-control-component">
+	  <button>Previous</button> | <button>Next</button>
+  </div>
+-->
+  <ul class="list-pokemon-component">
+	  <li *ngFor="let d of data">
+		  <span>{{d.name}}</span>
+	  </li>
+  </ul>
+</div>

src/app/search-find-pokemon/search-find-pokemon.component.spec.ts

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PokemonApiService } from '../pokemon-api.service';
+import { SearchPokemonComponent } from '../search-pokemon/search-pokemon.component';
+import { SearchFindPokemonComponent } from './search-find-pokemon.component';
+
+import { FormsModule } from '@angular/forms';
+
+describe('SearchFindPokemonComponent', () => {
+  let component: SearchFindPokemonComponent;
+  let fixture: ComponentFixture<SearchFindPokemonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+			providers: [PokemonApiService],
+			declarations: [
+				SearchPokemonComponent,
+				SearchFindPokemonComponent
+			],
+      imports : [ FormsModule ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchFindPokemonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should be setup with data', () => {
+    expect(component.data.length).toBe(20);
+  });
+});