[iOS] SnapshotTesting with SwiftUI (v1.11.0)

SnapshotTesting

SnapshotTesting을 통해 UI의 유효성을 검사하고, 코드 변경이 빌드한 UI에 영향을 미치지 않았는지 확인한다.

SnapshotTesting이란?

Snapshot Test를 사용하면 테스트 시점의 UI의 스냅샷을 기준선 (baseline)이라고 하는 유효한 UI 스냅샷과 비교하여 UI를 검증할 수 있습니다.

테스트 러너는 현재 스냅샷을 기준 스냅샷과 비교하고, 스냅샷 간에 차이가 있을 경우, UI는 변경된 것이므로 테스트가 실패합니다.

GitHub - pointfreeco/swift-snapshot-testing: 📸 Delightful Swift snapshot testing.

출처 : Raywenderlich

 

 

Snapshot Testing Strategies

SnapshotTesting 프레임워크는 이미지 전략 (image strategy) 또는 재귀 설명 전략 (recursive description strategy)을 사용하여 UIView, UIViewController들의 테스트를 지원합니다.

이미지 전략 (Image Strategy)은 UI의 실제 스냅샷을 이미지 파일로 가져온 다음, 이미지를 픽셀 단위로 비교합니다. 이미지가 다르면 UI가 변경된 것이고, 테스트가 실패합니다.

재귀적 설명 전략 (Recursive description Strategy)은 뷰 계층 구조의 문자열 description을 비교합니다. description이 변경된 경우, UI가 달라지고, 테스트가 실패합니다.

마지막으로, SnapshotTesting은 뷰컨트롤러 계층을 일반 텍스트로 생성하는 계층 전략 (hierarchy strategy)을 제공합니다. 뷰컨트롤러 계층 구조를 변경하면 테스트가 실패하고, 이는 UIViewController에서만 작동합니다.

Using the Image Strategy

UIViewController를 테스트하면 제공하는 다양한 옵션

• drawHierarchyInKeyWindow: Bool = false
  
  • 시뮬레이터의 Key Window에서 뷰를 렌더링하고, appearance, visual effects 사용
• on: ViewImageConfig
  
  • ViewImageConfig 옵션으로 다양한 장치 선택 가능
• precision: Float = 1
  
  • 테스트 통과를 위해 일치해야 하는 픽셀의 퍼센트로, 기본적으로 1이고, 이는 즉 픽셀의 100%가 일치해야함을 의미
• size: CGSize = nil
  
  • 테스트 뷰의 스냅샷을 생성하기 위한 뷰 크기
• traits: UITraitCollection = .init()
  
  • 테스트할 많은 특성들 지정 가능

기본 스냅샷 생성하기

처음으로 테스트 케이스를 작성하면, 아직 기준 스냅샷 (baseline snapshot)이 없기 때문에 테스트가 실패합니다.

처음 실행하면, SnapshotTesting은 기준 스냅샷을 프로젝트 디렉토리에 저장합니다.

위와 같이  Snapshots  폴더가 생성되고, 그 안에 자동으로 이미지가 저장된다!

 

이렇게 기준 스냅샷이 생성되고 나면, 이후에 진행되는 테스트 실행은 새 스냅샷을 가져와서 기준 스냅샷과 비교합니다.

기준 스냅샷이 생성되었을 때 나오는 테스트 결과

오류 메시지

 

처음 테스트 실행 시, 테스트 결과와 비교할 참조 스냅샷이 없기 때문에 테스트가 실패합니다. 

테스트가 처음 실행되면, 그때서야 SnapshotTesting 프레임워크가 기준 스냅샷을 생성합니다.

 

여기서 image strategy를 사용하기 위해 테스트하는 것은 실제 UI 뷰의 그래픽 표현을 고유 콘텐츠 크기 (intrinsic content size)로 저장한다는 것을 의미합니다.

기본 스냅샷을 생성하고 다시 테스트를 실행하면 이제 테스트에 성공합니다!

 

 

UI 변경 시 기본 스냅샷 업데이트하기

뷰의 코드가 변경되지 않는 한, 테스트는 성공합니다.

만약 뷰가 변경된다면, SnapshotTesting은 이런 메시지를 표시합니다.

Newly-taken snapshot does not match reference.

즉, 기준 스냅샷과 새로운 스냅샷이 일치하지 않다는 것인데, 오류 메시지에는 기준 스냅샷과 새 스냅샷의 경로가 포함되어있습니다!

Finder에서 Command + Shift + G를 눌러서 경로로 이동하기!

 

UI가 변경되었기 때문에, 테스트가 성공하려면 기준 스냅샷을 업데이트해야 합니다.

assertSnapShot(matching:as:) 위에 다음 코드를 추가합니다.

isRecording = true

isRecording을 true로 설정하면, SnapshotTesting 프레임워크에 새 기준 스냅샷을 생성할 것을 알리는 것입니다.

 

 

코드를 실행하면, 테스트는 실패하지만 SnapshotTesting은 테스트를 처음 실행했을 때와 마찬가지로 새로운 기준 스냅샷을 저장합니다.

오류 메시지를 보면 Record mode is on 이라는 메시지를 볼 수 있습니다.

isRecording = true를 설정하면, 테스트는 실패하고 새로운 기준 스냅샷이 생성된다.

상세 오류 메시지

 

 

이제 새로운 기준 스냅샷이 생성되었으므로, isRecording = true를 제거합니다.

그리고 다시 테스트를 실행하면, 테스트가 성공합니다.

테스트 성공

 

상세 뷰 테스트하기

뷰컨트롤러를 사용하면, 다양한 아이폰 버전, 화면 방형, 기기 타입을 사용하도록 테스트를 설정할 수 있고, 다크 모드에서 앱이 어떻게 작동하는지 확인할 수 있습니다.

setUpWithError 내에서 인스턴스를 생성하면 테스트 케이스에서 매번 테스트 중인 시스템을 만들 필요가 없습니다.

특정 아이폰 버전 테스트

/// Testing for Specific iPhone Versions
func testBookDetailViewOniPhone() throws {
  assertSnapshot(
    matching: viewController,
    as: .image(on: .iPhoneX) // SnapshotTesting에게 뷰컨트롤러를 iPhoneX 스크린 사이즈로 렌더링하도록 지시
  )
}

특정 기기 방향 테스트

/// Testing for Device Orientation
func testBookDetailViewOniPhoneLandscape() throws {
  assertSnapshot(
    matching: viewController,
    as: .image(on: .iPhoneX(.landscape)) // 가로 방향으로 UI 테스트
  )
}

/// Testing for Device Orientation
func testBookDetailViewOniPadPortrait() throws {
  assertSnapshot(
    matching: viewController,
    as: .image(on: .iPadPro11(.portrait))
  )
}

다크 모드 테스트

/// Testing for Dark Mode
func testBookDetailViewOniPhoneDarkMode() throws {
  let traitDarkMode = UITraitCollection(userInterfaceStyle: .dark)
  
  assertSnapshot(
    matching: viewController,
    as: .image(on: .iPhoneX, traits: traitDarkMode)
  )
}

테스트가 모두 성공하고, 스냅샷이 저장된 것 확인 가능!

 

Snapshot Testing Tutorial for SwiftUI: Getting Started