deck.gl/test/modules/widgets/widget-tooltip.spec.ts at 789b3b4c76df72f38d0e02d6249b1fec6bcc944a · visgl/deck.gl · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// deck.gl
// SPDX-License-Identifier: MIT
// Copyright (c) vis.gl contributors

import {afterEach, test, expect} from 'vitest';
import {updateWidgetTooltip} from '@deck.gl/widgets';

let rootElement: HTMLDivElement | undefined;

afterEach(() => {
  rootElement?.remove();
  rootElement = undefined;
});

function createTooltipTarget(label: string) {
  rootElement = document.createElement('div');
  rootElement.className = 'deck-widget';

  const button = document.createElement('button');
  button.setAttribute('data-deck-widget-tooltip', label);
  button.setAttribute('aria-label', label);
  button.title = label;

  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  svg.append(path);
  button.append(svg);
  rootElement.append(button);
  document.body.append(rootElement);
  updateWidgetTooltip(rootElement);

  return {button, path};
}

function dispatchPointerOver(element: Element): void {
  element.dispatchEvent(new PointerEvent('pointerover', {bubbles: true}));
}

function dispatchPointerOut(element: Element): void {
  element.dispatchEvent(new PointerEvent('pointerout', {bubbles: true}));
}

test('updateWidgetTooltip shows and hides themed text tooltips', () => {
  const {button} = createTooltipTarget('Zoom In');
  expect(button.title).toBe('');

  dispatchPointerOver(button);
  expect(rootElement?.querySelector('.deck-widget-tooltip')?.textContent).toBe('Zoom In');
  dispatchPointerOut(button);
  expect(rootElement?.querySelector('.deck-widget-tooltip')).toBe(null);

  button.focus();
  expect(rootElement?.querySelector('.deck-widget-tooltip')?.textContent).toBe('Zoom In');
  button.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape', bubbles: true}));
  expect(rootElement?.querySelector('.deck-widget-tooltip')).toBe(null);

  button.blur();
  button.focus();
  expect(rootElement?.querySelector('.deck-widget-tooltip')?.textContent).toBe('Zoom In');
  button.blur();
  expect(rootElement?.querySelector('.deck-widget-tooltip')).toBe(null);
});

test('updateWidgetTooltip resolves SVG targets and updated labels', () => {
  const {button, path} = createTooltipTarget('Reset north');

  dispatchPointerOver(path);
  expect(rootElement?.querySelector('.deck-widget-tooltip')?.textContent).toBe('Reset north');

  button.setAttribute('data-deck-widget-tooltip', 'Reset view');
  updateWidgetTooltip(rootElement!);
  dispatchPointerOver(button);
  expect(rootElement?.querySelector('.deck-widget-tooltip')?.textContent).toBe('Reset view');
});