- - -
- - - - - - - - - - - - {{ title }} app is running! - - - - - -
- - - - -

Resources

-

Here are some links to help you get started:

- -
- - - - Learn Angular - - - - - - - CLI Documentation - - - - - - - - Angular Blog - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
-
- - - New Component -
- -
- - - Angular Material -
- -
- - - Add Dependency -
- -
- - - Run and Watch Tests -
- -
- +
+

{{title}}

+

{{next}}

+
- Build for Production -
+
+
Charmander +
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add _____
- 
ng test
- 
ng build --prod
+
JigglyPuff +
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
Oddish +
+
- - - - - - -
+
+

See ya later!

+
@@ -247,5 +37,3 @@

Next Steps

- - diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 20de901..bc3599d 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,6 +1,6 @@ import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; -import { ExchangeRatesComponent } from './exchange-rates/exchange-rates.component'; +import { EvolutionsComponent } from './evolutions/evolutions.component'; import { GraphQLModule } from './graphql.module'; import { HttpClientModule } from '@angular/common/http'; @@ -9,7 +9,7 @@ describe('AppComponent', () => { TestBed.configureTestingModule({ imports: [GraphQLModule, HttpClientModule], declarations: [ - AppComponent, ExchangeRatesComponent, + AppComponent, EvolutionsComponent, ], }).compileComponents(); })); @@ -20,16 +20,16 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'bill-learning-app'`, () => { + it(`should have as title 'Pokémon Potpourri'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('bill-learning-app'); + expect(app.title).toEqual('Pokémon Potpourri'); }); - it('should render title', () => { + it('should render title in a h1 tag', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('bill-learning-app app is running!'); + expect(compiled.querySelector('.content span').textContent).toContain('Pokémon Potpourri app is running!'); }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b2aecee..19899a1 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,5 +6,6 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'bill-learning-app'; + title = 'Pokémon Potpourri'; + next = '- version one -' } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9ff817c..b9928a0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,12 +4,16 @@ import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { GraphQLModule } from './graphql.module'; import { HttpClientModule } from '@angular/common/http'; -import { ExchangeRatesComponent } from './exchange-rates/exchange-rates.component'; +import { EvolutionsComponent } from './evolutions/evolutions.component'; +import { JigComponent } from './jig/jig.component'; +import { OddComponent } from './odd/odd.component'; @NgModule({ declarations: [ AppComponent, - ExchangeRatesComponent + EvolutionsComponent, + JigComponent, + OddComponent, ], imports: [ BrowserModule, diff --git a/src/app/exchange-rates/exchange-rates.component.css b/src/app/exchange-rates/exchange-rates.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/exchange-rates/exchange-rates.component.html b/src/app/exchange-rates/exchange-rates.component.html deleted file mode 100644 index af6b27d..0000000 --- a/src/app/exchange-rates/exchange-rates.component.html +++ /dev/null @@ -1,13 +0,0 @@ -

This component is made by me! The information below is queried from a GraphQL server that gave me exchange rates:

- -
- Loading... -
-
- Error :( -
-
-
-

{{rate.currency}}: {{rate.rate}}

-
-
\ No newline at end of file diff --git a/src/app/exchange-rates/exchange-rates.component.spec.ts b/src/app/exchange-rates/exchange-rates.component.spec.ts deleted file mode 100644 index 08edf1d..0000000 --- a/src/app/exchange-rates/exchange-rates.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { GraphQLModule } from '../graphql.module'; -import { ExchangeRatesComponent } from './exchange-rates.component'; -import { HttpClientModule } from '@angular/common/http'; - -describe('ExchangeRatesComponent', () => { - let component: ExchangeRatesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [GraphQLModule, HttpClientModule], - declarations: [ ExchangeRatesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ExchangeRatesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/exchange-rates/exchange-rates.component.ts b/src/app/exchange-rates/exchange-rates.component.ts deleted file mode 100644 index c154c1a..0000000 --- a/src/app/exchange-rates/exchange-rates.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import {Apollo} from 'apollo-angular'; -import gql from 'graphql-tag'; -import { ApolloQueryResult } from 'apollo-client'; - -@Component({ - selector: 'app-exchange-rates', - templateUrl: './exchange-rates.component.html', - styleUrls: ['./exchange-rates.component.css'] -}) -export class ExchangeRatesComponent implements OnInit { - rates: any[]; - loading = true; - error: any; - - constructor(private apollo: Apollo) {} - - ngOnInit() { - this.apollo - .watchQuery({ - query: gql` - { - rates(currency: "USD") { - currency - rate - } - } - `, - }) - .valueChanges.subscribe((result: ApolloQueryResult) => { - this.rates = result.data && result.data.rates; - this.loading = result.loading; - this.error = result.errors; - }); - } -} diff --git a/src/app/graphql.module.ts b/src/app/graphql.module.ts index c09af00..8e39ea3 100644 --- a/src/app/graphql.module.ts +++ b/src/app/graphql.module.ts @@ -3,7 +3,7 @@ import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular'; import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http'; import {InMemoryCache} from 'apollo-cache-inmemory'; -const uri = 'https://o5x5jzoo7z.sse.codesandbox.io/graphql'; // <-- change the URL to point to Yelp GraphQL server, this is just a test server +const uri = 'https://graphql-pokemon.now.sh/'; // <-- change the URL to point to Yelp GraphQL server, this is just a test server export function createApollo(httpLink: HttpLink) { return { link: httpLink.create({uri}), From 8184dbff22d1b42d099dad87ff4705dc9a01c52c Mon Sep 17 00:00:00 2001 From: JODIE Date: Sun, 29 Sep 2019 01:00:02 -0700 Subject: [PATCH 2/3] add jasmine tests --- src/app/evolution.ts | 4 ++ src/app/evolutions/evolutions.component.css | 5 +++ src/app/evolutions/evolutions.component.html | 11 +++++ .../evolutions/evolutions.component.spec.ts | 38 ++++++++++++++++ src/app/evolutions/evolutions.component.ts | 45 +++++++++++++++++++ src/app/jig/jig.component.css | 5 +++ src/app/jig/jig.component.html | 11 +++++ src/app/jig/jig.component.spec.ts | 39 ++++++++++++++++ src/app/jig/jig.component.ts | 44 ++++++++++++++++++ src/app/odd/odd.component.css | 5 +++ src/app/odd/odd.component.html | 10 +++++ src/app/odd/odd.component.spec.ts | 38 ++++++++++++++++ src/app/odd/odd.component.ts | 44 ++++++++++++++++++ src/app/plan.txt | 1 + 14 files changed, 300 insertions(+) create mode 100644 src/app/evolution.ts create mode 100644 src/app/evolutions/evolutions.component.css create mode 100644 src/app/evolutions/evolutions.component.html create mode 100644 src/app/evolutions/evolutions.component.spec.ts create mode 100644 src/app/evolutions/evolutions.component.ts create mode 100644 src/app/jig/jig.component.css create mode 100644 src/app/jig/jig.component.html create mode 100644 src/app/jig/jig.component.spec.ts create mode 100644 src/app/jig/jig.component.ts create mode 100644 src/app/odd/odd.component.css create mode 100644 src/app/odd/odd.component.html create mode 100644 src/app/odd/odd.component.spec.ts create mode 100644 src/app/odd/odd.component.ts create mode 100644 src/app/plan.txt diff --git a/src/app/evolution.ts b/src/app/evolution.ts new file mode 100644 index 0000000..fd89596 --- /dev/null +++ b/src/app/evolution.ts @@ -0,0 +1,4 @@ +export class Evolution { + evo1: string; + evo2: string; +} diff --git a/src/app/evolutions/evolutions.component.css b/src/app/evolutions/evolutions.component.css new file mode 100644 index 0000000..29f5fa3 --- /dev/null +++ b/src/app/evolutions/evolutions.component.css @@ -0,0 +1,5 @@ +p { + font-family: "Comic Sans MS", "Comic Sans", cursive; + font-size: 40px; + font-style: italic; +} diff --git a/src/app/evolutions/evolutions.component.html b/src/app/evolutions/evolutions.component.html new file mode 100644 index 0000000..eac5cdf --- /dev/null +++ b/src/app/evolutions/evolutions.component.html @@ -0,0 +1,11 @@ +
+ Loading... +
+
+ Error :( +
+
+

Class: {{evos.classification}}

+

MaxHP: {{evos.maxHP}}

+

MaxCP: {{evos.maxCP}}

+
diff --git a/src/app/evolutions/evolutions.component.spec.ts b/src/app/evolutions/evolutions.component.spec.ts new file mode 100644 index 0000000..87eab3c --- /dev/null +++ b/src/app/evolutions/evolutions.component.spec.ts @@ -0,0 +1,38 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EvolutionsComponent } from './evolutions.component'; + +describe('EvolutionsComponent', () => { + let component: EvolutionsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EvolutionsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EvolutionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); +// describe('findCP', () => { +// it('should return a maxCP', () => { +// const cp = 841 +// let response; +// spyOn(EvolutionsComponent, 'findCP').and.returnValue(of(cp)); +// +// EvolutionsComponent.findCP().subscribe(res => { +// cp = res; +// }); +// +// expect(response).toEqual(cp); +// }); +// }); diff --git a/src/app/evolutions/evolutions.component.ts b/src/app/evolutions/evolutions.component.ts new file mode 100644 index 0000000..e296d41 --- /dev/null +++ b/src/app/evolutions/evolutions.component.ts @@ -0,0 +1,45 @@ +import { Component, OnInit } from '@angular/core'; +import {Apollo} from 'apollo-angular'; +import { ApolloQueryResult } from 'apollo-client'; +import gql from 'graphql-tag'; +import { Evolution } from '../evolution'; + +@Component({ + selector: 'app-evolutions', + templateUrl: './evolutions.component.html', + styleUrls: ['./evolutions.component.css'] +}) +export class EvolutionsComponent implements OnInit { + evos: any[]; + loading = true; + error: any; + + constructor(private apollo: Apollo) { } + + ngOnInit() { + this.apollo + .watchQuery({ + query: gql` + { + pokemon(name: "Charmander") { + name + classification + maxHP + maxCP + } + } + `, + }) + .valueChanges.subscribe((result: ApolloQueryResult) => { + this.evos = result.data && result.data.pokemon; + console.log("data: " + JSON.stringify(this.evos)); + this.loading = result.loading; + this.error = result.errors; + }); + } + + // findCP(): Observable { + // const cp = this.evos.maxCP; + // return of(cp); + // } +} diff --git a/src/app/jig/jig.component.css b/src/app/jig/jig.component.css new file mode 100644 index 0000000..29f5fa3 --- /dev/null +++ b/src/app/jig/jig.component.css @@ -0,0 +1,5 @@ +p { + font-family: "Comic Sans MS", "Comic Sans", cursive; + font-size: 40px; + font-style: italic; +} diff --git a/src/app/jig/jig.component.html b/src/app/jig/jig.component.html new file mode 100644 index 0000000..fda8f3a --- /dev/null +++ b/src/app/jig/jig.component.html @@ -0,0 +1,11 @@ +
+ Loading... +
+
+ Error :( +
+
+

Class: {{jig.classification}}

+

Types: {{jig.types}}

+

FleeRate: {{jig.fleeRate}}

+
diff --git a/src/app/jig/jig.component.spec.ts b/src/app/jig/jig.component.spec.ts new file mode 100644 index 0000000..e31acf9 --- /dev/null +++ b/src/app/jig/jig.component.spec.ts @@ -0,0 +1,39 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { JigComponent } from './jig.component'; + +describe('JigComponent', () => { + let component: JigComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ JigComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(JigComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); + +// describe('findFleeRate', () => { +// it('should return a fleeRate', () => { +// const fr = 0.1 +// let response; +// spyOn(JigComponent, 'findFleeRate').and.returnValue(of(fr)); +// +// JigComponent.findFleeRate().subscribe(res => { +// fr = res; +// }); +// +// expect(response).toEqual(fr); +// }); +// }); diff --git a/src/app/jig/jig.component.ts b/src/app/jig/jig.component.ts new file mode 100644 index 0000000..c12b23c --- /dev/null +++ b/src/app/jig/jig.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit } from '@angular/core'; +import {Apollo} from 'apollo-angular'; +import { ApolloQueryResult } from 'apollo-client'; +import gql from 'graphql-tag'; + +@Component({ + selector: 'app-jig', + templateUrl: './jig.component.html', + styleUrls: ['./jig.component.css'] +}) +export class JigComponent implements OnInit { + jig: any[]; + loading = true; + error: any; + constructor(private apollo: Apollo) { } + + ngOnInit() { + this.apollo + .watchQuery({ + query: gql` + { + pokemon(name: "JigglyPuff") { + name + classification + types + fleeRate + } + } + `, + }) + .valueChanges.subscribe((result: ApolloQueryResult) => { + this.jig = result.data && result.data.pokemon; + console.log("data: " + JSON.stringify(this.jig)); + this.loading = result.loading; + this.error = result.errors; + }); + } + + // findFleeRate(): Observable { + // const fleeRate = this.jig.fleeRate; + // return of(fleeRate); + // } + +} diff --git a/src/app/odd/odd.component.css b/src/app/odd/odd.component.css new file mode 100644 index 0000000..29f5fa3 --- /dev/null +++ b/src/app/odd/odd.component.css @@ -0,0 +1,5 @@ +p { + font-family: "Comic Sans MS", "Comic Sans", cursive; + font-size: 40px; + font-style: italic; +} diff --git a/src/app/odd/odd.component.html b/src/app/odd/odd.component.html new file mode 100644 index 0000000..eb5ecee --- /dev/null +++ b/src/app/odd/odd.component.html @@ -0,0 +1,10 @@ +
+ Loading... +
+
+ Error :( +
+
+

Class: {{odd.classification}}

+

Weakness: {{odd.weaknesses}}

+
diff --git a/src/app/odd/odd.component.spec.ts b/src/app/odd/odd.component.spec.ts new file mode 100644 index 0000000..c071eff --- /dev/null +++ b/src/app/odd/odd.component.spec.ts @@ -0,0 +1,38 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OddComponent } from './odd.component'; + +describe('OddComponent', () => { + let component: OddComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OddComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OddComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); +// describe('findClass', () => { +// it('should return a classification', () => { +// const classed = "Weed Pokémon" +// let response; +// spyOn(OddComponent, 'findClass').and.returnValue(of(classed)); +// +// OddComponent.findClass().subscribe(res => { +// classed = res; +// }); +// +// expect(response).toEqual(classed); +// }); +// }); diff --git a/src/app/odd/odd.component.ts b/src/app/odd/odd.component.ts new file mode 100644 index 0000000..5ca89c2 --- /dev/null +++ b/src/app/odd/odd.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit } from '@angular/core'; +import {Apollo} from 'apollo-angular'; +import { ApolloQueryResult } from 'apollo-client'; +import gql from 'graphql-tag'; + +@Component({ + selector: 'app-odd', + templateUrl: './odd.component.html', + styleUrls: ['./odd.component.css'] +}) +export class OddComponent implements OnInit { + odd: any[]; + loading = true; + error: any; + constructor(private apollo: Apollo) { } + + ngOnInit() { + this.apollo + .watchQuery({ + query: gql` + { + pokemon(name: "Oddish") { + name + classification + resistant + weaknesses + } + } + `, + }) + .valueChanges.subscribe((result: ApolloQueryResult) => { + this.odd = result.data && result.data.pokemon; + console.log("data: " + JSON.stringify(this.odd)); + this.loading = result.loading; + this.error = result.errors; + }); + } + + // findClass(): Observable { + // const classed = odd.classification; + // return of(classed); + // } + +} diff --git a/src/app/plan.txt b/src/app/plan.txt new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/app/plan.txt @@ -0,0 +1 @@ + From 88506bf1765ae7a355a144337d9d0d2323f0fafa Mon Sep 17 00:00:00 2001 From: JODIE Date: Sun, 29 Sep 2019 01:05:12 -0700 Subject: [PATCH 3/3] fix unit tests --- .../evolutions/evolutions.component.spec.ts | 26 +++++++++---------- src/app/evolutions/evolutions.component.ts | 8 +++--- src/app/jig/jig.component.spec.ts | 26 +++++++++---------- src/app/jig/jig.component.ts | 8 +++--- src/app/odd/odd.component.spec.ts | 26 +++++++++---------- src/app/odd/odd.component.ts | 8 +++--- 6 files changed, 51 insertions(+), 51 deletions(-) diff --git a/src/app/evolutions/evolutions.component.spec.ts b/src/app/evolutions/evolutions.component.spec.ts index 87eab3c..503cf5a 100644 --- a/src/app/evolutions/evolutions.component.spec.ts +++ b/src/app/evolutions/evolutions.component.spec.ts @@ -23,16 +23,16 @@ describe('EvolutionsComponent', () => { expect(component).toBeTruthy(); }); }); -// describe('findCP', () => { -// it('should return a maxCP', () => { -// const cp = 841 -// let response; -// spyOn(EvolutionsComponent, 'findCP').and.returnValue(of(cp)); -// -// EvolutionsComponent.findCP().subscribe(res => { -// cp = res; -// }); -// -// expect(response).toEqual(cp); -// }); -// }); +describe('findCP', () => { + it('should return a maxCP', () => { + const cp = 841 + let response; + spyOn(EvolutionsComponent, 'findCP').and.returnValue(of(cp)); + + EvolutionsComponent.findCP().subscribe(res => { + cp = res; + }); + + expect(response).toEqual(cp); + }); +}); diff --git a/src/app/evolutions/evolutions.component.ts b/src/app/evolutions/evolutions.component.ts index e296d41..cd8d2f7 100644 --- a/src/app/evolutions/evolutions.component.ts +++ b/src/app/evolutions/evolutions.component.ts @@ -38,8 +38,8 @@ export class EvolutionsComponent implements OnInit { }); } - // findCP(): Observable { - // const cp = this.evos.maxCP; - // return of(cp); - // } + findCP(): Observable { + const cp = this.evos.maxCP; + return of(cp); + } } diff --git a/src/app/jig/jig.component.spec.ts b/src/app/jig/jig.component.spec.ts index e31acf9..63bf4af 100644 --- a/src/app/jig/jig.component.spec.ts +++ b/src/app/jig/jig.component.spec.ts @@ -24,16 +24,16 @@ describe('JigComponent', () => { }); }); -// describe('findFleeRate', () => { -// it('should return a fleeRate', () => { -// const fr = 0.1 -// let response; -// spyOn(JigComponent, 'findFleeRate').and.returnValue(of(fr)); -// -// JigComponent.findFleeRate().subscribe(res => { -// fr = res; -// }); -// -// expect(response).toEqual(fr); -// }); -// }); +describe('findFleeRate', () => { + it('should return a fleeRate', () => { + const fr = 0.1 + let response; + spyOn(JigComponent, 'findFleeRate').and.returnValue(of(fr)); + + JigComponent.findFleeRate().subscribe(res => { + fr = res; + }); + + expect(response).toEqual(fr); + }); +}); diff --git a/src/app/jig/jig.component.ts b/src/app/jig/jig.component.ts index c12b23c..ebc7961 100644 --- a/src/app/jig/jig.component.ts +++ b/src/app/jig/jig.component.ts @@ -36,9 +36,9 @@ export class JigComponent implements OnInit { }); } - // findFleeRate(): Observable { - // const fleeRate = this.jig.fleeRate; - // return of(fleeRate); - // } + findFleeRate(): Observable { + const fleeRate = this.jig.fleeRate; + return of(fleeRate); + } } diff --git a/src/app/odd/odd.component.spec.ts b/src/app/odd/odd.component.spec.ts index c071eff..64eff7f 100644 --- a/src/app/odd/odd.component.spec.ts +++ b/src/app/odd/odd.component.spec.ts @@ -23,16 +23,16 @@ describe('OddComponent', () => { expect(component).toBeTruthy(); }); }); -// describe('findClass', () => { -// it('should return a classification', () => { -// const classed = "Weed Pokémon" -// let response; -// spyOn(OddComponent, 'findClass').and.returnValue(of(classed)); -// -// OddComponent.findClass().subscribe(res => { -// classed = res; -// }); -// -// expect(response).toEqual(classed); -// }); -// }); +describe('findClass', () => { + it('should return a classification', () => { + const classed = "Weed Pokémon" + let response; + spyOn(OddComponent, 'findClass').and.returnValue(of(classed)); + + OddComponent.findClass().subscribe(res => { + classed = res; + }); + + expect(response).toEqual(classed); + }); +}); diff --git a/src/app/odd/odd.component.ts b/src/app/odd/odd.component.ts index 5ca89c2..4711b44 100644 --- a/src/app/odd/odd.component.ts +++ b/src/app/odd/odd.component.ts @@ -36,9 +36,9 @@ export class OddComponent implements OnInit { }); } - // findClass(): Observable { - // const classed = odd.classification; - // return of(classed); - // } + findClass(): Observable { + const classed = odd.classification; + return of(classed); + } }