@code-coaching/vuetiful 0.26.0 → 0.27.0

package/src/components/molecules/VAccordion/VAccordionItem.test.ts

@@ -1,134 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VAccordion, VAccordionItem } from '..';
-
-describe('VAccordionItem', () => {
-  test('defaults', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-        <v-accordion>
-          <v-accordion-item title="Vuetiful">John Duck</v-accordion-item>
-          <v-accordion-item title="Is">Janine Duck</v-accordion-item>
-        </v-accordion>`,
-      components: {
-        'v-accordion': VAccordion,
-        'v-accordion-item': VAccordionItem,
-      },
-    });
-
-    const accordionItems = wrapper.findAllComponents(VAccordionItem);
-    accordionItems.forEach((accordionItem) => {
-      expect(accordionItem.classes()).toEqual(['vuetiful-accordion-item']);
-
-      const accordionItemButton = accordionItem.find('.vuetiful-accordion-item-button');
-      expect(accordionItemButton.classes()).toEqual([
-        'items-center',
-        'justify-between',
-        'p-4',
-        'py-2',
-        'rounded-container-token',
-        'hover:cursor-pointer',
-        'bg-surface-200-700-token',
-        'hover:variant-soft',
-        'vuetiful-accordion-item-button',
-        'flex',
-        'w-full',
-      ]);
-
-      const accordionItemTitle = accordionItem.find('.vuetiful-accordion-title');
-      expect(accordionItemTitle.text()).toEqual(accordionItem.props().title);
-    });
-  });
-
-  test('unstyled', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-        <v-accordion>
-          <v-accordion-item title="Vuetiful" unstyled>John Duck</v-accordion-item>
-          <v-accordion-item title="Is" unstyled>Janine Duck</v-accordion-item>
-        </v-accordion>`,
-      components: {
-        'v-accordion': VAccordion,
-        'v-accordion-item': VAccordionItem,
-      },
-    });
-
-    const accordionItems = wrapper.findAllComponents(VAccordionItem);
-    accordionItems.forEach((accordionItem) => {
-      expect(accordionItem.classes()).toEqual(['vuetiful-accordion-item']);
-
-      const accordionItemButton = accordionItem.find('.vuetiful-accordion-item-button');
-      expect(accordionItemButton.classes()).toEqual([
-        'bg-surface-200-700-token',
-        'hover:variant-soft',
-        'vuetiful-accordion-item-button',
-        'flex',
-        'w-full',
-      ]);
-
-      const accordionItemTitle = accordionItem.find('.vuetiful-accordion-title');
-      expect(accordionItemTitle.text()).toEqual(accordionItem.props().title);
-    });
-  });
-
-  test('open', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-        <v-accordion>
-          <v-accordion-item title="Vuetiful" open>John Duck</v-accordion-item>
-          <v-accordion-item title="Is">Janine Duck</v-accordion-item>
-        </v-accordion>`,
-      components: {
-        'v-accordion': VAccordion,
-        'v-accordion-item': VAccordionItem,
-      },
-    });
-
-    const accordionItems = wrapper.findAllComponents(VAccordionItem);
-    const accordionItemButtonOne = accordionItems[0].find('.vuetiful-accordion-item-button');
-    const accordionItemButtonTwo = accordionItems[1].find('.vuetiful-accordion-item-button');
-
-    await accordionItemButtonOne.trigger('click');
-
-    expect(accordionItemButtonOne.classes()).toEqual([
-      '!rounded-bl-none',
-      '!rounded-br-none',
-      'items-center',
-      'justify-between',
-      'p-4',
-      'py-2',
-      'rounded-container-token',
-      'hover:cursor-pointer',
-      'bg-surface-200-700-token',
-      'hover:variant-soft',
-      'vuetiful-accordion-item-button',
-      'flex',
-      'w-full',
-    ]);
-    expect(accordionItemButtonTwo.classes()).toEqual([
-      'items-center',
-      'justify-between',
-      'p-4',
-      'py-2',
-      'rounded-container-token',
-      'hover:cursor-pointer',
-      'bg-surface-200-700-token',
-      'hover:variant-soft',
-      'vuetiful-accordion-item-button',
-      'flex',
-      'w-full',
-    ]);
-
-    const accordionItemPanelOne = accordionItems[0].find('.vuetiful-accordion-item-panel');
-
-    expect(accordionItemPanelOne.classes()).toEqual([
-      'vuetiful-accordion-item-panel',
-      '!rounded-tl-none',
-      '!rounded-tr-none',
-      'p-4',
-      'py-2',
-      'rounded-container-token',
-      'bg-surface-200-700-token',
-    ]);
-  });
-});

package/src/components/molecules/VAccordion/VAccordionItem.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@/services';
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
-import { inject } from 'vue';
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-
-  unstyled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const classQuestion = inject('classQuestion');
-const classAnswer = inject('classAnswer');
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.accordionItem.unstyled || props.unstyled;
-</script>
-
-<template>
-  <Disclosure class="vuetiful-accordion-item" as="div" v-slot="{ open }">
-    <DisclosureButton
-      :class="`${isUnstyled ? '' : `${open ? '!rounded-bl-none !rounded-br-none' : ''}`}
-      ${isUnstyled ? '' : 'items-center justify-between p-4 py-2 rounded-container-token hover:cursor-pointer'}
-      ${classQuestion}`"
-      class="vuetiful-accordion-item-button flex w-full"
-    >
-      <span class="vuetiful-accordion-title">{{ title }}</span>
-      <slot v-if="!open" name="open-item">
-        <!-- https://fontawesome.com/icons/plus?f=classic&s=solid -->
-        <svg class="vuetiful-accordion-item-icon-plus icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-          <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-          <path
-            d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
-          />
-        </svg>
-      </slot>
-      <slot v-if="open" name="close-item">
-        <!-- https://fontawesome.com/icons/minus?f=classic&s=solid -->
-        <svg class="vuetiful-accordion-item-icon-minus icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-          <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-          <path
-            d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
-          />
-        </svg>
-      </slot>
-    </DisclosureButton>
-    <DisclosurePanel
-      class="vuetiful-accordion-item-panel"
-      :class="`${open ? `${isUnstyled ? '' : '!rounded-tl-none !rounded-tr-none'}` : ''} ${
-        isUnstyled ? '' : 'p-4 py-2 rounded-container-token'
-      } ${classAnswer}`"
-    >
-      <slot></slot>
-    </DisclosurePanel>
-  </Disclosure>
-</template>
-
-<style scoped>
-.icon {
-  @apply my-1 h-4 min-h-[1rem] w-4 min-w-[1rem] fill-current;
-}
-</style>

package/src/components/molecules/VAlert.test.ts

@@ -1,100 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VAlert } from '..';
-
-describe('VAlert', () => {
-  test('types', () => {
-    const wrapper = mount({
-      template: /*html*/ `
-          <v-alert data-test="default"></v-alert>
-          <v-alert data-test="info" type="info"></v-alert>
-          <v-alert data-test="success" type="success"></v-alert>
-          <v-alert data-test="warning" type="warning"></v-alert>
-          <v-alert data-test="error" type="error"></v-alert>
-        `,
-      components: {
-        'v-alert': VAlert,
-      },
-    });
-
-    const defaultAlert = wrapper.find('[data-test=default]');
-    expect(defaultAlert.classes()).not.toContain('variant-filled-primary');
-
-    const infoAlert = wrapper.find('[data-test=info]');
-    expect(infoAlert.classes()).toContain('variant-filled');
-
-    const successAlert = wrapper.find('[data-test=success]');
-    expect(successAlert.classes()).toContain('variant-filled-success');
-
-    const warningAlert = wrapper.find('[data-test=warning]');
-    expect(warningAlert.classes()).toContain('variant-filled-warning');
-  });
-
-  test('unstyled', () => {
-    const wrapper = mount(VAlert, {
-      props: {
-        unstyled: true,
-      },
-    });
-
-    expect(wrapper.classes()).toEqual(['vuetiful-alert', 'flex']);
-  });
-
-  describe('given close icon is clicked', () => {
-    test('should emit close', async () => {
-      const wrapper = mount(VAlert, { props: { showClose: true } });
-      await wrapper.find('[data-test=close]').trigger('click');
-      expect(wrapper.emitted()['close'][0]).toEqual([]);
-
-      await wrapper.find('[data-test=close]').trigger('keydown', { key: 'Enter' });
-      expect(wrapper.emitted()['close'][0]).toEqual([]);
-
-      await wrapper.find('[data-test=close]').trigger('keydown', { key: ' ' });
-      expect(wrapper.emitted()['close'][0]).toEqual([]);
-    });
-  });
-
-  describe('given a pre slot is provided', () => {
-    test('should render the pre slot', () => {
-      const wrapper = mount(VAlert, {
-        slots: {
-          pre: 'John Duck',
-        },
-      });
-      expect(wrapper.text()).toContain('John Duck');
-    });
-  });
-
-  describe('given a actions slot is provided', () => {
-    test('should render the actions slot', () => {
-      const wrapper = mount(VAlert, {
-        slots: {
-          actions: 'John Duck',
-        },
-      });
-      expect(wrapper.text()).toContain('John Duck');
-    });
-  });
-
-  describe('given hide-icon prop is present', () => {
-    test('should not render an icon', () => {
-      const wrapper = mount(VAlert, {
-        props: {
-          hideIcon: true,
-        },
-      });
-      expect(wrapper.findAll('.icon').length).toBe(0);
-    });
-  });
-
-  describe('given show-close prop is present', () => {
-    test('should render a close icon', () => {
-      const wrapper = mount(VAlert, {
-        props: {
-          showClose: true,
-        },
-      });
-      expect(wrapper.find('[data-test=close]').exists()).toBe(true);
-    });
-  });
-});

package/src/components/molecules/VAlert.vue

@@ -1,137 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@/services';
-import { PropType, computed } from 'vue';
-
-const emit = defineEmits(['close']);
-const props = defineProps({
-  hideIcon: {
-    type: Boolean,
-    default: false,
-  },
-  showClose: {
-    type: Boolean,
-    default: false,
-  },
-
-  show: {
-    type: Boolean,
-    default: true,
-  },
-  type: {
-    type: String as PropType<'info' | 'success' | 'warning' | 'error' | ''>,
-    default: '',
-  },
-
-  classPre: {
-    type: String,
-    default: '',
-  },
-  classMessage: {
-    type: String,
-    default: '',
-  },
-  classClose: {
-    type: String,
-    default: '',
-  },
-
-  unstyled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const typeBackground = computed(() => {
-  switch (props.type) {
-    case 'info':
-      return 'variant-filled';
-    case 'success':
-      return 'variant-filled-success';
-    case 'warning':
-      return 'variant-filled-warning';
-    case 'error':
-      return 'variant-filled-error';
-    case '':
-      return '';
-  }
-});
-
-const close = () => emit('close');
-const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter' || event.key === ' ') {
-    close();
-  }
-};
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.alert.unstyled || props.unstyled;
-</script>
-
-<template>
-  <aside
-    v-if="show"
-    :class="`vuetiful-alert flex ${
-      isUnstyled ? '' : 'w-full items-center gap-4 p-4 border-token rounded-container-token'
-    } ${typeBackground}`"
-  >
-    <div v-if="!hideIcon" :class="`vuetiful-alert-pre ${classPre}`">
-      <slot v-if="$slots.pre" name="pre" />
-      <template v-if="!$slots.pre">
-        <!-- https://fontawesome.com/icons/circle-info?f=classic&s=solid -->
-        <svg v-if="type === 'info'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path
-            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
-          />
-        </svg>
-
-        <!-- https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
-        <svg v-if="type === 'success'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path
-            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
-          />
-        </svg>
-
-        <!-- https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
-        <svg v-if="type === 'warning'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path
-            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
-          />
-        </svg>
-
-        <!-- https://fontawesome.com/icons/triangle-exclamation?f=classic&s=solid -->
-        <svg v-if="type === 'error'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path
-            d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
-          />
-        </svg>
-      </template>
-    </div>
-
-    <div :class="`vuetiful-alert-message ${isUnstyled ? '' : 'flex-auto'} ${classMessage}`">
-      <slot />
-    </div>
-
-    <slot name="actions"> </slot>
-    <!-- https://fontawesome.com/icons/xmark?f=classic&s=solid -->
-    <svg
-      data-test="close"
-      v-if="showClose"
-      tabindex="0"
-      @keydown="handleKeydown"
-      @click="close"
-      :class="`vuetiful-alert-close-icon icon hover:cursor-pointer ${classClose}`"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 384 512"
-    >
-      <path
-        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
-      />
-    </svg>
-  </aside>
-</template>
-
-<style scoped>
-.icon {
-  @apply my-1 h-6 min-h-[1.5rem] w-6 min-w-[1.5rem] fill-current;
-}
-</style>

package/src/components/molecules/VCard/VCard.test.ts

@@ -1,47 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VCard } from '..';
-
-describe('VCard', () => {
-  test('defaults', async () => {
-    const wrapper = mount(VCard);
-    expect(wrapper.props()).toEqual({
-      background: 'bg-surface-200-700-token',
-      clickable: false,
-      hideSeparator: false,
-      text: 'text-surface-900-50-token',
-      unstyled: false,
-    });
-  });
-
-  describe('given the card is clicked', () => {
-    describe('given the card is not clickable', () => {
-      test('should not emit click', async () => {
-        const wrapper = mount(VCard, { props: { clickable: false } });
-        expect(wrapper.attributes()['tabindex']).toBeUndefined();
-        await wrapper.trigger('click');
-        expect(wrapper.emitted()['click']).toBeUndefined();
-
-        await wrapper.trigger('keydown', { key: 'Enter' });
-        expect(wrapper.emitted()['click']).toBeUndefined();
-
-        await wrapper.trigger('keydown', { key: ' ' });
-        expect(wrapper.emitted()['click']).toBeUndefined();
-      });
-    });
-    describe('given the card is clickable', () => {
-      test('should emit click', async () => {
-        const wrapper = mount(VCard, { props: { clickable: true } });
-        expect(wrapper.attributes()['tabindex']).toEqual('0');
-        await wrapper.trigger('click');
-        expect(wrapper.emitted()['click'].length).toEqual(1);
-
-        await wrapper.trigger('keydown', { key: 'Enter' });
-        expect(wrapper.emitted()['click'].length).toEqual(2);
-
-        await wrapper.trigger('keydown', { key: ' ' });
-        expect(wrapper.emitted()['click'].length).toEqual(3);
-      });
-    });
-  });
-});

package/src/components/molecules/VCard/VCard.vue

@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@/index';
-import { unstyledProp } from '@/props';
-import { provide } from 'vue';
-
-const emit = defineEmits(['click']);
-
-const props = defineProps({
-  hideSeparator: {
-    type: Boolean,
-    default: false,
-  },
-  background: {
-    type: String,
-    default: 'bg-surface-200-700-token',
-  },
-  text: {
-    type: String,
-    default: 'text-surface-900-50-token',
-  },
-  clickable: {
-    type: Boolean,
-    default: false,
-  },
-
-  unstyled: unstyledProp,
-});
-
-provide('hideSeparator', props.hideSeparator);
-
-const onClick = () => {
-  if (!props.clickable) return;
-  emit('click');
-};
-const onKeydown = (event: KeyboardEvent) => {
-  if (!props.clickable) return;
-  if (event.key === 'Enter') {
-    event.preventDefault();
-    emit('click');
-  }
-  if (event.key === ' ') {
-    event.preventDefault();
-    emit('click');
-  }
-};
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.card.unstyled || props.unstyled;
-</script>
-
-<template>
-  <div
-    @click="onClick"
-    @keydown="onKeydown"
-    :tabindex="clickable ? 0 : undefined"
-    :class="`vuetiful-card flex flex-col ${
-      isUnstyled ? '' : 'border-token rounded-container-token ring-outline-token'
-    } ${background} ${text} ${clickable ? `${isUnstyled ? '' : 'card-hover'} hover:cursor-pointer` : ''}`"
-  >
-    <slot />
-  </div>
-</template>
-
-<style>
-.vuetiful-card-header {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
-.vuetiful-card-header > * {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-</style>

package/src/components/molecules/VCard/VCardBody.test.ts

@@ -1,39 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VCard, VCardBody } from '..';
-
-describe('VCardBody', () => {
-  test('unstyled', () => {
-    const wrapper = mount({
-      template: /*html*/ `
-        <v-card>
-          <v-card-body unstyled>John Duck</v-card-body>
-        </v-card>
-      `,
-      components: {
-        'v-card': VCard,
-        'v-card-body': VCardBody,
-      },
-    });
-
-    const content = wrapper.find("[data-test='vuetiful-card-body-content']");
-    expect(content.text()).toEqual('John Duck');
-    expect(content.classes()).not.toContain('p-4');
-  });
-
-  test('defaults', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-        <v-card>
-          <v-card-body>John Duck</v-card-body>
-        </v-card>
-      `,
-      components: {
-        'v-card': VCard,
-        'v-card-body': VCardBody,
-      },
-    });
-
-    expect(wrapper.text()).toEqual('John Duck');
-  });
-});

