French kit2019

Fast feedback
Not subjective
Repeatable
Safety
Clarity of usage
Documentation
Fun

Testing has always been an after-
thought

Is it testable?
• Business logic
• Navigation flows
• Visual regressions

Admin,
In test group
User,
In test group

struct PageFooter: View {
let user: User
let enableSecretFeature: () -> Void
var body: some View {
if user.flags.contains(.newSecretFeature) {
if user.permissions.contains(.updateOrganizationSettings) {

let user: User
return AnyView(
Button(action: enableSecretFeature) {
Text("Enable a secret feature!”)
}
)
} else {
return AnyView(
Text("Ask admin to enable the secret feature.")
)
}

let user: User
return AnyView(
}
)
} else {
return AnyView(
)
}
}
else {
return AnyView(EmptyView())
}
}
}

let user: User
return AnyView(
}
)
} else {
return AnyView(
)
}
}
else {
}
}
}
How to test that we get the right view?

import XCTest
import SwiftUI
func testAdminUserInTestGroupSeesCTA() {
let view = PageFooter(
user: User.testGroupUser_admin,
enableSecretFeature: { }
)
let body = view.body
XCTAssertNotNil(body)
// Assert that we got a button... How?
}

import XCTest
import SwiftUI
)
print(body)
}
Console output:
AnyView(storage: SwiftUI.(unknown context at
$7fff2c5f1e64).AnyViewStorage<SwiftUI.Button<SwiftUI.Text>>)

import XCTest
import SwiftUI
)
print(body)
}
More realistic output:
AnyView(storage: SwiftUI.(unknown context at
$7fff2c5f1e64).AnyViewStorage<SwiftUI.VStack<SwiftUI.TupleView<(SwiftUI.
ModifiedContent<SwiftUI.Text, SwiftUI._AlignmentWritingModifier>,
SwiftUI.ModifiedContent<SwiftUI.Button<SwiftUI.Text>,
SwiftUI._BackgroundModifier<SwiftUI.Color>>)>>>)

import SwiftUI
enum Mode {
case showsEnableCTA(Action)
case featureReadOnlyInfo
case empty
}

import SwiftUI
enum Mode {
case empty
}
// Explicit input
let mode: Mode

import SwiftUI
enum Mode {
case empty
}
// Explicit input
let mode: Mode
// No data transformations; views only
switch mode {
case .showsEnableCTA(let action):
return AnyView(Button(action: action) { Text(mode.title) })
case .featureReadOnlyInfo:
return AnyView(Text(mode.title))
case .empty:
}
}
}

import Foundation
// “Glue” to application data like user & services
extension PageFooter.Mode {
init(user: User, service: SecretFeatureService) {
guard user.flags.contains(.newSecretFeature) else {
self = .empty
return
}
self = .showsEnableCTA(service.enable)
} else {
self = .showsTextDescription
}
}
}

func testUserInControlGroupDoesNotSeeSpecialView() {
// given that the user is in the control group
let user = User.controlGroupUser

// when we create a view for that user
user: user,
service: SecretFeatureService(enable: { })
)

user: user,
)
// then the mode of the view will be empty
XCTAssertEqual(view.mode, .empty)
}

user: user,
)
// then the mode of the view will be empty
XCTAssertEqual(view.mode, .empty)
}
✅

// given that the user is admin and is in the test group
let user = User.testGroupUser_admin
// when we create a view for that user with a specific action
let enableServiceCalled = XCTestExpectation(
description: "enable called”
)
user: user,
service: SecretFeatureService(
enable: { enableServiceCalled.fulfill() }
)
)
// then the mode of the view will be enable CTA
// and the action will be connected to the SecretFeatureService
if case let .showsEnableCTA(action) = view.mode {
action()
} else {
XCTFail("Wrong mode: (view.mode)")
}
wait(for: [enableServiceCalled], timeout: 0.001)
}

// given that the user is admin and is in the test group
// when we create a view for that user with a specific action
let enableServiceCalled = XCTestExpectation(
description: "enable called”
)
user: user,
service: SecretFeatureService(
enable: { enableServiceCalled.fulfill() }
)
)
// then the mode of the view will be enable CTA
// and the action will be connected to the SecretFeatureService
if case let .showsEnableCTA(action) = view.mode {
action()
} else {
XCTFail("Wrong mode: (view.mode)")
}
wait(for: [enableServiceCalled], timeout: 0.001)
}
✅

