Running ng test throws many errors and gets failed

Question

angular-cli v1.0.0 beta.21
typescript version 2.0.10

Currently, I'm using these two versions of typescript and angular-cli. When I run ng test I'm getting these errors -

1. Error: No provider for Http!
2. Can't bind to 'ngModel' since it isn't a known property of 'input'
3. app-navbar is not a known element

Here is source code of app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpModule, JsonpModule} from '@angular/http';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { IndexComponent } from './index/index.component';
import { ResultsComponent } from './results/results.component';
import {Routes, RouterModule, Router} from '@angular/router';
import {SearchService} from './search.service';
import { NotFoundComponent } from './not-found/not-found.component';
import {CommonModule} from '@angular/common';
import { AdvancedsearchComponent } from './advancedsearch/advancedsearch.component';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {StoreModule} from '@ngrx/store';
import {reducer} from './reducers/index';
import { SearchBarComponent } from './search-bar/search-bar.component';

const appRoutes: Routes = [
{path: 'search', component: ResultsComponent},
{path: '', component: IndexComponent},
{path: '404', component: NotFoundComponent},
{path: '**', redirectTo: '/404'},
];
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
IndexComponent,
ResultsComponent,
NotFoundComponent,
AdvancedsearchComponent,
SearchBarComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
BrowserModule,
CommonModule,
FormsModule,
HttpModule,
JsonpModule,
RouterModule.forRoot(appRoutes),
StoreModule.provideStore(reducer),
StoreDevtoolsModule.instrumentOnlyWithExtension(),
],
providers: [SearchService],
bootstrap: [AppComponent]
})
export class AppModule { }

search.service.spec.ts

/* tslint:disable:no-unused-variable */

import { TestBed, async, inject } from '@angular/core/testing';
import { SearchService } from './search.service';

describe('SearchService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [SearchService]
    });
  });

  it('should ...', inject([SearchService], (service: SearchService) => {
    expect(service).toBeTruthy();
  }));
});

search.component.spec.ts

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { SearchBarComponent } from './search-bar.component';

