Максим Гришутин — Выжимаем максимум из SwiftUI Preview

Transcript

1. Выжимаем максимум из SwiftUI Preview Максим Гришутин 
 Руководитель группы разработки мобильных приложений iOS 
 Ozon Tech
2. • Успел поработать над: • White label-приложением для банков (ВТБ, ОТП, Абсолют и еще 100+) • UI/UX голосового помощника «Олег» в Тинькофф Немного обо мне 2 • Я отвечаю за iOS-приложение для селлеров в Ozon • Преподаватель iOS-курсов по SwiftUI в Ozon School Route 256 • Стараюсь внедрять и продвигать новые технологии 🚀
3. • Что мы будем 🍏 выжимать из Preview • Про SwiftUI Preview • Реализуем основу генерации • Генерируем: • Playbook app • Performance-анализ • Snapshot-тесты • Accessibility-тесты • Project 🔥 Pre fi re • Подведем итоги О чем мы поговорим 3
4. Что мы будем 🍏 выжимать из Previews 4
5. А не как сейчас, на 20% Что будет, если использовать свой 🧠 Preview на 100%? 5
6. Как использовать Preview? Как нужно использовать Preview: • Генерация Playbook app • Генерация Performance-анализа • Генерация Snapshot-тестов • Генерация Accessibility-тестов Выжимаем максимум 6 Как обычно используют Preview: • Просмотр верстки • Взаимодействие с view
7. Какие проблемы решаем SwiftUI Previews имеют уже готовые view А зачем вообще выжимать Preview? 7 Куда еще нужны готовые view? • Playbook app • Performance-анализ • Snapshot-тесты • Accessibility-тесты
8. Одна из главных проблем Ручное написание кода Так какая проблема решается? 8
9. Про SwiftUI Preview 9
10. Что это такое? Нативная система для простого просмотра/взаимодействия с View Про SwiftUI Preview 10 struct CircleImage: View { var body: some View { Image("nature") .clipShape(Circle()) .overlay(Circle().stroke(Color.white, lineWidth: 4)) .shadow(radius: 7) } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage() .previewLayout(.sizeThatFits) } }
12. • Нативный Apple подход • Простой и быстрый просмотр любой View • Статичные view • Гибкая настройка устройства для Preview Преимущества SwiftUI Preview 12
13. Это могло быть названием темы, но … Deep dive into SwiftUI Preview 13
14. Протокол_PreviewProvider Deep dive into SwiftUI Preview 14 public protocol PreviewProvider : _PreviewProvider { @ViewBuilder static var previews: Self.Previews { get } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage() } }
15. Протокол _PreviewProvider Deep dive into SwiftUI Preview 15 protocol _PreviewProvider { public static var platform: SwiftUI.PreviewPlatform? { get } public static var _previews: Any { get } public static var _platform: SwiftUI.PreviewPlatform? { get } public static var _allPreviews: [SwiftUI._Preview] { get } }
16. Протокол _PreviewProvider Deep dive into SwiftUI Preview 16 protocol _PreviewProvider { public static var platform: SwiftUI.PreviewPlatform? { get } public static var _previews: Any { get } public static var _platform: SwiftUI.PreviewPlatform? { get } public static var _allPreviews: [SwiftUI._Preview] { get } }
17. Протокол _PreviewProvider Deep dive into SwiftUI Preview 17 protocol _PreviewProvider { public static var _allPreviews: [SwiftUI._Preview] { get } }
18. Протокол _PreviewProvider Deep dive into SwiftUI Preview 18 protocol _PreviewProvider { public static var _allPreviews: [SwiftUI._Preview] { get } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage() CircleImage() } }
19. Протокол _PreviewProvider Deep dive into SwiftUI Preview 19 protocol _PreviewProvider { public static var _allPreviews: [SwiftUI._Preview] { get } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage() CircleImage() } }
20. Весь код я брал из публичного интерфейса iOS SDK Deep dive into SwiftUI Preview 20 @available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *) public protocol _PreviewProviderLocator { static var previewProviders: [_PreviewProvider.Type] { get } } @available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *) public protocol _PreviewProvider { static var _previews: Any { get } static var _platform: SwiftUI.PreviewPlatform? { get } }
21. Используем максимум от SwiftUI Preview 21
22. Будем реализовывать • Playbook (Demo) App • Простой performance-анализ • Snapshot-тесты • Accessibility-тесты Используем максимум от SwiftUI Preview 22
23. Сначала реализуем Core-функциональность 23
24. Нам нужны определенные View из Preview Реализуем Core-функциональность 24
25. Нам нужны только определенные View Реализуем Core-функциональность 25 struct CircleImage: View { var body: some View { Image("nature") .clipShape(Circle()) .overlay(Circle().stroke(Color.white, lineWidth: 4)) .shadow(radius: 7) } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage() } }
26. Добавим Pre fi reProvider Реализуем Core-функциональность 26 public protocol PrefireProvider: PreviewProvider {} struct CircleImage: View {
27. Добавим Pre fi reProvider Реализуем Core-функциональность 27 public protocol PrefireProvider: PreviewProvider {} struct CircleImage: View { static var previews: some View { CircleImage() } }
28. Отдыхаем 🌴 28
29. Сделаем PreviewModel Нам нужно хранить информацию о Preview 29 public struct PreviewModel { /// Наша static view от Preview public let content: () -> AnyView /// Имя preview public let name: String /// Состояние preview (.default, loading и тд) public let state: String /// Тип preview (.screen, component) public var type: ViewType /// Устройство для отображения preview public var device: PreviewDevice? /// Наименование нашего Flow public var story: String? /// Время рендеринга public var renderTime: String? }
30. Сделаем PreviewModel Нам нужно хранить информацию о Preview 30 public struct PreviewModel { /// Наша static view от Preview public let content: () -> AnyView /// Имя preview public let name: String /// Состояние preview (.default, loading и тд) public let state: String /// Тип preview (.screen, component) public var type: ViewType /// Устройство для отображения preview public var device: PreviewDevice? /// Наименование нашего Flow public var story: String? /// Время рендеринга public var renderTime: String? }
31. Сделаем PreviewModel Нам нужно хранить информацию о Preview 31 public struct PreviewModel { /// Наша static view от Preview public let content: () -> AnyView /// Имя preview public let name: String /// Состояние preview (.default, loading и тд) public let state: String /// Тип preview (.screen, component) public var type: ViewType /// Устройство для отображения preview public var device: PreviewDevice? /// Наименование нашего Flow public var story: String? /// Время рендеринга public var renderTime: String? }
32. Сделаем PreviewModel Нам нужно хранить информацию о Preview 32 public struct PreviewModel { /// Наша static view от Preview public let content: () -> AnyView /// Имя preview public let name: String /// Состояние preview (.default, loading и тд) public let state: String /// Тип preview (.screen, component) public var type: ViewType /// Устройство для отображения preview public var device: PreviewDevice? /// Наименование нашего Flow public var story: String? /// Время рендеринга public var renderTime: String? }
33. Сделаем PreviewModel Нам нужно хранить информацию о Preview 33 public struct PreviewModel { /// Наша static view от Preview public let content: () -> AnyView /// Имя preview public let name: String /// Состояние preview (.default, loading и тд) public let state: String /// Тип preview (.screen, component) public var type: ViewType /// Устройство для отображения preview public var device: PreviewDevice? /// Наименование нашего Flow public var story: String? /// Время рендеринга public var renderTime: String? }
34. Сделаем PreviewModel Нам нужно хранить информацию о Preview 34 public struct PreviewModel { /// Наша static view от Preview public let content: () -> AnyView /// Имя preview public let name: String /// Состояние preview (.default, loading и тд) public let state: String /// Тип preview (.screen, component) public var type: ViewType /// Устройство для отображения preview public var device: PreviewDevice? /// Наименование нашего Flow public var story: String? /// Время рендеринга public var renderTime: String? }
35. Сделаем PreviewModel Нам нужно хранить информацию о Preview 35 public struct PreviewModel { /// Наша static view от Preview public let content: () -> AnyView /// Имя preview public let name: String /// Состояние preview (.default, loading и тд) public let state: String /// Тип preview (.screen, component) public var type: ViewType /// Устройство для отображения preview public var device: PreviewDevice? /// Наименование нашего Flow public var story: String? /// Время рендеринга public var renderTime: String? }
36. Сделаем PreviewModel Нам нужно хранить информацию о Preview 36 public struct PreviewModel { /// Наша static view от Preview public let content: () -> AnyView /// Имя preview public let name: String /// Состояние preview (.default, loading и тд) public let state: String /// Тип preview (.screen, component) public var type: ViewType /// Устройство для отображения preview public var device: PreviewDevice? /// Наименование нашего Flow public var story: String? /// Время рендеринга public var renderTime: String? }
37. Сделаем PreviewModel Нам нужно хранить информацию о Preview 37 public struct PreviewModel { /// Наша static view от Preview public let content: () -> AnyView /// Имя preview public let name: String /// Состояние preview (.default, loading и тд) public let state: String /// Тип preview (.screen, component) public var type: ViewType /// Устройство для отображения preview public var device: PreviewDevice? /// Наименование нашего Flow public var story: String? /// Время рендеринга public var renderTime: String? }
38. • Можем отличать нужные нам View • Есть универсальная модель Реализуем Core-функциональность 38
39. Как можно пользоваться 39 struct CircleImage: View { var body: some View { Image("nature") .clipShape(Circle()) .overlay(Circle().stroke(Color.white, lineWidth: 4)) .shadow(radius: 7) } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage() .previewLayout(.sizeThatFits) } }
40. Как можно пользоваться 40 struct CircleImage_Previews: PreviewProvider, PrefireProvider { static var previews: some View { CircleImage() CircleImage(name: "loading") .previewLayout(.sizeThatFits) .previewState(.loading) } }
41. Как можно пользоваться 41 struct CircleImage_Previews: PreviewProvider, PrefireProvider { static var previews: some View { CircleImage() CircleImage(name: "loading") .previewLayout(.sizeThatFits) .previewState(.loading) } }
42. Как можно пользоваться 42 struct CircleImage_Previews: PreviewProvider, PrefireProvider { static var previews: some View { CircleImage() CircleImage(name: "loading") .previewLayout(.sizeThatFits) .previewState(.loading) } }
43. Как можно пользоваться 43 struct CircleImage_Previews: PreviewProvider, PrefireProvider { static var previews: some View { CircleImage() CircleImage(name: "loading") .previewLayout(.sizeThatFits) .previewState(.loading) } }
44. Как можно пользоваться 44 struct CircleImage_Previews: PreviewProvider, PrefireProvider { static var previews: some View { CircleImage() CircleImage(name: "loading") .previewLayout(.sizeThatFits) .previewUserStory(.loading) } }
45. Sourcery Используем кодогенерацию 45
46. Делаем шаблон .stencil Используем кодогенерацию 46 enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() }
47. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 47
48. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 48
49. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 49
50. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 50
51. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 51
52. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 52
53. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 53
54. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 54
55. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 55
56. enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() } Делаем шаблон .stencil Используем кодогенерацию 56
57. Делаем шаблон .stencil Используем кодогенерацию 57 enum PreviewModels { static var models: [PreviewModel] = { var views: [PreviewModel] = [] {% for type in types.types where type.implements.PrefireProvider %} for state in {{ type.name }}.State.allCases { views.append( PreviewModel( content: { AnyView({{ type.name }}.previews) }, name: "{{ type.name|replace:"_Previews", "" }}", type: {{ type.name }}._allPreviews.first.layout == .sizeThatFits ? .component : .screen, device: {{ type.name }}._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last) ) ) } {% endfor %} return views }() }
58. Запускаем кодогенерацию Sourcery в Build Phase Используем кодогенерацию 58
59. Теперь у нас есть массив моделей Previews 59 public enum PreviewModels { public static var models: [PreviewModel] = { var views: [PreviewModel] = [] for state in CircleImage_Previews.State.allCases { views.append( PreviewModel( content: { CircleImage_Previews.state = state return AnyView(CircleImage_Previews.previews) }, name: "CircleImage", type: CircleImage_Previews._allPreviews.first?.layout == .sizeThatFits ? .component : .screen, device: CircleImage_Previews._allPreviews.first?.device, state: String(String(reflecting: state).split(separator: ".").last!) ) ) } return views.sorted(by: { $0.name > $1.name || $0.story ?? "" > $1.story ?? "" }) }() }
60. Давайте выжмем максимум из SwiftUI Preview 🚀 Core-слой готов 60
61. Будем реализовывать • Playbook (Demo) App • Простой performance-анализ • Snapshot-тесты • Accessibility-тесты Используем максимум от SwiftUI Preview 61
62. Будем реализовывать • Playbook (Demo) App • Простой performance анализ • Snapshot тесты • Accessibility тесты Используем максимум от SwiftUI Preview 62
63. Playbook App 63
64. Демо-приложение, содержащее все компоненты и экраны из приложения Что такое Playbook App 64
65. • Знакомиться с приложением новичкам • Проводить дизайн-ревью • Решать проблему с дублированием компонентов • Отдельно тестировать UI Зачем нужно Playbook App 65
66. Простая реализация Playbook view 66 public struct PlaybookView: View { @State private var viewModels: [PreviewModel] public var body: some View { ScrollView(.horizontal, showsIndicators: false) { LazyHStack(alignment: .top, spacing: 16) { ForEach($viewModels) { $viewModel in viewModel.content() } } .padding(16) } } }
67. Немного доработав, можем получить такой вид Playbook App 67
68. Будем реализовывать • Playbook (Demo) App • Простой performance анализ • Snapshot тесты • Accessibility тесты Используем максимум от SwiftUI Preview 68
69. Будем реализовывать • Playbook (Demo) App • Простой performance-анализ • Snapshot тесты • Accessibility тесты Используем максимум от SwiftUI Preview 69
70. Performance 70
71. Можем замерить время загрузки View Performance 71
72. Модификатор замера времени загрузки View Performance 72 struct LoadingTimeModifier: ViewModifier { @State private var createDate: Date? = Date() var completion: (String) -> Void func body(content: Content) -> some View { content .onAppear { guard let createDate = createDate else { return } let diffTime = Date().timeIntervalSince(createDate) * 1000 completion(String(diffTime.truncatingRemainder(dividingBy: 1000).rounded()) + " ms") self.createDate = nil } } }
73. Модификатор замера времени загрузки View Performance 73 struct LoadingTimeModifier: ViewModifier { @State private var createDate: Date? = Date() var completion: (String) -> Void func body(content: Content) -> some View { content .onAppear { guard let createDate = createDate else { return } let diffTime = Date().timeIntervalSince(createDate) * 1000 completion(String(diffTime.truncatingRemainder(dividingBy: 1000).rounded()) + " ms") self.createDate = nil } } }
74. Модификатор замера времени загрузки View Performance 74 struct LoadingTimeModifier: ViewModifier { @State private var createDate: Date? = Date() var completion: (String) -> Void func body(content: Content) -> some View { content .onAppear { guard let createDate = createDate else { return } let diffTime = Date().timeIntervalSince(createDate) * 1000 completion(String(diffTime.truncatingRemainder(dividingBy: 1000).rounded()) + " ms") self.createDate = nil } } }
75. Модификатор замера времени загрузки View Performance 75 struct LoadingTimeModifier: ViewModifier { @State private var createDate: Date? = Date() var completion: (String) -> Void func body(content: Content) -> some View { content .onAppear { guard let createDate = createDate else { return } let diffTime = Date().timeIntervalSince(createDate) * 1000 completion(String(diffTime.truncatingRemainder(dividingBy: 1000).rounded()) + " ms") self.createDate = nil } } }
76. Модификатор замера времени загрузки View Performance 76 struct LoadingTimeModifier: ViewModifier { @State private var createDate: Date? = Date() var completion: (String) -> Void func body(content: Content) -> some View { content .onAppear { guard let createDate = createDate else { return } let diffTime = Date().timeIntervalSince(createDate) * 1000 completion(String(diffTime.truncatingRemainder(dividingBy: 1000).rounded()) + " ms") self.createDate = nil } } }
77. Модификатор замера времени загрузки View Performance 77 struct LoadingTimeModifier: ViewModifier { @State private var createDate: Date? = Date() var completion: (String) -> Void func body(content: Content) -> some View { content .onAppear { guard let createDate = createDate else { return } let diffTime = Date().timeIntervalSince(createDate) * 1000 completion(String(diffTime.truncatingRemainder(dividingBy: 1000).rounded()) + " ms") self.createDate = nil } } }
78. Использование модификатора Performance 78 viewModel.content() .modifier(LoadingTimeModifier { loadingTime in viewModel.renderTime = loadingTime })
79. Будем реализовывать • Playbook (Demo) App • Простой performance-анализ • Snapshot тесты • Accessibility тесты Используем максимум от SwiftUI Preview 79
80. Будем реализовывать • Playbook (Demo) App • Простой performance анализ • Snapshot-тесты • Accessibility тесты Используем максимум от SwiftUI Preview 80
81. Snapshot-тесты 81
82. Бибилиотека от pointfreeco SnapshotTesnig Возьмем готовую библиотеку Snapshot-тесты 82
83. Как выглядит Snapshot-тест Snapshot-тесты 83 class OnboardingViewTests: XCTestCase { func testOnboardingView() { // Given let view = OnboardingView() // Then assertSnapshot(matching: view, as: .image()) } }
84. Как выглядит Snapshot-тест Snapshot-тесты 84 class OnboardingViewTests: XCTestCase { func testOnboardingView() { // Given let view = OnboardingView() // Then assertSnapshot(matching: view, as: .image()) } }
85. Как выглядит Snapshot-тест Snapshot-тесты 85 class OnboardingViewTests: XCTestCase { func testOnboardingView() { // Given let view = OnboardingView() // Then assertSnapshot(matching: view, as: .image()) } }
86. Более подробно о Snapshot-тестировании Snapshot-тесты 86
87. Что нам нужно для генерации тестов? • Stencil-шаблон • SwiftUI Preview Snapshot-тесты 87
88. Делаем .stencil шаблон Используем кодогенерацию 88 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
89. Делаем .stencil шаблон Используем кодогенерацию 89 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
90. Делаем .stencil шаблон Используем кодогенерацию 90 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
91. Делаем .stencil шаблон Используем кодогенерацию 91 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
92. Делаем .stencil шаблон Используем кодогенерацию 92 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
93. Делаем .stencil шаблон Используем кодогенерацию 93 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
94. Делаем .stencil шаблон Используем кодогенерацию 94 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
95. Делаем .stencil шаблон Используем кодогенерацию 95 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
96. Делаем .stencil шаблон Используем кодогенерацию 96 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
97. Делаем .stencil шаблон Используем кодогенерацию 97 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
98. Делаем .stencil шаблон Используем кодогенерацию 98 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
99. Делаем .stencil шаблон Используем кодогенерацию 99 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
100. Делаем .stencil шаблон Используем кодогенерацию 100 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
101. Результат Запускаем и получаем результат 🚀 Используем кодогенерацию 101 func test_prefireView_Preview() { for view in PrefireView_Preview._allPreviews { // Given let preview = PrefireView_Preview._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device?.snapshotDevice() ?? deviceConfig // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(device)) : .image(.sizeThatFits) ) } }
102. Будем реализовывать • Playbook (Demo) App • Простой performance анализ • Snapshot-тесты • Accessibility тесты Используем максимум от SwiftUI Preview 102
103. Будем реализовывать • Playbook (Demo) App • Простой performance анализ • Snapshot тесты • Accessibility-тесты Используем максимум от SwiftUI Preview 103
104. Accessibility-тесты 104
105. Библиотека на основе предыдущей Snapshot Testing AccessibilitySnapshot Возьмем готовую библиотеку Accessibility-тесты 105
106. Все как и с Snapshot-тестами • Используем SwiftUI Preview • Делаем stencil-шаблон • Возьмем шаблон Snapshot-тестов Accessibility-тесты 106
107. Делаем .stencil шаблон Используем кодогенерацию 107 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
108. Делаем .stencil шаблон Используем кодогенерацию 108 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: view, as: isScreen ? .image(layout: .device(config: device)) : .image(layout: .sizeThatFits) ) } } {% endfor %} }
109. Делаем .stencil шаблон Используем кодогенерацию 109 class PreviewTests: XCTestCase { {% for type in types.types where type.implements.PrefireProvider %} func test_{{ type.name|lowerFirstLetter|replace:"_Previews", "" }}() { for view in {{ type.name }}._allPreviews { // Given let preview = {{ type.name }}._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width).fixedSize(vertical: true)) // Then assertSnapshot( matching: UIHostingController(rootView: view), as: .accessibilityImage(showActivationPoints: .always) ) } } {% endfor %} }
110. Результат Запускаем и получаем результат 🚀 Используем кодогенерацию 110 func test_prefireView_Preview() { for view in PrefireView_Preview._allPreviews { // Given let preview = PrefireView_Preview._allPreviews.first let isScreen = preview?.layout == .device let device = preview?.device?.snapshotDevice() ?? deviceConfig // When var view = view.content view = isScreen ? view : AnyView(view.frame(width: device.size?.width)) // Then assertSnapshot( matching: UIHostingController(rootView: view), as: .accessibilityImage(showActivationPoints: .always) ) } }
111. Будем реализовывать • Playbook (Demo) App • Простой performance анализ • Snapshot тесты • Accessibility-тесты Используем максимум от SwiftUI Preview 111
112. Будем реализовывать • Playbook (Demo) App • Простой performance-анализ • Snapshot-тесты • Accessibility-тесты Используем максимум от SwiftUI Preview 112
113. Project 🔥Prefire 113
114. Project Prefire Проект, реализующий все, что мы обсудили Включает в себя примеры и подробную инструкцию 114 https:/ /github.com/BarredEwe/Pre fi re
115. Буду рад любому фидбеку и звездочкам ⭐ Еще немного про проект 115
116. • Выжали максимум из SwiftUI Preview • Очень сильно уменьшили ручной код с помощью генерации • Playbook App • Snapshot-тесты • Accessibility-тесты Итоги 116
117. Спасибо за внимание Максим. Руководитель группы разработки мобильных приложений iOS GitHub: BarredEwe Telegram: @BarredEwe LinkedIn: BarredEwe