react/packages/dom-event-testing-library/__tests__/index-test.internal.js

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @emails react-core
 */

'use strict';

import {defaultBrowserChromeSize} from '../constants';

import {
  createEventTarget,
  describeWithPointerEvent,
  testWithPointerType,
  resetActivePointers,
} from '../index';

/**
 * Unit test helpers
 */
describeWithPointerEvent('describeWithPointerEvent', pointerEvent => {
  test('provides boolean to tests', () => {
    expect(pointerEvent).toMatchSnapshot();
  });

  testWithPointerType('testWithPointerType', pointerType => {
    expect(pointerType).toMatchSnapshot();
  });
});

/**
 * createEventTarget
 */
describe('createEventTarget', () => {
  let node;
  beforeEach(() => {
    node = document.createElement('div');
  });

  afterEach(() => {
    node = null;
    resetActivePointers();
  });

  test('returns expected API', () => {
    const target = createEventTarget(node);
    expect(target.node).toEqual(node);
    expect(Object.keys(target)).toMatchInlineSnapshot(`
      [
        "node",
        "blur",
        "click",
        "focus",
        "keydown",
        "keyup",
        "scroll",
        "virtualclick",
        "contextmenu",
        "pointercancel",
        "pointerdown",
        "pointerhover",
        "pointermove",
        "pointerenter",
        "pointerexit",
        "pointerup",
        "tap",
        "setBoundingClientRect",
      ]
    `);
  });

  /**
   * Simple events
   */

  describe('.blur()', () => {
    test('default', () => {
      const target = createEventTarget(node);
      node.addEventListener('blur', e => {
        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
      });
      target.blur();
    });

    test('custom payload', () => {
      const target = createEventTarget(node);
      node.addEventListener('blur', e => {
        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
      });
      target.blur();
    });
  });

  describe('.click()', () => {
    test('default', () => {
      const target = createEventTarget(node);
      node.addEventListener('click', e => {
        expect(e.altKey).toEqual(false);
        expect(e.button).toEqual(0);
        expect(e.buttons).toEqual(0);
        expect(e.clientX).toEqual(0);
        expect(e.clientY).toEqual(0);
        expect(e.ctrlKey).toEqual(false);
        expect(e.detail).toEqual(1);
        expect(typeof e.getModifierState).toEqual('function');
        expect(e.metaKey).toEqual(false);
        expect(e.movementX).toEqual(0);
        expect(e.movementY).toEqual(0);
        expect(e.offsetX).toEqual(0);
        expect(e.offsetY).toEqual(0);
        expect(e.pageX).toEqual(0);
        expect(e.pageY).toEqual(0);
        expect(typeof e.preventDefault).toEqual('function');
        expect(e.screenX).toEqual(0);
        expect(e.screenY).toEqual(defaultBrowserChromeSize);
        expect(e.shiftKey).toEqual(false);
        expect(typeof e.timeStamp).toEqual('number');
      });
      target.click();
    });

    test('custom payload', () => {
      const target = createEventTarget(node);
      node.addEventListener('click', e => {
        expect(e.altKey).toEqual(true);
        expect(e.button).toEqual(1);
        expect(e.buttons).toEqual(4);
        expect(e.clientX).toEqual(10);
        expect(e.clientY).toEqual(20);
        expect(e.ctrlKey).toEqual(true);
        expect(e.metaKey).toEqual(true);
        expect(e.movementX).toEqual(1);
        expect(e.movementY).toEqual(2);
        expect(e.offsetX).toEqual(5);
        expect(e.offsetY).toEqual(5);
        expect(e.pageX).toEqual(50);
        expect(e.pageY).toEqual(50);
        expect(e.screenX).toEqual(10);
        expect(e.screenY).toEqual(20 + defaultBrowserChromeSize);
        expect(e.shiftKey).toEqual(true);
      });
      target.click({
        altKey: true,
        button: 1,
        buttons: 4,
        x: 10,
        y: 20,
        ctrlKey: true,
        metaKey: true,
        movementX: 1,
        movementY: 2,
        offsetX: 5,
        offsetY: 5,
        pageX: 50,
        pageY: 50,
        shiftKey: true,
      });
    });
  });

  describe('.focus()', () => {
    test('default', () => {
      const target = createEventTarget(node);
      node.addEventListener('focus', e => {
        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
      });
      target.blur();
    });

    test('custom payload', () => {
      const target = createEventTarget(node);
      node.addEventListener('focus', e => {
        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
      });
      target.blur();
    });
  });

  describe('.keydown()', () => {
    test('default', () => {
      const target = createEventTarget(node);
      node.addEventListener('keydown', e => {
        expect(e.altKey).toEqual(false);
        expect(e.ctrlKey).toEqual(false);
        expect(typeof e.getModifierState).toEqual('function');
        expect(e.key).toEqual('');
        expect(e.metaKey).toEqual(false);
        expect(typeof e.preventDefault).toEqual('function');
        expect(e.shiftKey).toEqual(false);
        expect(typeof e.timeStamp).toEqual('number');
      });
      target.keydown();
    });

    test('custom payload', () => {
      const target = createEventTarget(node);
      node.addEventListener('keydown', e => {
        expect(e.altKey).toEqual(true);
        expect(e.ctrlKey).toEqual(true);
        expect(e.isComposing).toEqual(true);
        expect(e.key).toEqual('Enter');
        expect(e.metaKey).toEqual(true);
        expect(e.shiftKey).toEqual(true);
      });
      target.keydown({
        altKey: true,
        ctrlKey: true,
        isComposing: true,
        key: 'Enter',
        metaKey: true,
        shiftKey: true,
      });
    });
  });

  describe('.keyup()', () => {
    test('default', () => {
      const target = createEventTarget(node);
      node.addEventListener('keyup', e => {
        expect(e.altKey).toEqual(false);
        expect(e.ctrlKey).toEqual(false);
        expect(typeof e.getModifierState).toEqual('function');
        expect(e.key).toEqual('');
        expect(e.metaKey).toEqual(false);
        expect(typeof e.preventDefault).toEqual('function');
        expect(e.shiftKey).toEqual(false);
        expect(typeof e.timeStamp).toEqual('number');
      });
      target.keydown();
    });

    test('custom payload', () => {
      const target = createEventTarget(node);
      node.addEventListener('keyup', e => {
        expect(e.altKey).toEqual(true);
        expect(e.ctrlKey).toEqual(true);
        expect(e.isComposing).toEqual(true);
        expect(e.key).toEqual('Enter');
        expect(e.metaKey).toEqual(true);
        expect(e.shiftKey).toEqual(true);
      });
      target.keyup({
        altKey: true,
        ctrlKey: true,
        isComposing: true,
        key: 'Enter',
        metaKey: true,
        shiftKey: true,
      });
    });
  });

  describe('.scroll()', () => {
    test('default', () => {
      const target = createEventTarget(node);
      node.addEventListener('scroll', e => {
        expect(e.type).toEqual('scroll');
      });
      target.scroll();
    });
  });

  describe('.virtualclick()', () => {
    test('default', () => {
      const target = createEventTarget(node);
      node.addEventListener('click', e => {
        expect(e.altKey).toEqual(false);
        expect(e.button).toEqual(0);
        expect(e.buttons).toEqual(0);
        expect(e.clientX).toEqual(0);
        expect(e.clientY).toEqual(0);
        expect(e.ctrlKey).toEqual(false);
        expect(e.detail).toEqual(0);
        expect(typeof e.getModifierState).toEqual('function');
        expect(e.metaKey).toEqual(false);
        expect(e.movementX).toEqual(0);
        expect(e.movementY).toEqual(0);
        expect(e.offsetX).toEqual(0);
        expect(e.offsetY).toEqual(0);
        expect(e.pageX).toEqual(0);
        expect(e.pageY).toEqual(0);
        expect(typeof e.preventDefault).toEqual('function');
        expect(e.screenX).toEqual(0);
        expect(e.screenY).toEqual(0);
        expect(e.shiftKey).toEqual(false);
        expect(typeof e.timeStamp).toEqual('number');
      });
      target.virtualclick();
    });

    test('custom payload', () => {
      const target = createEventTarget(node);
      node.addEventListener('click', e => {
        // expect most of the custom payload to be ignored
        expect(e.altKey).toEqual(true);
        expect(e.button).toEqual(1);
        expect(e.buttons).toEqual(0);
        expect(e.clientX).toEqual(0);
        expect(e.clientY).toEqual(0);
        expect(e.ctrlKey).toEqual(true);
        expect(e.detail).toEqual(0);
        expect(e.metaKey).toEqual(true);
        expect(e.pageX).toEqual(0);
        expect(e.pageY).toEqual(0);
        expect(e.screenX).toEqual(0);
        expect(e.screenY).toEqual(0);
        expect(e.shiftKey).toEqual(true);
      });
      target.virtualclick({
        altKey: true,
        button: 1,
        buttons: 4,
        x: 10,
        y: 20,
        ctrlKey: true,
        metaKey: true,
        pageX: 50,
        pageY: 50,
        shiftKey: true,
      });
    });
  });

  /**
   * Complex event sequences
   *
   * ...coming soon
   */

  /**
   * Other APIs
   */

  test('.setBoundingClientRect()', () => {
    const target = createEventTarget(node);
    expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
      {
        "bottom": 0,
        "height": 0,
        "left": 0,
        "right": 0,
        "top": 0,
        "width": 0,
        "x": 0,
        "y": 0,
      }
    `);
    target.setBoundingClientRect({x: 10, y: 20, width: 100, height: 200});
    expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
      {
        "bottom": 220,
        "height": 200,
        "left": 10,
        "right": 110,
        "top": 20,
        "width": 100,
      }
    `);
  });
});