How to Test This Angular 2 Service using HTTP module and routerLink

I know there are a lot of questions out there that helps me find how to test angular 2 applications . But as i very new i am no able to figure it out.

This is my App Component template.

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">

      <a class="navbar-brand" href="#">Angular Concepts</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown" appDropdown>
          <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Concepts [This is the work of a Custom Directive] <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li [routerLinkActive]="['active']"><a routerLink="/a4">Angular Component</a></li>
            <li [routerLinkActive]="['active']"><a routerLink="/template">Template Driven Forms</a></li>
            <li [routerLinkActive]="['active']"><a routerLink="/reactive">Data Driven Forms</a></li>
            <li [routerLinkActive]="['active']"><a routerLink="/directives">Custom Directives</a></li>
            <li [routerLinkActive]="['active']"><a routerLink="/pipes">Custom Pipes</a></li>
            <li [routerLinkActive]="['active']"><a routerLink="/guard">Guards</a></li>
            <li [routerLinkActive]="['active']"><a routerLink="/view">View Encapsulation</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Advanced Concepts</li>
            <li [routerLinkActive]="['active']"><a routerLink="/ngrx">Ngrx</a></li>
            <li [routerLinkActive]="['active']"><a routerLink="/viewchild">View Child</a></li>
            <li [routerLinkActive]="['active']"><a routerLink="/host">Host & Host-Context</a></li>
            <li [routerLinkActive]="['active']"><a routerLink="/guard">Guards</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>



  <div class ="top">
    <h1>
      Home Component
    </h1>
    <h3>Hello   </h3>
    <hr>
    <router-outlet></router-outlet>
  <div>

and my component ts file.

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

import {WeatherService} from "./shared/weather.service";
import { Theme } from './shared/theme.interface';
import {User} from "./shared/user.interface";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit{

  hello = "Angular";
  cityName :string;

  constructor(private weatherService:WeatherService){}

  ngOnInit() {

    this.weatherService.getWeatherForCity().subscribe(data => {
      this.cityName = data.name;
      console.log("City Name "+this.cityName);
    });
  }
}

I want to test this file for the Routers as Well as service .

This is what i have written in my spec file.

import {async, ComponentFixture, TestBed, ComponentFixtureAutoDetect, inject} from '@angular/core/testing';

import { AppComponent } from './app.component';
import {DebugElement, NO_ERRORS_SCHEMA} from "@angular/core";
import {By} from "@angular/platform-browser";
import {WeatherService} from "./shared/weather.service";
import {HttpModule} from "@angular/http";


describe('TestComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let de: DebugElement;
  let el: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AppComponent ],
      providers: [
        { provide: ComponentFixtureAutoDetect, useValue: true},
         WeatherService
      ],
      imports: [HttpModule],
      schemas: [ NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    //fixture.detectChanges(); this is beacuse we imported the Component Auto Detect
    de = fixture.debugElement.query(By.css('h3'));
    el = de.nativeElement;
  });

  it('should display Title as Hello Angular', () => {
    console.log("Angular "+el.textContent);
    expect(el.textContent).toContain("Hello  Angular");
  });

  it('Display City name From Weather Service', inject([WeatherService],(weatherService) => {
    weatherService.getWeatherForCity().subscribe( response => {
        expect (response.name).toBe("London");
    });
  }));

});

I want to know is this the correct way to do testing of services i am not able to figure out how ti test routes that is the reason i wrote NO_ERRORS_SCHEMA which i found out from a link .All my Test cases of this component passes but i am confused and not sure if this is right as there are many websites following different approaches to test and i am confused .Please help and if you can add a best way to test please add.

Note - My service is using a http get call to the weatherapi to fetch data.