Skip to content

refactor: E2E 앵커용 data 속성 의존 줄이기 #171

Description

@Binz-collab

#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

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions