Composable

ViewModel에 의존하는 Composable을 테스트할 때 문제점 Composable은 기본적으로 State Hoisting을 통해 ViewModel에 직접 의존하지 않도록 만들어야 하지만, 최상위에 있는 Screen Composable은 상태값을 가지고 있는 ViewModel 객체에 의존해야 한다. *만약 State Hoisting이 무엇인지 모른다면 다음 두 개의 글을 참고하도록 하자. [Android Compose State] State Hoisting(상태 호이스팅) 패턴이란 무엇인가? Compose의 State 선언형 UI 프레임워크인 Compose는 Stateless함이 가장 큰 장점이다. UI에 대한 UI상태의 상호 의존성을 끊을 수 있다면 UI의 재사용성이 생기고, UI에 대한 테스트 ..

특정 Composable에 대한 Isolated Test를 위한 createComposeRule 우리는 지금까지 createComposeRule을 사용해 UI 테스트를 진행했다. createComposeRule을 사용하면, 특정한 Composable을 화면에 표시할 수 있고, 해당 UI를 조작해 테스트를 진행할 수 있다. 예를 들어 다음 코드와 같이 CirclePlayButton을 화면에 표시하고, 클릭한 다음, 해당 클릭이 제대로 일어났는지를 테스트할 수 있다. class OnNodeWithContentDescriptionTest { @get:Rule val composeRule = createComposeRule() @Test fun testCircleButtonClick() { // Given va..

이전 시간에 배운 내용 이전 시간에 우리는 JUnit에서 지원하는 @get:Rule 어노테이션과 함께 createComposeRule을 사용해 ComposeContentTestRule 객체를 만듦으로써 Composable 테스트 환경을 구축하는 방법에 대해 알아보았다. 이후에는 ComposeContentTestRule 객체를 사용해 onNodeWithText를 통해 UI 컴포넌트를 찾는 방법에 대해 다루었다. 이번 시간에는 onNodeWith- 구문을 사용해 더욱 다양한 방법으로 UI 컴포넌트를 찾는 방법에 대해 알아본다. onNodeWithText의 한계 onNodeWithText는 매우 편리한 기능이지만, 텍스트가 있는 컴포넌트를 찾을 때만 쓸 수 있다. 모든 UI 컴포넌트가 텍스트를 가지는 것은 아..

안드로이드 UI 테스트 준비하기 안드로이드 UI 테스트를 위해 다음과 같은 모양의 EmojiTextComposable을 준비하자. @Composable fun EmojiText( modifier: Modifier = Modifier, emoji: String, content: String, contentDescription: String? = null, ) { Card( modifier = modifier.semantics { this.contentDescription = contentDescription ?: "" }, colors = CardDefaults.cardColors(containerColor = Color.LightGray.copy(alpha = 0.2f)), elevation = Card..

SideEffect란 SideEffect는 Composable의 Composition이 성공적으로 되었을 때 발행하는 Effect이다. SideEffect는 Compose에서 관리하지 않는 객체와 Compose 내부의 데이터를 공유하기 위해 사용한다. SideEffect의 사용 TextField를 보이지 않게(isVisible=false) 했다가. 버튼이 눌렸을 때 보이게(isVisible = true) 만드는 코드가 있다고 하자. 이때 isVisible과 관련된 값은 모두 Compose에서 관리하는 값이므로 다음과 같이 작성이 가능하다. @Composable fun HomeScreen() { var isVisible by remember { mutableStateOf(false) } Column(mod..