Skip to content

Instantly share code, notes, and snippets.

@lattam
Created July 27, 2017 13:24
Show Gist options
  • Save lattam/de07acdbf45c5e3308863da95a66bceb to your computer and use it in GitHub Desktop.
Save lattam/de07acdbf45c5e3308863da95a66bceb to your computer and use it in GitHub Desktop.
Vuetify v-text-field + karma unit tests type error
import Vue from 'vue';
import Vuex from 'vuex';
import Hello from '@/components/Hello';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
Vue.use(Vuex);
describe('Hello.vue', () => {
let store;
const testPerson = {
_id: '123456789',
firstName: 'Martin',
lastName: 'Smith'
};
const people = {
namespaced: true,
state: {
all: [testPerson],
name: 'people',
},
mutations: {
refreshAll: (state, items) => {
state.all = items;
}
},
actions: {
fetchAll: ({ commit }) => {
commit('refreshAll', [testPerson]);
}
}
};
before(() => {
store = new Vuex.Store({
modules: {
people
}
});
});
it('should render empty text field', (done) => {
const Component = Vue.extend({ ...Hello });
const vm = new Component({
store
}).$mount();
Vue.nextTick()
.then(() => {
console.log(vm.$el)
vm.$el.querySelector('#search-field').value.should.eql('');
done();
})
.catch(done);
});
});
<template>
<v-layout>
<v-card class="grey lighten-4">
<v-card-text>
<v-text-field
id="search-field"
></v-text-field>
</v-card-text>
</v-card>
</v-layout>
</template>
<script>
import { mapActions } from 'vuex';
export default {
name: 'list',
async created() {
await this.fetchAll();
},
methods: {
...mapActions('people', [
'fetchAll'
]),
}
};
</script>
<style scoped>
</style>
// This is a karma config file. For more details see
// http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
// https://github.com/webpack/karma-webpack
var webpackConfig = require('../../build/webpack.test.conf')
module.exports = function (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['PhantomJS'],
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
reporters: ['spec', 'coverage'],
files: [
'../../node_modules/promise-polyfill/promise.min.js', // >>> ONLY THIS LINE IS ADDED <<<
'./index.js'
],
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment