Is there any way to unit test the navigation guards in a router file ?
Could not find any post or link on this topic ... ant tips, trick or feedback welcome..
Here is the router/index.js , and I would like to test the router.beforeEach()
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '#/pages/HomePage'
import Login from '#/pages/LoginPage'
import ShoppingLists from '#/pages/ShoppingListsPage'
import vueAuthInstance from '../services/auth.js'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: { auth: false, title: 'Home' }
},
{
path: '/login',
name: 'login',
component: Login,
meta: { auth: false, title: 'Login' }
},
{
path: '/shoppinglists',
name: 'shoppinglists',
component: ShoppingLists,
meta: { auth: true, title: 'Shopping Lists' }
},
{
path: '/logout',
name: 'logout'
}
]
})
router.beforeEach(function (to, from, next) {
if (to.meta && to.meta.title) {
document.title = to.meta.title
}
if (to.meta && to.meta.auth !== undefined) {
if (to.meta.auth) {
if (vueAuthInstance.isAuthenticated()) {
next()
} else {
router.push({ name: 'login' })
}
} else {
next()
}
} else {
next()
}
})
export default router
I found a way to do it, importing the router and using simply router.push) to navigate. I also need to stub the vueAuthInstance to authenticate or not the request
import VueRouter from 'vue-router'
import Vue from 'vue'
import sinon from 'sinon'
import router from '#/router/index'
import vueAuthInstance from '#/services/auth.js'
Vue.use(VueRouter)
describe('Router', () => {
let sandbox
beforeEach(() => {
sandbox = sinon.sandbox.create()
router
})
afterEach(() => {
sandbox.restore()
})
it('should be in history mode', () => {
sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(false)
expect(router.mode).to.eql('history')
})
it('should be able to navigate without authentication', () => {
sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(false)
router.push('/')
expect(router.history.current.path).to.eql('/')
expect(router.getMatchedComponents('/')[0].name).to.eql('HomePage')
router.push('/login')
expect(router.history.current.path).to.eql('/login')
expect(router.getMatchedComponents('/login')[0].name).to.eql('LoginPage')
})
it('should not be able to navigate to protected page when not authenticated', () => {
sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(false)
router.push('/shoppinglists')
expect(router.history.current.path).to.eql('/login')
expect(router.getMatchedComponents('/login')[0].name).to.eql('LoginPage')
})
it('should be able to navigate to protected page when authenticated', () => {
sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(true)
router.push('/shoppinglists')
expect(router.history.current.path).to.eql('/shoppinglists')
expect(router.getMatchedComponents('/shoppinglists')[0].name).to.eql('ShoppingListPage')
})
it('should be able to navigate to unprotected page when authenticated', () => {
sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(true)
router.push('/home')
expect(router.history.current.path).to.eql('/home')
expect(router.getMatchedComponents('/')[0].name).to.eql('HomePage')
})
})
Related
I want to test a TheLogin.vue component that has a child BaseInput.vue component. I tried the code below and also shallowMount but I keep getting the error below.
TheLogin.vue
<template>
<section>
<legend>
Hello Login
</legend>
<BaseInput id="userName"></BaseInput>
</section>
</template>
export default {
name: 'TheLogin',
data() {
return {
userName: null
}
}
}
TheLogin.spec.js
import TheLogin from '#/pages/login/TheLogin.vue';
import BaseInput from '#/components/ui/BaseInput.vue';
import { createLocalVue, mount } from '#vue/test-utils';
describe('TheLogin.vue', () => {
const localVue = createLocalVue();
localVue.use(BaseInput); // no luck
it('renders the title', () => {
const wrapper = mount(TheLogin, {
localVue,
// stubs: {BaseInput: true // no luck either
// stubs: ['base-input'] // no luck again
});
expect(wrapper.find('legend').text()).toEqual(
'Hello Login'
);
});
I import my base components in a separate file which I import into my main.js
import Vue from 'vue';
const components = {
BaseInput: () => import('#/components/ui/BaseInput.vue'),
BaseButton: () => import('#/components/ui/BaseButton.vue'),
//et cetera
};
Object.entries(components).forEach(([name, component]) =>
Vue.component(name, component)
);
The error I'm getting is:
TypeError: Cannot read property 'userName' of undefined
UPDATE
Turned out it was Vuelidate causing the error (the code above was not complete). I also had in my script:
validations: {
userName: {
required,
minLength: minLength(4)
},
password: {
required,
minLength: minLength(4)
}
}
I solved it by adding in my test:
import Vuelidate from 'vuelidate';
import Vue from 'vue';
Vue.use(Vuelidate);
Have you tried to shallow mount the component without using localVue and setting BaseInput as a stub?
Something like:
import TheLogin from '#/pages/login/TheLogin.vue';
import { shallowMount } from '#vue/test-utils';
describe('TheLogin.vue', () => {
it('renders the title', () => {
const wrapper = shallowMount(TheLogin, {
stubs: { BaseInput: true }
});
expect(wrapper.find('legend').text()).toEqual(
'Hello Login'
);
});
});
I am trying to test the following App.vue component when a click event is fired on the logout vue-router link...
App.vue
<template>
<div id="app">
<header id="header">
<nav>
<ul class="navigation">
<li id="home"><router-link :to="{ name: 'home' }">Home</router-link></li>
<li id="login" v-if="!isAuthenticated"><router-link :to="{ name: 'login' }">Login</router-link></li>
<li id="shoppinglists" v-if="isAuthenticated"><router-link :to="{ name: 'shoppinglists' }" >Shopping Lists</router-link></li>
<li id="logout" v-if="isAuthenticated">Logout</li>
</ul>
</nav>
</header><!-- /#header -->
<section id="page">
<router-view></router-view>
</section><!-- /#page -->
</div>
</template>
<script>
import store from '#/vuex/store'
import router from '#/router/index'
import { mapGetters } from 'vuex'
export default {
name: 'app',
computed: {
...mapGetters({ isAuthenticated: 'isAuthenticated' })
},
methods: {
logout () {
this. $store.dispatch('logout')
.then(() => {
window.localStorage.removeItem('vue-authenticate.vueauth_token')
this/$router.push({ name: 'home' })
})
}
},
store,
router
}
</script>
To test the logout click, I preset the isAuthenticated state to true, so the logout router link show up and I trigger the click event on it.
LOG: 'navigation: ', <ul class="navigation"><li id="home">
Home</li> <!---->
<li id="shoppinglists">Shopping Lists
</li> <li id="logout">Logout</li></ul>
I expect the action logout to have been called .. but it's not ... why ?
App.spec.js
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import App from '#/App'
import router from '#/router/index'
import { mount } from 'avoriaz'
import sinon from 'sinon'
Vue.use(Vuex)
Vue.use(VueRouter)
describe('App.vue', () => {
let actions
let getters
let store
beforeEach(() => {
getters = {
isAuthenticated: (state) => {
return state.isAuthenticated
}
}
actions = {
logout: sinon.stub().returns(Promise.resolve(true))
}
store = new Vuex.Store({
getters,
actions,
state: {
isAuthenticated: true,
currentUserId: ''
}
})
router
})
it('calls logout method', () => {
const wrapper = mount(App, { router, store })
console.log('navigation: ', wrapper.find('ul.navigation')[0].element)
const logoutLink = wrapper.find('#logout a')[0]
logoutLink.trigger('click')
expect(actions.logout.calledOnce).to.equal(true)
})
})
vuex/actions.js
import { IS_AUTHENTICATED, CURRENT_USER_ID } from './mutation_types'
import getters from './getters'
export default {
logout: ({commit}) => {
commit(IS_AUTHENTICATED, { isAuthenticated: false })
commit(CURRENT_USER_ID, { currentUserId: '' })
return true
}
}
vuex/mutations.js
import * as types from './mutation_types'
import getters from './getters'
export default {
[types.IS_AUTHENTICATED] (state, payload) {
state.isAuthenticated = payload.isAuthenticated
},
[types.CURRENT_USER_ID] (state, payload) {
state.currentUserId = payload.currentUserId
}
}
vuex/getters.js
export default {
isAuthenticated: (state) => {
return state.isAuthenticated
}
}
Finally , I found a way to test it :
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import App from '#/App'
import router from '#/router/index'
import { mount } from 'avoriaz'
import sinon from 'sinon'
Vue.use(Vuex)
Vue.use(VueRouter)
describe('App.vue', () => {
let actions
let getters
let store
let sandbox
let routerPush
beforeEach(() => {
sandbox = sinon.sandbox.create()
getters = {
isAuthenticated: (state) => {
return state.isAuthenticated
}
}
actions = {
logout: sandbox.stub().returns(Promise.resolve(true))
}
store = new Vuex.Store({
getters,
state: {
isAuthenticated: true,
currentUserId: ''
},
actions
})
router
})
afterEach(() => {
sandbox.restore()
})
it('calls logout method', (done) => {
const wrapper = mount(App, { store, router })
routerPush = sandbox.spy(wrapper.vm.$router, 'push')
const logoutLink = wrapper.find('#logout a')[0]
logoutLink.trigger('click')
wrapper.vm.$nextTick(() => {
expect(actions.logout.calledOnce).to.equal(true)
actions.logout().then(() => {
expect(routerPush).to.have.been.calledWith('/home')
})
done()
})
})
})
I've been looking for a good pattern to unit test routes I have configured in my application so that I know the specified modules exist on disk as defined.
Here is an example route configuration:
import { Aurelia, PLATFORM } from 'aurelia-framework';
import { Router, RouterConfiguration } from 'aurelia-router';
export class App {
params = new bindParameters();
router: Router;
configureRouter(config: RouterConfiguration, router: Router) {
config.title = 'Aurelia';
config.map([{
route: ['', 'home'],
name: 'home',
settings: { icon: 'home' },
moduleId: PLATFORM.moduleName('../home/home'),
nav: true,
title: 'Home'
}, {
route: 'sample',
name: 'sample',
settings: { icon: 'education' },
moduleId: PLATFORM.moduleName('../sample/index'),
nav: true,
title: 'Sample Information'
}]);
this.router = router;
}
}
class bindParameters {
user = "user_name";
}
To test it I took the approach of passing in an instance of a router then checking to see if it exists:
import { App } from './app';
import jasmine from 'jasmine';
import { Container } from "aurelia-framework";
import { RouterConfiguration, Router } from "aurelia-router";
describe('application routes', function () {
let app: App;
let router: Router;
let routerConfiguration: RouterConfiguration;
let configureRouter: Promise<void>;
beforeEach(() => {
var container = new Container().makeGlobal();
routerConfiguration = container.get(RouterConfiguration);
router = container.get(Router);
app = new App();
app.configureRouter(routerConfiguration, router);
configureRouter = router.configure(routerConfiguration);
routerConfiguration.exportToRouter(router);
});
it('should exist for sample', function () {
expect(router).not.toBeNull();
//configureRouter.then(function () {
//var route = router.routes.find((route) => route.name == 'sample');
// add some assert that the sample module can be found
// done();
//});
});
});
My current problem is that the container is returning a null Router as shown by the current test. The closest pattern I have found to what I am trying to do is in this question.
What am I missing in my example test and also is there a better way to test route configuration?
It seems #thinkOfaNumber was right. Turns out my test was good, but I was missing reflect-metadata. When I applied the fix outlined in this stackoverflow post my tests passed.
I have a listing component with following code:
///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
import { Component, OnInit } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';
import { Employee } from '../models/employee';
import { EmployeeListServiceComponent } from '../services/employee-list-service.component';
#Component({
selector: 'employee-list',
template: `
<ul class="employees">
<li *ngFor="#employee of employees">
<a [routerLink]="['EmployeeDetail', {id: employee.id}]">
<span class="badge">{{employee.id}}</span>
{{employee.name}}
</a>
</li>
</ul>
`,
directives: [ROUTER_DIRECTIVES],
providers: [EmployeeListServiceComponent]
})
export class EmployeeListComponent implements OnInit {
public employees: Employee[];
public errorMessage: string;
constructor(
private _listingService: EmployeeListServiceComponent
){}
ngOnInit() {
this._listingService.getEmployees().subscribe(
employees => this.employees = employees,
error => this.errorMessage = <any>error
);
}
}
I wish to write unit tests for the ngOninit hook. I have written following test:
/// <reference path="../../typings/main/ambient/jasmine/jasmine.d.ts" />
import {
it,
describe,
expect,
TestComponentBuilder,
injectAsync,
setBaseTestProviders,
beforeEachProviders,
} from "angular2/testing";
import { Component, provide, ApplicationRef, OnInit } from "angular2/core";
import {
TEST_BROWSER_PLATFORM_PROVIDERS,
TEST_BROWSER_APPLICATION_PROVIDERS
} from "angular2/platform/testing/browser";
import {
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
ROUTER_PRIMARY_COMPONENT,
APP_BASE_HREF
} from 'angular2/router';
import {XHRBackend, HTTP_PROVIDERS} from "angular2/http";
import { MockApplicationRef } from 'angular2/src/mock/mock_application_ref';
import {MockBackend } from "angular2/src/http/backends/mock_backend";
import {Observable} from 'rxjs/Rx';
import 'rxjs/Rx';
import { Employee } from '../models/employee';
import { EmployeeListComponent } from './list.component';
import { EmployeeListServiceComponent } from '../services/employee-list-service.component';
class MockEmployeeListServiceComponent {
getEmployees () {
return Observable.of([
{
"id": 1,
"name": "Abhinav Mishra"
}
]);
}
}
#Component({
template: '<employee-list></employee-list>',
directives: [EmployeeListComponent],
providers: [MockEmployeeListServiceComponent]
})
class TestMyList {}
describe('Employee List Tests', () => {
setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
beforeEachProviders(() => {
return [
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(EmployeeListServiceComponent, {useClass: MockEmployeeListServiceComponent}),
provide(XHRBackend, {useClass: MockBackend}),
provide(APP_BASE_HREF, {useValue: '/'}),
provide(ROUTER_PRIMARY_COMPONENT, {useValue: EmployeeListComponent}),
provide(ApplicationRef, {useClass: MockApplicationRef})
]
});
it('Should be true',
injectAsync([TestComponentBuilder], (tcb) => {
return tcb
.createAsync(TestMyList)
.then((fixture) => {
fixture.detectChanges();
var compiled = fixture.debugElement.nativeElement;
console.log(compiled.innerHTML);
expect(true).toBe(true);
});
})
);
});
However, the output of console.log in the test is an empty ul tag as follows:
'<employee-list>
<ul class="employees">
<!--template bindings={}-->
</ul>
</employee-list>'
Can anyone suggest me the proper way of writing unit tests for component hooks?
SOLUTION
Mock the http request in the injectAsync block as follows:
backend.connections.subscribe(
(connection:MockConnection) => {
var options = new ResponseOptions({
body: [
{
"id": 1,
"name": "Abhinav Mishra"
}
]
});
var response = new Response(options);
connection.mockRespond(response);
}
);
However now i am getting another error as follows:
Failed: EXCEPTION: Component "EmployeeListComponent" has no route config. in [['EmployeeDetail', {id: employee.id}] in EmployeeListComponent#3:7]
ORIGINAL EXCEPTION: Component "EmployeeListComponent" has no route config.
ORIGINAL STACKTRACE:
Error: Component "EmployeeListComponent" has no route config.
If you call async code in ngOnInit() you can't assume it is completed when console.log(...) is executed. this.employees is only set when the callback you passed to subscribe(...) gets called after the response arrived.
If you use MockBackend you can control the response and after the response was passed you have to run fixture.detectChanges() again to make the component re-render with the updated data, then you can read innerHTML and expect it to contain the rendered content.
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
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');
});