SlideShare a Scribd company logo
1 of 14
Download to read offline
Unit Tests
In
Tappero Gregory
2016 - WyzAnt.
Tooling.
{
"karma-mocha": "^0.2.1",
"karma-chai": "^0.1.0",
"karma-chai-as-promised": "^0.1.2",
"karma-sinon": "^1.0.4",
"karma-sinon-chai": "^1.2.0",
"karma-sinon-stub-promise": "^1.0.0",
"whatwg-fetch": "^0.11.0"
"fetch-mock": "^4.1.0",
}
Testing a filter.
import { prettybytes } from 'src/filters';
describe('Filter "prettybytes".', () => {
it('Prettybytes shows the right KB, MB, GB, TB unit.', () => {
expect(prettybytes(1024)).to.equal('1 KB');
expect(prettybytes(1048576)).to.equal('1 MB');
expect(prettybytes(1048576*1024)).to.equal('1 GB');
expect(prettybytes(1048576*1048576)).to.equal('1 TB');
expect(prettybytes(230)).to.equal('230 Bytes');
});
});
Testing an API call, mocking fetch.
import { authentify } from 'src/store/actions/auth';
import fetchMock from 'fetch-mock';
import { fetchUserToken } from 'src/api/web';
describe('Authentify action', () => {
let sandbox;
beforeEach(() => {
sandbox = sinon.sandbox.create();
});
afterEach(() => {
sandbox.restore();
fetchMock.restore();
});
it('FetchUserToken should eventually resolve with a token.', () => {
fetchMock.mock('/login/getaccesstoken/', { Model: ' ' });
return fetchUserToken().should.eventually.equal(' ');
});
});
Testing a component (1/2).
import Vue from 'vue';
import FinalCountdown from 'src/components/workflow/FinalCountdown';
describe('workflow/FinalCountDown component.', () => {
const getComponent = (date) => {
let vm = new Vue({
template: '<div><final-countdown v-ref:component :date="date"></final-countdown></div>',
components: {
FinalCountdown
},
data: {
date
}
});
return vm;
};
...
Testing a component (2/2).
it('Should render correctly with a date in the future.', () => {
const tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
const vm = getComponent(tomorrow).$mount();
expect(vm.$el).to.be.ok;
// Counter should show 23:59:59
// timeUntilExpiration is a component method.
expect(vm.$refs.component.timeUntilExpiration()).to.equal('23:59:59');
// Priority should be normal.
expect(vm.$refs.component.priorityLevel()).to.equal('normal');
});
Testing a component property change.
it('Should be valid only when a radio option is selected.', () => {
const vm = getComponent('Bob').$mount();
const component = vm.$refs.component;
expect(component.isFormValid).to.be.false;
component.picked = 3;
component.$nextTick(() => {
expect(component.isFormValid).to.be.true;
});
});
Testing a component event.
it('Send should dispatch "declinedWorkflowTask" with the choice payload.', () => {
const vm = getComponent('Bob').$mount();
const component = vm.$refs.component;
let spy = sinon.spy();
vm.$on('declinedWorkflowTask', spy);
component.sendReply();
expect(spy).to.have.been.calledWith({
choice: null,
text: ''
});
});
Testing a component ready() hook.
it('Should focus on textarea when ready.', (done) => {
const vm = getComponent();
const component = vm.$refs.component;
// Action triggered by Message Template child component.
fetchMock.mock('/tutor/templates', [{ title: 'template A', body: 'AAA' },
{ title: 'template B', body: 'BBB' }]);
// Triggers ready() on our component.
vm.$appendTo(document.body);
component.$nextTick(() => {
expect(document.activeElement).to.equal(component.$els.textarea);
done();
})
});
Testing with a Vuex store.
import store from 'src/store';
describe('workflow/WorkflowAccept component.', () => {
// Update store states here or import from fixtures.
store.state.availability = { … };
const getComponent = () => {
let vm = new Vue({
template: '<div><workflow-accept v-ref:component></workflow-accept></div>',
components: {
WorkflowAccept
},
// Inject store here.
store: store
});
return vm.$mount();
};
Testing a Vuex action (1/2).
import { sendInitialDirectContactResponse } from 'src/store/actions/workflow';
import store from 'src/store';
const state = store.state;
import { testAction } from './helper';
describe('sendInitialDirectContactResponse action.', () => {
beforeEach(() => {
state.workflow.workflowTask = {
id: 1,
conversationThread: {
id: 2,
},
initialDirectContact: {
id: 3,
},
};
...
});
Testing a Vuex action (2/2).
it('Should dispatch the right mutations.', (done) => {
testAction(sendInitialDirectContactResponse, [1, 1, 'test'], state, [
{ name: 'DELETE_WORKFLOW_TASK', payload: [1] },
{ name: 'ADD_CONVERSATION_THREAD_TO_TOP' },
{ name: 'UPDATE_CONVERSATION_THREAD' },
], done);
});
it('Should not dispatch ADD_CONVERSATION_THREAD_TO_TOP if ...', (done) => {
state.app.menuSelection = 'archived';
testAction(sendInitialDirectContactResponse, [1, 1, 'test'], state, [
{ name: 'DELETE_WORKFLOW_TASK', payload: [1] },
], done);
});
Testing a Vuex action - testaction.js (1/2).
// Helper for testing action with expected mutations.
export function testAction(action, args, state, expectedMutations, done) {
let count = 0;
// mock dispatch
const dispatch = (name, ...payload) => {
const mutation = expectedMutations[count];
expect(mutation.name).to.equal(name);
// if our mutation has a payload and our expected mutation
// wants us to assert this payload.
if (payload && mutation.payload) {
expect(mutation.payload).to.deep.equal(payload);
}
count++;
if (count === expectedMutations.length) {
done();
}
Testing a Vuex action - testaction.js (2/2)
// ...
if (count > expectedMutations.length) {
// Missing non expected mutations.
// List all expected mutations!
expect(count).to.equal(expectedMutations.length);
}
}
// call the action with mocked store and arguments
action({ dispatch, state }, ...args);
// check if no mutations should have been dispatched
if (count === 0) {
expect(expectedMutations.length).to.equal(0);
done();
}
};

More Related Content

What's hot

Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIVisual Engineering
 
Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Morris Singer
 
Intro to testing Javascript with jasmine
Intro to testing Javascript with jasmineIntro to testing Javascript with jasmine
Intro to testing Javascript with jasmineTimothy Oxley
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IVisual Engineering
 
Rapid prototyping and easy testing with ember cli mirage
Rapid prototyping and easy testing with ember cli mirageRapid prototyping and easy testing with ember cli mirage
Rapid prototyping and easy testing with ember cli mirageKrzysztof Bialek
 
Building Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devicesBuilding Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devicesWindows Developer
 
Containers & Dependency in Ember.js
Containers & Dependency in Ember.jsContainers & Dependency in Ember.js
Containers & Dependency in Ember.jsMatthew Beale
 
Effective C++/WinRT for UWP and Win32
Effective C++/WinRT for UWP and Win32Effective C++/WinRT for UWP and Win32
Effective C++/WinRT for UWP and Win32Windows Developer
 
Testing Ember Apps: Managing Dependency
Testing Ember Apps: Managing DependencyTesting Ember Apps: Managing Dependency
Testing Ember Apps: Managing DependencyMatthew Beale
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular jsAndrew Alpert
 
The Road to Native Web Components
The Road to Native Web ComponentsThe Road to Native Web Components
The Road to Native Web ComponentsMike North
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaExoLeaders.com
 
Developing Modern Java Web Applications with Java EE 7 and AngularJS
Developing Modern Java Web Applications with Java EE 7 and AngularJSDeveloping Modern Java Web Applications with Java EE 7 and AngularJS
Developing Modern Java Web Applications with Java EE 7 and AngularJSShekhar Gulati
 
Ember testing internals with ember cli
Ember testing internals with ember cliEmber testing internals with ember cli
Ember testing internals with ember cliCory Forsyth
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersIntroduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersCaldera Labs
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gearsdion
 

What's hot (20)

Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
 
Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015
 
The JavaFX Ecosystem
The JavaFX EcosystemThe JavaFX Ecosystem
The JavaFX Ecosystem
 
Intro to testing Javascript with jasmine
Intro to testing Javascript with jasmineIntro to testing Javascript with jasmine
Intro to testing Javascript with jasmine
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 
Rapid prototyping and easy testing with ember cli mirage
Rapid prototyping and easy testing with ember cli mirageRapid prototyping and easy testing with ember cli mirage
Rapid prototyping and easy testing with ember cli mirage
 
Building Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devicesBuilding Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devices
 
Containers & Dependency in Ember.js
Containers & Dependency in Ember.jsContainers & Dependency in Ember.js
Containers & Dependency in Ember.js
 
Effective C++/WinRT for UWP and Win32
Effective C++/WinRT for UWP and Win32Effective C++/WinRT for UWP and Win32
Effective C++/WinRT for UWP and Win32
 
Testing Ember Apps: Managing Dependency
Testing Ember Apps: Managing DependencyTesting Ember Apps: Managing Dependency
Testing Ember Apps: Managing Dependency
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular js
 
The Road to Native Web Components
The Road to Native Web ComponentsThe Road to Native Web Components
The Road to Native Web Components
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with Karma
 
Developing Modern Java Web Applications with Java EE 7 and AngularJS
Developing Modern Java Web Applications with Java EE 7 and AngularJSDeveloping Modern Java Web Applications with Java EE 7 and AngularJS
Developing Modern Java Web Applications with Java EE 7 and AngularJS
 
Ember testing internals with ember cli
Ember testing internals with ember cliEmber testing internals with ember cli
Ember testing internals with ember cli
 
Full Stack Unit Testing
Full Stack Unit TestingFull Stack Unit Testing
Full Stack Unit Testing
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersIntroduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress Developers
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 
Express JS
Express JSExpress JS
Express JS
 
Redux vs Alt
Redux vs AltRedux vs Alt
Redux vs Alt
 

Viewers also liked

Gui Input Tools for Math [UKMC09]
Gui Input Tools for Math [UKMC09]Gui Input Tools for Math [UKMC09]
Gui Input Tools for Math [UKMC09]Greg TAPPERO
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]Kuro Hsu
 
Vue js 大型專案架構
Vue js 大型專案架構Vue js 大型專案架構
Vue js 大型專案架構Hina Chen
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsTakuya Tejima
 
An Introduction to Vuejs
An Introduction to VuejsAn Introduction to Vuejs
An Introduction to VuejsPaddy Lock
 
VueJS - Uma alternativa elegante
VueJS - Uma alternativa eleganteVueJS - Uma alternativa elegante
VueJS - Uma alternativa eleganteJonathan Bijos
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!José Barbosa
 
Эволюция Скрама в «Моём Круге»
Эволюция Скрама в «Моём Круге»Эволюция Скрама в «Моём Круге»
Эволюция Скрама в «Моём Круге»Evgeny Kuryshev
 
VueJS meetup (Basics) @ nodum.io
VueJS meetup (Basics) @ nodum.ioVueJS meetup (Basics) @ nodum.io
VueJS meetup (Basics) @ nodum.ioWietse Wind
 
Stop Making Excuses and Start Testing Your JavaScript
Stop Making Excuses and Start Testing Your JavaScriptStop Making Excuses and Start Testing Your JavaScript
Stop Making Excuses and Start Testing Your JavaScriptRyan Anklam
 
nodum.io MongoDB Meetup (Dutch)
nodum.io MongoDB Meetup (Dutch)nodum.io MongoDB Meetup (Dutch)
nodum.io MongoDB Meetup (Dutch)Wietse Wind
 
Automated Testing in EmberJS
Automated Testing in EmberJSAutomated Testing in EmberJS
Automated Testing in EmberJSBen Limmer
 
PHP 5.6 New and Deprecated Features
PHP 5.6  New and Deprecated FeaturesPHP 5.6  New and Deprecated Features
PHP 5.6 New and Deprecated FeaturesMark Niebergall
 
действуй опираясь на ценности а не просто применяй инструменты максим цепков
действуй опираясь на ценности а не просто применяй инструменты максим цепковдействуй опираясь на ценности а не просто применяй инструменты максим цепков
действуй опираясь на ценности а не просто применяй инструменты максим цепковMaxim Tsepkov
 
Advanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit TestingAdvanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit TestingLars Thorup
 

Viewers also liked (20)

Gui Input Tools for Math [UKMC09]
Gui Input Tools for Math [UKMC09]Gui Input Tools for Math [UKMC09]
Gui Input Tools for Math [UKMC09]
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
 
Vue js 大型專案架構
Vue js 大型專案架構Vue js 大型專案架構
Vue js 大型專案架構
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
 
An Introduction to Vuejs
An Introduction to VuejsAn Introduction to Vuejs
An Introduction to Vuejs
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
 
How tovuejs
How tovuejsHow tovuejs
How tovuejs
 
VueJS - Uma alternativa elegante
VueJS - Uma alternativa eleganteVueJS - Uma alternativa elegante
VueJS - Uma alternativa elegante
 
VueJs 簡介
VueJs 簡介VueJs 簡介
VueJs 簡介
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
Agile Planning
Agile PlanningAgile Planning
Agile Planning
 
Эволюция Скрама в «Моём Круге»
Эволюция Скрама в «Моём Круге»Эволюция Скрама в «Моём Круге»
Эволюция Скрама в «Моём Круге»
 
VueJS meetup (Basics) @ nodum.io
VueJS meetup (Basics) @ nodum.ioVueJS meetup (Basics) @ nodum.io
VueJS meetup (Basics) @ nodum.io
 
Stop Making Excuses and Start Testing Your JavaScript
Stop Making Excuses and Start Testing Your JavaScriptStop Making Excuses and Start Testing Your JavaScript
Stop Making Excuses and Start Testing Your JavaScript
 
nodum.io MongoDB Meetup (Dutch)
nodum.io MongoDB Meetup (Dutch)nodum.io MongoDB Meetup (Dutch)
nodum.io MongoDB Meetup (Dutch)
 
Automated Testing in EmberJS
Automated Testing in EmberJSAutomated Testing in EmberJS
Automated Testing in EmberJS
 
PHP 5.6 New and Deprecated Features
PHP 5.6  New and Deprecated FeaturesPHP 5.6  New and Deprecated Features
PHP 5.6 New and Deprecated Features
 
действуй опираясь на ценности а не просто применяй инструменты максим цепков
действуй опираясь на ценности а не просто применяй инструменты максим цепковдействуй опираясь на ценности а не просто применяй инструменты максим цепков
действуй опираясь на ценности а не просто применяй инструменты максим цепков
 
Advanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit TestingAdvanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit Testing
 
Qunit Java script Un
Qunit Java script UnQunit Java script Un
Qunit Java script Un
 

Similar to Vuejs testing

Chaining and function composition with lodash / underscore
Chaining and function composition with lodash / underscoreChaining and function composition with lodash / underscore
Chaining and function composition with lodash / underscoreNicolas Carlo
 
Chaining et composition de fonctions avec lodash / underscore
Chaining et composition de fonctions avec lodash / underscoreChaining et composition de fonctions avec lodash / underscore
Chaining et composition de fonctions avec lodash / underscoreNicolas Carlo
 
Build Lightweight Web Module
Build Lightweight Web ModuleBuild Lightweight Web Module
Build Lightweight Web ModuleMorgan Cheng
 
Service worker: discover the next web game changer
Service worker: discover the next web game changerService worker: discover the next web game changer
Service worker: discover the next web game changerSandro Paganotti
 
Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots DeepAnshu Sharma
 
Dpilot - Source Code with Snapshots
Dpilot - Source Code with SnapshotsDpilot - Source Code with Snapshots
Dpilot - Source Code with SnapshotsKritika Phulli
 
Source Code for Dpilot
Source Code for Dpilot Source Code for Dpilot
Source Code for Dpilot Nidhi Chauhan
 
2013 - Nate Abele: HTTP ALL THE THINGS: Simplificando aplicaciones respetando...
2013 - Nate Abele: HTTP ALL THE THINGS: Simplificando aplicaciones respetando...2013 - Nate Abele: HTTP ALL THE THINGS: Simplificando aplicaciones respetando...
2013 - Nate Abele: HTTP ALL THE THINGS: Simplificando aplicaciones respetando...PHP Conference Argentina
 
High Performance Core Data
High Performance Core DataHigh Performance Core Data
High Performance Core DataMatthew Morey
 
Writing native bindings to node.js in C++
Writing native bindings to node.js in C++Writing native bindings to node.js in C++
Writing native bindings to node.js in C++nsm.nikhil
 
JJUG CCC 2011 Spring
JJUG CCC 2011 SpringJJUG CCC 2011 Spring
JJUG CCC 2011 SpringKiyotaka Oku
 
G*ワークショップ in 仙台 Grails(とことん)入門
G*ワークショップ in 仙台 Grails(とことん)入門G*ワークショップ in 仙台 Grails(とことん)入門
G*ワークショップ in 仙台 Grails(とことん)入門Tsuyoshi Yamamoto
 
10 Excellent Ways to Secure Your Spring Boot Application - Devoxx Morocco 2019
10 Excellent Ways to Secure Your Spring Boot Application - Devoxx Morocco 201910 Excellent Ways to Secure Your Spring Boot Application - Devoxx Morocco 2019
10 Excellent Ways to Secure Your Spring Boot Application - Devoxx Morocco 2019Matt Raible
 
Integrating Wicket with Java EE 6
Integrating Wicket with Java EE 6Integrating Wicket with Java EE 6
Integrating Wicket with Java EE 6Michael Plöd
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScriptTomasz Bak
 

Similar to Vuejs testing (20)

Chaining and function composition with lodash / underscore
Chaining and function composition with lodash / underscoreChaining and function composition with lodash / underscore
Chaining and function composition with lodash / underscore
 
Chaining et composition de fonctions avec lodash / underscore
Chaining et composition de fonctions avec lodash / underscoreChaining et composition de fonctions avec lodash / underscore
Chaining et composition de fonctions avec lodash / underscore
 
Build Lightweight Web Module
Build Lightweight Web ModuleBuild Lightweight Web Module
Build Lightweight Web Module
 
Service worker: discover the next web game changer
Service worker: discover the next web game changerService worker: discover the next web game changer
Service worker: discover the next web game changer
 
Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots
 
Dpilot - Source Code with Snapshots
Dpilot - Source Code with SnapshotsDpilot - Source Code with Snapshots
Dpilot - Source Code with Snapshots
 
Source Code for Dpilot
Source Code for Dpilot Source Code for Dpilot
Source Code for Dpilot
 
Advanced redux
Advanced reduxAdvanced redux
Advanced redux
 
2013 - Nate Abele: HTTP ALL THE THINGS: Simplificando aplicaciones respetando...
2013 - Nate Abele: HTTP ALL THE THINGS: Simplificando aplicaciones respetando...2013 - Nate Abele: HTTP ALL THE THINGS: Simplificando aplicaciones respetando...
2013 - Nate Abele: HTTP ALL THE THINGS: Simplificando aplicaciones respetando...
 
High Performance Core Data
High Performance Core DataHigh Performance Core Data
High Performance Core Data
 
Nevermore Unit Testing
Nevermore Unit TestingNevermore Unit Testing
Nevermore Unit Testing
 
Varnish 4 cool features
Varnish 4 cool featuresVarnish 4 cool features
Varnish 4 cool features
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
Writing native bindings to node.js in C++
Writing native bindings to node.js in C++Writing native bindings to node.js in C++
Writing native bindings to node.js in C++
 
Reduxing like a pro
Reduxing like a proReduxing like a pro
Reduxing like a pro
 
JJUG CCC 2011 Spring
JJUG CCC 2011 SpringJJUG CCC 2011 Spring
JJUG CCC 2011 Spring
 
G*ワークショップ in 仙台 Grails(とことん)入門
G*ワークショップ in 仙台 Grails(とことん)入門G*ワークショップ in 仙台 Grails(とことん)入門
G*ワークショップ in 仙台 Grails(とことん)入門
 
10 Excellent Ways to Secure Your Spring Boot Application - Devoxx Morocco 2019
10 Excellent Ways to Secure Your Spring Boot Application - Devoxx Morocco 201910 Excellent Ways to Secure Your Spring Boot Application - Devoxx Morocco 2019
10 Excellent Ways to Secure Your Spring Boot Application - Devoxx Morocco 2019
 
Integrating Wicket with Java EE 6
Integrating Wicket with Java EE 6Integrating Wicket with Java EE 6
Integrating Wicket with Java EE 6
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScript
 

Recently uploaded

The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxRTS corp
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Rob Geurden
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...OnePlan Solutions
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxAndreas Kunz
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?Alexandre Beguel
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogueitservices996
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecturerahul_net
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZABSYZ Inc
 
eSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolseSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolsosttopstonverter
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptxVinzoCenzo
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencessuser9e7c64
 
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full RecordingOpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full RecordingShane Coughlan
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingShane Coughlan
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesKrzysztofKkol1
 
Precise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive GoalPrecise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive GoalLionel Briand
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfRTS corp
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorTier1 app
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slidesvaideheekore1
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonApplitools
 

Recently uploaded (20)

The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogue
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecture
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZ
 
eSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolseSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration tools
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptx
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conference
 
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full RecordingOpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
 
Precise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive GoalPrecise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive Goal
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryError
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slides
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
 

Vuejs testing

  • 2. Tooling. { "karma-mocha": "^0.2.1", "karma-chai": "^0.1.0", "karma-chai-as-promised": "^0.1.2", "karma-sinon": "^1.0.4", "karma-sinon-chai": "^1.2.0", "karma-sinon-stub-promise": "^1.0.0", "whatwg-fetch": "^0.11.0" "fetch-mock": "^4.1.0", }
  • 3. Testing a filter. import { prettybytes } from 'src/filters'; describe('Filter "prettybytes".', () => { it('Prettybytes shows the right KB, MB, GB, TB unit.', () => { expect(prettybytes(1024)).to.equal('1 KB'); expect(prettybytes(1048576)).to.equal('1 MB'); expect(prettybytes(1048576*1024)).to.equal('1 GB'); expect(prettybytes(1048576*1048576)).to.equal('1 TB'); expect(prettybytes(230)).to.equal('230 Bytes'); }); });
  • 4. Testing an API call, mocking fetch. import { authentify } from 'src/store/actions/auth'; import fetchMock from 'fetch-mock'; import { fetchUserToken } from 'src/api/web'; describe('Authentify action', () => { let sandbox; beforeEach(() => { sandbox = sinon.sandbox.create(); }); afterEach(() => { sandbox.restore(); fetchMock.restore(); }); it('FetchUserToken should eventually resolve with a token.', () => { fetchMock.mock('/login/getaccesstoken/', { Model: ' ' }); return fetchUserToken().should.eventually.equal(' '); }); });
  • 5. Testing a component (1/2). import Vue from 'vue'; import FinalCountdown from 'src/components/workflow/FinalCountdown'; describe('workflow/FinalCountDown component.', () => { const getComponent = (date) => { let vm = new Vue({ template: '<div><final-countdown v-ref:component :date="date"></final-countdown></div>', components: { FinalCountdown }, data: { date } }); return vm; }; ...
  • 6. Testing a component (2/2). it('Should render correctly with a date in the future.', () => { const tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000); const vm = getComponent(tomorrow).$mount(); expect(vm.$el).to.be.ok; // Counter should show 23:59:59 // timeUntilExpiration is a component method. expect(vm.$refs.component.timeUntilExpiration()).to.equal('23:59:59'); // Priority should be normal. expect(vm.$refs.component.priorityLevel()).to.equal('normal'); });
  • 7. Testing a component property change. it('Should be valid only when a radio option is selected.', () => { const vm = getComponent('Bob').$mount(); const component = vm.$refs.component; expect(component.isFormValid).to.be.false; component.picked = 3; component.$nextTick(() => { expect(component.isFormValid).to.be.true; }); });
  • 8. Testing a component event. it('Send should dispatch "declinedWorkflowTask" with the choice payload.', () => { const vm = getComponent('Bob').$mount(); const component = vm.$refs.component; let spy = sinon.spy(); vm.$on('declinedWorkflowTask', spy); component.sendReply(); expect(spy).to.have.been.calledWith({ choice: null, text: '' }); });
  • 9. Testing a component ready() hook. it('Should focus on textarea when ready.', (done) => { const vm = getComponent(); const component = vm.$refs.component; // Action triggered by Message Template child component. fetchMock.mock('/tutor/templates', [{ title: 'template A', body: 'AAA' }, { title: 'template B', body: 'BBB' }]); // Triggers ready() on our component. vm.$appendTo(document.body); component.$nextTick(() => { expect(document.activeElement).to.equal(component.$els.textarea); done(); }) });
  • 10. Testing with a Vuex store. import store from 'src/store'; describe('workflow/WorkflowAccept component.', () => { // Update store states here or import from fixtures. store.state.availability = { … }; const getComponent = () => { let vm = new Vue({ template: '<div><workflow-accept v-ref:component></workflow-accept></div>', components: { WorkflowAccept }, // Inject store here. store: store }); return vm.$mount(); };
  • 11. Testing a Vuex action (1/2). import { sendInitialDirectContactResponse } from 'src/store/actions/workflow'; import store from 'src/store'; const state = store.state; import { testAction } from './helper'; describe('sendInitialDirectContactResponse action.', () => { beforeEach(() => { state.workflow.workflowTask = { id: 1, conversationThread: { id: 2, }, initialDirectContact: { id: 3, }, }; ... });
  • 12. Testing a Vuex action (2/2). it('Should dispatch the right mutations.', (done) => { testAction(sendInitialDirectContactResponse, [1, 1, 'test'], state, [ { name: 'DELETE_WORKFLOW_TASK', payload: [1] }, { name: 'ADD_CONVERSATION_THREAD_TO_TOP' }, { name: 'UPDATE_CONVERSATION_THREAD' }, ], done); }); it('Should not dispatch ADD_CONVERSATION_THREAD_TO_TOP if ...', (done) => { state.app.menuSelection = 'archived'; testAction(sendInitialDirectContactResponse, [1, 1, 'test'], state, [ { name: 'DELETE_WORKFLOW_TASK', payload: [1] }, ], done); });
  • 13. Testing a Vuex action - testaction.js (1/2). // Helper for testing action with expected mutations. export function testAction(action, args, state, expectedMutations, done) { let count = 0; // mock dispatch const dispatch = (name, ...payload) => { const mutation = expectedMutations[count]; expect(mutation.name).to.equal(name); // if our mutation has a payload and our expected mutation // wants us to assert this payload. if (payload && mutation.payload) { expect(mutation.payload).to.deep.equal(payload); } count++; if (count === expectedMutations.length) { done(); }
  • 14. Testing a Vuex action - testaction.js (2/2) // ... if (count > expectedMutations.length) { // Missing non expected mutations. // List all expected mutations! expect(count).to.equal(expectedMutations.length); } } // call the action with mocked store and arguments action({ dispatch, state }, ...args); // check if no mutations should have been dispatched if (count === 0) { expect(expectedMutations.length).to.equal(0); done(); } };