Add screenshot testing

.github/workflows/build.yml

@@ -28,25 +28,3 @@ jobs:
 
       - name: Build debug app
         run: ./gradlew :app:assembleDebug
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-
-      - name: Enable KVM
-        run: |
-          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
-          sudo udevadm control --reload-rules
-          sudo udevadm trigger --name-match=kvm
-
-      - name: Run unit tests
-        run: ./gradlew :app:testDebugUnitTest
-
-      - name: Run Android tests on Large Desktop Emulator
-        uses: reactivecircus/android-emulator-runner@v2
-        with:
-          api-level: 33
-          device: desktop_large
-          arch: x86_64
-          script: ./gradlew :app:connectedAndroidTest

.github/workflows/screenshot_test.yml

@@ -0,0 +1,59 @@
+name: Screenshot tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+env:
+  GRADLE_OPTS: "-Dorg.gradle.jvmargs=-Xmx6g -Dorg.gradle.daemon=false -Dkotlin.incremental=false"
+
+jobs:
+  test:
+    runs-on: macos-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-java@v3.9.0
+        with:
+          distribution: 'zulu'
+          java-version: 19
+
+      - name: Gradle cache
+        uses: gradle/gradle-build-action@v2
+
+      # Download screenshots from main branch
+      - uses: dawidd6/action-download-artifact@v2
+        with:
+          name: screenshots
+          path: app/screenshots
+          workflow: screenshot_test.yaml
+          branch: main
+
+      - name: verify test
+        id: verify-test
+        run: |
+          # If there is a difference between the screenshots, the test will fail.
+          ./gradlew app:verifyRoborazziDebug --stacktrace
+
+      - uses: actions/upload-artifact@v3
+        if: ${{ always() }}
+        with:
+          name: screenshot-diff
+          path: app/screenshots
+          retention-days: 30
+
+      - uses: actions/upload-artifact@v3
+        if: ${{ always() }}
+        with:
+          name: screenshot-diff-reports
+          path: app/screenshots/reports
+          retention-days: 30
+
+      - uses: actions/upload-artifact@v3
+        if: ${{ always() }}
+        with:
+          name: screenshot-diff-test-results
+          path: app/screenshots/test-results
+          retention-days: 30

.github/workflows/test.yml

@@ -0,0 +1,32 @@
+name: Test Cahier
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: Enable KVM
+        run: |
+          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
+          sudo udevadm control --reload-rules
+          sudo udevadm trigger --name-match=kvm
+
+      - name: Run unit tests
+        run: ./gradlew :app:testDebugUnitTest
+
+      - name: Run Android tests on Large Desktop Emulator
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: 33
+          device: desktop_large
+          arch: x86_64
+          script: ./gradlew :app:connectedAndroidTest

app/build.gradle.kts

@@ -17,6 +17,7 @@ plugins {
     alias(libs.plugins.androidApplication)
     alias(libs.plugins.jetbrainsKotlinAndroid)
     alias(libs.plugins.ksp)
+    alias(libs.plugins.roborazzi)
     id("org.jetbrains.kotlin.plugin.compose") version "2.2.20"
     id("kotlin-parcelize")
     kotlin("plugin.serialization")
@@ -61,6 +62,14 @@ android {
             excludes += "/META-INF/{AL2.0,LGPL2.1}"
         }
     }
