Normalize RN checkout E2E native support

Author: kyle-schellen

platforms/android/lib/src/main/java/com/shopify/checkoutkit/CheckoutDialog.kt

@@ -74,7 +74,7 @@ internal class CheckoutDialog(
             setBackgroundColor(colorScheme.headerBackgroundColor())
             setTitleTextColor(colorScheme.headerFontColor())
             inflateMenu(R.menu.checkout_menu)
-            menu.findItem(R.id.checkoutKitCloseBtn).apply { setupCloseButton(colorScheme) }
+            menu.findItem(R.id.shopify_checkout_kit_close_button).apply { setupCloseButton(colorScheme) }
         }
 
         findViewById<ProgressBar>(R.id.progressBar).apply {

platforms/android/lib/src/main/res/menu/checkout_menu.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:id="@+id/checkoutKitCloseBtn"
+    <item android:id="@+id/shopify_checkout_kit_close_button"
         android:icon="@drawable/close"
         android:title="@string/close_checkout"
         app:showAsAction="always" />

platforms/android/lib/src/test/java/com/shopify/checkoutkit/CheckoutDialogTest.kt

@@ -201,7 +201,7 @@ class CheckoutDialogTest {
 
         // click cancel button
         val header = dialog.findViewById<Toolbar>(R.id.checkoutKitHeader)
-        header.menu.performIdentifierAction(R.id.checkoutKitCloseBtn, 0)
+        header.menu.performIdentifierAction(R.id.shopify_checkout_kit_close_button, 0)
         ShadowLooper.runUiThreadTasks()
 
         verify(mockListener, timeout(2000)).onCheckoutCanceled()
@@ -216,7 +216,7 @@ class CheckoutDialogTest {
 
         // click cancel button
         val header = dialog.findViewById<Toolbar>(R.id.checkoutKitHeader)
-        header.menu.performIdentifierAction(R.id.checkoutKitCloseBtn, 0)
+        header.menu.performIdentifierAction(R.id.shopify_checkout_kit_close_button, 0)
         ShadowLooper.runUiThreadTasks()
 
         assertThat(dialog.containsChildOfType(CheckoutWebView::class.java)).isFalse()
@@ -272,7 +272,7 @@ class CheckoutDialogTest {
 
         val dialog = ShadowDialog.getLatestDialog() as CheckoutDialog
         val toolbar = dialog.findViewById<Toolbar>(R.id.checkoutKitHeader)
-        val closeMenuItem = toolbar.menu.findItem(R.id.checkoutKitCloseBtn)
+        val closeMenuItem = toolbar.menu.findItem(R.id.shopify_checkout_kit_close_button)
 
         assertThat(closeMenuItem).isNotNull
         assertThat(closeMenuItem.icon).isNotNull
@@ -296,7 +296,7 @@ class CheckoutDialogTest {
 
         val dialog = ShadowDialog.getLatestDialog() as CheckoutDialog
         val toolbar = dialog.findViewById<Toolbar>(R.id.checkoutKitHeader)
-        val closeMenuItem = toolbar.menu.findItem(R.id.checkoutKitCloseBtn)
+        val closeMenuItem = toolbar.menu.findItem(R.id.shopify_checkout_kit_close_button)
 
         assertThat(closeMenuItem).isNotNull
         assertThat(closeMenuItem.icon).isNotNull
@@ -319,7 +319,7 @@ class CheckoutDialogTest {
 
         val dialog = ShadowDialog.getLatestDialog() as CheckoutDialog
         val toolbar = dialog.findViewById<Toolbar>(R.id.checkoutKitHeader)
-        val closeMenuItem = toolbar.menu.findItem(R.id.checkoutKitCloseBtn)
+        val closeMenuItem = toolbar.menu.findItem(R.id.shopify_checkout_kit_close_button)
 
         assertThat(closeMenuItem).isNotNull
         assertThat(closeMenuItem.icon).isNotNull
@@ -360,7 +360,7 @@ class CheckoutDialogTest {
 
         val dialog = ShadowDialog.getLatestDialog() as CheckoutDialog
         val toolbar = dialog.findViewById<Toolbar>(R.id.checkoutKitHeader)
-        val closeMenuItem = toolbar.menu.findItem(R.id.checkoutKitCloseBtn)
+        val closeMenuItem = toolbar.menu.findItem(R.id.shopify_checkout_kit_close_button)
 
         assertThat(closeMenuItem).isNotNull
         assertThat(closeMenuItem.icon).isNotNull

platforms/react-native/modules/@shopify/checkout-kit-react-native/ios/AcceleratedCheckoutButtons.swift

@@ -288,9 +288,18 @@ class RCTAcceleratedCheckoutButtonsView: UIView {
 
         // Attach config (and Apple Pay config if available)
         if let applePayConfig = AcceleratedCheckoutConfiguration.shared.applePayConfiguration {
-            view = AnyView(buttons.environment(\.shopifyAcceleratedCheckoutsConfiguration, config).environment(\.shopifyApplePayConfiguration, applePayConfig).environment(\.colorScheme, colorScheme))
+            view = AnyView(
+                buttons
+                    .environment(\.shopifyAcceleratedCheckoutsConfiguration, config)
+                    .environment(\.shopifyApplePayConfiguration, applePayConfig)
+                    .environment(\.colorScheme, colorScheme)
+            )
         } else {
-            view = AnyView(buttons.environment(\.shopifyAcceleratedCheckoutsConfiguration, config).environment(\.colorScheme, colorScheme))
+            view = AnyView(
+                buttons
+                    .environment(\.shopifyAcceleratedCheckoutsConfiguration, config)
+                    .environment(\.colorScheme, colorScheme)
+            )
         }
 
         if let hostingController {

platforms/swift/Sources/ShopifyCheckoutKit/CheckoutWebViewController.swift

@@ -3,6 +3,10 @@ import WebKit
 
 @MainActor
 class CheckoutWebViewController: UIViewController, UIAdaptivePresentationControllerDelegate {
+    /// Stable identifier consumed by React Native Maestro E2E tests.
+    /// Keep this value in sync with the checkout close selector used by E2E flows.
+    private static let closeButtonAccessibilityIdentifier = "shopify_checkout_kit_close_button"
+
     var onCancel: (() -> Void)?
     var onFail: ((CheckoutError) -> Void)?
     weak var delegate: (any CheckoutDelegate)?
@@ -41,14 +45,17 @@ class CheckoutWebViewController: UIViewController, UIAdaptivePresentationControl
             }
 
             item.tintColor = closeButtonTintColor
+            item.accessibilityIdentifier = Self.closeButtonAccessibilityIdentifier
             return item
         }
 
-        return UIBarButtonItem(
+        let item = UIBarButtonItem(
             barButtonSystemItem: .close,
             target: self,
             action: #selector(close)
         )
+        item.accessibilityIdentifier = Self.closeButtonAccessibilityIdentifier
+        return item
     }()
 
     var progressObserver: NSKeyValueObservation?

platforms/swift/Tests/ShopifyCheckoutKitTests/CheckoutViewControllerTests.swift

@@ -7,6 +7,7 @@ import XCTest
 class CheckoutViewDelegateTests: XCTestCase {
     private var customTitle: String?
     private let checkoutURL = URL(string: "https://checkout-sdk.myshopify.com")!
+    private let expectedCloseButtonIdentifier = "shopify_checkout_kit_close_button"
     private var viewController: MockCheckoutWebViewController!
     private var navigationController: UINavigationController!
 
@@ -86,6 +87,7 @@ class CheckoutViewDelegateTests: XCTestCase {
         XCTAssertNotNil(closeButton)
         XCTAssertEqual(closeButton?.style, .plain)
         XCTAssertNil(closeButton?.image)
+        XCTAssertEqual(closeButton?.accessibilityIdentifier, expectedCloseButtonIdentifier)
     }
 
     func testCloseButtonUsesCustomImageAndTintWhenColorIsSet() {
@@ -98,6 +100,7 @@ class CheckoutViewDelegateTests: XCTestCase {
         XCTAssertEqual(closeButton?.style, .plain)
         XCTAssertNotNil(closeButton?.image)
         XCTAssertEqual(closeButton?.tintColor, customColor)
+        XCTAssertEqual(closeButton?.accessibilityIdentifier, expectedCloseButtonIdentifier)
     }
 
     func testCloseButtonImageIsXMarkCircleFill() {