Roman Tysiachnik: Auto-generated Snapshot Tests Over SwiftUI Previews

Presentation from CocoaHeads Berlin hosted by Grammarly in February 2023.

Transcript

1. Auto-generated snapshot tests over SwiftUI previews Roman Tysiachnik
2. Meet the speaker iOS Software Engineer / Grammarly Roman Tysiachnik Auto-generated snapshot tests over SwiftUI previews
3. Agenda Development flow with snapshots and previews 3 A quick look at snapshot tests Test cases based on SwiftUI previews Tests auto-generation
4. 01 A quick look at snapshot tests Auto-generated snapshot tests over SwiftUI previews
5. What are snapshot tests? A QUICK LOOK AT SNAPSHOT TESTS Snapshot tests compare your UI using two images generated from your views. Generated images of your UI can be stored in your Git repository, representing the current state of your UI. You can run these tests on CI to ensure that your UI looks like you expect in all states that are important for you. Auto-generated snapshot tests over SwiftUI previews
6. What are the benefits of snapshot tests? A QUICK LOOK AT SNAPSHOT TESTS Auto-generated snapshot tests over SwiftUI previews • iPhone 12 Pro Max vs. iPhone SE • iPhone vs. iPad • Light vs. dark mode • Major iOS updates • Accessibility settings • Split view or floating mode • Rare cases (e.g., app clips, app extensions) These tests allow you to examine what your UI looks like not only after updating or refactoring your code but also after changing the environment. Examples:
7. What snapshots do we have for our keyboard? A QUICK LOOK AT SNAPSHOT TESTS Auto-generated snapshot tests over SwiftUI previews Usually, people think a keyboard is just a set of keys arranged in a few rows.
8. In reality, we have thousands of possible states A QUICK LOOK AT SNAPSHOT TESTS Auto-generated snapshot tests over SwiftUI previews There are different layouts, keyboard types, return keys, user settings, regions, and much more—without even including the variation of devices and iOS versions. Examples of snapshot tests for our keyboard
9. Even more combinations when it comes to iPads A QUICK LOOK AT SNAPSHOT TESTS Auto-generated snapshot tests over SwiftUI previews We have five iPad types that have completely different setups. You can compare the most notable snapshots of the same keyboard with the same configuration, but on different devices. iPad 9 iPad Pro 11 iPad Pro 12.9
10. The iPad keyboard is also configurable A QUICK LOOK AT SNAPSHOT TESTS Auto-generated snapshot tests over SwiftUI previews Different configurations can also make notable changes—like on iPad Pro 12.9, where we use an alternative keyboard layout that has a large return button. QWERTY AZERTY
11. And that was only the keyboard . . . Auto-generated snapshot tests over SwiftUI previews A QUICK LOOK AT SNAPSHOT TESTS
12. 02 Snapshot tests flow Auto-generated snapshot tests over SwiftUI previews
13. What’s needed to start? 1 2 3 Choose a tool • ios-snapshot-test-case by Uber Set up unit tests bundle Configure Git LFS Store your images in a large file storage for faster interactions with your Git. SNAPSHOT TESTS FLOW Auto-generated snapshot tests over SwiftUI previews • Target scheme • Test plan • swift-snapshot-testing by Point-Free
14. 1 2 3 4 Usual developer’s flow with snapshot tests Auto-generated snapshot tests over SwiftUI previews SNAPSHOT TESTS FLOW Design Create a SwiftUI, AppKit, or UIKit view that uses plain models instead of mocked services. Development Use SwiftUI previews to quickly develop UI without launching the application. Testing Write snapshot test cases that cover the most important states of the application. Ready to go! Record snapshots and push all your new changes to your remote repository.
15. 1 2 3 4 Usual developer’s flow with snapshot tests Auto-generated snapshot tests over SwiftUI previews SNAPSHOT TESTS FLOW Design Create a SwiftUI, AppKit, or UIKit view that uses plain models instead of mocked services. Development Use SwiftUI previews to quickly develop UI without launching the application. Testing Write snapshot test cases that cover the most important states of the application. Ready to go! Record snapshots and push all your new changes to your remote repository. 2 3
16. 03 Test cases based on SwiftUI previews Auto-generated snapshot tests over SwiftUI previews
17. Add photo/illustration here What dependencies do we have in our example? Before we start Auto-generated snapshot tests over SwiftUI previews Snapshotting swift-snapshot-testing by Point-Free generates and compares images. It doesn’t require any subclasses and provides a rich set of functionalities. Inspecting ViewInspector by Nalexn allows for traversing a view hierarchy at runtime for testing. For example, to find some specific view in the hierarchy. TEST CASES BASED ON SWIFTUI PREVIEWS
18. Add photo/illustration here Still not using SwiftUI previews for your UIKit code? Before we start Visit our engineering blog to learn how we applied SwiftUI previews for our existing UIKit code and improved our UI development process. Auto-generated snapshot tests over SwiftUI previews https://www.grammarly.com/blog/engineering/swiftui-uikit/ TEST CASES BASED ON SWIFTUI PREVIEWS
19. Add photo/illustration here Auto-generated snapshot tests over SwiftUI previews Handy type to render UIKit view in SwiftUI TEST CASES BASED ON SWIFTUI PREVIEWS
20. Imagine we have some UIKit view Auto-generated snapshot tests over SwiftUI previews TEST CASES BASED ON SWIFTUI PREVIEWS
21. And that view has SwiftUI previews Auto-generated snapshot tests over SwiftUI previews TEST CASES BASED ON SWIFTUI PREVIEWS
22. Finally, we create snapshot tests Auto-generated snapshot tests over SwiftUI previews TEST CASES BASED ON SWIFTUI PREVIEWS
23. To get rid of an extra step, we turn this . . . Auto-generated snapshot tests over SwiftUI previews TEST CASES BASED ON SWIFTUI PREVIEWS
24. . . . into this Auto-generated snapshot tests over SwiftUI previews TEST CASES BASED ON SWIFTUI PREVIEWS
25. A container view to define test cases globally Auto-generated snapshot tests over SwiftUI previews TEST CASES BASED ON SWIFTUI PREVIEWS
26. We can extract all test cases from SwiftUI previews Auto-generated snapshot tests over SwiftUI previews TEST CASES BASED ON SWIFTUI PREVIEWS
27. It can be described in multiple ways, but . . . Auto-generated snapshot tests over SwiftUI previews TEST CASES BASED ON SWIFTUI PREVIEWS
28. 1 2 3 4 3 Getting back to our flow Auto-generated snapshot tests over SwiftUI previews TEST CASES BASED ON SWIFTUI PREVIEWS Design Create a SwiftUI, AppKit, or UIKit view that uses plain models instead of mocked services. Development Use SwiftUI previews to quickly develop UI without launching the application. Testing Define the snapshot test class using test cases from SwiftUI previews. Ready to go! Record snapshots and push all your new changes to your remote repository.
29. Add photo/illustration here If tests are already written, why do we redefine them? SwiftUI previews display our view in all sizes, traits, and model states that we’re interested in. So why don’t we use something that will find these previews and transform them in snapshot tests? Presentation title TEST CASES BASED ON SWIFTUI PREVIEWS Auto-generated snapshot tests over SwiftUI previews
30. 04 Tests auto-generation Auto-generated snapshot tests over SwiftUI previews
31. Use Sourcery Another option is to define a protocol and create a template, where we will generate a new test-case class for all types that conform to this protocol. Auto-generated snapshot tests over SwiftUI previews A configuration-of-generation step for all targets Slow integration time Using Stencil or Swift to create a template Template to maintain Git conflicts if you store generated files Third-party dependency that may stop working TESTS AUTO-GENERATION
32. Find test cases in runtime We’ve decided to stop on an option where our test cases won’t be generated in compile time, but will be added to our test suite when we launch tests. Basically, we’re looking for our test cases among the types available in runtime. Auto-generated snapshot tests over SwiftUI previews No configuration-for-generation step in Xcode project Medium integration time Using Swift to define a dynamic base class No templates to maintain No Git conflicts since we don’t generate any code No third-party dependencies 32 TESTS AUTO-GENERATION
33. Step 1 Auto-generated snapshot tests over SwiftUI previews TESTS AUTO-GENERATION Create a dynamic test-case class
34. Create a base dynamic test case for snapshots Auto-generated snapshot tests over SwiftUI previews TESTS AUTO-GENERATION Step 2
35. We use custom protocol to run snapshot tests where we expect Auto-generated snapshot tests over SwiftUI previews TESTS AUTO-GENERATION Step 2a
36. Get a list of classes in runtime Auto-generated snapshot tests over SwiftUI previews TESTS AUTO-GENERATION Step 3
37. Get all test-case providers Auto-generated snapshot tests over SwiftUI previews TESTS AUTO-GENERATION Step 4
38. Add a dynamic test case to class Auto-generated snapshot tests over SwiftUI previews TESTS AUTO-GENERATION Step 5
39. Use a snapshot test class in your app and modules Auto-generated snapshot tests over SwiftUI previews TESTS AUTO-GENERATION Step 6
40. And that’s what we’ve got! TESTS AUTO-GENERATION Auto-generated snapshot tests over SwiftUI previews
41. Here’s our final flow 1 2 3 Design Create a SwiftUI, AppKit, or UIKit view that uses plain models instead of mocked services. Development Create SwiftUI previews marked as SnapshotTestCase for a quick UI development and tests definition. Ready to go! Record snapshots and push all your new changes to your remote repository. TESTS AUTO-GENERATION Auto-generated snapshot tests over SwiftUI previews
42. Summary Auto-generated snapshot tests over SwiftUI previews Use snapshot tests to validate your UI after you change your code or your environment. Use SwiftUI previews to quickly develop UIKit and AppKit views. SwiftUI previews are perfect test-case candidates for your snapshot tests. You can use runtime tests generation to reduce the amount of code in your merge requests.
43. Q&A