I have this in hello.component.ts I am getting some issues in the testing when I call service from component and checking data binding in component upon http request. below is the detail code. version angular 5.
import { Component, OnInit, Input, Inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpService } from '../http-service.service';
import { Constants } from '../constants';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private httpService: HttpService,
private location: Location,
public dialog: MatDialog
) { }
albumList = [];
photoList = [];
isDisabled = true;
selectedAlbumsHash = {};
dataSource = null;
displayedColumns = ['id', 'title'];
selectedAlbums = [];
ngOnInit(): void {
this.route.params.subscribe(params => this.getAlbumDetails(params));
}
getAlbumDetails(params) {
let id = parseInt(params.id);
this.httpService.get(Constants.ALBUM_URL).subscribe(
data => {
this.albumList = data.filter(
(album) => {
return album.userId === id;
}
);
}
);
}
}
and in spec file
import { TestBed, async,inject, fakeAsync, ComponentFixture } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component'
import { MatDialogModule, MatDialog, MatGridListModule, MatCheckbox } from '@angular/material';
import { MatTableDataSource } from '@angular/material/table';
import { TestsModule } from '../shared/modules/tests.module';
import { Observable } from 'rxjs/Observable';
import { ActivatedRoute, Params } from '@angular/router';
import { HttpService } from '../http-service.service';
import { Constants } from '../constants';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import {
RouterTestingModule
} from '@angular/router/testing';
describe('AppComponent', () => {
let fixture;
let app;
let component;
let data = [
{
"userId": 1,
"id": 1,
"title": "quidem molestiae enim"
},
{
"userId": 1,
"id": 2,
"title": "sunt qui excepturi placeat culpa"
},
{
"userId": 1,
"id": 3,
"title": "omnis laborum odio"
},
{
"userId": 1,
"id": 4,
"title": "non esse culpa molestiae omnis sed optio"
},
{
"userId": 1,
"id": 5,
"title": "eaque aut omnis a"
},
{
"userId": 1,
"id": 6,
"title": "natus impedit quibusdam illo est"
},
{
"userId": 1,
"id": 7,
"title": "quibusdam autem aliquid et et quia"
},
{
"userId": 1,
"id": 8,
"title": "qui fuga est a eum"
},
{
"userId": 1,
"id": 9,
"title": "saepe unde necessitatibus rem"
},
{
"userId": 1,
"id": 10,
"title": "distinctio laborum qui"
},
{
"userId": 2,
"id": 11,
"title": "quam nostrum impedit mollitia quod et dolor"
},
{
"userId": 2,
"id": 12,
"title": "consequatur autem doloribus natus consectetur"
}
];
const two = 2;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
DashboardComponent
],
imports: [
TestsModule,
HttpClientModule,
HttpClientTestingModule],
providers: [
{ provide: MatDialog, useValue: { close: () => {} },
},
{
provide: ActivatedRoute,
useValue: {
params: {
subscribe: (fn: (value: Params) => void) => fn({
id: two,
}),
},
},
},
HttpService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.debugElement.componentInstance;
}));
afterEach(inject([HttpTestingController], (backend: HttpTestingController) => {
backend.verify();
}));
it('intialize', async(() => {
let spy = spyOn(component, 'getAlbumDetails');
component.ngOnInit();
expect(spy).toHaveBeenCalled();
}));
it(`should return data`, async(inject([HttpService, HttpTestingController],
(service: HttpService, backend: HttpTestingController) => {
component.ngOnInit();
service.get('https://jsonplaceholder.typicode.com/albums').subscribe(albumData => {
expect(albumData.length).toEqual(100);
expect(albumData).toEqual(data);
});
const req = backend.expectOne('https://jsonplaceholder.typicode.com/albums');
expect(req.request.method).toBe("GET");
req.flush(data);
})));
});
everything is fine but only I get issues on below:
1. How to check this.albumList in spec file
I checked with spy also but it did not resolve problem.
Thanks
Aucun commentaire:
Enregistrer un commentaire