UI Testing with Espresso: Elevating the User Experience in QuotesApp

Now that our backend logic is solid and our MVVM components integrate perfectly, it’s time to ensure that our users get the best experience possible. In this article, we’ll cover UI testing using Espresso. We’ll validate that our MainActivity launches correctly, that the Material Toolbar (with its centered title) and status bar display proper pastel colors, that our RecyclerView shows neatly laid-out quote cards (with their neumorphic-inspired design and global Courgette font), and that user interactions like swipes and clicks behave as expected.

Project Directory Overview

QuotesApp/
└── app/
    ├── src/
    │   ├── main/
    │   │   ├── java/com/maha/quotesapp/
    │   │   │   ├── data/
    │   │   │   │   ├── model/
    │   │   │   │   │   └── Quote.kt
    │   │   │   │   └── repository/
    │   │   │   │       └── ContentRepository.kt
    │   │   │   ├── network/
    │   │   │   │   ├── RetrofitInstance.kt
    │   │   │   │   └── QuotesService.kt
    │   │   │   ├── ui/
    │   │   │   │   ├── MainActivity.kt
    │   │   │   │   ├── adapter/
    │   │   │   │   │   └── QuotesAdapter.kt
    │   │   │   │   └── viewmodel/
    │   │   │   │       └── ContentViewModel.kt
    │   │   └── res/
    │   │       ├── layout/
    │   │       │   ├── activity_main.xml
    │   │       │   ├── item_quote.xml
    │   │       │   └── neumorphic_bg.xml
    │   │       ├── values/
    │   │       │   ├── colors.xml
    │   │       │   └── styles.xml
    │   │       └── font/
    │   │           └── courgette_font.ttf
    ├── test/           # Unit tests
    └── androidTest/
        └── java/com/maha/quotesapp/ui/
            └── MainActivityUITest.kt

The UI tests reside in the androidTest folder. We’ll be using Espresso along with the AndroidX test framework to simulate real user interaction on this layout.

What Are We Testing?

In our UI tests, we aim to verify three main aspects:

1. Launching MainActivity: Ensure that the Material Toolbar is displayed correctly with the centered title (“QuotesApp”) and that the status bar color matches our pastel primary color.
2. RecyclerView Functionality: Confirm that the RecyclerView is visible; simulate scrolling to verify that our beautifully designed (neumorphic-inspired) quote cards render as expected.
3. User Interactions: Replicate common user actions like clicks and swipes on a RecyclerView item to validate responsiveness and UI behavior.

Below is our Espresso test file — MainActivityUITest.kt — with detailed comments explaining each step.

// File: app/src/androidTest/java/com/maha/quotesapp/ui/MainActivityUITest.kt

package com.maha.quotesapp.ui

import androidx.test.core.app.ActivityScenario
import androidx.test.espresso.Espresso.onView
import androidx.test.espresso.action.ViewActions.click
import androidx.test.espresso.action.ViewActions.scrollTo
import androidx.test.espresso.contrib.RecyclerViewActions
import androidx.test.espresso.matcher.ViewMatchers.*
import androidx.test.ext.junit.rules.ActivityScenarioRule
import androidx.test.ext.junit.runners.AndroidJUnit4
import com.maha.quotesapp.R
import org.hamcrest.Matchers.allOf
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith

// Use the AndroidJUnit4 test runner
@RunWith(AndroidJUnit4::class)
class MainActivityUITest {

    // Launch MainActivity with activity rule for UI tests.
    @get:Rule
    val activityRule = ActivityScenarioRule(MainActivity::class.java)

    @Test
    fun checkToolbarAndStatusBar() {
        // Verify Material Toolbar: Check that the toolbar has the title "QuotesApp"
        onView(allOf(withParent(withId(R.id.topAppBar)), withText("QuotesApp")))
            .check(matches(isDisplayed()))

        // Note: To verify status bar color, we can obtain the activity instance and compare color values.
        // This task is more suited for integration tests using Robolectric.
        // Here, we assume that MainActivity sets the status bar color as part of its initialization.
    }

    @Test
    fun checkRecyclerViewIsDisplayedAndScrollable() {
        // Verify that the RecyclerView is displayed on screen
        onView(withId(R.id.rvQuotes))
            .check(matches(isDisplayed()))

        // Simulate scrolling to the first item in the RecyclerView
        onView(withId(R.id.rvQuotes))
            .perform(RecyclerViewActions.scrollToPosition(0))
    }

    @Test
    fun performUserInteractionOnRecyclerViewItem() {
        // Simulate a click on the first item of the RecyclerView
        // This action represents a typical user tapping on a quote card
        onView(withId(R.id.rvQuotes))
            .perform(
                RecyclerViewActions.actionOnItemAtPosition<androidx.recyclerview.widget.RecyclerView.ViewHolder>(0, click())
            )

        // Additional checks could include verifying that a new Activity or Dialog is displayed (if applicable)
        // For this demo, we simply simulate the click.
    }
}

Explaining the Test Code

• ActivityScenarioRule: This rule automatically launches MainActivity before each test, ensuring that the Activity is in the proper lifecycle state.
• Toolbar Verification: The onView with combined matchers (allOf and withParent) checks that a descendant within the top toolbar has the exact text "QuotesApp". Note: Checking the status bar color typically requires an integration test with Robolectric; here we focus on UI components visible on the screen.
• RecyclerView Tests: We first verify that the RecyclerView is displayed. Then, using RecyclerViewActions, we simulate scrolling to the first item in the list. This confirms that the layout is correctly populated and that the scrolling functionality is intact.
• User Interaction Simulation: The click action on the first item in the RecyclerView simulates a common user action. In a complete app, this might navigate to a detail screen or bring up additional information. For our test, it confirms that the user interaction is registered.

Conclusion

UI testing with Espresso ensures that the user experience in QuotesApp is flawless — from the initial launch to everyday interactions. By automating tests for the Material Toolbar’s correctness, ensuring the RecyclerView functions smoothly, and simulating user interactions, we gain confidence that our app will perform as intended in the hands of users.

Stay tuned for the next article in our series, where we take on End-to-End Testing and CI/CD Integration to further automate and secure your app’s quality.

Happy testing!