בדיקת הניווט באמצעות המיקוד

אוטומציה של בדיקות הניווט באמצעות המיקוד מבטיחה שהאפליקציה תספק חוויית משתמש עקבית וצפויה במקלדות פיזיות, בכפתורי החיצים ובכלי הנגישות. ב-Compose יש ממשקי API מובנים לבדיקה, שמאפשרים לדמות קלט מקשים ולאמת מצבי מיקוד.

הגדרת בדיקות מיקוד

כדי לכתוב בדיקות מיקוד, משתמשים ב-createComposeRule() מספריית הבדיקות של Compose:

@RunWith(AndroidJUnit4::class)
class FocusNavigationTest {
    @get:Rule
    val composeTestRule = createComposeRule()
FocusTesting.kt

הערה: כברירת מחדל, סביבות הבדיקה של Compose מופעלות במצב מגע. כדי להגדיר אם סביבת הבדיקה תתחיל במצב מגע או במצב מקלדת, עיינו בהגדרת מצב ברירת המחדל של הקלט.

אימות יעדי המיקוד

כדי לבדוק אם רכיב בממשק המשתמש יכול לקבל את המיקוד, אפשר ללחוץ עליו או לבקש מיקוד, ואז לאמת את המצב שלו באמצעות assertIsFocused() ו-assertIsNotFocused().

@Test
fun interactiveElement_isFocusTarget() {
    composeTestRule.setContent {
        AppTheme {
            CardListScreen()
        }
    }

    val firstCard = composeTestRule.onNodeWithTag("card_1")
    val secondCard = composeTestRule.onNodeWithTag("card_2")

    // Focus the first element
    firstCard.performClick()
    firstCard.assertIsFocused()
    secondCard.assertIsNotFocused()
}
FocusTesting.kt

בדיקת מעבר מיקוד חד-ממדי

מדמים לחיצות על המקשים Tab ו-Shift+Tab באמצעות performKeyInput כדי לוודא שהמיקוד עובר בממשק המשתמש לפי סדר ההופעה. כדי לוודא שהניווט הדו-כיווני תקין, מומלץ לבדוק גם את הניווט קדימה (Key.Tab) וגם את הניווט אחורה (Key.Tab תוך כדי לחיצה על Key.ShiftLeft):

@Test
fun tabKey_navigatesInAppearanceOrder() {
    composeTestRule.setContent {
        AppTheme {
            CardListScreen()
        }
    }

    val firstCard = composeTestRule.onNodeWithTag("card_1")
    val secondCard = composeTestRule.onNodeWithTag("card_2")
    val thirdCard = composeTestRule.onNodeWithTag("card_3")

    firstCard.performClick()
    firstCard.assertIsFocused()

    // Press Tab -> Moves to second card
    firstCard.performKeyInput {
        pressKey(Key.Tab)
    }
    secondCard.assertIsFocused()
    firstCard.assertIsNotFocused()

    // Press Tab -> Moves to third card
    secondCard.performKeyInput {
        pressKey(Key.Tab)
    }
    thirdCard.assertIsFocused()

    // Press Shift + Tab -> Moves backward to second card
    thirdCard.performKeyInput {
        withKeyDown(Key.ShiftLeft) {
            pressKey(Key.Tab)
        }
    }
    secondCard.assertIsFocused()
}
FocusTesting.kt

בדיקת מעבר דו-ממדי בכיוון מסוים

כדי לדמות את מקשי החיצים או את כפתורי החיצים (D-pad), משתמשים במקשים Key.DirectionDown, Key.DirectionUp, Key.DirectionRight ו-Key.DirectionLeft.

@Test
fun arrowKeys_moveFocusTwoDimensionallyWithoutWrap() {
    composeTestRule.setContent {
        AppTheme {
            GridLayoutScreen()
        }
    }

    val topLeftButton = composeTestRule.onNodeWithTag("btn_top_left")
    val bottomLeftButton = composeTestRule.onNodeWithTag("btn_bottom_left")

    topLeftButton.performClick()
    topLeftButton.assertIsFocused()

    // Down arrow moves focus downward to bottom-left button
    topLeftButton.performKeyInput {
        pressKey(Key.DirectionDown)
    }
    bottomLeftButton.assertIsFocused()

    // Directional keys do not wrap around: pressing Down on bottom element stays focused
    bottomLeftButton.performKeyInput {
        pressKey(Key.DirectionDown)
    }
    bottomLeftButton.assertIsFocused()
}
FocusTesting.kt

בדיקת ההתנהגות של המיקוד בשדה הטקסט

מוודאים שהמיקוד עובר לשדות טקסט עם שורה אחת כשלוחצים על Tab, אבל נשאר בשדות טקסט עם כמה שורות:

@Test
fun textField_handlesTabAccordingToLineLimits() {
    composeTestRule.setContent {
        AppTheme {
            FormScreen()
        }
    }

    val singleLineNode = composeTestRule.onNodeWithTag("single_line_field")
    val multiLineNode = composeTestRule.onNodeWithTag("multi_line_field")
    val submitButtonNode = composeTestRule.onNodeWithTag("submit_button")

    // Single-line field advances focus on Tab
    singleLineNode.performClick()
    singleLineNode.assertIsFocused()
    singleLineNode.performKeyInput { pressKey(Key.Tab) }
    multiLineNode.assertIsFocused()

    // Multi-line field keeps focus and inserts '\t'
    multiLineNode.performKeyInput { pressKey(Key.Tab) }
    multiLineNode.assertIsFocused()
    submitButtonNode.assertIsNotFocused()

    // Shift + Tab escapes multi-line field to previous target
    multiLineNode.performKeyInput {
        withKeyDown(Key.ShiftLeft) { pressKey(Key.Tab) }
    }
    singleLineNode.assertIsFocused()
}
FocusTesting.kt