[Android] UI test에서 TedBottomPicker 사용하는 법

바텀 시트에서 사진, 영상을 선택하는 기능을 구현해야 한다면 파일 선택 라이브러리로 TedBottomPicker를 사용할 수 있다.

그러나 UI test를 작성해야 한다면 어떻게 테스트 케이스를 작성해야 할지 애매하다. 그러나 TedBottomPicker도 결국 리사이클러뷰를 사용하기 때문에 에스프레소를 통해 리사이클러뷰의 id에 접근할 수 있고, 이 뜻은 클릭과 스크롤 테스트도 가능하다는 뜻이다.

이 포스팅에서 어떻게 작성하는지 확인해 본다. 먼저 아래의 라이브러리를 앱 수준 gradle에 추가해야 한다.

 

androidTestImplementation "androidx.test.espresso:espresso-contrib:3.2.0"

 

최신 버전은 아니기 때문에 작동하는 걸 확인했다면 적당히 버전을 변경해 준다.

이 라이브러리를 추가하는 이유는 간단하다. 이게 있어야 리사이클러뷰의 특정 아이템 선택, 스크롤 등의 액션을 호출할 수 있기 때문이다.

 

이제 TedBottomPicker에서 사용하는 리사이클러뷰의 이름을 확인해야 한다.

확인하려면 먼저 안드로이드 스튜디오 왼쪽 상단의 Android 글자를 클릭해서 Project로 바꿔준다.

 

 

그러면 app, build 등 패키지와 하단의 External Libraries 패키지가 보일 것이다. TedBottomPicker는 외부 라이브러리기 때문에, 그 구현을 확인하려면 당연히 External Libraries 패키지 안을 확인해야 한다.

패키지를 열면 다양한 패키지들이 보일 것이다. 이 때 패키지 트리 아무 곳이나 클릭한 다음, tedbottompicker를 입력하다 보면 특정 지점으로 이동할 것이다.

 

 

이 패키지 안을 확인하면 jar 파일과 res 패키지가 보인다. jar 파일 왼쪽을 누르면 TedBottomPicker 라이브러리를 구성하는 자바 파일들이 표시되고, res 패키지를 열면 레이아웃 XML, 드로어블 등이 보인다.

확인하려는 것은 리사이클러뷰의 id기 때문에 tedbottompicker_content_view.xml 파일을 더블클릭해서 연다.

 

 

그리고 소스코드 보기로 뷰를 변경하고, 스크롤을 맨 밑으로 내리면 아래와 같이 리사이클러뷰의 id를 확인할 수 있다.

 

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rc_gallery"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

 

rc_gallery가 TedBottomPicker에서 사용하는 리사이클러뷰 id란 걸 알았으니 이 글자를 어딘가에 복붙해 두고, 테스트 케이스에 코드를 작성한다. 아래는 예시 코드다.

 

fun clickRecyclerView(
    recyclerViewId: Int,
    position: Int,
) {
    onView(withId(recyclerViewId)).perform(
        RecyclerViewActions.actionOnItemAtPosition<RecyclerView.ViewHolder>(position, click())
    )
}

 

함수의 매개변수로 리사이클러뷰의 id와 클릭할 아이템의 위치를 받는다. 그 후 RecyclerViewActions.actionOnItemAtPosition()을 호출해 특정 위치의 아이템을 클릭하게 한다.

이 함수가 어떤 함수인지는 아래의 공식문서 설명으로 대체한다.

 

https://developer.android.com/reference/androidx/test/espresso/contrib/RecyclerViewActions#actionOnItemAtPosition(int,androidx.test.espresso.ViewAction) 

RecyclerViewActions  |  Android Developers

특정 위치의 뷰에 대해 ViewAction을 수행한다
- position으로 리사이클러뷰 스크롤
- 특정 위치에 있는 뷰에 대한 작업(action) 수행

 

actionOnItemAtPosition()의 구현은 아래와 같으니 참고한다.

 

public static <VH extends ViewHolder> ViewAction actionOnItemAtPosition(
  final int position, final ViewAction viewAction) {
return new ActionOnItemAtPositionViewAction<VH>(position, viewAction);
}

 

그리고 click()은 에스프레소가 제공하는 ViewActions 클래스의 정적 메서드로, 이름 그대로 컴포넌트를 클릭하는 역할을 수행한다. 만약 같은 이름의 함수를 어딘가에 만들어 두고 사용중이라면 이 함수를 사용할 수 없으니 참고한다.

 

주의할 것은 함수명 오른쪽의 제네릭 안에 RecyclerView.ViewHolder를 입력하는 것이다. TedBottomPicker에서 사용하는 뷰홀더를 그대로 넣을 순 없고, 위의 예시 코드와 같이 RecyclerView.ViewHolder 키워드를 제네릭 안에 넣어줘야 TedBottomPicker의 리사이클러뷰를 대상으로 테스트를 진행할 수 있다.

 

함수를 만들었으니 테스트 함수에서 호출하기만 하면 된다. 리사이클러뷰의 id는 이미 위에서 확인했으니 그대로 사용하기만 하면 된다.

 

@Test
fun test_foo() {
    ...
    clickRecyclerView(
        recyclerViewId = R.id.rc_gallery,   // TedBottomPicker 내부 리사이클러뷰의 id
        position = 3                        // 클릭할 사진의 위치
    )
    ...
}

 

추가로 position에 0을 넣고 테스트를 실행하면 아무 일도 발생하지 않는다. 내 경우 3을 넣어야 사진을 추가할 수 있었기 때문에 3을 넣었지만 각자 구현한 기능에 맞게 다른 숫자를 넣어서 테스트한다.

이것 외에도 RecyclerViewActions로 호출할 수 있는 다양한 함수들이 있으니 확인해서 각자 구현한 기능에 맞게 테스트를 작성하면 된다.