angularjsunit-testingjasminekarma-jasminetypescript2.0
Running ng test throws many errors and gets failed
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 -
- Error: No provider for Http!
- Can't bind to 'ngModel' since it isn't a known property of 'input'
- 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 :)
Solution
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.
- Is it safe to resolve a promise multiple times?
- Authentication approach to be use in asp.net Web api and angular js
- Angular pagination - update data onclick
- AngularJS Paging orderBy only affects displayed page
- aws api gateway whitelist reactjs app ip address
- Javascript: How to read a hand held barcode scanner best?
- Validate Bangladeshi phone number with optional +88 or 01 preceeding 11 digits
- how to disable google analytics on localhost
- Angular ng build transpile TypeScript outside of app folders?
- Web stress testing of AngularJS SPA ASP.NET MVC application in Visual Studio
- AngularJS ng-style with a conditional expression
- How to block +,-,e in input type Number?
- How to change width of a Sidenav in Angular Material Design?
- How to make a JSON formatter with JS and HTML?
- How can I clear previous toastr before showing the new one and set a timeout between them?
- If you are not using a .(dot) in your AngularJS models you are doing it wrong?
- ionic framework on transition of page or navigation displaying black screen
- Hybrid angularjs/angular app broken due to angular 13+ removal of deployURL
- Appium Inspector - Call to 'switchContext' failed
- Already included the file name.....?
- Getting ERROR Error: Uncaught (in promise): NullInjectorError: No provider for eF, when I hit the route whose component uses the service
- How to avoid loading data from server every time doing sorting/paging with ngtable
- How to do paging in Angular manually
- How to best perform paging and sorting from multiple sources in JavaScript mashup
- Pagination Navigation Not Displaying All Pages in React Component
- angularjs code changes do not show up after browser refresh
- SurveyJs with QuillJS and custom module counter
- How to display video or image in single tag?
- Application Structure API Consumed by Mobile & Web (React, Angular, etc)
- Angular Form Validation $invalid not working