AngularJS 2 route unit testing, login navigation route test - unit-testing

Question

I am writing unit test for testing the route, I have a login page with login button, I want to test that on click of my login button the page should navigate to dashboard page, but I am not sure how to do it.
here is few lines of code
import {
provide, DirectiveResolver, ViewResolver
}
from 'angular2/core';
import {
describe, expect, it, xit, inject, beforeEachProviders, beforeEach, injectAsync, TestComponentBuilder, setBaseTestProviders
}
from 'angular2/testing';
import {
TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS
}
from 'angular2/platform/testing/browser';
import {
Router, RouterOutlet, RouterLink, RouteParams, RouteData, Location, ROUTER_PRIMARY_COMPONENT
}
from 'angular2/router';
import {
RootRouter
}
from 'angular2/src/router/router';
import {
RouteRegistry
}
from 'angular2/src/router/route_registry';
import {
SpyLocation
}
from 'angular2/src/mock/location_mock';
import {
LoginComponent
}
from '../js/login.component';
import {
EnterpriseSearchComponent
}
from '../js/enterprise-search.component';
import {
AppConfig
}
from '../js/services/appconfig';
describe('login component', () => {
var location, router;
beforeEachProviders(() => {
return [
TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS,
provide(ROUTER_PRIMARY_COMPONENT, {
useValue: EnterpriseSearchComponent
}),
provide(Router, {
useClass: RootRouter
}), RouteRegistry,
provide(Location, {
useClass: SpyLocation
}), AppConfig
]
});
beforeEach(inject([Router, Location], (r, l) => {
router = r;
location = l;
}));
it('Should be able to navigate to Login page', (done) => {
router.navigate(['Login']).then(() => {
expect(location.path()).toBe('/login');
done();
}).catch(e => done.fail(e));
});
it('should validate login', injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(LoginComponent).then((fixture) => {
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
let instance = fixture.componentInstance;
compiled.querySelector("#userid").value = 'dummyid';
compiled.querySelector("#passwrd").value = 'dummypassword';
fixture.detectChanges();
compiled = fixture.debugElement.nativeElement;
instance = fixture.componentInstance;
compiled.querySelector("#loginbtn").click();
fixture.detectChanges();
// here is where i want to test that the page is navigated to dashboard screen
});
}));
});
in the above code sample, inside last test spec I want to test the navigation

Answer 1

const element = fixture.nativeElement;
fixture.detectChanges();
expect(element.querySelectorAll('.dashboard-title')).toBe('Dashboard');
or a more clean way in my opinion is to
put your fixture into a field first i.e
return tcb.createAsync(LoginComponent).then((fixture) => {
this.myFixture = fixture;
...
Then you can validate it inside a different "it case" that if that page contains a specific element that only your dashboard page have
it('is this the login page?', () => {
const element = this.myFixture.nativeElement;
this.myFixture.detectChanges();
expect(element.querySelectorAll('.dashboard-title')).toBe('Dashboard');
});