Pointer actionPressing a button or touching the screenMoving a pointerPointer positionPointerTargetSelectionTarget
pointer(input: PointerInput): Promise<void>pointer API로 포인터 장치와의 상호작용을 시뮬레이션 할 수 있다. 하나의 포인터 액션 또는 포인터 액션 배열을 받는 처리한다.
type PointerInput = PointerActionInput | Array<PointerActionInput>주요 테스트 프레임워크인 jest의 jsdom엔 어떠한 레이아웃이 없다. 이는 브라우저와 달리 요소가 특정 위치, 레이어 및 크기에 존재하지 않음을 의미한다. 따라서 user-action은 개발자가 상정한 포인터 액션이 해당 레이아웃의 해당 위치에서 가능한지 여부를 확인하지 않는다.
Pointer action
포인터 액션에는 press 와 move 두 가지 액션이 있다.
Pressing a button or touching the screen
키가 눌린경우, 누른 키를 뗀 경우 또는 둘 다를 정의한 포인터 액션은 누르기 액션이다.
pointer({keys: '[MouseLeft]'})(같은 위치에서) 여러 개의 누르기 동작을 한 번에 선언할 수 있으며, 이는 내부적으로 여러 개의 동작으로 처리된다. 다른 속성을 선언할 필요가 없으면
keys 문자열만 제공할 수도 있다.pointer({keys: '[MouseLeft][MouseRight]'})
// 또는
pointer('[MouseLeft][MouseRight]')버튼을 풀지 않고 누르려면 버튼 이름 끝에
>를 붙인다.
이전에 누른 버튼을 해제하기 위해선 /로 태그를 시작한다.pointer('[MouseLeft>]') // 마우스 왼쪽 버튼을 누른다
pointer('[/MouseLeft]') // 마우스 왼쪽 버튼을 푼다어떤 버튼을 사용할 수 있는지는 pointerMap에 따라 달라진다.
Moving a pointer
누르기 액션이 아닌 모든 포인터 액션은 포인터 이동을 나타낸다.
pointerName 속성별로 이동할 포인터를 선언할 수 있다. 이는 기본적으로 mouse 로 설정된다.mouse 포인터(pointerId: 1)는 항상 존재하며 위치를 갖는 유일한 포인터이기도 하다. touch 포인터는 화면이 터치되는 동안에만 존재하며 매번 새로운 pointerId를 받는다. 이러한 포인터의 경우, 누르기 액션의 “button” 이름을 pointerName 으로 사용한다.pointer([
// element1의 스크린을 터치한다
{keys: '[TouchA>]', target: element1},
// 터치 포인터를 element2로 이동한다
{pointerName: 'TouchA', target: element2},
// 마지막 위치(element2)에서 터치 포인터를 해제한다
{keys: '[/TouchA]'},
])Pointer position
PointerTarget
interface PointerTarget {
target: Element
coords?: PointerCoords
}PointerTarget 속성을 사용하면 문서에서 포인터의 위치를 나타낼 수 있다.
제공하는 coords 는 결과적으로 발생하는 MouseEvent에 그대로 적용되며 생략할 수 있다.
target은 브라우저에서 포인터 입력을 수신하는 요소여야 한다. 이는 해당 좌표에서 포인터 이벤트를 수신할 수 있는 최상위 요소를 말한다.SelectionTarget
interface SelectionTarget {
node?: Node
offset?: number
}포인터 액션은 문서의 선택영역을 변경할 수 있다.
브라우저에서 모든 포인터 위치는 DOM 위치와 일치한다. DOM 위치란 보통 포인터에 가장 가까운 문자로 변환되는 DOM 노드와 DOM 오프셋을 말한다.
레이아웃이 없는 환경의 모든 문자는 동일한 레이아웃 위치에 있으므로 포인터
target의 마지막 하위에 가장 가까운 포인터 위치를 가정합니다.offset을 제공하는 경우 포인터 위치를 target.textContent의 offset번째(offset-th) 문자에 가장 가깝다고 가정한다.또한
node를 제공하는 경우 node와 offset을 모든 선택에 사용할 정확한 DOM 위치로 취급한다.// element: <div><span>foo</span><span>bar</span></div>
// | 는 커서를 의미함
// [ ] 는 선택을 의미함
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>Share article
