Circuit-фреймворк для Jetpack Compose и тестирование с Robolectric

Тестирование приложений Jetpack Compose обычно основано на использовании библиотеки Compose UI Test и создании юнит-тестов поверх библиотек мокирования или DI. Однако этот подход требует наличия эмулятора и не всегда применим для использования в конвейере CI/CD, где обычно используется Robolectric вместо настоящего Android Runtime. При этом нередко в тестах используется скриншотное тестирование (например, через использование captureToImage в Compose UI Test) и сравнение рендеров с образцом, что изначально недоступно в Robolectric из-за особенностей рендеринга. В этой статье мы рассмотрим использование библиотеки Roborazzi, которая решает эту проблему, совместно с новым подходом к архитектуре Jetpack Compose приложений, которая была предложена Slack в библиотеке Circuit.

Изначально Jetpack Compose предлагал подход к созданию реактивного пользовательского интерфейса, основанного на модификации кода компилируемого приложения с помощью плагина, предназначенного для отслеживания изменения внешней конфигурации или внутреннего состояния для Composable-функции. Также Compose используется альтернативное представление структуры интерфейса через иерархию вложенных функций (которые в действительности могут также отвечать за логику и хранение данных). Процесс обновления дерева называется «рекомпозицией» и он может затрагивать как все дерево целиком, так и отдельные поддеревья, что помогает оптимизировать обновление экрана. Состояние Composable-функции могло быть определено как внутри нее, так и хранится во внешнем объекте (например, ViewModel) и использоваться как аргумент функции (в этом случае рекомпозиция происходила при изменении внешнего состояния). Например, приложение с простым счетчиком можно реализовать как с использовать внутреннего состояния:

package tech.dzolotov.mycounter1  import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.* import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.*  class MainActivity : ComponentActivity() {     override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContent {             Counter()         }     } }  @Composable fun Counter() {     var counter by remember { mutableStateOf(0) }     Surface {         Column(             Modifier.fillMaxSize(),             horizontalAlignment = Alignment.CenterHorizontally,             verticalArrangement = Arrangement.Center         ) {             Text("Counter value is $counter")             Button({                 counter++             }) {                 Text("Increment")             }         }     } }

С этим приложением возникнут проблемы при тестировании, поскольку состояние находится внутри и нет никакой возможности проверить логику счетчика через модульные тесты. Для реализации логики хранения состояния и его изменения при действии пользователя можно использовать отдельный класс контроллера:

interface CounterController {     var counter:Int     fun increment() }  class CounterControllerImpl : CounterController {     override var counter by mutableStateOf(0)      override fun increment() {         counter++     } }  class MainActivity : ComponentActivity() {     override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContent {             val controller = CounterControllerImpl()             Counter(controller)         }     } }  @Composable fun Counter(controller: CounterController) {     Surface {         Column(             Modifier.fillMaxSize(),             horizontalAlignment = Alignment.CenterHorizontally,             verticalArrangement = Arrangement.Center         ) {             Text("Counter value is ${controller.counter}")             Button({                 controller.increment()             }) {                 Text("Increment")             }         }     } }

В этой реализации мы уже можем подменить реализацию контроллера на тестовый объект или выполнить проверку контроллера независимо от интерфейса. Поскольку состояние может обновляться асинхронно, здесь также можно использовать корутины и выполнять отложенное изменение состояние после получения данных или по внешнему сигналу (например, при получении push-уведомления). В этом случае в Composable-функции можно создать контекст для корутины val scope=rememberCoroutineScope(), а затем из него вызвать корутину из контроллера:

scope.launch {   controller.increment() }

Но такой подход избыточно связывает контроллер и интерфейс, единственным механизмом отложенного обновления является неявная подписка на изменение состояния, которая создается через compose-плагин. И кажется разумным добавить большее разделение архитектурных компонентов по подобию паттерна MVI (Model-View-Intent), про который было обсуждение в предыдущей статье. Но MVI не очень хорошо подходит к Compose, поскольку несколько не очевидно где именно нужно размещать состояние и как классы архитектуры MVI связаны с Composable-функциями. Хорошей альтернативой MVI может быть фреймворк Circuit, который предложил Slack и о котором было хорошее обсуждение в этом видео.

