メインコンテンツにスキップ

ポインター

pointer(input: PointerInput): Promise<void>

pointer APIを使用すると、ポインターデバイスとのインタラクションをシミュレートできます。単一のポインターアクションまたはそれらの配列を受け入れます。

type PointerInput = PointerActionInput | Array<PointerActionInput>

主な対象者はjsdom環境でjestを使用してテストを行うユーザーであり、jsdomにはレイアウトがありません。つまり、ブラウザーとは異なり、要素は特定の場所、レイヤー、サイズに存在しません。
記述したポインターアクションがレイアウトのその位置で可能かどうかを判断しようとはしません。

ポインターアクション​

アクションには、プレスと移動の2つのタイプがあります。

ボタンを押すまたは画面にタッチする​

ポインターアクションは、押す、離す、またはその両方のキーを定義する場合、プレスアクションです。

pointer({keys: '[MouseLeft]'})

複数のプレスアクション（同じ位置で）を一度に宣言できます。これは内部的に複数のアクションに解決されます。他のプロパティを宣言する必要がない場合は、keys文字列だけを提供することもできます。

pointer({keys: '[MouseLeft][MouseRight]'})
// or
pointer('[MouseLeft][MouseRight]')

リリースせずにボタンを押すには、ボタン名の末尾に>を付けます。
以前に押されたボタンをリリースするだけの場合は、タグを/で始めます。

pointer('[MouseLeft>]') // press the left mouse button
pointer('[/MouseLeft]') // release the left mouse button

どのボタンが利用可能かは、pointerMapによって異なります。

ポインターを移動する​

プレスアクションではないすべてのポインターアクションは、ポインターの移動を表します。

pointerNameプロパティでどのポインターを移動するかを宣言できます。デフォルトはmouseです。

mouseポインター（pointerId: 1）は常に存在し、位置を持つ唯一のポインターであることにも注意してください。touchポインターは画面にタッチしている間のみ存在し、毎回新しいpointerIdを受け取ります。これらのポインターには、プレスアクションの「button」名をpointerNameとして使用します。

pointer([
  // touch the screen at element1
  {keys: '[TouchA>]', target: element1},
  // move the touch pointer to element2
  {pointerName: 'TouchA', target: element2},
  // release the touch pointer at the last position (element2)
  {keys: '[/TouchA]'},
])

ポインターの位置​

PointerTarget​

interface PointerTarget {
  target: Element
  coords?: PointerCoords
}

PointerTargetプロパティを使用すると、ドキュメント上のポインターの位置を記述できます。
提供するcoordsは、結果のMouseEventにそのまま適用され、省略できます。
targetは、ブラウザーでポインター入力を受け取る要素である必要があります。これは、それらの座標でポインターイベントを受け取ることができる最上位の要素です。

SelectionTarget​

interface SelectionTarget {
  node?: Node
  offset?: number
}

ポインターアクションは、ドキュメント内の選択を変更できます。
ブラウザーでは、すべてのポインター位置がDOM位置に対応します。これはDOMノードとDOMオフセットであり、通常、ポインター位置に最も近い文字に変換されます。
レイアウトのない環境では、すべての文字が同じレイアウト位置にあるため、ポインター位置はポインターのtargetの最後の子に最も近いと仮定します。

offsetを提供する場合、ポインター位置はtarget.textContentのoffset番目の文字に最も近いと仮定します。

nodeも提供する場合、nodeとoffsetを選択に使用する正確なDOM位置として扱います。

// element: <div><span>foo</span><span>bar</span></div>
// | marking the cursor.
// [ ] marking a selection.

pointer({target: element, offset: 2, keys: '[MouseLeft]'})
// => <div><span>fo|o</span><span>bar</span></div>

pointer([{target: element, offset: 2, keys: '[MouseLeft>]'}, {offset: 5}])
// => <div><span>fo[o</span><span>ba]r</span></div>

pointer({target: element, node: element, offset: 1, keys: '[MouseLeft]'})
// => <div><span>foo</span>|<span>bar</span></div>