pleno-vue/tests/unit/helpers/mountWithApp.js

import { mount } from "@vue/test-utils";
import { createI18n } from "vue-i18n";
import Buefy from "buefy";

const WhiteBoxCardStub = {
  emits: ["click"],
  template: `
    <div class="white-box-card-stub" v-bind="$attrs" @click="$emit('click', $event)">
      <slot />
      <slot name="default" />
      <slot name="header" />
      <slot name="content" />
      <slot name="footer" />
    </div>
  `,
};

const ScrollableStepsStub = {
  template: `
    <div class="scrollable-steps-stub">
      <slot name="header" />
      <slot name="steps" />
    </div>
  `,
};

const UserDashboardPageWrapperStub = {
  template: "<div class='user-dashboard-page-wrapper-stub'><slot /></div>",
};

const RouterLinkStub = {
  props: ["to"],
  template: '<a :href=\'typeof to === "string" ? to : "#"\'><slot /></a>',
};

export const createTestI18n = (messages = { en: {} }) =>
  createI18n({
    legacy: false,
    globalInjection: true,
    locale: "en",
    missingWarn: false,
    fallbackWarn: false,
    messages,
  });

export const defaultStubs = {
  WhiteBoxCard: WhiteBoxCardStub,
  ScrollableSteps: ScrollableStepsStub,
  UserDashboardPageWrapper: UserDashboardPageWrapperStub,
  RouterLink: RouterLinkStub,
  "router-link": RouterLinkStub,
};

export function mountWithApp(component, options = {}) {
  const { messages = { en: {} }, ...mountOptions } = options;
  const providedGlobal = mountOptions.global || {};
  const providedStubs = providedGlobal.stubs || {};

  return mount(component, {
    ...mountOptions,
    global: {
      ...providedGlobal,
      plugins: [createTestI18n(messages), Buefy, ...(providedGlobal.plugins || [])],
      stubs: {
        ...defaultStubs,
        ...providedStubs,
      },
    },
  });
}