#170 에서 E2E 를 붙이며 제품 코드에 테스트 전용 data- 속성 3개를 넣었습니다. 당장 문제는 없지만 테스트 사정이 제품 코드에 남아 있는 상태라 별도로 정리합니다.
현재 들어간 것
| 속성 |
위치 |
성격 |
data-map-control-stack |
routes/index.tsx 컨트롤 스택 |
단순 이름표 |
data-bottom-sheet-surface |
shared/ui/DraggableBottomSheet.tsx 시트 표면 |
단순 이름표 |
data-map-state |
entities/map/ui/NaverMapCanvas.tsx |
상태 노출 (loading·ready·error) |
왜 넣었나
프로덕션 빌드는 vanilla-extract 클래스명이 해시라 이름으로 찾을 수 없습니다. 구조 탐색으로 대체해 봤지만 role="presentation" 이 페이지에 3개 있어 시트가 아닌 요소를 집었고, 시트 높이가 191 대신 752 로 나왔습니다.
버튼 자체는 getByRole("button", { name: ... }) 로 찾고 있어 앵커가 필요 없습니다. 문제는 위치를 재야 하는 컨테이너로, 역할도 접근 가능한 이름도 없습니다.
정리 후보
1. data-map-state 부터 빼기 — 셋 중 성격이 다릅니다. 이름표가 아니라 내부 상태를 DOM 으로 흘리는 것이라 제품 코드에 남을 이유가 가장 약합니다. 현재 사용처는 두 스펙의 waitForMapReady 뿐이고, 그마저도 "보이던 것이 사라지는지" 방식으로 바꾸면서 의존이 줄었습니다.
2. dev 서버로 E2E 실행 — 클래스명이 읽을 수 있는 형태로 남아 앵커 없이 찾을 수 있습니다. 다만 dev 서버는 첫 요청마다 모듈을 변환해 지도 SDK 가 붙기 전에 단언이 끝나는 일이 잦았습니다(그래서 프리뷰 빌드로 바꿨습니다). 대기 로직을 보강하면 가능할 수 있습니다.
3. 빌드에서 제거 — babel 플러그인으로 프로덕션 번들에서 data-* 를 떼는 방법. 지금은 E2E 가 프로덕션 빌드로 돌아서 쓸 수 없습니다. 2번과 함께여야 의미가 있습니다.
4. 그대로 두기 — 번들 영향은 사실상 0 이고, 대안이 실제로 잘못된 값을 냈습니다. 주석으로 용도를 남겨 두었으니 이대로 두는 것도 선택지입니다.
유의
지우면 E2E 가 조용히 깨집니다. 각 속성에 용도 주석을 달아 두었지만, 정리할 때는 스펙을 함께 고쳐야 합니다.
관련: #170
#170 에서 E2E 를 붙이며 제품 코드에 테스트 전용
data-속성 3개를 넣었습니다. 당장 문제는 없지만 테스트 사정이 제품 코드에 남아 있는 상태라 별도로 정리합니다.현재 들어간 것
data-map-control-stackroutes/index.tsx컨트롤 스택data-bottom-sheet-surfaceshared/ui/DraggableBottomSheet.tsx시트 표면data-map-stateentities/map/ui/NaverMapCanvas.tsxloading·ready·error)왜 넣었나
프로덕션 빌드는 vanilla-extract 클래스명이 해시라 이름으로 찾을 수 없습니다. 구조 탐색으로 대체해 봤지만
role="presentation"이 페이지에 3개 있어 시트가 아닌 요소를 집었고, 시트 높이가 191 대신 752 로 나왔습니다.버튼 자체는
getByRole("button", { name: ... })로 찾고 있어 앵커가 필요 없습니다. 문제는 위치를 재야 하는 컨테이너로, 역할도 접근 가능한 이름도 없습니다.정리 후보
1.
data-map-state부터 빼기 — 셋 중 성격이 다릅니다. 이름표가 아니라 내부 상태를 DOM 으로 흘리는 것이라 제품 코드에 남을 이유가 가장 약합니다. 현재 사용처는 두 스펙의waitForMapReady뿐이고, 그마저도 "보이던 것이 사라지는지" 방식으로 바꾸면서 의존이 줄었습니다.2. dev 서버로 E2E 실행 — 클래스명이 읽을 수 있는 형태로 남아 앵커 없이 찾을 수 있습니다. 다만 dev 서버는 첫 요청마다 모듈을 변환해 지도 SDK 가 붙기 전에 단언이 끝나는 일이 잦았습니다(그래서 프리뷰 빌드로 바꿨습니다). 대기 로직을 보강하면 가능할 수 있습니다.
3. 빌드에서 제거 — babel 플러그인으로 프로덕션 번들에서
data-*를 떼는 방법. 지금은 E2E 가 프로덕션 빌드로 돌아서 쓸 수 없습니다. 2번과 함께여야 의미가 있습니다.4. 그대로 두기 — 번들 영향은 사실상 0 이고, 대안이 실제로 잘못된 값을 냈습니다. 주석으로 용도를 남겨 두었으니 이대로 두는 것도 선택지입니다.
유의
지우면 E2E 가 조용히 깨집니다. 각 속성에 용도 주석을 달아 두었지만, 정리할 때는 스펙을 함께 고쳐야 합니다.
관련: #170