• Test the application
• Queries
• Unsupported APIs

// setupTest.{js|ts}

import '@porsche-design-system/components-vue/jsdom-polyfill';

<!-- SingleComponent.vue -->

<script setup lang="ts">
  import { ref } from 'vue';
  import { PTabsBar, type TabsBarUpdateEventDetail } from '@porsche-design-system/components-vue';

  const activeTab = ref(0);
  const onUpdate = (e: CustomEvent<TabsBarUpdateEventDetail>) => {
    activeTab.value = e.detail.activeTabIndex;
  };
</script>

<template>
  <PTabsBar :activeTabIndex="activeTab" @update="onUpdate">
    <button data-testid="button1">Some label</button>
    <button data-testid="button2">Some label</button>
    <button data-testid="button3">Some label</button>
  </PTabsBar>
  <div data-testid="debug">Active Tab: {{ activeTab + 1 }}</div>
</template>

// SingleComponent.test.ts

import { PorscheDesignSystemProvider, componentsReady } from '@porsche-design-system/components-vue';
import userEvent from '@testing-library/user-event';
import { render } from '@testing-library/vue';
import { h } from 'vue';
import SingleComponent from './SingleComponent.vue';

it('should render Tabs Bar from Porsche Design System and use its events', async () => {
  const { getByTestId } = render(PorscheDesignSystemProvider, {
    slots: { default: h(SingleComponent) }, // required for the component to work
  });

  await componentsReady(); // we need to make sure Porsche Design System components are initialized

  const debug = getByTestId('debug');
  const button1 = getByTestId('button1');
  const button2 = getByTestId('button2');
  const button3 = getByTestId('button3');

  expect(debug.innerHTML).toBe('Active Tab: 1');

  await userEvent.click(button2);
  expect(debug.innerHTML).toBe('Active Tab: 2');

  await userEvent.click(button3);
  expect(debug.innerHTML).toBe('Active Tab: 3');

  await userEvent.click(button1);
  expect(debug.innerHTML).toBe('Active Tab: 1');
});

import { PButton, PorscheDesignSystemProvider, componentsReady } from '@porsche-design-system/components-vue';
import { screen } from '@porsche-design-system/components-vue/testing';
import { render } from '@testing-library/vue';
import { h } from 'vue';

it('should work for PButton', async () => {
  render(PorscheDesignSystemProvider, { slots: { default: h(PButton) } });
  await componentsReady();

  expect(screen.getByShadowRole('button')).toBe(document.querySelector('p-button').shadowRoot.querySelector('button'));
});

HTMLDialogElement.prototype.show = vi.fn();
HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
  this.setAttribute('open', '');
});
HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
  this.removeAttribute('open');
});

HTMLElement.prototype.attachInternals = vi.fn(
  () =>
    ({
      setFormValue: vi.fn(),
      setValidity: vi.fn(),
    }) as ElementInternals
);

Element.prototype.animate = vi.fn(
  () =>
    ({
      onfinish: null,
      cancel: vi.fn(),
      finish: vi.fn(),
    }) as unknown as Animation
);