describe('SearchBarComponent', () => {
  let component: SearchBarComponent;
  let fixture: ComponentFixture<SearchBarComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SearchBarComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SearchBarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

results.component.spec.ts

 /* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { ResultsComponent } from './results.component';

describe('ResultsComponent', () => {
  let component: ResultsComponent;
  let fixture: ComponentFixture<ResultsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ResultsComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ResultsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

results.component.html

<app-navbar></app-navbar>
    <div class="container">
        <!-- Start ignoring BootLintBear -->
        <div class="row">
            <div class="col-md-offset-1">
                <!-- Stop ignoring BootLintBear -->
            </div>
            <div class="col-md-11">
                <div class="btn-group" id="search-options">
                    <button type="button" class="btn btn-default" [class.active_view]="Display('all')" (click)="docClick()">
                        All
                    </button>
                    <button type="button" class="btn btn-default" [class.active_view]="Display('images')" (click)="imageClick()">Images</button>
                    <button type="button" class="btn btn-default" [class.active_view]="Display('videos')" (click)="videoClick()">Videos</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" id="tools" data-toggle="collapse" data-target="#search-tools">
                            Tools <span class="caret"></span></button>
                    </div>
                </div>
                <div class="collapse" id="search-tools">
                    <button class="btn btn-default" (click)="filterByContext()" type="button"> Context Ranking</button>
                    <button class="btn btn-default" (click)="filterByDate()" type="button"> Sort by Date</button>
                    <button class="btn btn-default" data-toggle="modal" data-target="#myModal" (click)="advancedsearch()" type="button"> Advanced Search</button>
                </div>
                <hr>
                <div class="container-fluid" id="progress-bar">
                    {{message}}
                </div>
                <div class="text-result" *ngIf="Display('all')">
                    <div *ngFor="let item of items$|async" class="result">
                        <div class="title">
                            <a href="{{item.link}}">{{item.title}}</a>
                        </div>
                        <div class="link">
                            <p>{{item.link}}</p>
                        </div>
                        <div>
                            {{item.pubDate|date:'fullDate'}}
                        </div>
                    </div>
                </div>
                <div class="image-result" *ngIf="Display('images')">
                    <div *ngFor="let item of items$|async">
                        <img class="res-img" src="{{item.link}}">
                    </div>
                </div>
                <div class="video-result" *ngIf="Display('videos')">
                    <div *ngFor="let item of items" class="result">
                        <div class="title">
                            <a href="{{item.path}}">{{item.title}}</a>
                        </div>
                        <div class="link">
                            <p>{{item.link}}</p>
                        </div>
                    </div>
                </div>
                <br>
                <div class="pagination-property">
                    <nav aria-label="Page navigation">
                        <ul class="pagination" id="pag-bar">
                            <li class="page-item"><span class="page-link" href="#" (click)="decPresentPage()">Previous</span></li>
                            <li class="page-item" *ngFor="let num of getNumber(maxPage)"><span class="page-link"
                                                                             *ngIf="presentPage>=4 && num<=noOfPages"
                                                                             [class.active_page]="getStyle(presentPage-3+num)"
                                                                             (click)="getPresentPage(presentPage-3+num)"
                                                                             href="#">{{presentPage-3+num}}</span>
                                <span class="page-link" *ngIf="presentPage<4 && num<=noOfPages" [class.active_page]="getStyle(num)"
                  (click)="getPresentPage(num)" href="#">{{num+1}}</span></li>
                            <li class="page-item"><span class="page-link" (click)="incPresentPage()">Next</span></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <app-advancedsearch></app-advancedsearch>
    </div>

package.json

{
  "name": "susper",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.0",
    "@angular/compiler": "2.4.0",
    "@angular/core": "2.4.0",
    "@angular/forms": "2.4.0",
    "@angular/http": "2.4.0",
    "@angular/platform-browser": "2.4.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "3.4.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.0",
    "@ngrx/router-store": "^1.2.5",
    "@ngrx/store": "^2.2.1",
    "@ngrx/store-devtools": "^3.2.3",
    "core-js": "^2.4.1",
    "ngrx-store-freeze": "^0.1.6",
    "reselect": "^2.5.4",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "typescript": "2.0.10",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0-rc.1",
    "@angular/compiler-cli": "2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }
}

I needed help in this quickly, I have googled a lot about it. Did changes according to the sources, but still I'm getting these errors. Now I'm only left with this option to post it here on Stack-overflow. These errors only occurs when I run ng test. Also, I have gone through issues related to this on Stack overflow and updated my typescript version and angular-cli version. I have written the versions in starting. Thank you for giving time to this question :)

Answer 1

In my case, I had to import the dependencies using the imports key.

TestBed.configureTestingModule({
  import: [ SomeModule ]
})

Answer 2

1. You need to import HttpClientTestingModule in the spec file.
2. You need to import ReactiveFormsModule, FormsModule in your spec file.
3. I assume app-navbar is a reusable component that you might have defined in your shared.module, so you would need to import SharedModule in your spec file.

All the above imports should be added in the spec file which is throwing the error.

Answer 3

To overcome and solve all the errors - import all the modules -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpModule, JsonpModule} from '@angular/http';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { IndexComponent } from './index/index.component';
import { ResultsComponent } from './results/results.component';
import {Routes, RouterModule, Router} from '@angular/router';
import {SearchService} from './search.service';
import { NotFoundComponent } from './not-found/not-found.component';
import {CommonModule} from '@angular/common';
import { AdvancedsearchComponent } from './advancedsearch/advancedsearch.component';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {StoreModule} from '@ngrx/store';
import {reducer} from './reducers/index';
import { SearchBarComponent } from './search-bar/search-bar.component';

in each .component.spec.ts. Doing this, ng test will run fine without giving any errors.