Real Time UI Test

앱을 개발하다 보면 크고 작은 이슈 때문에 뷰를 디버깅하는 상황이 빈번하게 발생합니다.

alignment 수정하고, 간격 줄여보기 또는 hugging 값 변경하기 등등.

그 후 원하는 결과 값이 나오는지 확인하기 위해서 프로젝트를 빌드를 하고, 

새로운 뷰를 개발할 때 원하는 결과가 나오는지 수시로 빌드를 합니다.

빌드하고 해당 뷰를 확인할 때 소모되는 시간을 무시할 수 없을정도로 크다고 생각합니다.

매번 이런 번거로운 작업을 도움을 줄 기능은 바로 SwiftUI입니다.

 

앱 최소 버전이 iOS 13.0이 아닌데요?

신경 쓸 필요 없습니다. 모듈을 분리하거나 디버깅 용도로만 사용할 수 있습니다.

 

---

Preview with SwiftUI

SwiftUI에서 UIKit을 사용하기 위해서 제공되는 두 가지 프로토콜이 있습니다.

UIViewControllerRepresentable와 UIViewRepresentable 입니다.

각 프로토콜은 UIViewController, UIView를 View로 변경할 수 있으며, 해당 View를 업데이트 시킬 수 있는 메소드도 존재합니다.

 

UIViewControllerRepresentable 프로토콜 구현중에

makeUIViewController(context:), updateUIViewController(_:, coordinator:)를 구현해서 View 타입으로 변경할겁니다.

매번 Custom UIViewController, UIView를 생성하기엔 너무 귀찮지만,

Swift 제네릭 타입을 사용해서 이 문제를 간단하게 해결할 겁니다.

추가적으로 뷰를 업데이트 시킬 수 있도록 탈출 클로저 또한 외부로부터 주입받도록 구현합니다.

코드는 gist에 따로 첨부하겠습니다.

 

 

이제 테스트할 뷰를 아래와 같이 생성하면 끝입니다.

 

PreviewProvider는 캔버스에서 해당 뷰를 볼 수 있게 도와주는 프로토콜입니다.

(코드를 작성했는데 오른쪽 사진처럼 뷰를 확인할 수 없다면 옵션 +커맨드 + 엔터를 누르세요)

 

Real Time UITest라고 했잖아요.

강조해서 언급을 안 했을 뿐 정말로 전부 알려드렸습니다.

위 코드 body 내부를 보면 후행 클로저를 확인할 수 있습니다. 

예를 들기 위해 해당 뷰를 업데이트하는 메소드만 호출했지만,

해당 클로저 내부에서 뷰에 관해서 테스트하고 싶은 것들을 작성하시면 됩니다.

코드를 변경 후에 빌드를 하지 않더라도 변경된 화면을 확인하실 수 있을 겁니다.

 

UITest의 기능을 극대화 시키려면  뷰를 상태로 관리하는 게 좋습니다.

"A 상태가 왔을 때 UI 테스트"가 가능해지기 때문입니다.

 

이 기능에 유일한 단점은 왼쪽에는 코드를 오른쪽에 캔버스를 띄어놨을 때 뷰가 갱신되지 않는 버그가 종종 발생합니다.

 

마지막으로 프리뷰 기능을 사용하면서 개발하는 영상으로 이 글을 마치겠습니다.

https://www.youtube.com/watch?v=Sz4kT2v4CMs

https://gist.github.com/GangWoon/f07458714812120cb08020cbf2a5a710

 

 

Reference

https://www.swiftbysundell.com/tips/inline-wrapping-of-uikit-or-appkit-views-within-swiftui/

Inline wrapping of UIKit or AppKit views within SwiftUI | Swift by Sundell