Dedicated automated testing page

[andy-hook]

It would be helpful to provide some type of documentation regarding automated testing and primitives, especially with suites running testing-library and user-event. There are quite a few gotchas, especially common are pointer event firing problems and mocking layout specific browser apis as jsdom struggles with these.

Examples of common questions:

radix-ui/primitives#1382
radix-ui/primitives#1220
radix-ui/primitives#1207
radix-ui/primitives#1036
radix-ui/primitives#856
radix-ui/primitives#765
radix-ui/primitives#420

Document null during testing
radix-ui/primitives#1707

[Kikketer]

Slider continues to have an issue using vitest even with the mock setup:

/**
 * JSDOM doesn't implement PointerEvent so we need to mock our own implementation
 * Default to mouse left click interaction
 * https://github.com/radix-ui/primitives/issues/1822
 * https://github.com/jsdom/jsdom/pull/2666
 */
class MockPointerEvent extends Event {
  button: number;
  ctrlKey: boolean;
  pointerType: string;

  constructor(type: string, props: PointerEventInit) {
    super(type, props);
    this.button = props.button || 0;
    this.ctrlKey = props.ctrlKey || false;
    this.pointerType = props.pointerType || 'mouse';
  }
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
window.PointerEvent = MockPointerEvent as any;
window.HTMLElement.prototype.scrollIntoView = vi.fn();
window.HTMLElement.prototype.releasePointerCapture = vi.fn();
window.HTMLElement.prototype.hasPointerCapture = vi.fn();

Clicking on a thumb will respond fine but still throws the

Uncaught [TypeError: target.setPointerCapture is not a function]

Mocking it:

window.HTMLElement.prototype.setPointerCapture = vi.fn();

in that setup prevents any callbacks.