Golden Test — یہ کیا ہے، سنیپ شاٹ ٹیسٹنگ کیسے کام کرتی ہے اور استعمال

Golden Test کیا ہے اور یہ کیسے کام کرتا ہے؟

Golden Test — ایک کمپوننٹ کی بصری ظاہری شکل کی ریفرنس سے پکسل بہ پکسل موازنہ کر کے خودکار جانچ ہے۔ عمل: (1) ڈیولپر یا ٹیسٹر کمپوننٹ کا پہلا سنیپ شاٹ بناتا ہے — یہ «golden» (ریفرنس) ہے۔ (2) golden فائل ٹیسٹ کے ساتھ ریپوزٹری میں محفوظ کی جاتی ہے۔ (3) بعد کے رنز میں، ٹیسٹ کمپوننٹ کو دوبارہ رینڈر کرتا ہے اور محفوظ کردہ golden سے موازنہ کرتا ہے۔ (4) اگر امیجز مماثل ہوں — ٹیسٹ پاس۔ اگر مختلف ہوں — ٹیسٹ فیل اور diff دکھاتا ہے۔ فیصلہ: یا تو تبدیلیاں متوقع ہیں (golden اپ ڈیٹ کریں) یا یہ بگ ہے۔

Golden کیسے جنریٹ ہوتا ہے — لائبریری کمپوننٹ کو حقیقی ڈسپلے کے بغیر آف اسکرین بفر (Android: Canvas، iOS: UIGraphicsImageRenderer) میں رینڈر کرتی ہے۔ اس کا مطلب ہے کہ golden ٹیسٹ اسکرین ایمولیٹر (ورچوئل ڈسپلے) کے بغیر CI پر کام کرتے ہیں، جس سے عملدرآمد تیز ہوتا ہے۔ Android پر Paparazzi Android Studio کا Layoutlib استعمال کرتا ہے — وہی انجن جو Layout Editor استعمال کرتا ہے۔ iOSSnapshotTestCase CGImage میں UIKit رینڈرنگ استعمال کرتا ہے۔ نتیجہ — مقررہ سائز کی PNG فائل۔

Golden فائلوں کا سائز اور ذخیرہ کا انتظام

Golden فائلیں — ایک اسکرین (1080x1920) کا PNG سنیپ شاٹ پیچیدگی کے لحاظ سے 200–800 KB لیتا ہے۔ 500 golden ٹیسٹ والے پروجیکٹ کے لیے، یہ ریپوزٹری میں ~100–400 MB ہے۔ حل: (1) golden کو Git LFS میں اسٹور کریں۔ (2) PNG کمپریشن (pngcrush، oxipng) استعمال کریں۔ (3) golden کو علیحدہ اسٹوریج (S3) پر رکھیں اور بلڈ کے دوران لائیں۔ IT Sectr میں ہم golden کو Git LFS میں 1 MB فی فائل کی حد کے ساتھ اسٹور کرتے ہیں — یہ 90% ٹیسٹ کے لیے کافی ہے۔

Flaky golden ٹیسٹ اور ان کا حل

Flaky golden ٹیسٹ — golden ٹیسٹ کا بنیادی مسئلہ۔ مختلف GPU، فونٹ ورژن اور اینٹی ایلائسنگ پکسلز میں باریک فرق پیدا کرتے ہیں۔ حل: حد (مختلف پکسلز کا قابل اجازت فیصد)، فزی موازنہ، اور ایک جیسے CI ایجنٹس پر چلانا (ایک ہی GPU، OS، ایمولیٹر ورژن)۔ Paparazzi پکسل پرفیکٹ موازنہ استعمال کرتا ہے، اس لیے CI ایجنٹس ایک جیسے ہونے چاہئیں۔

Golden Test بمقابلہ Screenshot Test: فرق کیا ہے؟

