Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
testing vuetify components
import { mount } from '@vue/test-utils';
import Vue from 'vue';
import CategoryIndex from '../../../src/components/CategoryIndex.vue';
describe('CategoryIndex', function () {
let wrp;
beforeEach(() => {
wrp = mount(CategoryIndex);
});
it('has a mounted hook', () => {
expect(typeof CategoryIndex.mounted).toBe('function');
});
it('has an h2 tag with correct class and title', () => {
expect(wrp.find('h2.component-title').text()).toEqual('Categorias - Listagem');
});
it('has element with default css class for index/list stuff', () => {
console.info(wrp.find('.index-of-things'));
Vue.nextTick(() => {
console.info(wrp.find('.index-of-things'));
});
});
});
<template>
<div class="category category-index">
<h2 class="component-title">Categorias - Listagem</h2>
<v-btn class="js-btn-add-category" :to="{ name: 'category-new' }">
<v-icon>add</v-icon>
<span>Cadastrar Categoria</span>
</v-btn>
<v-container grid-list-md index-of-things>
<v-layout category-index-row row wrap align-center
v-for="(category, idx) in categories" :key="idx">
<v-flex xs12 sm6>
<div>
{{ category.name }}
</div>
</v-flex>
<v-flex xs12 sm6>
<div>
<v-btn color="blue" :to="{ name: 'category-edit', params: { category_id: category.id }}">
<v-icon>edit</v-icon>
<span>Editar</span>
</v-btn>
</div>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
categories: [],
};
},
mounted () {
axios.get('/categories')
.then(res => {
if ('OK' === res.statusText) {
this.categories = res.data;
}
}).catch(err => {
//console.warn(err);
});
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.