В модели Circuit за отображение интерфейса отвечает Ui-функция, а за хранение и обновление состояния — Presenter-функция. Что важно, что обе функции являются Composable (хотя вторая и не описывает интерфейс, но в действительности подписка на состояние или любой другой наблюдаемым объект, включая Flow, может приводить к перезапуску Composable-функции и не обязательно чтобы это приводило к модификациям пользовательского интерфейса). Само состояние описывается дополнительным data-классом, который используется для типизации Ui- и Presenter-функций. От Ui-функции к Presenter будет поставляться поток событий (например, действий пользователя), а от Presenter к Ui — поток состояний.

Для модификации нашего счетчика сначала добавим зависимости на библиотеку (в блок dependencies в build.gradle):

implementation("com.slack.circuit:circuit-foundation:0.8.0")

Прежде всего необходимо создать абстракцию Screen, которая будет использоваться для выбора необходимых Ui и Presenter-функций:

@Parcelize object CounterScreen : Screen

Объект экрана может принимать аргументы и это можно использовать при навигации (например, передавать идентификатор при отображении карточки с подробностями товара). Затем преобразуем наш Composable и передадим в него объект состояния, для этого также определим возможные действия (события) и data-класс с описанием состояния:

//возможные события от экрана sealed interface CounterEvent : CircuitUiEvent {     object Increment : CounterEvent     object OtherEvent : CounterEvent }  data class CounterState(val counter: Int, val eventSink: (CounterEvent) -> Unit) :     CircuitUiState  @Composable fun Counter(state: CounterState) {     Surface {         Column(             Modifier.fillMaxSize(),             horizontalAlignment = Alignment.CenterHorizontally,             verticalArrangement = Arrangement.Center         ) {             Text("Counter value is ${state.counter}")             Button({                 state.eventSink(CounterEvent.Increment)             }) {                 Text("Increment")             }         }     } }

Чтобы корректно выполнить привязку к экрану нужно добавить Factory-метод (или использовать кодогенерацию, которая интегрируется к существующим DI-библиотекам, например Hilt, и основана на использовании KSP):

class CounterUiFactory : Ui.Factory {     override fun create(screen: Screen, context: CircuitContext): Ui<*>? {         return when (screen) {             is CounterScreen -> ui<CounterState> { state, modifier -> Counter(state = state) }             else -> null         }     } }

Аналогично Ui-функции необходимо выполнить те же действия с контроллером, который в Circuit преобразуется в Presenter-функцию:

@Composable fun CounterPresenter(): CounterState {     var counter by remember { mutableStateOf(0) }      return CounterState(counter) { event ->         when (event) {             CounterEvent.Increment -> counter++             else -> println("Unknown event")         }     } }  class CounterPresenterFactory : Presenter.Factory {     override fun create(         screen: Screen,         navigator: Navigator,         context: CircuitContext     ): Presenter<*>? {         return when (screen) {             is CounterScreen -> presenterOf { CounterPresenter() }             else -> null         }     } }

Все factory-классы должны быть зарегистрированы в CircuitConfig (это обычно выполняется при инициализации приложения) и далее для передачи конфигурации будет использоваться LocalComposition, представленный Composable-функцией CircuitCompositionLocals и, например, CircuitContent (при отображении только одного экрана):

    override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         val circuitConfig = CircuitConfig.Builder()             .addPresenterFactory(CounterPresenterFactory())             .addUiFactory(CounterUiFactory())             .build()         setContent {             CircuitCompositionLocals(circuitConfig = circuitConfig) {                 CircuitContent(screen = CounterScreen)             }         }     }

Также возможно использовать встроенный навигатор для перемещения между экранами, в этом случае содержание представляется Composable-функцией NavigableCircuitContent.

