Add Compose UI tests for Demo Compose App

Author: siarhei-luskanau

.github/workflows/demo-compose-app.yml

@@ -63,3 +63,44 @@ jobs:
         run: ./gradlew ${{ matrix.gradle-tasks }} --stacktrace
         env:
           JAVA_OPTS: "-Xmx8g -Dfile.encoding=UTF-8 -Djava.awt.headless=true -Dkotlin.daemon.jvm.options=-Xmx6g"
+
+
+  Tests:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        gradle-tasks: [
+          "jvmTest"
+          # "wasmJsBrowserTest"
+        ]
+        os: [ ubuntu-latest ]
+        include:
+          - gradle-tasks: "iosSimulatorArm64Test"
+            os: macos-latest-xlarge
+    steps:
+      - name: Configure Git
+        run: |
+          git config --global core.autocrlf input
+      - uses: actions/checkout@v5
+      - name: Set up JDK ${{ env.JAVA_VERSION }}
+        uses: actions/setup-java@v5
+        with:
+          java-version: ${{ env.JAVA_VERSION }}
+          distribution: ${{ env.JAVA_DISTRIBUTION }}
+          cache: gradle
+
+      # Configure Gradle for optimal use in GitHub Actions, including caching of downloaded dependencies.
+      # See: https://github.com/gradle/actions/blob/main/setup-gradle/README.md
+      - name: Setup Gradle
+        uses: gradle/actions/setup-gradle@v4
+        with:
+          # Cache downloaded JDKs/konan in addition to the default directories.
+          gradle-home-cache-includes: |
+            caches
+            notifications
+            jdks
+            ~/.konan/**
+      - name: Run UI tests
+        working-directory: ./examples/demo-compose-app
+        run: ./gradlew ${{ matrix.gradle-tasks }} --stacktrace

examples/demo-compose-app/README.md

@@ -32,11 +32,13 @@ To build the application bundle:
 ### Desktop
 Run the desktop application: `./gradlew :desktopApp:run`  
 Run the desktop **hot reload** application: `./gradlew :desktopApp:hotRun`
+Run desktop UI tests: `./gradlew jvmTest`
 
 ### iOS
 To run the application on iPhone device/simulator:
 - Open `iosApp/iosApp.xcproject` in Xcode and run standard configuration
 - Or use [Kotlin Multiplatform Mobile plugin](https://plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile) for Android Studio
+- Run iOS simulator UI tests: `./gradlew iosSimulatorArm64Test`
 
 ### Web Distribution
 Build web distribution: `./gradlew :webApp:composeCompatibilityBrowserDistribution`  
@@ -47,3 +49,4 @@ Run the browser application: `./gradlew :webApp:jsBrowserDevelopmentRun --contin
 
 ### Wasm Browser
 Run the browser application: `./gradlew :webApp:wasmJsBrowserDevelopmentRun --continue`
+Run browser UI tests: `./gradlew clean wasmJsBrowserTest`

examples/demo-compose-app/commonApp/build.gradle.kts

@@ -1,7 +1,4 @@
-@file:OptIn(ExperimentalWasmDsl::class)
-
 import org.jetbrains.compose.reload.gradle.ComposeHotRun
-import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 import org.jetbrains.kotlin.gradle.plugin.mpp.KotlinNativeTarget
 
 plugins {
@@ -15,11 +12,10 @@ plugins {
 kotlin {
     jvmToolchain(libs.versions.javaVersion.get().toInt())
 
-    android {
+    androidLibrary {
         namespace = "com.jetbrains.example.koog.share.ui"
         compileSdk = 36
         minSdk = 23
-        androidResources.enable = true
     }
 
     jvm()
@@ -32,18 +28,18 @@ kotlin {
 
     sourceSets {
         commonMain.dependencies {
-            implementation(compose.animation)
-            implementation(compose.animationGraphics)
-            implementation(compose.components.resources)
-            implementation(compose.components.uiToolingPreview)
-            implementation(compose.foundation)
-            implementation(compose.material3)
-            implementation(compose.materialIconsExtended)
-            implementation(compose.runtime)
-            implementation(compose.ui)
-            implementation(compose.uiUtil)
-            implementation(libs.jetbrains.lifecycle.viewmodel.compose)
-            implementation(libs.jetbrains.navigation.compose)
+            implementation(libs.jetbrains.compose.animation)
+            implementation(libs.jetbrains.compose.animation.graphics)
+            implementation(libs.jetbrains.compose.components.resources)
+            implementation(libs.jetbrains.compose.foundation)
+            implementation(libs.jetbrains.compose.material.icons.extended)
+            implementation(libs.jetbrains.compose.material3)
+            implementation(libs.jetbrains.compose.runtime)
+            implementation(libs.jetbrains.compose.ui)
+            implementation(libs.jetbrains.compose.ui.tooling.preview)
+            implementation(libs.jetbrains.compose.ui.util)
+            implementation(libs.jetbrains.lifecycle.viewmodel.navigation3)
+            implementation(libs.jetbrains.navigation3.ui)
             implementation(libs.koin.compose)
             implementation(libs.koog.agents.core)
             implementation(libs.koog.prompt.executor.llms.all)
@@ -55,9 +51,14 @@ kotlin {
             implementation(project.dependencies.platform(libs.ktor.bom))
         }
 
+        commonTest.dependencies {
+            implementation(kotlin("test"))
+            implementation(libs.jetbrains.compose.ui.test)
+        }
+
         androidMain.dependencies {
-            implementation(compose.uiTooling)
             implementation(libs.androidx.datastore.preferences)
+            implementation(libs.jetbrains.compose.ui.tooling)
             implementation(libs.kotlinx.coroutines.android)
             implementation(libs.ktor.client.okhttp)
         }

examples/demo-compose-app/commonApp/src/commonMain/kotlin/com/jetbrains/example/koog/compose/ComposeApp.kt

@@ -4,10 +4,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.ui.Modifier
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.composable
-import androidx.navigation.compose.rememberNavController
+import androidx.navigation3.runtime.NavKey
+import androidx.navigation3.runtime.entryProvider
+import androidx.navigation3.ui.NavDisplay
 import com.jetbrains.example.koog.compose.screens.agentdemo.AgentDemoScreen
 import com.jetbrains.example.koog.compose.screens.settings.SettingsScreen
 import com.jetbrains.example.koog.compose.screens.start.StartScreen
@@ -27,57 +28,50 @@ fun ComposeApp() = AppTheme {
         color = MaterialTheme.colorScheme.background
     ) {
         val koin = getKoin()
-        val navController = rememberNavController()
-        NavHost(
-            navController = navController,
-            startDestination = NavRoute.StartScreen,
-        ) {
-            composable<NavRoute.StartScreen> {
-                StartScreen(
-                    onNavigateToSettings = {
-                        navController.navigate(NavRoute.SettingsScreen)
-                    },
-                    onNavigateToAgentDemo = { demoRoute ->
-                        navController.navigate(demoRoute)
-                    },
-                    viewModel = koin.get()
-                )
-            }
+        val backStack = mutableStateListOf<NavKey>(NavRoute.StartScreen)
+        NavDisplay(
+            backStack = backStack,
+            onBack = { backStack.removeLastOrNull() },
+            entryProvider = entryProvider {
+                entry<NavRoute.StartScreen> {
+                    StartScreen(
+                        onNavigateToSettings = { backStack.add(NavRoute.SettingsScreen) },
+                        onNavigateToAgentDemo = { demoRoute -> backStack.add(demoRoute) },
+                        viewModel = koin.get()
+                    )
+                }
 
-            composable<NavRoute.SettingsScreen> {
-                SettingsScreen(
-                    onNavigateBack = {
-                        navController.popBackStack()
-                    },
-                    onSaveSettings = {
-                        navController.popBackStack()
-                    },
-                    viewModel = koin.get()
-                )
-            }
+                entry<NavRoute.SettingsScreen> {
+                    SettingsScreen(
+                        onNavigateBack = { backStack.removeLastOrNull() },
+                        onSaveSettings = { backStack.removeLastOrNull() },
+                        viewModel = koin.get()
+                    )
+                }
 
-            composable<NavRoute.AgentDemoRoute.CalculatorScreen> {
-                AgentDemoScreen(
-                    onNavigateBack = { navController.popBackStack() },
-                    viewModel = koin.get { parametersOf("calculator") }
-                )
-            }
+                entry<NavRoute.AgentDemoRoute.CalculatorScreen> {
+                    AgentDemoScreen(
+                        onNavigateBack = { backStack.removeLastOrNull() },
+                        viewModel = koin.get { parametersOf("calculator") }
+                    )
+                }
 
-            composable<NavRoute.AgentDemoRoute.WeatherScreen> {
-                AgentDemoScreen(
-                    onNavigateBack = { navController.popBackStack() },
-                    viewModel = koin.get { parametersOf("weather") }
-                )
+                entry<NavRoute.AgentDemoRoute.WeatherScreen> {
+                    AgentDemoScreen(
+                        onNavigateBack = { backStack.removeLastOrNull() },
+                        viewModel = koin.get { parametersOf("weather") }
+                    )
+                }
             }
-        }
+        )
     }
 }
 
 /**
  * Navigation routes for the app
  */
 @Serializable
