How would you simplify this unit tested Vue component?

[targetlucked69]

I have a simple card component that is unit/component tested and would like to know if I can simplify it.

Basically, it's just a card that has a header, footer, and content slot. If one of these slots is not used, the parent container will not render.

<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>

and the test

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);
  });
});

Can this be shortened or do I really have to test it like this?

[freakzlike]

Doesn't look too bad for me. I personally would group them to have a better overview what is related to that specific test case:

describe('<AppCard />', () => {
  /**
   * Header
   */
  describe('header', () => {
    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)
    })
  })

  /**
   * Content
   */
  describe('content', () => {
    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)
    })
  })
...

You could group the test cases without props/slots. But that is up to your preference:

describe('<AppCard />', () => {
  it('renders without props and slots', () => {
    const wrapper = mount(AppCard)

    expect(wrapper.find('.card-header').exists()).toBe(false)
    expect(wrapper.find('.card-content').exists()).toBe(false)
    expect(wrapper.find('.card-footer').exists()).toBe(false)
    expect(wrapper.find('.loading-overlay').exists()).toBe(false)
  })

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

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

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

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

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

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

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

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

[targetlucked69]

I love this. Cleaner and more readable