class MainActivity : ComponentActivity() {     override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         val circuitConfig = CircuitConfig.Builder()             .addPresenterFactory(CounterPresenterFactory())             .addUiFactory(CounterUiFactory())             .build()         setContent {             val backstack = rememberSaveableBackStack {                 this.push(CounterScreen)             }             val navigator = rememberCircuitNavigator(backstack)             CircuitCompositionLocals(circuitConfig = circuitConfig) {                 NavigableCircuitContent(navigator = navigator, backstack = backstack)             }         }     } }

Например, добавим экран со списком значений, которые будут передаваться в экран счетчика, для этого создадим дополнительный Screen и связанные Ui и Presenter-функции (и также не забудем добавить их в Factory-классы):

@Parcelize object HomeScreen : Screen  //пустое состояние class HomeState : CircuitUiState  //здесь нет состояния и его изменения, поэтому просто возвращаем //состояние по умолчанию @Composable fun HomePresenter() : HomeState = HomeState()  @Composable fun Home() = Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {         Text("Welcome to our Circuit counter")     }  class CounterPresenterFactory : Presenter.Factory {     override fun create(         screen: Screen,         navigator: Navigator,         context: CircuitContext     ): Presenter<*>? {         return when (screen) {             is CounterScreen -> presenterOf { CounterPresenter() }             is HomeScreen -> presenterOf { HomePresenter() }             else -> null         }     } }  class CounterUiFactory : Ui.Factory {     override fun create(screen: Screen, context: CircuitContext): Ui<*>? {         return when (screen) {             is CounterScreen -> ui<CounterState> { state, modifier -> Counter(state = state) }             is HomeScreen -> ui<HomeState> { state, modifier -> Home() }             else -> null         }     } } 

Теперь добавим возможность навигации между экранами, для этого будем принимать в Ui-функцию объект класса Navigator, например так:

@Composable fun Home(navigator: Navigator) = Column(     modifier = Modifier.fillMaxSize(),     horizontalAlignment = Alignment.CenterHorizontally,     verticalArrangement = Arrangement.Center ) {     Text("Welcome to our Circuit counter")     LazyColumn {         items(5) {             Text("Counter $it", modifier = Modifier.clickable {                 navigator.goTo(CounterScreen)             })         }     } }

И поскольку Home создается из Factory, то и в него тоже будем передавать navigator:

class CounterUiFactory(val navigator: Navigator) : Ui.Factory {     override fun create(screen: Screen, context: CircuitContext): Ui<*>? {         return when (screen) {             is CounterScreen -> ui<CounterState> { state, modifier -> Counter(state = state) }             is HomeScreen -> ui<HomeState> { state, modifier -> Home(navigator = navigator) }             else -> null         }     } }  class MainActivity : ComponentActivity() {     override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContent {             val backstack = rememberSaveableBackStack {                 this.push(HomeScreen)             }             val navigator = rememberCircuitNavigator(backstack)             val circuitConfig = CircuitConfig.Builder()                 .addPresenterFactory(CounterPresenterFactory())                 .addUiFactory(CounterUiFactory(navigator = navigator))                 .build()             CircuitCompositionLocals(circuitConfig = circuitConfig) {                 NavigableCircuitContent(navigator = navigator, backstack = backstack)             }         }     } }

Следующим шагом добавим передачу аргумента в CounterScreen и будем использовать значение при формировании изначального состояния, для этого

• добавим название страницы в State-класс для CounterScreen

• добавим значение как аргумент конструктора CounterScreen (заменим object -> class)

• в CounterPresenter будем принимать title и использовать его при инициализации состояния

• при создании CounterPresenter в CounterPresenterFactory будем извлекать значение title из объекта экрана

data class CounterState(     val title: String,     val counter: Int,     val eventSink: (CounterEvent) -> Unit ) :     CircuitUiState  @Parcelize class CounterScreen(val title: String) : Screen  @Composable fun CounterPresenter(title: String): CounterState {     var counter by remember { mutableStateOf(0) }      return CounterState(title, counter) { event ->         when (event) {             CounterEvent.Increment -> counter++             else -> println("Unknown event")         }     } }  class CounterPresenterFactory : Presenter.Factory {     override fun create(         screen: Screen,         navigator: Navigator,         context: CircuitContext     ): Presenter<*>? {         return when (screen) {             is CounterScreen -> presenterOf { CounterPresenter(screen.title) }             is HomeScreen -> presenterOf { HomePresenter() }             else -> null         }     } }

