I'm pretty new in unit testing in Angular 2 so i'm asking your help.
My logout function :
logOut() {
this.authService.logOut().subscribe(() => {
this.router.navigate(['login']);
});
}
And my unit test :
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
let authenticationService: AuthenticationService;
let mockLogOut = {
logOut: () => { }
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
HttpModule,
CommonModule,
ReactiveFormsModule,
TranslateModule,
RouterTestingModule.withRoutes([
{ path: 'login', component: LoginComponent }
])
],
declarations: [HomeComponent, LoginComponent],
providers: [
{ provide: AuthenticationService, useValue: mockLogOut },
TranslateService,
TRANSLATION_PROVIDERS
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
authenticationService = TestBed.get(AuthenticationService);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('Authentication Tests', () => {
it('should log out the user', inject([AuthenticationService], (mockLogin: AuthenticationService) => {
fakeAsync(() => {
spyOn(authenticationService, 'logOut');
let navigateSpy = spyOn((<any>component).router, 'navigate');
component.logOut();
expect(mockLogin.logOut).toHaveBeenCalled();
expect(navigateSpy).toHaveBeenCalledWith(['/log1n']);
});
}));
});
});
I want to check if the user is redirected to the route /login but this test always success even if I put something else than /login
Related
I am trying to test my router event this is what te code in the TS file look like:
constructor(
private router: Router
) {
router.events.subscribe(route => {
// I removed the code because it doesn`t matter for the solution
});
}
unittest:
describe('MainComponent', () => {
let methodSpy: jasmine.Spy;
const eventSubject = new ReplaySubject<RouterEvent>(1);
const routerMock = {
navigate: jasmine.createSpy('navigateByUrl'),
navigateByUrl: jasmine.createSpy('navigateByUrl'),
events: eventSubject.asObservable(),
url: 'test/url',
createUrlTree: (commands, navExtras = {}) => {},
serializeUrl: (commands, navExtras = {}) => {}
}
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule, FormsModule],
declarations: [],
providers: [
{ provide: Router, useValue: routerMock},
{ provide: ActivatedRoute, useValue: routerMock},
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MainComponent);
component = fixture.componentInstance;
methodSpy = spyOn(component, 'AdminPanelStarted');
//fixture.detectChanges();
});
it('should trigger the router event and hit the function "Panel"', () => {
eventSubject.next(new NavigationEnd(1, 'test', 'routeUrl'));
expect(methodSpy).toHaveBeenCalled();
});
});
this is the error I am getting:
I can`t find the solution. The only thing I want to test is if the correct function have been called after entering the router.events subscription. The observable is triggered but gives the error that startsWith can not be done on undefined. But what is undefined?
Thx a Lot!
I am trying to spy popover present method in my ionic 5 / angular 11 project but getting an error
Unhandled Promise rejection: Cannot read property 'then' of undefined
Here is unit test code
describe('LoginPage', () => {
let popoverSpy = jasmine.createSpyObj('Popover', ['create', 'present', 'onDidDismiss', 'dismiss']);
let popoverCtrlSpy = jasmine.createSpyObj('PopoverController', ['create']);
popoverCtrlSpy.create.and.callFake(function () {
return popoverSpy;
});
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [LoginPage],
imports: [
IonicModule.forRoot(),
TranslateModule.forChild(),
ComponentsModule,
TranslateModule.forRoot({
loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
})
],
providers: [{ provide: PopoverController, useValue: popoverCtrlSpy }]
}).compileComponents()
it("check popover preset", () => {
component.openEntitySelection();
fixture.detectChanges();
expect(popoverSpy.present).toHaveBeenCalled()
})
}
private async openEntitySelection() {
let popover = await this.popoverCtrl.create({
component: PopoverPage
});
await popover.present();
popover.onDidDismiss().then((response) => {
//Handle response
})
}
Thanks in advance!
It seems you're not mocking onDidDismiss to return a promise. You also need to use fixture.whenStable or waitForAsync utilities to wait for the promise to be resolved before doing your assertion.
Try this:
describe('LoginPage', () => {
let popoverSpy = jasmine.createSpyObj('Popover', ['create', 'present', 'onDidDismiss', 'dismiss']);
// !! -- Add this line -- !!
// I am mock resolving it to a value of true, you can resolve it to any value
popOverSpy.onDidDismiss.and.returnValue(Promise.resolve(true));
// !! --- !!
let popoverCtrlSpy = jasmine.createSpyObj('PopoverController', ['create']);
popoverCtrlSpy.create.and.callFake(function () {
return popoverSpy;
});
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [LoginPage],
imports: [
IonicModule.forRoot(),
TranslateModule.forChild(),
ComponentsModule,
TranslateModule.forRoot({
loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
})
],
providers: [{ provide: PopoverController, useValue: popoverCtrlSpy }]
}).compileComponents()
it("check popover preset", (done) => { // add done to let jasmine know you're done
component.openEntitySelection();
fixture.detectChanges();
// you have to wait at least for one fixture.whenStable I am thinking
// because we are returning a promise and we have to ensure that the promises
// have completed before doing our assertion.
fixture.whenStable().then(() => {
expect(popoverSpy.present).toHaveBeenCalled();
done();
});
});
}
private async openEntitySelection() {
let popover = await this.popoverCtrl.create({
component: PopoverPage
});
await popover.present();
popover.onDidDismiss().then((response) => {
//Handle response
})
}
Argument of type 'Promise' is not assignable to parameter of type 'Promise<OverlayEventDetail>'.
Type 'boolean' has no properties in common with type 'OverlayEventDetail'
I am writing unit tests for my component but having trouble in creating the instance of the component and showing following error:
TypeError: Cannot read property 'patientId' of null
I have tried mocking all the providers including router and active router
here is how I am calling the component:
public onSelectedOrganizationInsurance(organizationInsurance: OrganizationInsurance) {
this.router.navigate(['../search-insurance-plan'], {
relativeTo: this.activatedRoute,
state: {
selectedOrganizationInsurance: organizationInsurance,
patientId: this.patientId
}
});
My component.ts is
export class PatientInsurancePlanSearchComponent implements OnInit {
private patientId: number = -1;
public selectedOrganizationInsurance: OrganizationInsurance;
public organizationInsurancePlans$: Observable<OrganizationInsurancePlan[]>;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private biilingHttpService: BillingHttpService
) {
this.selectedOrganizationInsurance = new OrganizationInsurance();
}
ngOnInit() {
this.patientId = history.state.patientId as number;
this.selectedOrganizationInsurance = history.state.selectedOrganizationInsurance as OrganizationInsurance;
this.organizationInsurancePlans$ = this.biilingHttpService.getOrganizationInsurancePlans(this.selectedOrganizationInsurance.id);
}
spec.ts
class FakeInsurancePlanSearchComponent {
#Input() public organizationInsurancePlans: OrganizationInsurancePlan[] = [];
#Input() public selectedOrganizationInsurance: OrganizationInsurance;
}
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PatientInsurancePlanSearchComponent
, FakeInsurancePlanSearchComponent ],
imports: [
StoreModule.forRoot({}),
HttpClientModule,
RouterTestingModule,
],
providers: [
Store,
{
provide: ActivatedRoute, useValue: {
state: of({ selectedorganizationInsurancePlan: 'AETNA'})
}
},
BillingHttpService
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PatientInsurancePlanSearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
Kindly guide me whats I am missing.
you can access your routing state via "Location" injection of #angular/common.
Like this:
constructor(private readonly location: Location) {}
ngOnInit() {
this.patientId = this.location.getState().patientId as number;
}
now you can create a spy on location in your unit test:
let location: Location;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PatientInsurancePlanSearchComponent
, FakeInsurancePlanSearchComponent ],
imports: [
StoreModule.forRoot({}),
HttpClientModule,
RouterTestingModule,
],
providers: [
Store,
BillingHttpService
]
})
.compileComponents();
}));
beforeEach(() => {
location = TestBed.inject(Location);
fixture = TestBed.createComponent(PatientInsurancePlanSearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
spyOn(location, 'getState').and.returnValue(yourObject);
expect(component).toBeTruthy();
});
So, I'm getting the error TypeError: Cannot read property 'subscribe' of undefined for all the test cases in my module. In my component I'm injecting "ActivatedRoute" and "Router" and in my ngOnInit(), I'm getting some data that I'm passing within the routing-module.
These are the files I have:
custom-routing.module.ts
const casesRoutes: Routes = [
{
path: '',
component: MainComponent,
children: [
{
path: '',
component: CustomComponent,
resolve: {
someData: CustomResolver
},
children: [
{
path: 'child',
component: ChildComponent
}
]
},
{
path: ':id/edit',
component: CaseEditComponent,
resolve: {
theCase: CaseDetailResolver
}
}
]
}
];
#NgModule({
imports: [
RouterModule.forChild(casesRoutes)
],
exports: [
RouterModule
],
providers: [
CustomResolver
]
})
export class CustomRoutingModule { }
custom.component.ts
#Component({
selector: 'my-custom',
styleUrls: ['./custom.component.css'],
templateUrl: './custom.component.html',
})
export class CustomComponent implements OnInit {
public someData: TheData;
constructor(private route: ActivatedRoute, private router: Router) { }
public ngOnInit(): void {
this.route.data.subscribe((data) => {
this.someData = data.someData;
});
}
public navigateTo(): void {
this.router.navigate(['child'], { relativeTo: this.route });
}
}
custom.component.spec.ts
describe('CustomComponent', () => {
let comp: CustomComponent;
let fixture: ComponentFixture<CustomComponent>;
let router = {
navigate: jasmine.createSpy('navigate')
}
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
CustomComponent
],
providers: [
{
provide: ActivatedRoute,
useValue: {
data: Observable.of({
someData: { id: 1, lastName: 'Last', firstName: 'First' }
})
}
},
{
provide: Router,
useValue: router
}
]
}).compileComponents();
}));
beforeEach(async(() => {
fixture = TestBed.createComponent(CustomComponent);
comp = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create component', () => {
expect(comp).toBeDefined();
});
it('should initialize the component correctly and expect some data returned from ActivatedRoute', () => {
comp.ngOnInit();
expect(comp.someData).toBeDefined();
});
it('should verify the navigate method from router is called', () => {
comp.navigateTo();
expect(router.navigate).toHaveBeenCalled();
});
});
At first I thought it could be breaking because of the statement in ngOnInit() since it's the only case I'm using the subscribe method but even the first test where I check the component is defined, is failing. I even added some console.info() calls to review that this.route.data in the component has some data and it actually has so I have no idea what could be causing it.
This is my template:
<ion-label stacked>{{"goal_settings.goalname" | translate }}</ion-label>
I am getting the error: No value accessor for ""
This is my test:
describe('Goal Settings', () => {
let tcb;
let navParams;
let viewController;
let events;
// Providers and Mock Providers
beforeEachProviders(() => [
TestComponentBuilder,
HTTP_PROVIDERS,
provide(NavParams, {useClass: MockNavParams}),
provide(ViewController, {useClass: MockViewController}),
provide(Events, {useClass: MockEvents}),
provide('goal_settings', { useValue: [ {
goalname: "Super",
amount:"Super",
monthlypayment:"Super",
choosefund:"Super",
date:"Super",
guaranteelevel:"Super"
}]}),
provide(TranslateService, {
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
}),
provide(TranslateLoader, {
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
}),
provide(XHRBackend, { useClass: MockBackend })
]);
beforeEach(inject(
[
TestComponentBuilder,
NavParams,
ViewController,
Events
],
(
_tcb,
_navParams,
_viewController,
_events
) => {
tcb = _tcb
navParams = _navParams
viewController = _viewController
events = _events
}));
it('should contain <ion-title> directive', () => {
return tcb.createAsync(GoalSettingsPage).then((fixture) => {
fixture.detectChanges();
var compiled = fixture.debugElement.nativeElement;
expect(compiled.innerHTML).toContain('ion-title');
});
});
I think the problem is that goal_settings is wrongly mocked by me..