Skip to content

Instantly share code, notes, and snippets.

@ktquez
Forked from martinlindhe/Alert.vue
Created November 7, 2016 17:06
Show Gist options
  • Save ktquez/aee6a61c8b04e28d678c7cdcdf68430d to your computer and use it in GitHub Desktop.
Save ktquez/aee6a61c8b04e28d678c7cdcdf68430d to your computer and use it in GitHub Desktop.
jasmine + karma for vue test
In order to run tests:
$ npm install -g karma-cli
$ npm install -g phantomjs
then to start test watcher:
$ karma start
<style>
.Alert {
padding: 2em;
}
.Alert-Success {
border: 10px solid green;
}
.Alert-Error {
border: 10px solid red;
}
</style>
<template>
<div class="Alert"
v-bind:class="{
'Alert-Success': type == 'success',
'Alert-Error': type == 'error',
}"
v-show="show">
<p>
{{ msg }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
props: ['msg', 'type'],
ready() {
}
}
</script>
describe("Alert component", function() {
var c = require('./../../../resources/assets/js/components/Alert.vue');
it('should have data', function () {
expect(typeof c.data).toBe('function');
});
it('should be visible', function () {
var defaultData = c.data();
expect(defaultData.show).toBe(true);
});
});
// Karma configuration
// Generated on Fri Nov 20 2015 18:27:44 GMT+0100 (CET)
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: [
'browserify',
'jasmine'
],
// list of files / patterns to load in the browser
files: [
'tests/js/**/*Spec.js'
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'tests/**/*.js': ['browserify']
},
browserify: {
debug: true, // debug=true to generate source maps
transform: [ 'vueify' ]
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [
'PhantomJS',
'Chrome'
],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browsers should be started simultaneously
concurrency: Infinity
})
}
{
"private": true,
"dependencies": {
"babel-runtime": "^5.8",
"laravel-elixir": "^3.0",
"vue": "^1.0",
"vue-hot-reload-api": "^1.2",
"vue-i18n": "^2.2",
"vue-resource": "^0.1",
"vue-router": "^0.7",
"vueify-insert-css": "^1.0"
},
"devDependencies": {
"gulp": "^3.9",
"jasmine": "^2.3",
"karma": "^0.13",
"karma-browserify": "^4.4",
"karma-chrome-launcher": "^0.2",
"karma-jasmine": "^0.3",
"karma-phantomjs-launcher": "^0.2",
"phantomjs": "^1.9"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment