Skip to content

Instantly share code, notes, and snippets.

@Jonghakseo
Created February 21, 2022 09:09
Show Gist options
  • Save Jonghakseo/12f637043157db5fc38857c6bffe726d to your computer and use it in GitHub Desktop.
Save Jonghakseo/12f637043157db5fc38857c6bffe726d to your computer and use it in GitHub Desktop.
Note-for.me

FireEvent -> UserEvent 변경시 FailCase

기존 fireEvent 메소드로 호출하던 부분을 userEvent로 변경하면서 실패가 되는 케이스 원인 분석

  • 국가 코드 선택(select)와 input이 같은 label 태그 안에 존재하는 경우 (ex. ProxyShopOrderRecipientInfoField.test.tsx) userEvent.type(phoneNumberInput, value) -> 동작하지 않는 문제 발생

userEvent의 type메소드는 다음과 같은 흐름으로 처리

  1. element(타이핑을 하려는 element)가 disable인지 확인
  2. element 클릭
  3. 클릭 후 가장 가까운 label 태그를 찾고, label tag가 있으면 해당 label 컴포넌트의 control element를 찾아 focus()
  4. element의 ownerDocument를 찾음 (https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
  5. ownerDocument 의 activeElement를 찾음
  6. 타이핑 이벤트(keydown, keypress, keyup)를 발생시킴

이 과정에서 label tag 안에 두 가지 컨트롤 요소(select-국가코드, input-전화번호)가 들어있는 경우, 먼저 선언된 select가 focus되고, 해당 select에 타이핑 이벤트를 발생시키는 문제가 발생

라벨 태그 안에 2가지 이상의 상호작용 가능한 요소가 들어가는 부분은 접근성에서 권장하지 않는 방식으로, 해당 방식으로 구현된 부분들(국가코드 + 전화번호)의 수정이 필요 https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment