IAfanasovMob

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let httpMock: HttpTestingController;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [AppComponent]
    })

IAfanasovMob

it(`should make http call to proper GitHub API url when show button is clicked`, () => {
  component.userName = 'IAfanasov';

  fixture.debugElement.query(By.css('button')).nativeElement.click();

  expect(() => httpMock.expectOne('https://api.github.com/users/IAfanasov/starred'))
    .not.toThrow();
});

IAfanasovMob

<div class="input-group-prepend">
  <span class="input-group-text"
        id="basic-addon1">@</span>
</div>
<input type="text"
       class="form-control"
       placeholder="GitHub Username"
       (keyup.enter)='loadStarred()'
       (input)='userName = $event.target.value'>
<button type="button"

IAfanasovMob

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  userName: string;

IAfanasovMob

export interface Repo {
  id: number;
  created_at: string;
  name: string;
  stargazers_count: number;
  updated_at: string;
}

IAfanasovMob

it('should save list of starred repos from GitHub API when response received', () => {
  component.userName = 'IAfanasov';
  const repos: Repo[] = [{
    id: 1,
    created_at: '22-09-2019',
    name: 'mock',
    stargazers_count: 1000,
    updated_at: '30-09-2019'
  }];

IAfanasovMob

loadStarred() {
  this.http.get<Repo[]>(`https://api.github.com/users/${this.userName}/starred`)
    .pipe(
      tap(response => this.repos = response)
    )
    .subscribe();
}

IAfanasovMob

it('should show error message when request fails', async () => {
  component.userName = 'IAfanasov';

  fixture.debugElement.query(By.css('button')).nativeElement.click();
  const request = httpMock.expectOne('https://api.github.com/users/IAfanasov/starred');
  request.error(null);
  fixture.detectChanges();
  await fixture.whenRenderingDone();

  const alert = fixture.debugElement.query(By.css('.alert-danger'));

IAfanasovMob

loadStarred() {
  this.http.get<Repo[]>(`https://api.github.com/users/${this.userName}/starred`)
    .pipe(
      tap(
        response => {
          this.repos = response;
          this.errorMessage = null;
        }
      ),
      catchError(error => {

IAfanasovMob

<div *ngIf='errorMessage'
      class="alert alert-danger"
      role="alert">
  {{errorMessage}}
</div>