У меня есть компонент с именем index
:
<template>
<div class="w-full">
<pane-title :title="$t('Additions')">
<scale-loader v-if="loading" :loading="true" />
<div v-else>
<addition-table
:resources="resources"
@check_resource="check_resource($event)"
@select="
$router.push({
name: 'additionShow',
params: { id: $event.id },
})
"
/>
<pagination :meta="meta" @paginate="paginate" />
</div>
</pane-title>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import PaneTitle from "@/Ui/PaneTitle";
import AdditionTable from "./Components/Table";
import Pagination from "@/Ui/Pagination";
export default {
name: "AdditionIndexPage",
components: {
PaneTitle,
AdditionTable,
Pagination,
},
computed: {
...mapGetters({
query: `addition/${QUERY}`,
resources: `addition/${RESOURCES}`,
resource: `addition/${RESOURCE}`,
checked: `addition/${CHECKED}`,
loading: `addition/${LOADING}`,
meta: `addition/${META}`,
}),
},
methods: {
getResources() {
this.$store.dispatch(`addition/${FETCH_RESOURCES}`);
},
check_resource(resource) {
this.$store.dispatch(`addition/${CHECK_RESOURCE}`, resource);
},
},
};
</script>
Дочерний компонент с именем AdditionTable
:
<template>
<div class="model-table-wrapper">
<v-radio-group v-model="checked"
name="additionRadioGroup" class="w-full">
<table class="model-table">
<thead>
<tr>
<th class="model-table-th" />
<th class="model-table-th">{{ $t("Row") }}</th>
<th class="model-table-th">{{ $t("Title") }}</th>
</tr>
</thead>
<tbody>
<tr
v-for="(resource, index) in resources.data"
:key="resource.id"
:class="resource.id === checked ? 'bg-blue-100' : ''"
>
<td class="model-table-td ">
<v-radio :value="resource.id" @click="check(resource)" />
</td>
<td class="model-table-td slot-td w-1/24">
<a href="#" class="bold-link"
@click.prevent="$emit('select', resource)">
{{ resources.meta.from + index }}
</a>
</td>
<td class="model-table-td">
<router-link class="bold-link"
:to="{ name: 'additionShow', params: { id: resource.id } }">
{{ resource.title }}
</router-link>
</td>
</tr>
</tbody>
</table>
</v-radio-group>
</div>
</template>
<script>
import { CHECKED } from "@/Stores/getter-types";
import { mapGetters } from "vuex";
export default {
name: "AdditionTable",
props: {
resources: { required: true },
},
data() {
return {
...mapGetters({
checked: `addition/${CHECKED}`,
}),
};
},
methods: {
check(resource) {
this.checked = resource.id;
this.$emit("check_resource", resource.id);
},
},
};
</script>
Этот компонент имеет таблицу с тремя столбцами, в которой первый столбец имеет v-radio
компонент. Я хочу написать тест для нажатия на radio
.
Это моя попытка:
import VueI18n from "vue-i18n";
import { shallowMount, createLocalVue } from "@vue/test-utils";
import Index from "../Index";
import enLang from "@/locales/en";
import Vuex from "vuex";
import VueRouter from "vue-router";
import getters from "@/Modules/Additions/Store/getters";
import mutations from "@/Modules/Additions/Store/mutations";
import state from "@/Modules/Additions/Store/state";
import ScaleLoader from "vue-spinner/src/ScaleLoader";
import AdditionTable from "@/Modules/Additions/Components/Table";
import Vuetify from "vuetify";
import VRadioGroup from "vuetify/lib/components/VRadioGroup/VRadioGroup";
import VRadio from "vuetify/lib/components/VRadioGroup/VRadio";
const localVue = createLocalVue();
localVue.use(VueI18n);
localVue.use(Vuex);
localVue.use(VueRouter);
let wrapper;
describe("Index.vue", () => {
let config;
let store;
let router;
let vuetify;
let actions;
beforeEach(() => {
vuetify = new Vuetify();
router = new VueRouter({
routes: [
{
name: "addition",
path: "/addition",
component: Index,
},
],
});
actions = {
fetchResources: jest.fn(),
checkResource: jest.fn(() => {
state.checked = 0;
}),
};
store = new Vuex.Store({
modules: {
addition: {
namespaced: true,
state,
getters,
mutations,
actions,
},
},
});
config = {
localVue,
vuetify,
store,
router,
mocks: {
check_resource: jest.fn(),
},
i18n: new VueI18n({
locale: "en",
fallbackLocale: "en",
messages: {
en: enLang,
},
}),
stubs: {
ScaleLoader,
AdditionTable,
VRadioGroup,
VRadio,
},
};
});
it("Click on radio does work", async () => {
state.resources.data = [
{
id: 1,
title: "test",
},
{
id: 2,
title: "test2",
},
];
wrapper = shallowMount(Index, config);
const button = wrapper.findAll(".v-radio input");
await button.at(1).trigger("click");
expect(actions.checkResource).toHaveBeenCalled();
});
});
результат:
Expected number of calls: >= 1
Received number of calls: 0
136 | await button.at(1).trigger("click");
137 |
> 138 | expect(actions.checkResource).toHaveBeenCalled();
| ^
139 |
140 | });
141 | });
Я не знаю где моя ошибка.
Кто-нибудь может мне помочь, пожалуйста?