Golden Test — مقررہ ریفرنس کے ساتھ اسکرین شاٹ ٹیسٹنگ کی ایک قسم ہے۔ «golden» کی اصطلاح کا مطلب ہے کہ ریفرنس کو ٹیم نے منظور کیا ہے اور ریپوزٹری میں محفوظ ہے۔ کسی بھی امیج تبدیلی کے لیے ڈیولپر کے شعوری فیصلے کی ضرورت ہوتی ہے: golden اپ ڈیٹ کریں یا کوڈ ٹھیک کریں۔ Golden Test انفرادی کمپوننٹس (Composable، UIView) کی سطح پر کام کرتا ہے اور حقیقی ڈیوائس کی ضرورت نہیں ہوتی۔

Screenshot Test — ایک وسیع تر تصور ہے۔ اسکرین شاٹ ٹیسٹ حقیقی ڈیٹا، نیویگیشن، سسٹم اسٹیٹس بار اور اینیمیشنز کے ساتھ پوری اسکرین کیپچر کر سکتا ہے۔ اسکرین شاٹ ٹیسٹ اکثر حقیقی ڈیوائس یا ایمولیٹر پر UI Automator (Android) یا XCUITest (iOS) کے ذریعے چلائے جاتے ہیں۔ Golden ٹیسٹ یونٹ ٹیسٹ ماحول (JVM، XCTest) میں ایمولیٹر کے بغیر چلتے ہیں اور صرف ایک کمپوننٹ کیپچر کرتے ہیں۔

کوریج کی حکمت عملی: golden بمقابلہ screenshot

Golden بمقابلہ Screenshot — ہر کمٹ پر انفرادی UI کمپوننٹس (بٹن، کارڈ، ڈائیلاگ) کی جانچ کے لیے golden ٹیسٹ۔ ریلیز سے پہلے پوری اسکرینز کی E2E جانچ کے لیے اسکرین شاٹ ٹیسٹ۔ Golden ٹیسٹ ڈیولپر کو تیز فیڈبیک دیتے ہیں، اسکرین شاٹ ٹیسٹ پوری ایپلیکیشن کی سالمیت میں اعتماد دیتے ہیں۔ IT Sectr میں ہم Pull Request کے لیے golden ٹیسٹ (3–5 منٹ) اور راتوں رات اسکرین شاٹ ٹیسٹ (30–60 منٹ) استعمال کرتے ہیں۔

Paparazzi اور Roborazzi: Android پر سنیپ شاٹ ٹیسٹنگ

Paparazzi — Cash App (Square) کی لائبریری جو Android View اور Jetpack Compose کمپوننٹس کو ایمولیٹر کے بغیر PNG میں رینڈر کرتی ہے۔ یہ Layoutlib (Android Studio Preview کا وہی انجن) استعمال کرتی ہے۔ سیٹ اپ: Gradle پلگ ان شامل کریں، @Test اور @RunWith(PaparazziRule::class) کے ساتھ ٹیسٹ لکھیں، paparazzi.snapshot(view) کال کریں۔ Paparazzi اینیمیشنز، ویڈیو اور Real Device کو سپورٹ نہیں کرتا — صرف جامد کمپوننٹ رینڈرنگ۔

// build.gradle.kts (module)
plugins {
    id("app.cash.paparazzi") version "1.3.1"
}

// Compose کمپوننٹ کے لیے Golden test
class ButtonGoldenTest {

    @get:Rule
    val paparazzi = Paparazzi(
        Paparazzi.PaparazziSnapshotConfig(
            deviceConfig = DeviceConfig.PIXEL_6,
            theme = "android:Theme.Material.Light.NoActionBar"
        )
    )

    @Test
    fun primary_button() {
        paparazzi.snapshot {
            Button(
                onClick = { },
                modifier = Modifier.width(200.dp)
            ) {
                Text("Submit")
            }
        }
    }
}

