มาเขียน iOS Snapshot Testing กันเถอะ

Snapshot เป็นตัวช่วยให้ค้นพบข้อผิดพลาดที่อาจจะเกิดจากการเปลี่ยนแปลงที่ไม่ต้องการใน App

ในตัวอย่างนี้จะนำ FBSnapshotTestCase เข้ามาเขียน Snapshot Testing ซึ่งสร้างโดย Facebook และปัจจุบัน Uber เข้ามา maintain ต่อ สามารถ integrate เข้ามาใน project ด้วย CocoaPod

1. ไปที่ terminal และเข้าไปยัง Folder project และพิมพ์คำสั่ง เพื่อทำการสร้าง podfile

pod init

2. ใน podfile ก็ทำการเพิ่มคำสั่งนี้ลงไป

pod 'FBSnapshotTestCase'

3. หลังจากนั้นก็พิมพ์คำสั่ง เพื่อทำการ download SDK ลงใน Project

pod install

4. เข้าไปที่ edit Schemes เลือก Run

5. เพิ่ม 2 keys และ values ใน environment variables

• Key: IMAGE_DIFF_DIR , Value: $(SOURCE_ROOT)/Snapshots/Failures
• Key: FB_REFERENCE_IMAGE_DIR, Value: $(SOURCE_ROOT)/Snapshots/

6. สร้าง unit test

• สร้าง unit test case class และทำการ import FBSnapshotTestCase เข้ามาใน Class
• สร้าง function สำหรับ unit test suite และใช้ FBSnapshotVerifyView ที่ถูก build in มาจาก FBSnapshotTestCase เพื่อสร้างภาพที่ใช้สำหรับสิ่งที่เราต้องการจะทดสอบ

• เมื่อสร้าง unit test case แล้ว กด Cmd-U keys บน keyboard เพื่อทำการ run test suite ที่เราได้เขียนไว้ เปิดเข้าไปดู folder project จะเห็น Snapshots>_64>[ชื่อFolder.ชื่อTestClass] ใน folder จะเป็นรูปภาพที่ได้ record ไว้ดังภาพ

• ทุกครั้งที่ Run test suite แล้วเจอดังภาพให้ทำการเปลี่ยน recordMode = false ที่ให้เปลี่ยน recordMode เป็น false เพื่อไม่ต้องการให้ record ภาพแล้ว เพราะว่า FBSnapshotTestCase ได้ save ภาพลงไปใน Folder ที่เรากำหนดไว้แล้ว

• เมื่อ Run test suite ใหม่อีกครั้งก็จะเจอดังภาพ

• ในกรณีที่มีคนเข้ามาแก้ไข code ที่เราได้เขียนไว้และหน้าจอก็ถูกเปลี่ยนแปลงไป เมื่อเรา run unit test อีกครั้งจะมี Error แจ้งเตือนให้เราทราบ

• เข้าไปยัง Folder project จะเห็นว่าเจ้าตัว Lib FBSnapshotTestCase จะทำการ record เข้าไปยัง Folder : Snapshots>Failures>[ชื่อFolder.ชื่อTestClass] ใน Folder เจ้าตัว lib FBSnapshotTestCase จะทำการ record 3 ภาพเมื่อ test นั้น Failed ดังนี้

1. diff_testExample@3x.png ภาพที่บอกว่าปัญหาของหน้าจอที่เปลี่ยนแปลงไปมันอยู่ตรงไหน
2. failed_testExample@3x.png ภาพที่บ่งบอกว่าหน้าจอที่ failed จะแสดงเป็นแบบนี้
3. reference_testExample@3x.png ภาพที่เราได้ record ไว้ก่อนหน้าแล้ว ที่เรามั่นใจว่าหน้าจอนี้เป็นสิ่งที่ถูกต้อง

• เมื่อเข้าไปดูภาพแล้ว จะเห็นว่าอันไหนถูกและอันไหนผิด หลังจากนั้นก็ทำการไปแก้ไข Code ให้ถูกต้องตามที่ต้องการและเข้าไป recordMode เป็น true เพื่อทำการ record อีกครั้ง ก็จะเจอดังภาพ

• หลังจากนั้นก็เปลี่ยน recordMode เป็น false เหมือนเดิม test suite ก็กลับมาเขียวเหมือนเดิม

จบแล้ววว เจอกันในบทความถัดไป ^-^

หวังว่าจะมีประโยชน์กับคนที่เข้ามาอ่านกันน๊าา

สามารถเข้าไปดู Code ที่เขียนตัวอย่างได้ที่นี่

phatpan/iOSSnapshotExample

Ref.

หนังสือ iOS 11 Swift Programming Cookbook: Solutions and Examples for IOS Apps Book by Vandad Nahavandipoor

facebookarchive/ios-snapshot-test-case

uber/ios-snapshot-test-case

uber/ios-snapshot-test-case