指標
pointer(input: PointerInput): Promise<void>
pointer
API 允許模擬與指標裝置的互動。它接受單一指標動作或它們的陣列。
type PointerInput = PointerActionInput | Array<PointerActionInput>
我們的主要目標受眾是在
jsdom
環境中使用jest
進行測試,並且jsdom
中沒有佈局。這意味著與您的瀏覽器不同,元素不存在於特定位置、層級和大小。
我們不會嘗試確定您描述的指標動作在您的佈局中是否可能在該位置發生。
指標動作
有兩種動作類型:按下和移動。
按下按鈕或觸摸螢幕
如果指標動作定義要按下、釋放或同時按下和釋放的按鍵,則該動作為按下動作。
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>