Animations offer fluid visual transactions between the various states of an app UI. In iOS application development, animations are used for repositioning views or modifying their sizes and also for hiding views or removing views from hierarchies. Animations play a vital role in implementing amazing visual effects in the application and also convey visual feedback for users’ actions. And, the outcome is an engaging & dynamic UI and an elevated UX for iOS app users.
An animated view is a custom view that changes its look or appearance in response to some context. For example, a carousel layout has several slides that change in size and appearance in response to the user’s interaction. However, animated views will function as expected and provide an amazing UX only if they are tested correctly. And, it’s challenging to test animated views in iOS apps as animations involve time-based modifications in the UI.
Key Steps to test animated views in iOS
Identify the Animated View and its Components
- Identify the type of animation you intend to use in the app -zoom in/zoom out, fade in/fade out, slide in/slide out, etc.
- Set the duration time of the animation – the time taken for the completion of the animation. Decide on this time very carefully as it determines the effect of your animation.
- Identify the specific user interactions or the particular events that will trigger the animation to function. Examples of such triggers include scrolling, button tapping, etc.
- Examine how accurately and precisely the animation will be working or behaving.
- Check how the animation is impacting the app’s CPU, performance, and memory usage.
- Consider the feedback app users will get during and after the animation – visual indicators or haptic feedback.
Set up the Test Environment
Now, you need to set up a test environment that will enable you to inspect the views and manipulate them during various phases of the animation. Check out the key steps for this.
Create a separate test target and also separate files for every component. This way, you can verify every component’s expected behavior separately. For creating a separate target for your test environment, go to ‘File’, then ‘New,’ and then ‘Target.’ Select the “iOS Unit Testing Bundle” present under the “Test” section. A new target gets created. You can use this target for writing tests for animated views. Also, create a test class for the animated views. This class should contain test cases that will simulate various stages of the animation process and assert that the views are going to function as desired.
Now, configure a test fixture that contains the view you’ll test. Here, there can be any essential dependencies like data sources or view models. You also need to set up mock objects for dependencies like data sources or any other views and create the necessary test data.
Write Unit Tests for the underlying logic of the iOS App
Break down the animations into small-sized components and then test each component individually. This practice is better than testing the whole animation in a single go. Here’s an example. There’s a custom view that gets animated when tapped. Here, you need to check whether the view changes when you tap on it and whether the view’s color changes when you tap it. You should also ensure that the view animates smoothly without any jerks.
Now, identify the components present in the animation. Write test cases for every component to verify whether the components are working as desired. It’s recommended to use the Apple-provided XCTest framework for writing the tests. For instance, XCTestExpectation allows you to wait for the animation to get completed before you make any assertions. With this tool, you can test the behavior of the view at various phases of the animation.
Debug using the in-built Debug Tools for Animations in Xcode
Xcode comes with a wide range of in-built debug tools that facilitate debugging animations. Such tools help you understand how the animations are functioning and identify bugs. Thanks to these tools, you can perform actions like setting breakpoints in your code for pausing the animation at particular points so that you can investigate the view’s state. As such, you can identify those logical errors present in the code that is affecting the animation’s functioning.
What are the different Methodologies to test Animated Views in iOS?
Asynchronous Testing
Animations involve delays or callbacks which occur asynchronously. So, you need to conduct asynchronous testing while testing animated views. Take a look at the steps for asynchronous testing:
Step#1
let animationExpectation = XCTestExpectation(description: “Animation completed”)
// Start animation code here
// After the animation is completed, fulfill the expectation
animationCompletionHandler = {
animationExpectation.fulfill()
}
// Wait till the expectation gets fulfilled
wait(for: [animationExpectation], timeout: 5)
Step#2
Several iOS animation APIs contain completion handlers that get called after the animation gets completed. Testers use these completion handlers to conduct tests after the completion of the animation. Look at this example!
// Start animation code here
// At the end of the animation, perform the test
animationCompletionHandler = {
// Perform test here
}
Step#3
Certain animations might involve modification of the UI’s state; this needs to be carried out on the main thread. Here, you have to use dispatch queues. This way, you can execute the test code on the main thread after the animation completes. Take a look at how it happens!
// Start animation code here
// At the end of the animation, perform the test on the main queue
animationCompletionHandler = {
DispatchQueue.main.async {
// Perform test here
}
}
Manual Testing
Make sure that you conduct the testing on simulated as well as real devices. You need this process to check whether the animations will function as desired on every kind of device and OS version.
Manual testing involves interacting manually with the view and observing how the animation is behaving. This is how manual testing is carried out. Testers run the iOS application on either a device or in the iOS simulator. Then, they manually trigger the animation by interacting with the application. This way, you can find out animation issues like unexpected behavior or any glitches in its functioning. Remember, that the behavior of animations may be different on various devices and simulators. So, test animated views across different environments to get the best results.
Automated Testing
Create automated tests for the animated views using testing frameworks like EarlGrey, XCUITest, or KIF for simulating user interactions and checking whether the animations behave as desired. Automated testing helps you to detect issues in the early phases of the developmental cycle. This testing approach also allows you to keep your animation functional while you modify the code.
Step#1
Step#2
Step#3
Step#4
func testButtonAnimation() {
let app = XCUIApplication()
app.launch()
let button = app.buttons[“myButton”]
button.tap()
// Verify the animation
let animationExpectation = expectation(description: “Button animation completed”)
DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
XCTAssertTrue(button.frame.origin.x > 0, “Button should move to the right during animation”)
animationExpectation.fulfill()
}
waitForExpectations(timeout: 2.0, handler: nil)
}