Migrating to Jetpack Compose – Sunflower에서의 컴포즈 설정

컴포즈는 main 브랜치에서 다운로드한 코드에 이미 추가되어 있다. 그러나 컴포즈가 작동하려면 무엇이 필요한지 살펴보도록 하자. app/build.gradle(또는 build.gradle(모듈: compose-migration.app)) 파일을 열면, 이 파일이 컴포즈 종속성을 가져오는 방법과 Android Studio가 buildFeatures { compose true } 플래그를 사용하여 컴포즈와 함께 작동할 수 있도록 더보기…

Migrating to Jetpack Compose – 설정하기

코드 얻기 Github로 부터 코드랩 코드를 얻자. $ git clone https://github.com/googlecodelabs/android-compose-codelabs 또는 저장소를 Zip 파일로 다운로드할 수 있다. 안드로이드 스튜디오 열기 이 코드랩에는 최신 버전의 Android Studio Arctic Fox가 필요하다. 샘플 앱 실행하기 방금 다운로드한 코드에는 사용 가능한 모든 컴포즈 더보기…

Migrating to Jetpack Compose – 소개 및 마이그레이션 계획

소개 컴포즈와 View 시스템은 함께 상호운용할 수 있다. 이 코드랩에서는 Sunflower의 식물 세부 정보 화면의 일부를 컴포즈로 마이그레이션한다. 현실적인 앱을 컴포즈로 마이그레이션할 수 있도록 프로젝트 사본을 만들었다. 코드랩이 끝나고, 마이그레이션을 계속해서 할 수 있고, Sunflower의 나머지 화면을 변환할 수 있다. 더보기…

Testing in Jetpack Compose – 연습문제

이 단계에서는 액션(Action)을 사용하여 RallyTopAppBar의 다른 탭을 클릭하면 선택 항목이 변경되는지 확인한다. Action에 대한 부분은 Testing Cheat Sheet를 참조하자. 힌트: 테스트 범위에는 RallyApp이 소유한 상태(State)가 포함되어야 한다. 행동(behavior)이 아니라 상태(state)를 확인(verify)하자. 호출된 객체와 방법에 의존하는 대신 UI 상태에 대한 주장(assertion)을 더보기…

Testing in Jetpack Compose – 동기화

작성하는 모든 테스트는 테스트 대상과 적절하게 동기화(synchronization)되어야 한다. 예를 들어 onNodeWithText와 같은 finder를 사용할 때, 테스트는 시맨틱 트리를 쿼리하기 전에 앱이 유휴 상태가 될 때까지 기다린다. 동기화가 없으면 테스트에서 표시되기 전에 요소를 찾거나 불필요하게 기다릴 수 있다. 이 단계에서는 앱을 더보기…

Testing in Jetpack Compose – 병합 및 병합해제 된 semantics tree들

시맨틱 트리(Semantics tree)는 항상 관련 정보만 표시하여 최대한 간결하게 만들려고 한다. 예를 들어, TopAppBar에서는 아이콘과 레이블이 다른 노드일 필요가 없다. “Overview” 노드를 살펴보자. 이 노드에는 selectable 컴포넌트에 대해 특별히 정의된 속성(예: Selected 및 Role)과 전체 탭에 대한 콘텐츠 설명(content description)이 더보기…

Testing in Jetpack Compose – 디버깅 테스트

이 단계에서는 현재 탭의 레이블이 대문자로 표시되는지 확인한다. 가능한 해결책은 텍스트를 찾아(find) 대문자가 존재한다고 주장(assert)하는 것이다. 그러나 실행해보면 테스트가 실패하는 것을 확인할 수 있다.😱 이 단계에서는 semantics tree를 사용하여 디버깅하는 방법을 배운다. Semantics tree 컴포즈 테스트는 semantics tree라는 구조를 사용하여 더보기…

Testing in Jetpack Compose – 간단한 UI 테스트 만들기

TopAppBarTest 파일 생성하기 AnimatingCircleTests.kt(app/src/androidTest/com/example/compose/rally)와 동일한 폴더에 새 파일을 만들고 TopAppBarTest.kt라고 이름을 짓는다. 컴포즈는 createComposeRule()을 호출하여 얻을 수 있는 ComposeTestRule과 함께 제공된다. 이 규칙을 사용하면 테스트 중인 Compose 콘텐츠를 설정하고, 상호 작용할 수 있다. ComposeTestRule을 추가하기 격리된 테스트 컴포즈 테스트에서는 예를 더보기…

Testing in Jetpack Compose – 무엇을 테스트 해야 할까?

탭 행(Overview, Accounts 및 Bills)이 포함된 Rally의 탭 표시줄에 중점을 둘 것이다. 이 코드랩에서는 bar의 UI를 테스트한다. 이는 많은 것을 의미한다: 탭에 의도한 아이콘과 텍스트가 표시되는지 테스트 애니메이션 사양이 일치하는지 테스트 트리거 된 네비게이션 이벤트가 올바른지 테스트 다양한 상태에서 UI 더보기…