Модульный тест для вызова метода по нажатию переключателя Vuejs - PullRequest
1 голос
/ 11 марта 2020

У меня есть компонент с именем 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 | });

Я не знаю где моя ошибка.

Кто-нибудь может мне помочь, пожалуйста?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...