-sealed interface NavRoute {
+sealed interface NavRoute : NavKey {
     @Serializable
     data object StartScreen : NavRoute
 

examples/demo-compose-app/commonApp/src/commonMain/kotlin/com/jetbrains/example/koog/compose/screens/agentdemo/AgentDemoScreen.kt

@@ -48,10 +48,10 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.jetbrains.example.koog.compose.theme.AppDimension
 import com.jetbrains.example.koog.compose.theme.AppTheme
-import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @Composable
 fun AgentDemoScreen(

examples/demo-compose-app/commonApp/src/commonMain/kotlin/com/jetbrains/example/koog/compose/screens/settings/SettingsScreen.kt

@@ -23,9 +23,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
 import com.jetbrains.example.koog.compose.theme.AppDimension
 import com.jetbrains.example.koog.compose.theme.AppTheme
-import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @Composable
 fun SettingsScreen(

examples/demo-compose-app/commonApp/src/commonMain/kotlin/com/jetbrains/example/koog/compose/screens/start/StartScreen.kt

@@ -25,10 +25,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import com.jetbrains.example.koog.compose.NavRoute
 import com.jetbrains.example.koog.compose.theme.AppDimension
 import com.jetbrains.example.koog.compose.theme.AppTheme
-import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @Composable
 fun StartScreen(

examples/demo-compose-app/commonApp/src/commonTest/kotlin/com/jetbrains/example/koog/compose/KoinAppTest.kt

@@ -0,0 +1,104 @@
+package com.jetbrains.example.koog.compose
+
+import androidx.compose.ui.test.ExperimentalTestApi
+import androidx.compose.ui.test.onNodeWithContentDescription
+import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.onRoot
+import androidx.compose.ui.test.performClick
+import androidx.compose.ui.test.performTextInput
+import androidx.compose.ui.test.printToLog
+import androidx.compose.ui.test.runComposeUiTest
+import kotlin.test.Test
+
+@OptIn(ExperimentalTestApi::class)
+class KoinAppTest {
+
+    @Test
+    fun simpleCheck() = runComposeUiTest {
+        setContent {
+            KoinApp()
+        }
+
+        onRoot().printToLog("0_StartScreenTag")
+
+        // Open Settings screen
+        onNodeWithContentDescription("Settings").performClick()
+
+        // Enter empty value to OpenAI token field
+        onNodeWithText("OpenAI Token").performTextInput("")
+
+        // Enter empty value to Anthropic token field
+        onNodeWithText("Anthropic Token").performTextInput("")
+
+        // Press save settings button
+        onNodeWithContentDescription("Save").performClick()
+
+        // Open Calculator screen
+        onNodeWithText("Calculator").performClick()
+
+        // Type a test message
+        onNodeWithText("Type a message...").performTextInput("What is 2+2?")
+
+        // Press send button
+        onNodeWithContentDescription("Send").performClick()
+
+        onRoot().printToLog("1_CalculatorScreenEmptyTokenTag")
+
+        // Press back button
+        onNodeWithContentDescription("Back").performClick()
+
+        // Open Weather Forecast screen
+        onNodeWithText("Weather Forecast").performClick()
+
+        // Type a test message
+        onNodeWithText("Type a message...").performTextInput("What's the weather in New York?")
+
+        // Press send button
+        onNodeWithContentDescription("Send").performClick()
+
+        onRoot().printToLog("2_WeatherForecastScreenEmptyTokenTag")
+
+        // Press back button
+        onNodeWithContentDescription("Back").performClick()
+
+        // Open Settings screen
+        onNodeWithContentDescription("Settings").performClick()
+
+        // Enter "IncorrectApiKey" value to OpenAI token field
+        onNodeWithText("OpenAI Token").performTextInput("IncorrectApiKey")
+
+        // Enter empty value to Anthropic token field
+        onNodeWithText("Anthropic Token").performTextInput("")
+
+        // Press save settings button
+        onNodeWithContentDescription("Save").performClick()
+
+        // Open Calculator screen
+        onNodeWithText("Calculator").performClick()
+
+        // Type a test message
+        onNodeWithText("Type a message...").performTextInput("What is 2+2?")
+
+        // Press send button
+        onNodeWithContentDescription("Send").performClick()
+
+        onRoot().printToLog("3_CalculatorScreenIncorrectKeyTag")
+
+        // Press back button
+        onNodeWithContentDescription("Back").performClick()
+
+        // Open Weather Forecast screen
+        onNodeWithText("Weather Forecast").performClick()
+
+        // Type a test message
+        onNodeWithText("Type a message...").performTextInput("What's the weather in New York?")
+
+        // Press send button
+        onNodeWithContentDescription("Send").performClick()
+
+        onRoot().printToLog("4_WeatherForecastScreenIncorrectKeyTag")
+
+        // Press back button
+        onNodeWithContentDescription("Back").performClick()
+    }
+}