Let's see some tools to make UIView testing simpler and automated.

1. Unit Testing
UIView

2. Unit Testing vs UI Testing

3. Unit Testing vs UI Testing
UI
Tests
Service Tests
Unit Tests
more
integration
more
isolation
slower
faster

4. Example View

5. Example View
class ArticleTableViewCell: UITableViewCell {
@IBOutlet var dateLabel: UILabel!
@IBOutlet var titleLabel: UILabel!
@IBOutlet var sourceLabel: UILabel!
@IBOutlet var articleImageView: UIImageView!
}

6. Example View
struct ArticleViewModel {
let date: String
let title: String
let source: String
let image: UIImage?
}

7. Example View
extension ArticleTableViewCell {
func configure(with viewModel: ArticleViewModel) {
dateLabel.text = viewModel.date
titleLabel.text = viewModel.title
sourceLabel.text = viewModel.source
articleImageView.image = viewModel.image
}
}

8. Example View

9. Snapshot Testing
📸Snapshot

10. Snapshot Testing
📸Snapshot

11. Snapshot Testing
📸Snapshot
✅

12. Snapshot Testing
📸Snapshot
✅

13. Snapshot Testing
📸Snapshot
✅
❌

14. Snapshot Testing
📸Snapshot

15. Layout Testing
📐Layout

16. Layout Testing
📐Layout

17. Layout Testing
📐Layout

18. Layout Testing
📐Layout

19. Real Test
func testArticleTableViewCell() {
}

20. Real Test
func testArticleTableViewCell() {
!// Create input
let viewModel = ArticleViewModel(
date: "03/06/2019",
title: "2019 Worldwide Developers Conference",
source: "!!www.macrumors.com",
image: UIImage(named: "wwdc")
)
}

21. Real Test
func testArticleTableViewCell() {
!// Create input
let viewModel = ArticleViewModel(
date: "03/06/2019",
title: "2019 Worldwide Developers Conference",
source: "!!www.macrumors.com",
image: UIImage(named: "wwdc")
)
!// Create view
let view = ArticleTableViewCell()
view.backgroundColor = UIColor.white
view.frame = CGRect(x: 0, y: 0, width: 320, height: 300)
}

22. Real Test
func testArticleTableViewCell() {
!// Create input
let viewModel = ArticleViewModel(
date: "03/06/2019",
title: "2019 Worldwide Developers Conference",
source: "!!www.macrumors.com",
image: UIImage(named: "wwdc")
)
!// Create view
let view = ArticleTableViewCell()
view.backgroundColor = UIColor.white
view.frame = CGRect(x: 0, y: 0, width: 320, height: 300)
!// Pass input
view.configure(with: viewModel)
}

23. Real Test
func testArticleTableViewCell() {
!// Create input
let viewModel = ArticleViewModel(
date: "03/06/2019",
title: "2019 Worldwide Developers Conference",
source: "!!www.macrumors.com",
image: UIImage(named: "wwdc")
)
!// Create view
let view = ArticleTableViewCell()
view.backgroundColor = UIColor.white
view.frame = CGRect(x: 0, y: 0, width: 320, height: 300)
!// Pass input
view.configure(with: viewModel)
!// Layout view
view.setNeedsLayout()
view.layoutIfNeeded()
view.autoSize()
}

24. Real Test
func testArticleTableViewCell() {
!// Create input
let viewModel = ArticleViewModel(
date: "03/06/2019",
title: "2019 Worldwide Developers Conference",
source: "!!www.macrumors.com",
image: UIImage(named: "wwdc")
)
!// Create view
let view = ArticleTableViewCell()
view.backgroundColor = UIColor.white
view.frame = CGRect(x: 0, y: 0, width: 320, height: 300)
!// Pass input
view.configure(with: viewModel)
!// Layout view
view.setNeedsLayout()
view.layoutIfNeeded()
view.autoSize()
📸 / 📐
}

25. Real Test
func testArticleTableViewCell() {
!// Create input
let viewModel = ArticleViewModel(
date: "03/06/2019",
title: "2019 Worldwide Developers Conference",
source: "!!www.macrumors.com",
image: UIImage(named: "wwdc")
)
!// Create view
let view = ArticleTableViewCell()
view.backgroundColor = UIColor.white
view.frame = CGRect(x: 0, y: 0, width: 320, height: 300)
!// Pass input
view.configure(with: viewModel)
!// Layout view
view.setNeedsLayout()
view.layoutIfNeeded()
view.autoSize()
📸 / 📐
}

26. Correct View

27. Glitch Example

28. Glitch Example

29. All generated
inputs
Solution
Manual
input
Random
inputs
1 ∞ 100 ≠

30. All possible
inputs
Solution
Manual
input
Random
inputs
1 ∞ 100 ≠

31. All possible
inputs
Solution
Manual
input
Random
inputs
1 ∞ 100 ≠

32. Property based testing

33. Property Based Testing
!// Generate random inputs
for all (x, y, …)
!// Keep generating inputs while this is false
such that precondition(x, y, …)
!// Test the property
property(x, y, …) is true

34. Property Based Testing (Example)
!// Generate random inputs
for all (numbers: [Int])
!// Keep generating inputs while this is false
such that alwaysTrue(numbers)
!// Test the property
numbers.sort() is sorted
!!<=> numbers[n] !<= numbers[n + 1]

35. Back to UIView Testing
!// Generate random view models
for all (viewModel: ArticleViewModel)
view.configure(with: viewModel)
!// Test the property
view.snapshot is matching
!&& view.layout is valid