Теперь название страницы (или идентификатор товара) могут быть извлечены в любой из связанных со Screen функций (например для отображения названия страницы в Ui-функции или для выполнения сетевых запросов в Presenter-функции).

Если в приложении используется Dagger-совместимый DI, можно подключить кодогенерацию и использовать перед Ui и Presenter-функциями совместно с @Composable аннотации @CircuitInject с двумя аргументами (название класса экрана и название Scope в DI). Это автоматизирует генерацию и регистрацию Factory-методов и уменьшит количество boilerplate кода.

Теперь, когда приложение собрано, можно перейти к тестированию. Здесь важно отметить, что в Circuit есть несколько библиотек для тестирования и также представлена интеграция с roborazzi для создания скриншотов отдельных Composable-функций при запуске в Robolectric.

Сначала добавим обычные библиотеки для тестирования (сразу будем использовать Robolectric для быстрого запуска тестов, как следствие будут создаваться unit-тесты вместо инструментальных):

android {   //остальная конфигурация     testOptions {         unitTests {             includeAndroidResources = true         }     } }  dependencies {   //другие зависимости     testImplementation 'org.robolectric:robolectric:4.10'     testImplementation 'androidx.compose.ui:ui-test-junit4'     testImplementation 'org.jetbrains.kotlinx:kotlinx-coroutines-test:1.6.4' }

Для доступа к тестированию presenter-функций будет необходимо получить актуальную конфигурацию и иметь возможность подменить навигатор приложения на экземпляр FakeNavigator, сделаем необходимые изменения:

@Composable fun MainContent(navigator: Navigator, backstack: SaveableBackStack): CircuitConfig {     val circuitConfig = CircuitConfig.Builder()         .addPresenterFactory(CounterPresenterFactory())         .addUiFactory(CounterUiFactory(navigator = navigator))         .build()     CircuitCompositionLocals(circuitConfig = circuitConfig) {         NavigableCircuitContent(navigator = navigator, backstack = backstack)     }     return circuitConfig }  class MainActivity : ComponentActivity() {     override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContent {             val backstack = rememberSaveableBackStack {                 this.push(HomeScreen)             }             val navigator = rememberCircuitNavigator(backstack)             MainContent(navigator = navigator, backstack = backstack)         }     } } 

Начнем с проверки навигации перехода с главного экрана, для этого добавим правило для инициализации Compose и будем использовать методы FakeNavigator (с помощью него можно определить факт перехода между экранами и перейти на любой экран программно):

@RunWith(RobolectricTestRunner::class) class CounterTest {      @get:Rule     val composeTestRule = createComposeRule()      val fakeNavigator = FakeNavigator()      @Test     fun testHome() = runTest {         composeTestRule.setContent {             val backStack = rememberSaveableBackStack {                 push(HomeScreen)             }             MainContent(navigator = fakeNavigator, backstack = backStack)         }         composeTestRule.onNodeWithTag("Welcome Label").assertExists()         //проверяем навигацию         composeTestRule.onNodeWithTag("Counter 0").performClick()         val newScreen = fakeNavigator.awaitNextScreen()         assert(newScreen is CounterScreen)         assert((newScreen as CounterScreen).title == "Counter 0")     }   }

Для проверки взаимодействия с интерфейсом экрана счетчика можно использовать обычный Compose UI Test:

    //проверка интерфейса     @Test     fun testCounter() = runTest {          //создаем начальный экран         val screen = CounterScreen("Counter 0")         //инициализируем compose         composeTestRule.setContent {             val backStack = rememberSaveableBackStack {                 push(screen)             }             MainContent(navigator = fakeNavigator, backstack = backStack)         }         //обычным образом взаимодействуем с узлами на экране         val node = composeTestRule.onNodeWithTag("Counter")         node.assertExists().assertIsDisplayed()         node.assertTextContains("0", substring = true)         //нажимаем на кнопку         composeTestRule.onNodeWithTag("Increment").performClick()         //и проверяем увеличение счетчика         composeTestRule.onNodeWithTag("Counter").assertTextContains("1", substring = true)     } 

Но теперь у нас также есть возможность проверить presenter напрямую, для этого добавим зависимость :

    testImplementation 'com.slack.circuit:circuit-test:0.8.0'

и теперь с помощью функции расширения .test для Presenter мы можем проверить изменение состояния при отправке событий (в действительности в лямбду передается контекст Turbine, что позволяет проверить генерируемые значения состояния и отправить в презентер новые события).

    @Test     fun unitTestCounter() = runTest {          //сохраним конфигурацию (будет нужна для получения презентера)         lateinit var circuitConfig: CircuitConfig         val screen = CounterScreen("Counter 0")          composeTestRule.setContent {             val backStack = rememberSaveableBackStack {                 push(screen)             }             circuitConfig = MainContent(navigator = fakeNavigator, backstack = backStack)         }          val presenter = circuitConfig.presenter(screen, fakeNavigator)         //тестируем презентер         presenter?.test {             //убеждаемся что вначале там 0 и отправляем событие             awaitItem().run {                 assert((this as CounterState).counter==0)                 eventSink(CounterEvent.Increment)             }             //проверяем, что счетчик увеличился             assert((awaitItem() as CounterState).counter==1)         }     } 

Последним действием добавим возможность создания скриншотов полученных Ui-функций. Начиная с версии Robolectric 4.10 стало доступным выполнение захвата изображения View (необходимо добавить аннотацию @GraphicsMode(GraphicsMode.Mode.NATIVE)к тестовому классу. Однако, для корректной работы с Compose нужно также дополнительно подключить плагин roborazzi. В файле build.gradle для проекта добавляем в plugins:

    id "io.github.takahirom.roborazzi" version "1.2.0-alpha-1" apply false

Затем в файле build.gradle модуля активируем плагин и добавляем зависимости:

plugins { //другие плагины     id 'io.github.takahirom.roborazzi' }  dependencies { //другие зависимости     testImplementation("io.github.takahirom.roborazzi:roborazzi:1.2.0-alpha-1")     testImplementation("io.github.takahirom.roborazzi:roborazzi-junit-rule:1.2.0-alpha-1") }

И теперь мы можем использовать функции-расширения для захвата изображения и проверки соответствия снимка ранее сохраненному. Главное достоинство использования Robolectric в этом случае в запуске на локальной файловой системе (а не внутри эмулятора или физического устройства) и, как следствие, возможность просмотра и сохранения скриншотов как части проекта. Добавим скриншотный тест:

    @Test     fun screenShot() {         composeTestRule.setContent {             val backStack = rememberSaveableBackStack {                 push(HomeScreen)             }             MainContent(navigator = fakeNavigator, backstack = backStack)         }         composeTestRule.onNodeWithTag("Welcome Label").captureRoboImage("build/welcome_message.png")     } 

Запустим создание снимков через задачу gradle:

./gradlew recordRoborazziDebug

Снимок можно будет найти в app/build/welcome_message.png:

В дальнейшем можно будет проводить сравнение актуального изображения со снимком с помощью задачи Gradle:

./gradlew verifyRoborazziDebug

Нужно отметить, что библиотека Circuit находится в стадии активной разработки, сейчас уже появились встроенные интеграции с Roborazzi, а также поддержка инструментальных тестов Android, но это все еще в очень экспериментальной стадии. Но концептуально использовать Circuit можно уже сейчас и основные идеи с реализацией State-Presenter-UI-Screen вероятнее всего останутся неизменными.

Исходный текст проекта можно найти на Github: https://github.com/dzolotov/circuit-sample.

---

Материал подготовлен в преддверии старта онлайн-курса «Kotlin QA Engineer».