package/src/components/molecules/VCard/VCardBody.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { unstyledProp } from '@/props';
-import { useSettings } from '@/services';
-
-const props = defineProps({
-  unstyled: unstyledProp,
-});
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.cardBody.unstyled || props.unstyled;
-</script>
-<template>
-  <div data-test="vuetiful-card-body-content" :class="`vuetiful-card-body ${isUnstyled ? '' : 'p-4'}`">
-    <slot />
-  </div>
-</template>

package/src/components/molecules/VCard/VCardFooter.test.ts

@@ -1,63 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VCard, VCardFooter } from '..';
-
-describe('VCardFooter', () => {
-  test('unstyled', () => {
-    const wrapper = mount({
-      template: /*html*/ `
-        <v-card>
-          <v-card-footer unstyled>John Duck</v-card-footer>
-        </v-card>
-      `,
-      components: {
-        'v-card': VCard,
-        'v-card-footer': VCardFooter,
-      },
-    });
-
-    const content = wrapper.find("[data-test='vuetiful-card-footer-content']");
-    expect(content.text()).toEqual('John Duck');
-    expect(content.classes()).not.toContain('p-4');
-  });
-
-  test('defaults', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-        <v-card>
-          <v-card-footer>John Duck</v-card-footer>
-        </v-card>
-      `,
-      components: {
-        'v-card': VCard,
-        'v-card-footer': VCardFooter,
-      },
-    });
-
-    const separator = wrapper.find("[data-test='vuetiful-card-footer-separator']");
-    const content = wrapper.find("[data-test='vuetiful-card-footer-content']");
-    expect(separator.element.tagName).toEqual('HR');
-    expect(content.text()).toEqual('John Duck');
-  });
-
-  describe('given hideSeparator is true', () => {
-    test('should not show separator', async () => {
-      const wrapper = mount({
-        template: /*html*/ `
-          <v-card hide-separator>
-            <v-card-footer>John Duck</v-card-footer>
-          </v-card>
-        `,
-        components: {
-          'v-card': VCard,
-          'v-card-footer': VCardFooter,
-        },
-      });
-
-      const separator = wrapper.find("[data-test='vuetiful-card-footer-separator']");
-      const content = wrapper.find("[data-test='vuetiful-card-footer-content']");
-      expect(separator.exists()).toEqual(false);
-      expect(content.text()).toEqual('John Duck');
-    });
-  });
-});