import SwiftUI
...
// Static value
let mode: Mode
...
}

import SwiftUI
...
// Current mode can be observed through an observable object
@ObservedObject var viewModel: PageFooterViewModel
...
}

import Foundation
import Combine
class PageFooterViewModel: ObservableObject {
@Published var mode: PageFooter.Mode
init(appState: AppState) {
// same as before
mode = PageFooter.Mode(
user: appState.user,
service: appState.secretFeatureService
)

import Foundation
import Combine
// same as before
)
// `mode` current and future values derived from the app state
sinkSubscription = appState.$user
.combineLatest(appState.$secretFeatureService)
.map { PageFooter.Mode(user: $0, service: $1) }
.sink { self.mode = $0 }
}
}

import Foundation
import Combine
private var sinkSubscription: AnyCancellable? = nil
// same as before
)
// `mode` current and future values derived from the app state
sinkSubscription = appState.$user
.combineLatest(appState.$secretFeatureService)
.map { PageFooter.Mode(user: $0, service: $1) }
.sink { self.mode = $0 }
}
}

func testUserInTestGroupWillSeeFeatureInfo() {
// given that the user is in the test group
let user = User.testGroupUser

// and we have an App state with that user
let appState = AppState(
user: user,
secretFeatureService: SecretFeatureService(enable: {})
)

user: user,
)
// when we create a view model for that state
let viewModel = PageFooterViewModel(appState: appState)

user: user,
)
// then the mode of the view will be read only
XCTAssertEqual(viewModel.mode, .featureReadOnlyInfo)

user: user,
)
// when app state changes
appState.user.flags = []

user: user,
)
// then the mode changes too
XCTAssertEqual(viewModel.mode, .empty)
}

user: user,
)
// then the mode changes too
XCTAssertEqual(viewModel.mode, .empty)
}
✅

Views should be dumb.
Try not to hide business logic in UI code.
Navigation is business logic too.

switch mode {
return AnyView(Button(action: action) { Text(mode.title) })
case .featureReadOnlyInfo:
case .empty:
}
}
}

switch mode {
return AnyView(
NavigationLink(
destination: ???,
label: {
Text(mode.title)
}
)
) case .featureReadOnlyInfo:
case .empty:
}
}
}
Side effect

class SecretFeatureService: ObservableObject {
@Published var showingActivationFlow: Bool = false
func enable() {
showingActivationFlow = true
}
static let `default` = SecretFeatureService()
}

struct MainPage: View {
@ObservedObject var viewModel: PageViewModel
NavigationView {
VStack {
Settings()
PageFooter(viewModel: viewModel.footer)
NavigationLink(
destination: self.activationFlow,
isActive: $viewModel.showingActivationFlow
) {
EmptyView()
}
}
}
}
}

class PageViewModel: ObservableObject {
let footer: PageFooterViewModel
var showingActivationFlow: Binding<Bool> {
return Binding<Bool>(
get: { self.showingActivationSubject.value },
set: { _ in }
)
}
private var subscription: AnyCancellable? = nil
private let showingActivationSubject: CurrentValueSubject<Bool, Never>
footer = PageFooterViewModel(appState: appState)
showingActivationSubject = CurrentValueSubject(
appState.secretFeatureService.showingActivationFlow
)
subscription = appState
.secretFeatureService
.$showingActivationFlow
.sink { [weak self] in
self?.showingActivationSubject.value = $0
}
}
}

func testCTATriggersActivationFlow() {
// given that the user is an admin
user: user,
secretFeatureService: SecretFeatureService()
)
// and we have a view model for that state
let viewModel = PageViewModel(appState: appState)

user: user,
)
if case let .showsEnableCTA(action) = viewModel.footer.mode {
// given showingActivationFlow is false
XCTAssertFalse(viewModel.showingActivationFlow.wrappedValue)
// when the CTA ation executes
action()
// then showingActivationFlow is true
XCTAssertTrue(viewModel.showingActivationFlow.wrappedValue)
} else {
XCTFail()
}
}

user: user,
)
if case let .showsEnableCTA(action) = viewModel.footer.mode {
// given showingActivationFlow is false
XCTAssertFalse(viewModel.showingActivationFlow.wrappedValue)
// when the CTA ation executes
action()
// then showingActivationFlow is true
XCTAssertTrue(viewModel.showingActivationFlow.wrappedValue)
} else {
XCTFail()
}
}
✅

