Browse Source

feat: Remove boilerplate Quotes service and functionality from the home page

master
Konstantinos Kamaropoulos 5 years ago
parent
commit
f16a9fb392
  1. 7
      src/app/home/home.component.html
  2. 6
      src/app/home/home.component.scss
  3. 16
      src/app/home/home.component.ts
  4. 1
      src/app/home/home.module.ts
  5. 59
      src/app/home/quote.service.spec.ts
  6. 30
      src/app/home/quote.service.ts

7
src/app/home/home.component.html

@ -1,10 +1,5 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="jumbotron text-center"> <div class="jumbotron text-center">
<h1> Home Page
<img class="logo" src="assets/ngx-rocket-logo.png" alt="angular logo" />
<span translate>Hello world !</span>
</h1>
<app-loader [isLoading]="isLoading"></app-loader>
<q [hidden]="isLoading">{{ quote }}</q>
</div> </div>
</div> </div>

6
src/app/home/home.component.scss

@ -1,9 +1,3 @@
.logo { .logo {
width: 100px; width: 100px;
} }
q {
font-style: italic;
font-size: 1.2rem;
quotes: "« " " »";
}

16
src/app/home/home.component.ts

@ -1,7 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { finalize } from 'rxjs/operators';
import { QuoteService } from './quote.service';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@ -9,22 +6,11 @@ import { QuoteService } from './quote.service';
styleUrls: ['./home.component.scss'] styleUrls: ['./home.component.scss']
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
quote: string | undefined;
isLoading = false; isLoading = false;
constructor(private quoteService: QuoteService) {} constructor() {}
ngOnInit() { ngOnInit() {
this.isLoading = true; this.isLoading = true;
this.quoteService
.getRandomQuote({ category: 'dev' })
.pipe(
finalize(() => {
this.isLoading = false;
})
)
.subscribe((quote: string) => {
this.quote = quote;
});
} }
} }

1
src/app/home/home.module.ts

@ -6,7 +6,6 @@ import { CoreModule } from '@app/core';
import { SharedModule } from '@app/shared'; import { SharedModule } from '@app/shared';
import { HomeRoutingModule } from './home-routing.module'; import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component'; import { HomeComponent } from './home.component';
import { QuoteService } from './quote.service';
@NgModule({ @NgModule({
imports: [CommonModule, TranslateModule, CoreModule, SharedModule, HomeRoutingModule], imports: [CommonModule, TranslateModule, CoreModule, SharedModule, HomeRoutingModule],

59
src/app/home/quote.service.spec.ts

@ -1,59 +0,0 @@
import { Type } from '@angular/core';
import { TestBed, async } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { CoreModule, HttpCacheService } from '@app/core';
import { QuoteService } from './quote.service';
describe('QuoteService', () => {
let quoteService: QuoteService;
let httpMock: HttpTestingController;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreModule, HttpClientTestingModule],
providers: [HttpCacheService, QuoteService]
});
quoteService = TestBed.get(QuoteService);
httpMock = TestBed.get(HttpTestingController as Type<HttpTestingController>);
const htttpCacheService = TestBed.get(HttpCacheService);
htttpCacheService.cleanCache();
});
afterEach(() => {
httpMock.verify();
});
describe('getRandomQuote', () => {
it('should return a random Chuck Norris quote', () => {
// Arrange
const mockQuote = { value: 'a random quote' };
// Act
const randomQuoteSubscription = quoteService.getRandomQuote({ category: 'toto' });
// Assert
randomQuoteSubscription.subscribe((quote: string) => {
expect(quote).toEqual(mockQuote.value);
});
httpMock.expectOne({}).flush(mockQuote);
});
it('should return a string in case of error', () => {
// Act
const randomQuoteSubscription = quoteService.getRandomQuote({ category: 'toto' });
// Assert
randomQuoteSubscription.subscribe((quote: string) => {
expect(typeof quote).toEqual('string');
expect(quote).toContain('Error');
});
httpMock.expectOne({}).flush(null, {
status: 500,
statusText: 'error'
});
});
});
});

30
src/app/home/quote.service.ts

@ -1,30 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
const routes = {
quote: (c: RandomQuoteContext) => `/jokes/random?category=${c.category}`
};
export interface RandomQuoteContext {
// The quote's category: 'dev', 'explicit'...
category: string;
}
@Injectable({
providedIn: 'root'
})
export class QuoteService {
constructor(private httpClient: HttpClient) {}
getRandomQuote(context: RandomQuoteContext): Observable<string> {
return this.httpClient
.cache()
.get(routes.quote(context))
.pipe(
map((body: any) => body.value),
catchError(() => of('Error, could not load joke :-('))
);
}
}
Loading…
Cancel
Save