36. Real Test
func testArticleTableViewCell() {
!// Create input
let viewModel = ArticleViewModel(
date: "03/06/2019",
title: "2019 Worldwide Developers Conference",
source: "!!www.macrumors.com",
image: UIImage(named: "wwdc")
)
!// Create view
let view = ArticleTableViewCell()
view.backgroundColor = UIColor.white
view.frame = CGRect(x: 0, y: 0, width: 320, height: 300)
!// Pass input
view.configure(with: viewModel)
!// Layout view
view.setNeedsLayout()
view.layoutIfNeeded()
view.autoSize()
📸 / 📐
}

37. Real Test
func testArticleTableViewCell() {
!// Create input
let viewModel = ArticleViewModel(
date: "03/06/2019",
title: "2019 Worldwide Developers Conference",
source: "!!www.macrumors.com",
image: UIImage(named: "wwdc")
)
!// Create view
let view = ArticleTableViewCell()
view.backgroundColor = UIColor.white
view.frame = CGRect(x: 0, y: 0, width: 320, height: 300)
!// Pass input
view.configure(with: viewModel)
!// Layout view
view.setNeedsLayout()
view.layoutIfNeeded()
view.autoSize()
📸 / 📐
}

38. Real Test
func testArticleTableViewCell() {
let viewModel = ArticleViewModel(
date: "03/06/2019",
title: "2019 Worldwide Developers Conference",
source: "!!www.macrumors.com",
image: UIImage(named: "wwdc")
)
testArticleView(with: viewModel)
}

39. func testArticleTableViewCell() {
for viewModel in randomViewModels {
testArticleView(with: viewModel)
}
}
Real Test

40. func testArticleTableViewCell() {
for viewModel in randomViewModels {
testArticleView(with: viewModel)
}
}
Real Test

41. Random Generators

42. Random Generation
struct Gen<A> {
let unGen : (RNG) !-> A
}

43. Create Generators
let wordGen = …

44. Create Generators
let wordGen = Gen<Int>.chooseAny() !// Gen<Int>

45. Create Generators
let wordGen = Gen<Int>.chooseAny()
.suchThat { 97 !<= $0 !&& $0 !<= 122 } !// Gen<Int>

46. Create Generators
let wordGen = Gen<Int>.chooseAny()
.suchThat { 97 !<= $0 !&& $0 !<= 122 }
.map { Character(UnicodeScalar($0)!) } !// Gen<Character>

47. Create Generators
let wordGen = Gen<Int>.chooseAny()
.suchThat { 97 !<= $0 !&& $0 !<= 122 }
.map { Character(UnicodeScalar($0)!) }
.proliferate !// Gen<[Character]>

48. Create Generators
let wordGen = Gen<Int>.chooseAny()
.suchThat { 97 !<= $0 !&& $0 !<= 122 }
.map { Character(UnicodeScalar($0)!) }
.proliferate
.map { String.init($0) } !// Gen<String>

49. Compose Generators
let componentGen: Gen<CGFloat> = Gen<Int>
.choose((0, 255))
.map { CGFloat($0) / 255.0 }

50. Compose Generators
let componentGen: Gen<CGFloat> = Gen<Int>
.choose((0, 255))
.map { CGFloat($0) / 255.0 }
let colorGen = Gen<UIColor>.compose { c in
return UIColor(
red: c.generate(using: componentGen),
green: c.generate(using: componentGen),
blue: c.generate(using: componentGen),
alpha: 1.0
)
}

51. Compose Generators
let componentGen: Gen<CGFloat> = Gen<Int>
.choose((0, 255))
.map { CGFloat($0) / 255.0 }
let colorGen = Gen<UIColor>.compose { c in
return UIColor(
red: c.generate(using: componentGen),
green: c.generate(using: componentGen),
blue: c.generate(using: componentGen),
alpha: 1.0
)
}

52. Generate View Models
let words: Gen<String> = …
let sentences: Gen<String> = …
func image(min: Int, max: Int) !-> Gen<UIImage> { … }

53. Generate View Models
let words: Gen<String> = …
let sentences: Gen<String> = …
func image(min: Int, max: Int) !-> Gen<UIImage> { … }
let viewModelGen = Gen<ArticleViewModel>.compose { c in
return ArticleViewModel(
date: c.generate(using: .words),
title: c.generate(using: .sentences),
source: c.generate(using: .words),
image: c.generate(using: .image(min: 50, max: 100))
)
}

54. Generate View Models
let words: Gen<String> = …
let sentences: Gen<String> = …
func image(min: Int, max: Int) !-> Gen<UIImage> { … }
let viewModelGen = Gen<ArticleViewModel>.compose { c in
return ArticleViewModel(
date: c.generate(using: .words),
title: c.generate(using: .sentences),
source: c.generate(using: .words),
image: c.generate(using: .image(min: 50, max: 100))
)
}

55. Generated Views

56. Generated Views

57. Generated Views

58. Generated Views

59. Generated Views

60. Layout Error

61. Layout Error

62. In Practice
📸
📐
SnapshotTesting
iOSSnapshotTestCase
ADAssertLayout
⚙ ADLayoutTest
🎲 SwiftCheck

63. Resources
ADAssertLayout: https://github.com/applidium/ADAssertLayout
ADLayoutTest: https://github.com/applidium/ADLayoutTest
iOSSnapshotTestCase: https://github.com/uber/ios-snapshot-test-case
SnapshotTesting: https://github.com/pointfreeco/swift-snapshot-testing
SwiftCheck: https://github.com/typelift/SwiftCheck

64. Thank you
CONTACT
Pierre FELGINES
@PierreFelgines