Debug previews
1. Create a view model object
2. Configure the view with the view model
3. Customise the preview configuration (device, accessibility settings, etc)
4. See the view rendered with the provided configuration
A. Anytime the code changes, the preview refreshes

WWDC Session 223: Mastering Xcode Previews

Visual validation is
also automatable

Snapshot testing
3. Customise the snapshot configuration (device, accessibility settings, etc)
4. Snapshot the view rendered with the provided configuration
A. If snapshotting for the first time → save the snapshot
B. Otherwise assert saved and new snapshots match

Debug previews
3. Customise the preview conﬁguration (device, accessibility settings, etc)
4. See the view rendered with the provided conﬁguration

struct LandmarksList_Previews: PreviewProvider {
static var previews: some View {
Group {
NavigationView {
LandmarkList(
viewModel: .favouritesOnly
)
}
.previewDevice(
PreviewDevice(rawValue: "iPhone SE")
)
.previewDisplayName("favouritesOnly")
NavigationView {
LandmarkList(viewModel: .fullList)
}
.previewDevice(
)
.previewDisplayName("fullList")
}
}
}
fullList favouritesOnly

fullList favouritesOnly
Group {
NavigationView {
LandmarkList(
viewModel: .favouritesOnly
)
}
.previewDevice(
)
.previewDisplayName("favouritesOnly")
NavigationView {
LandmarkList(viewModel: .fullList)
}
.previewDevice(
)
.previewDisplayName("fullList")
}
}
}

PreviewDevice
PreviewLayout
PreviewPlatform
EnvironmentValues

EnvironmentValues
Apply Color Schemes
ColorScheme
ColorSchemeContrast
Suppor Accessibility Text Weights
LegibilityWeight
Handle Layout Direction
LayoutDirection
Control Interaction
PresentationMode
EditMode
ControlActiveState
Use Size Classes
UserInterfaceSizeClass

extension Snapshotting
where Value: SwiftUI.View, Format == UIImage {
...
}

extension Snapshotting
where Value: SwiftUI.View, Format == UIImage {
...
}
func testLandmarksList() {
let view = LandmarksList_Previews.previews
assertSnapshot(matching: view, as: .image)
}

protocol DebugPreviewable {
associatedtype ViewModel
associatedtype Preview: View
static var previewViewModels: [PreviewData<ViewModel>] { get }
static func create(from viewModel: ViewModel) -> Preview
}

}
struct PreviewData<ViewModel> {
let name: String
let viewModel: ViewModel
let configurations: [PreviewConfiguration]
}

}
struct PreviewData<ViewModel> {
let name: String
let viewModel: ViewModel
let configurations: [PreviewConfiguration]
}
struct PreviewConfiguration {
let id: String
let modifyView: (AnyView) -> AnyView
}

extension DebugPreviewable where ViewModel: Hashable {
static var debugPreviews: some View {
ForEach(previewViewModels, id: .self) { previewData in
ForEach(previewData.configurations, id: .self) { config in
config.modifyView(
AnyView(
NavigationView {
create(from: previewData.viewModel)
}
)
)
.previewDisplayName("(previewData.name), (config.id)")
}
}
}
}

extension LandmarksList_Previews: DebugPreviewable {
static var previewViewModels: [PreviewData<LandmarkListViewModel>] {
return [
PreviewData(
name: "favouritesOnly",
viewModel: .favouritesOnly,
configurations: PreviewConfiguration.all
),
PreviewData(
name: "fullList",
viewModel: .fullList,
configurations: [.default]
)
]
}
static func create(from viewModel: LandmarkListViewModel) -> some View {
return LandmarkList(viewModel: viewModel)
}
}

LandmarksList_Previews.debugPreviews
}
}

LandmarksList_Previews.debugPreviews
}
}
func testLandmarksList() {
LandmarksList_Previews.assertSnapshots() // #onelinetest
}
✅

FavoritesOnly, BigTextFavoritesOnly, DarkFavoritesOnly FullList

🥡
1. SwiftUI may be new but declarative UI isn’t. We can leverage past experience to
improve testing.
2. We can make our views more testable by extracting their business logic.
3. We can make sure that we notice regressions by combining debug previews and
snapshot testing.
4. We can try and extract navigation from views but it’s difficult right now.

French kit2019

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to French kit2019

Similar to French kit2019 (20)

Recently uploaded

Recently uploaded (7)

French kit2019