Roborazzi — Compose، View اور امیج موازنہ کی حمایت کے ساتھ Paparazzi کا متبادل۔ فرق: Roborazzi Robolectric کے ذریعے کام کرتا ہے اور حد (قابل اجازت پکسل فرق فیصد) کو سپورٹ کرتا ہے۔ یہ CI پر مختلف GPU کے ساتھ عدم استحکام کم کرتا ہے۔ Roborazzi تبدیلیوں کی GIF اینیمیشن (پہلے/بعد/diff) بھی بنا سکتا ہے، جو کوڈ ریویو کے لیے آسان ہے۔ فائل فارمیٹ: PNG + JSON میٹا ڈیٹا۔

Golden اپ ڈیٹ کرنا — جان بوجھ کر UI تبدیلی کے بعد، ڈیولپر پرانی golden فائلیں حذف کرتا ہے اور record فلیگ کے ساتھ ٹیسٹ چلاتا ہے۔ Paparazzi تمام golden فائلیں دوبارہ بناتا ہے۔ پھر ڈیولپر کوڈ تبدیلی کے ساتھ نئی golden فائلیں کمٹ کرتا ہے۔ کوڈ ریویو میں، ریویو کرنے والا پرانی اور نئی golden فائلوں کا diff دیکھتا ہے۔ اگر تبدیلیاں منظور ہو جائیں — PR مرج ہو جاتا ہے۔ اگر نہیں — ڈیولپر کوڈ ٹھیک کرتا ہے اور ٹیسٹ دوبارہ چلاتا ہے۔ CI پر golden فائلوں کو کبھی خودکار طور پر اپ ڈیٹ نہ کریں — صرف مقامی طور پر۔

iOS پر SwiftSnapshotTesting اور iOSSnapshotTestCase

SwiftSnapshotTesting — pointfree.co کی لائبریری، Composable Architecture کے تخلیق کار۔ UIView، UIViewController، CALayer اور SwiftUI View کو سپورٹ کرتی ہے۔ اصول: assertSnapshot(matching: view, as: .image)۔ پہلے رن پر، golden خود بخود بنتا ہے۔ بعد کے رنز پر، موازنہ کیا جاتا ہے۔ اگر فرق قابل اجازت حد سے زیادہ ہو، ٹیسٹ ناکام ہو جاتا ہے۔ SwiftSnapshotTesting UIGraphicsImageRenderer کے ذریعے کام کرتا ہے، جو CI (Xcode Cloud، GitHub Actions) کے ساتھ مطابقت رکھتا ہے۔

import SnapshotTesting
import XCTest

final class ProfileCardSnapshotTests: XCTestCase {

    func test_profile_card_default() {
        let card = ProfileCard(
            name: "Alice",
            avatar: UIImage.testImage(),
            badge: "Pro"
        )
        let controller = UIHostingController(rootView: card)

        assertSnapshot(
            matching: controller,
            as: .image(on: .iPhoneSe),
            record: ProcessInfo.processInfo
                .environment["RECORD"] != nil
        )
    }
}

iOSSnapshotTestCase (سابقہ FBSnapshotTestCase) — Uber کی UIKit کے لیے لائبریری۔ SwiftSnapshotTesting کے برعکس، iOSSnapshotTestCase کو اسکرین سائز اور اورینٹیشن بتانے کی ضرورت ہوتی ہے۔ Golden فائلیں ReferenceImages فولڈر میں PNG ہیں۔ فائدہ: SwiftUI کے بغیر UIKit کے ساتھ کام کرتی ہے اور iOS 12+ کو سپورٹ کرتی ہے۔ نقصان: golden خود بخود اپ ڈیٹ نہیں کرتی — record فلیگ کے ساتھ چلانی پڑتی ہے۔ SwiftSnapshotTesting زیادہ جدید ہے اور نئے پروجیکٹس کے لیے تجویز کردہ ہے۔

