你会如何简化这个经过单元测试的 Vue 组件？

Question

我有一个简单的卡片组件，它经过单元/组件测试，想知道我是否可以简化它。

基本上，它只是一张具有 header、页脚和内容插槽的卡。 如果未使用这些插槽之一，则父容器将不会呈现。

<template>
  <div class="card">
    <header v-if="$slots.header" class="card-header">
      <slot name="header" />
    </header>
    <div v-if="$slots.content" class="card-content">
      <slot name="content" />
    </div>
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer" />
    </div>
    <b-loading v-model="isLoading" :is-full-page="false"></b-loading>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'AppCard',
  props: {
    isLoading: {
      type: Boolean,
      default: false,
    },
  },
});
</script>

和测试

import AppCard from '@/components/AppCard.vue';
import { mount } from '@vue/test-utils';

describe('<AppCard />', () => {
  it('renders element within .card-header', () => {
    const wrapper = mount(AppCard, {
      slots: {
        header: '<div>Header</div>',
      },
    });

    expect(wrapper.find('.card-header').text()).toBe('Header');
  });

  it('removes .card-header when no element is passed', () => {
    const wrapper = mount(AppCard);

    expect(wrapper.find('.card-header').exists()).toBe(false);
  });

  it('renders element within .card-content', () => {
    const wrapper = mount(AppCard, {
      slots: {
        content: '<div>Content</div>',
      },
    });

    expect(wrapper.find('.card-content').text()).toBe('Content');
  });

  it('removes .card-content when no element is passed', () => {
    const wrapper = mount(AppCard);

    expect(wrapper.find('.card-content').exists()).toBe(false);
  });

  it('renders element within .card-footer', () => {
    const wrapper = mount(AppCard, {
      slots: {
        footer: '<div>Footer</div>',
      },
    });

    expect(wrapper.find('.card-footer').text()).toBe('Footer');
  });

  it('removes .card-footer when no element is passed', () => {
    const wrapper = mount(AppCard);

    expect(wrapper.find('.card-footer').exists()).toBe(false);
  });

  it('shows loading indicator when props.isLoading is true', () => {
    const wrapper = mount(AppCard, {
      propsData: {
        isLoading: true,
      },
    });

    expect(wrapper.find('.loading-overlay').exists()).toBe(true);
  });
});

这可以缩短还是我真的必须像这样测试它？

Answer 1

有可能！

一种方法是定义数据集，可以使用forEach进行迭代：

import AppCard from "@/components/AppCard.vue";
import { mount } from "@vue/test-utils";

describe("<AppCard />", () => {
  const renderWrapper = ({ slots, props }) => {
    return mount(AppCard, {
      slots,
      propsData,
    });
  };

  const testData = [
    { element: ".card-header", slot: "header", slotText: "Header" },
    { element: ".card-content", slot: "content", slotText: "Content" },
    { element: ".card-footer", slot: "footer", slotText: "Footer" },
  ];

  testData.forEach((item) => {
    it(`renders element within ${item.element}`, () => {
      const wrapper = renderWrapper({
        slots: {
          [item.slot]: `<div>${item.slotText}</div>`,
        },
      });
      expect(wrapper.find(item.element).text()).toBe(item.slotText);
    });

    it(`removes ${item.element} when no element is passed`, () => {
      const wrapper = mount(AppCard);
      expect(wrapper.find(item.element).exists()).toBe(false);
    });
  });

  it("shows loading indicator when props.isLoading is true", () => {
    const wrapper = renderWrapper({
      propsData: {
        isLoading: true,
      },
    });

    expect(wrapper.find(".loading-overlay").exists()).toBe(true);
  });
});