Encore is a family of design systems that was created to promote consistency in UI throughout the Spotify ecosystem. This includes the major platforms like Web and Mobile. Encore Consumer Mobile, or ECM for short, is part of this family and it is the design language system for the Music & Podcasts App.
The ECM library hosts the UI Components that you see across the app. Here are a few examples:
Components are reusable as a whole, or in part. For instance, the track row is a Component that is integrated in 4 places in the app — P2S playlists, Vanilla playlists, your listening history and your liked songs. In the future, when ubiquitous Components like buttons and headers are migrated to Encore, the benefits of enforcing design guidelines will become more apparent. These UI Components form the backbone of our app. On top of this, we have an Encore Reference App that showcases the various Components and UI building blocks (or Elements) available:
Components are meant to be reusable (as long as they have the same semantic meaning), and Elements that make up Components are meant to be reusable as well. Sometimes different Components have a shared base layout that can be built upon. This means that a small change in any of the shared UI logic might cause unintended breakage in other Components.
Why Snapshot Testing?
One of the tools that ECM provides is Snapshot Testing. Snapshot Testing allows us to see easily if there are any visual breaking changes when we edit our code. It ensures that our Components always remain pixel perfect. Users can create or override Encore Components with a peace of mind.
Let us take a look at the 2 screenshots below:
At first glance, they might look exactly the same, but there is actually a 2 density pixel difference in the width of the Artwork View. The difference can be seen in the middle screen below.
While these differences seem small, they may cumulatively degrade the experience of our users. Snapshot Testing also helps to detect:
- Padding, color and styling changes
- Logic issues with how data is presented
- How edge cases, like null or empty data, are displayed
- Changes introduced by a version change in external libraries such as RecyclerView or ConstraintLayout
- Changes introduced by a version change in our internal libraries such as Encore Foundation
How does it work?
Snapshot testing works by comparing the original (and correct) snapshots with current snapshots on every test run. This set of original snapshots are also known as golden images. Golden images are stored using git-lfs with Artifactory backing. This means that the images you upload are versioned with git, as with your usual lines of code.
We are using the Paparazzi library to implement Snapshot Testing. Paparazzi is an open source Android library that renders application screens without a physical device or emulator. It uses the same library that renders layout previews in Android Studio. The local developer experience using Paparazzi is equivalent to running unit tests. We opted for unit tests in favor of integration tests like Espresso because we wanted to reduce test flakiness. Running tests on emulators can be unreliable sometimes because we are dealing with more factors than what we care for.
Locally, on your developer machine, there are 2 commands that you can run for each test — Record and Verify. “Record” creates a set of golden images for your unit test, and “verify” checks against the golden images to see if any changes you have made in code has altered a Component unintentionally. During Continuous Integration, checks for your PR should fail if there are any differences in snapshots. These checks are performed during pre-merge.
We also created a scaffolding of a Snapshot test class for developers when you run the script to create an Encore Component.
Future Enhancements
Testing for Accessibility
Accessibility is an integral part of user experience and next up on our roadmap is to provide support for Right-to-left (RTL) regression.
Error Reporting
For better visibility, we can possibly add a Github check in Github Enterprise, like it is currently being done in the Glue repository for iOS:
Developer Experience
When images are uploaded as PNGs instead of being stored as git-lfs files, the following error might occur when you rebase with the master branch. One possible solution to this is to introduce a commit hook to fail pre-merge check if a golden image is pushed without git-lfs.
Side note: this was written in 2021 and many enhancements might have been made since then.