ڈیوائس کے مخصوص golden — مختلف اسکرین سائز اور اورینٹیشن کے لیے golden فائلیں مختلف ہوتی ہیں۔ معیاری طریقہ: golden فائلوں کو TestName@3x~iPhone14.png کے نام سے نامزد کریں۔ SwiftSnapshotTesting خود بخود ڈیوائس سفیكس شامل کرتا ہے اگر .image(on: .iPhoneSe) پیرامیٹر بتایا گیا ہو۔ Android پر، Paparazzi سائز سیٹ کرنے کے لیے DeviceConfig استعمال کرتا ہے۔ ہر معاون ڈیوائس فارم فیکٹر کے لیے golden علیحدہ سے اسٹور کریں۔ مختلف سائز کے لیے ایک golden استعمال نہ کریں — یہ غیر مستحکم ٹیسٹ کا باعث بنے گا۔

CI میں golden فائلوں کے ساتھ کام کرنا اور اپ ڈیٹ کا انتظام

CI پائپ لائن — golden ٹیسٹ ہر Pull Request پر چلنے چاہئیں۔ اگر کوئی ٹیسٹ ناکام ہوتا ہے، CI diff امیج کو بلڈ آرٹیفیکٹ کے طور پر دکھاتا ہے۔ ڈیولپر diff کا جائزہ لیتا ہے اور فیصلہ کرتا ہے۔ اہم: CI پر جنریٹ کردہ golden فائلیں کبھی خودکار طور پر کمٹ نہیں ہوتیں۔ صرف جان بوجھ کر تبدیلی کے بعد ڈیولپر کے ذریعے مقامی جنریشن۔ GitHub Actions اور GitLab CI براؤزر میں diff دیکھنے کے لیے آرٹیفیکٹ (png، html) اپ لوڈ کرنے کی حمایت کرتے ہیں۔

ریپوزٹری کا سائز — golden فائلیں تیزی سے بڑھتی ہیں۔ 500 ٹیسٹ = 100–400 MB PNG۔ حل: (1) Git LFS — ہر golden LFS میں محفوظ، صرف checkout پر کلون ہوتا ہے۔ (2) golden کو علیحدہ ریپوزٹری میں اسٹور کریں اور سب ماڈیول کے طور پر شامل کریں۔ (3) S3 + کیشنگ — golden S3 پر، CI چیکسم کے ذریعے صرف تبدیل شدہ فائلیں ڈاؤن لوڈ کرتا ہے۔ IT Sectr میں ہم track *.png filter=lfs diff=lfs merge=lfs text=false کے ساتھ Git LFS استعمال کرتے ہیں۔ مقامی طور پر، golden src/test/goldens/ میں ہیں۔

Golden کا کوڈ ریویو — عام git diff PNG تبدیلیاں نہیں دکھاتا۔ حل: (1) GitHub کلک کرنے پر PNG امیجز کھولتا ہے۔ (2) Review Apps استعمال کریں جہاں golden diff براؤزر میں دکھائی دیتا ہے۔ (3) پہلے/بعد/diff کالم کے ساتھ HTML رپورٹ جنریٹ کریں۔ Paparazzi تین کالم والی HTML رپورٹ بناتا ہے: حقیقی، متوقع، diff۔ رپورٹ CI آرٹیفیکٹ سے منسلک ہوتی ہے۔ ریویو کرنے والے فائلیں مقامی طور پر ڈاؤن لوڈ کیے بغیر رپورٹ دیکھتے ہیں۔

Golden کب اپ ڈیٹ کریں — صرف شعوری UI تبدیلی کے بعد۔ فونٹ، رنگ، پیڈنگ، آئیکن تبدیل کرنا — golden اپ ڈیٹ ہونا چاہیے۔ نیا بٹن شامل کرنا، عناصر کو دوبارہ ترتیب دینا — golden اپ ڈیٹ ہونا چاہیے۔ بگ فکس جو بصری ظاہری شکل بدلتا ہے — golden اپ ڈیٹ ہونا چاہیے۔ UI تبدیلی کے بغیر ریفیکٹرنگ — golden نہیں بدلنا چاہیے۔ اگر golden UI کوڈ تبدیلی کے بغیر بدلتا ہے — یہ ماحول کی وجہ سے flaky ٹیسٹ ہے، CI ایجنٹس یا ڈیپنڈنسی ورژن میں وجہ تلاش کریں۔