• Testing with Jest
• Queries
• Unsupported APIs

// setupTest.{js|ts}

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

// single-component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import type { TabsBarUpdateEventDetail } from '@porsche-design-system/components-angular';

@Component({
  selector: 'single-component',
  template: `
    <p-tabs-bar [activeTabIndex]="tabIndex" (update)="onUpdate($event)">
      <button data-testid="button1" type="button">Tab One</button>
      <button data-testid="button2" type="button">Tab Two</button>
      <button data-testid="button3" type="button">Tab Three</button>
    </p-tabs-bar>
    <div data-testid="debug">Active Tab: { tabIndex + 1 }</div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SingleComponent {
  tabIndex: number = 0;

  onUpdate(e: CustomEvent<TabsBarUpdateEventDetail>) {
    this.tabIndex = e.detail.activeTabIndex;
  }
}

// single-component.test.ts

import { componentsReady } from '@porsche-design-system/components-angular';
import { render } from '@testing-library/angular';
import userEvent from '@testing-library/user-event';
import '@porsche-design-system/components-angular/jsdom-polyfill';

it('should render Tabs Bar from Porsche Design System and use its events', async () => {
  const { getByTestId } = await render(SingleComponent);
  await componentsReady();

  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 { screen } from '@porsche-design-system/components-angular/testing';

it('should work for p-button', async () => {
  const fixture = TestBed.createComponent(SomeComponent);
  fixture.detectChanges();
  await componentsReady();

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

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

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

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