+    testOptions {
+        unitTests {
+            isIncludeAndroidResources = true
+        }
+    }
+    roborazzi {
+        outputDir.set(file("src/screenshots"))
+    }
 }
 
 dependencies {
@@ -97,6 +106,12 @@ dependencies {
     testImplementation(libs.androidx.arch.core.testing)
     testImplementation(libs.kotlinx.coroutines.test)
     testImplementation(libs.turbine)
+    testImplementation(libs.robolectric)
+    testImplementation(libs.roborazzi)
+    testImplementation(libs.roborazzi.compose)
+    testImplementation(libs.roborazzi.rule)
+    testImplementation(platform(libs.androidx.compose.bom))
+    testImplementation(libs.androidx.ui.test.junit4)
 
     // Android Testing - For instrumented tests
     androidTestImplementation(libs.androidx.junit)

app/src/androidTest/java/com/example/cahier/CahierListDetailTest.kt

@@ -1,5 +1,6 @@
 package com.example.cahier
 
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.test.DeviceConfigurationOverride
 import androidx.compose.ui.test.ForcedSize
 import androidx.compose.ui.test.junit4.createComposeRule
@@ -25,19 +26,9 @@ class CahierListDetailTest {
     fun homeScreen_showListOnly() {
         composeTestRule.setContent {
             DeviceConfigurationOverride(
-                DeviceConfigurationOverride.ForcedSize(
-                    DpSize(
-                        width = 400.dp,
-                        height = 900.dp
-                    )
-                )
+                DeviceConfigurationOverride.ForcedSize(compatWidthWindow)
             ) {
-                HomePane(
-                    navigateToCanvas = { _ -> },
-                    navigateToDrawingCanvas = { _ -> },
-                    navigateUp = {},
-                    homeScreenViewModel = fakeViewModel
-                )
+                HomeContent()
             }
         }
 
@@ -49,23 +40,34 @@ class CahierListDetailTest {
     fun homeScreen_showListAndDetail() {
         composeTestRule.setContent {
             DeviceConfigurationOverride(
-                DeviceConfigurationOverride.ForcedSize(
-                    DpSize(
-                        width = 1200.dp,
-                        height = 900.dp
-                    )
-                )
+                DeviceConfigurationOverride.ForcedSize(mediumWidthWindow)
             ) {
-                HomePane(
-                    navigateToCanvas = { _ -> },
-                    navigateToDrawingCanvas = { _ -> },
-                    navigateUp = {},
-                    homeScreenViewModel = fakeViewModel
-                )
+                HomeContent()
             }
         }
 
         composeTestRule.onNodeWithTag("List").assertExists()
         composeTestRule.onNodeWithTag("Detail").assertExists()
     }
+
+
+    private val mediumWidthWindow = DpSize(
+        width = 1200.dp,
+        height = 900.dp
+    )
+
+    private val compatWidthWindow = DpSize(
+        width = 400.dp,
+        height = 900.dp
+    )
+
+    @Composable
+    private fun HomeContent() {
+        HomePane(
+            navigateToCanvas = { _ -> },
+            navigateToDrawingCanvas = { _ -> },
+            navigateUp = {},
+            homeScreenViewModel = fakeViewModel
+        )
+    }
 }

app/src/test/java/com/example/cahier/ScreenshotTest.kt

@@ -0,0 +1,53 @@
+package com.example.cahier
+
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onRoot
+import com.example.cahier.data.FakeNotesRepository
+import com.example.cahier.ui.HomePane
+import com.example.cahier.ui.viewmodels.HomeScreenViewModel
+import com.github.takahirom.roborazzi.RobolectricDeviceQualifiers
+import com.github.takahirom.roborazzi.captureRoboImage
+import org.junit.Rule
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.RobolectricTestRunner
+import org.robolectric.annotation.Config
+import org.robolectric.annotation.GraphicsMode
+
+@GraphicsMode(GraphicsMode.Mode.NATIVE)
+@RunWith(RobolectricTestRunner::class)
+class ScreenshotTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    private val fakeViewModel = HomeScreenViewModel(FakeNotesRepository())
+
+    @Composable
+    private fun HomeContent() {
+        HomePane(
+            navigateToCanvas = { _ -> },
+            navigateToDrawingCanvas = { _ -> },
+            navigateUp = {},
+            homeScreenViewModel = fakeViewModel
+        )
+    }
+
+    @Config(qualifiers = RobolectricDeviceQualifiers.MediumTablet)
+    @Test
+    fun globalNavigation_showNavRail() {
+        composeTestRule.setContent { HomeContent() }
+
+        composeTestRule.onRoot().captureRoboImage("screenshots/screenshot_navrail.png")
+    }
+
+    @Config(qualifiers = RobolectricDeviceQualifiers.Pixel7Pro)
+    @Test
+    fun globalNavigation_showBottomNavBar() {
+        composeTestRule.setContent { HomeContent() }
+
+        composeTestRule.onRoot().captureRoboImage("screenshots/screenshot_bottomnavbar.png")
+    }
+}

app/src/test/resources/robolectric.properties

@@ -0,0 +1 @@
+sdk=34

gradle/libs.versions.toml

@@ -3,7 +3,6 @@ agp = "8.13.0"
 appcompatV7 = "1.7.1"
 coilCompose = "3.3.0"
 foundation = "1.9.2"
-gson = "2.13.2"
 hiltAndroid = "2.57.1"
 hiltNavigationCompose = "1.3.0"
 ink = "1.0.0-beta01"
@@ -36,6 +35,8 @@ coreTesting = "2.2.0"
 kotlinxCoroutinesTest = "1.10.2"
 turbine = "1.2.1"
 material3WindowSizeClass = "1.4.0"
+robolectric = "4.11.1"
+roborazzi = "1.8.0-alpha-5"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -54,7 +55,6 @@ appcompat-v7 = { module = "androidx.appcompat:appcompat", version.ref = "appcomp
 appcompat-v7-resources = { module = "androidx.appcompat:appcompat-resources", version.ref = "appcompatV7" }
 coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coilCompose" }
 coil-network-okhttp = { module = "io.coil-kt.coil3:coil-network-okhttp", version.ref = "coilCompose" }
-gson = { module = "com.google.code.gson:gson", version.ref = "gson" }
 hilt-android = { module = "com.google.dagger:hilt-android", version.ref = "hiltAndroid" }
 hilt-android-compiler = { module = "com.google.dagger:hilt-android-compiler", version.ref = "hiltAndroid" }
 junit = { group = "junit", name = "junit", version.ref = "junit" }
@@ -94,9 +94,14 @@ hilt-android-testing = { module = "com.google.dagger:hilt-android-testing", vers
 turbine = { module = "app.cash.turbine:turbine", version.ref = "turbine" }
 mockito-android = { module = "org.mockito:mockito-android", version.ref = "mockito" }
 androidx-compose-material3-window-size-class1 = { group = "androidx.compose.material3", name = "material3-window-size-class", version.ref = "material3WindowSizeClass" }
+robolectric = { group = "org.robolectric", name = "robolectric", version.ref = "robolectric" }
+roborazzi = { group = "io.github.takahirom.roborazzi", name = "roborazzi", version.ref = "roborazzi" }
+roborazzi-compose = { group = "io.github.takahirom.roborazzi", name = "roborazzi-compose", version.ref = "roborazzi" }
+roborazzi-rule = { group = "io.github.takahirom.roborazzi", name = "roborazzi-junit-rule", version.ref = "roborazzi" }
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }
 androidLibrary = { id = "com.android.library", version.ref = "agp" }
 jetbrainsKotlinAndroid = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
-ksp = { id = "com.google.devtools.ksp", version.ref = "ksp" }
+ksp = { id = "com.google.devtools.ksp", version.ref = "ksp" }
+roborazzi = { id = "io.github.takahirom.roborazzi", version.ref = "roborazzi" }