[E2E] Rename E2ETestIds to AccessibilityIdentifiers

platforms/android/samples/CheckoutKitAndroidDemo/app/src/main/java/com/shopify/checkoutkit/androiddemo/CheckoutKitApp.kt

@@ -44,6 +44,7 @@ import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.rememberNavController
 import com.shopify.checkoutkit.CheckoutAppearance
 import com.shopify.checkoutkit.ColorScheme
+import com.shopify.checkoutkit.androiddemo.accessibility.AccessibilityIdentifiers
 import com.shopify.checkoutkit.androiddemo.cart.AppOwnedCheckoutSheet
 import com.shopify.checkoutkit.androiddemo.cart.CartViewModel
 import com.shopify.checkoutkit.androiddemo.cart.data.totalQuantity
@@ -54,7 +55,6 @@ import com.shopify.checkoutkit.androiddemo.common.navigation.CheckoutKitNavHost
 import com.shopify.checkoutkit.androiddemo.common.navigation.Screen
 import com.shopify.checkoutkit.androiddemo.common.ui.theme.CheckoutKitSampleTheme
 import com.shopify.checkoutkit.androiddemo.e2e.E2ENavigationEffect
-import com.shopify.checkoutkit.androiddemo.e2e.E2ETestIds
 import com.shopify.checkoutkit.androiddemo.logs.LogsViewModel
 import com.shopify.checkoutkit.androiddemo.settings.SettingsUiState
 import com.shopify.checkoutkit.androiddemo.settings.SettingsViewModel
@@ -94,7 +94,7 @@ fun CheckoutKitAppRoot(
             modifier = Modifier
                 .fillMaxSize()
                 .semantics { testTagsAsResourceId = true }
-                .testTag(E2ETestIds.APP_READY),
+                .testTag(AccessibilityIdentifiers.APP_READY),
         ) {
             val navController = rememberNavController()
 

platforms/android/samples/CheckoutKitAndroidDemo/app/src/main/java/com/shopify/checkoutkit/androiddemo/e2e/E2ETestIds.kt → platforms/android/samples/CheckoutKitAndroidDemo/app/src/main/java/com/shopify/checkoutkit/androiddemo/accessibility/AccessibilityIdentifiers.kt

@@ -1,6 +1,6 @@
-package com.shopify.checkoutkit.androiddemo.e2e
+package com.shopify.checkoutkit.androiddemo.accessibility
 
-object E2ETestIds {
+object AccessibilityIdentifiers {
     const val APP_READY = "checkout-kit-sample-ready"
 
     object Cart {

platforms/android/samples/CheckoutKitAndroidDemo/app/src/main/java/com/shopify/checkoutkit/androiddemo/cart/CartView.kt

@@ -39,6 +39,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.NavController
 import com.shopify.checkoutkit.androiddemo.R
+import com.shopify.checkoutkit.androiddemo.accessibility.AccessibilityIdentifiers
 import com.shopify.checkoutkit.androiddemo.cart.data.CartAmount
 import com.shopify.checkoutkit.androiddemo.cart.data.CartLine
 import com.shopify.checkoutkit.androiddemo.cart.data.CartState
@@ -50,7 +51,6 @@ import com.shopify.checkoutkit.androiddemo.common.components.MoneyText
 import com.shopify.checkoutkit.androiddemo.common.components.ProgressIndicator
 import com.shopify.checkoutkit.androiddemo.common.ui.theme.horizontalPadding
 import com.shopify.checkoutkit.androiddemo.common.ui.theme.verticalPadding
-import com.shopify.checkoutkit.androiddemo.e2e.E2ETestIds
 import com.shopify.checkoutkit.androiddemo.settings.data.CheckoutPresentationMode
 
 @Composable
@@ -244,7 +244,7 @@ private fun CheckoutButton(
         Button(
             shape = RectangleShape,
             onClick = onClick,
-            modifier = Modifier.testTag(E2ETestIds.Cart.CHECKOUT_BUTTON),
+            modifier = Modifier.testTag(AccessibilityIdentifiers.Cart.CHECKOUT_BUTTON),
         ) {
             Column {
                 Text(
@@ -255,7 +255,7 @@ private fun CheckoutButton(
                     modifier = Modifier
                         .fillMaxWidth()
                         .padding(vertical = 8.dp)
-                        .testTag(E2ETestIds.Cart.CHECKOUT_READY)
+                        .testTag(AccessibilityIdentifiers.Cart.CHECKOUT_READY)
                 )
             }
         }

platforms/android/samples/CheckoutKitAndroidDemo/app/src/test/java/com/shopify/checkoutkit/androiddemo/accessibility/AccessibilityIdentifiersTest.kt

@@ -0,0 +1,17 @@
+package com.shopify.checkoutkit.androiddemo.accessibility
+
+import org.assertj.core.api.Assertions.assertThat
+import org.junit.Test
+
+class AccessibilityIdentifiersTest {
+    @Test
+    fun `app ready marker matches the maestro flows`() {
+        assertThat(AccessibilityIdentifiers.APP_READY).isEqualTo("checkout-kit-sample-ready")
+    }
+
+    @Test
+    fun `cart markers match the maestro flows`() {
+        assertThat(AccessibilityIdentifiers.Cart.CHECKOUT_READY).isEqualTo("cart-checkout-ready")
+        assertThat(AccessibilityIdentifiers.Cart.CHECKOUT_BUTTON).isEqualTo("checkout-button")
+    }
+}

platforms/react-native/sample/src/App.tsx

@@ -51,7 +51,7 @@ import env from 'react-native-config';
 import {createDebugLogger} from './utils';
 import {useShopifyEventHandlers} from './hooks/useCheckoutEventHandlers';
 import {useE2ECartBootstrap} from './e2e/useE2ECartBootstrap';
-import {E2ETestIds} from './e2e/testIds';
+import {AccessibilityIdentifiers} from './accessibility/accessibilityIdentifiers';
 
 const log = createDebugLogger('ENV');
 
@@ -263,7 +263,9 @@ function CartIcon({onPress}: {onPress: () => void}) {
   const theme = useTheme();
 
   return (
-    <Pressable onPress={onPress} testID={E2ETestIds.catalog.headerCartIcon}>
+    <Pressable
+      onPress={onPress}
+      testID={AccessibilityIdentifiers.catalog.headerCartIcon}>
       <Icon name="shopping-basket" size={24} color={theme.colors.secondary} />
     </Pressable>
   );
@@ -510,22 +512,22 @@ function Routes() {
   return (
     <View
       style={styles.routes}
-      testID={linkingReady ? E2ETestIds.appReady : undefined}>
+      testID={linkingReady ? AccessibilityIdentifiers.appReady : undefined}>
       <Tab.Navigator>
         <Tab.Screen
           name="Catalog"
           component={CatalogStack}
           options={{
             headerShown: false,
-            tabBarButtonTestID: E2ETestIds.tabs.catalog,
+            tabBarButtonTestID: AccessibilityIdentifiers.tabs.catalog,
             tabBarIcon: createNavigationIcon('shop'),
           }}
         />
         <Tab.Screen
           name="Cart"
           component={CartScreen}
           options={{
-            tabBarButtonTestID: E2ETestIds.tabs.cart,
+            tabBarButtonTestID: AccessibilityIdentifiers.tabs.cart,
             tabBarIcon: createNavigationIcon('shopping-bag'),
             tabBarBadge: totalQuantity > 0 ? totalQuantity : undefined,
           }}
@@ -535,15 +537,15 @@ function Routes() {
           component={AccountStackScreen}
           options={{
             headerShown: false,
-            tabBarButtonTestID: E2ETestIds.tabs.account,
+            tabBarButtonTestID: AccessibilityIdentifiers.tabs.account,
             tabBarIcon: createNavigationIcon('user'),
           }}
         />
         <Tab.Screen
           name="Settings"
           component={SettingsScreen}
           options={{
-            tabBarButtonTestID: E2ETestIds.tabs.settings,
+            tabBarButtonTestID: AccessibilityIdentifiers.tabs.settings,
             tabBarIcon: createNavigationIcon('cog'),
           }}
         />

platforms/react-native/sample/src/accessibility/__tests__/accessibilityIdentifiers.test.ts

@@ -0,0 +1,36 @@
+import {AccessibilityIdentifiers} from '../accessibilityIdentifiers';
+
+describe('AccessibilityIdentifiers', () => {
+  it('pins selector values consumed by Maestro flows', () => {
+    expect(AccessibilityIdentifiers.appReady).toBe('checkout-kit-sample-ready');
+    expect(AccessibilityIdentifiers.tabs.catalog).toBe('catalog-tab');
+    expect(AccessibilityIdentifiers.tabs.cart).toBe('cart-tab');
+    expect(AccessibilityIdentifiers.cart.checkoutReady).toBe(
+      'cart-checkout-ready',
+    );
+    expect(AccessibilityIdentifiers.cart.checkoutButton).toBe(
+      'checkout-button',
+    );
+    expect(AccessibilityIdentifiers.cart.emptyMessage).toBe(
+      'cart-empty-message',
+    );
+  });
+
+  it('pins generated Settings selector values used outside TypeScript', () => {
+    expect(AccessibilityIdentifiers.settings.section('authentication')).toBe(
+      'settings-section-authentication',
+    );
+    expect(
+      AccessibilityIdentifiers.settings.buyerIdentityOption('customerAccount'),
+    ).toBe('settings-buyer-identity-option-customer-account');
+    expect(AccessibilityIdentifiers.settings.themeOption('storefront')).toBe(
+      'settings-theme-option-storefront',
+    );
+    expect(
+      AccessibilityIdentifiers.settings.applePayStyleOption('whiteOutline'),
+    ).toBe('settings-apple-pay-style-option-white-outline');
+    expect(AccessibilityIdentifiers.settings.checkoutPreloadingSwitch).toBe(
+      'settings-checkout-preloading-switch',
+    );
+  });
+});

platforms/react-native/sample/src/e2e/testIds.ts → platforms/react-native/sample/src/accessibility/accessibilityIdentifiers.ts

@@ -1,4 +1,4 @@
-export class E2ETestIds {
+export class AccessibilityIdentifiers {
   private static kebabCase(value: string) {
     return value
       .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
@@ -33,13 +33,13 @@ export class E2ETestIds {
   static readonly settings = {
     screen: 'settings-screen',
     section: (section: string) =>
-      `settings-section-${E2ETestIds.kebabCase(section)}`,
+      `settings-section-${AccessibilityIdentifiers.kebabCase(section)}`,
     buyerIdentityOption: (mode: string) =>
-      `settings-buyer-identity-option-${E2ETestIds.kebabCase(mode)}`,
+      `settings-buyer-identity-option-${AccessibilityIdentifiers.kebabCase(mode)}`,
     themeOption: (scheme: string) =>
-      `settings-theme-option-${E2ETestIds.kebabCase(scheme)}`,
+      `settings-theme-option-${AccessibilityIdentifiers.kebabCase(scheme)}`,
     applePayStyleOption: (style: string) =>
-      `settings-apple-pay-style-option-${E2ETestIds.kebabCase(style)}`,
+      `settings-apple-pay-style-option-${AccessibilityIdentifiers.kebabCase(style)}`,
     checkoutPreloadingSwitch: 'settings-checkout-preloading-switch',
     buyerIdentityDetails: 'settings-buyer-identity-details',
     buyerIdentitySignInLink: 'settings-buyer-identity-sign-in-link',

platforms/react-native/sample/src/screens/AccountScreen.tsx

@@ -13,7 +13,7 @@ import type {AccountStackParamList} from '../App';
 import type {Colors} from '../context/Theme';
 import {useTheme} from '../context/Theme';
 import {useAuth} from '../context/Auth';
-import {E2ETestIds} from '../e2e/testIds';
+import {AccessibilityIdentifiers} from '../accessibility/accessibilityIdentifiers';
 
 type Props = NativeStackScreenProps<AccountStackParamList, 'AccountHome'>;
 
@@ -24,7 +24,9 @@ function AccountScreen({navigation}: Props) {
 
   if (isLoading) {
     return (
-      <View testID={E2ETestIds.account.loading} style={styles.centered}>
+      <View
+        testID={AccessibilityIdentifiers.account.loading}
+        style={styles.centered}>
         <ActivityIndicator size="large" />
       </View>
     );
@@ -52,20 +54,26 @@ function AuthenticatedView({
   const {logout} = useAuth();
 
   return (
-    <SafeAreaView testID={E2ETestIds.account.screen} style={styles.container}>
-      <View testID={E2ETestIds.account.signedInView} style={styles.centered}>
+    <SafeAreaView
+      testID={AccessibilityIdentifiers.account.screen}
+      style={styles.container}>
+      <View
+        testID={AccessibilityIdentifiers.account.signedInView}
+        style={styles.centered}>
         <Icon name="user" size={60} color="#81b0ff" />
         <Text style={styles.heading}>Signed In</Text>
         {email && (
-          <Text testID={E2ETestIds.account.email} style={styles.email}>
+          <Text
+            testID={AccessibilityIdentifiers.account.email}
+            style={styles.email}>
             {email}
           </Text>
         )}
         <Text style={styles.description}>
           Your checkout will be pre-filled with your account information.
         </Text>
         <Pressable
-          testID={E2ETestIds.account.signOutButton}
+          testID={AccessibilityIdentifiers.account.signOutButton}
           style={styles.button}
           onPress={logout}>
           <Text style={styles.buttonText}>Sign Out</Text>
@@ -83,8 +91,12 @@ function UnauthenticatedView({
   onSignIn: () => void;
 }) {
   return (
-    <SafeAreaView testID={E2ETestIds.account.screen} style={styles.container}>
-      <View testID={E2ETestIds.account.signedOutView} style={styles.centered}>
+    <SafeAreaView
+      testID={AccessibilityIdentifiers.account.screen}
+      style={styles.container}>
+      <View
+        testID={AccessibilityIdentifiers.account.signedOutView}
+        style={styles.centered}>
         <Icon name="user" size={60} color="#bbc1d6" />
         <Text style={styles.heading}>Sign in to your account</Text>
         <Text style={styles.description}>
@@ -96,7 +108,7 @@ function UnauthenticatedView({
           <Text style={styles.benefitItem}>• Order history and tracking</Text>
         </View>
         <Pressable
-          testID={E2ETestIds.account.signInButton}
+          testID={AccessibilityIdentifiers.account.signInButton}
           style={styles.button}
           onPress={onSignIn}>
           <Text style={styles.buttonText}>Sign In</Text>

platforms/react-native/sample/src/screens/CartScreen.tsx

@@ -31,7 +31,7 @@ import {
   useShopifyEventHandlers,
   useShopifyProtocolEventHandlers,
 } from '../hooks/useCheckoutEventHandlers';
-import {E2ETestIds} from '../e2e/testIds';
+import {AccessibilityIdentifiers} from '../accessibility/accessibilityIdentifiers';
 
 function CartScreen(): React.JSX.Element {
   const {present, preload} = useShopifyCheckout();
@@ -155,7 +155,9 @@ function CartScreen(): React.JSX.Element {
     return (
       <View style={styles.loading}>
         <Icon name="shopping-bag" size={60} color="#bbc1d6" />
-        <Text testID={E2ETestIds.cart.emptyMessage} style={styles.loadingText}>
+        <Text
+          testID={AccessibilityIdentifiers.cart.emptyMessage}
+          style={styles.loadingText}>
           Your cart is empty.
         </Text>
       </View>
@@ -220,15 +222,15 @@ function CartScreen(): React.JSX.Element {
               />
 
               <Pressable
-                testID={E2ETestIds.cart.checkoutButton}
+                testID={AccessibilityIdentifiers.cart.checkoutButton}
                 style={[
                   styles.cartButton,
                   cartMutationInProgress ? styles.cartButtonDisabled : null,
                 ]}
                 disabled={totalQuantity === 0 || cartMutationInProgress}
                 onPress={presentCheckout}>
                 <Text
-                  testID={E2ETestIds.cart.checkoutReady}
+                  testID={AccessibilityIdentifiers.cart.checkoutReady}
                   style={styles.cartButtonText}>
                   Checkout
                 </Text>

platforms/react-native/sample/src/screens/CatalogScreen.tsx

@@ -19,7 +19,7 @@ import {useCart} from '../context/Cart';
 import type {NativeStackScreenProps} from '@react-navigation/native-stack';
 import type {RootStackParamList} from '../App';
 import {currency} from '../utils';
-import {E2ETestIds} from '../e2e/testIds';
+import {AccessibilityIdentifiers} from '../accessibility/accessibilityIdentifiers';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'CatalogScreen'>;
 
@@ -65,7 +65,7 @@ function CatalogScreen({navigation}: Props) {
             <Product
               key={node.id}
               product={node}
-              testID={E2ETestIds.catalog.productGridItem(index)}
+              testID={AccessibilityIdentifiers.catalog.productGridItem(index)}
               onPress={() => {
                 navigation.navigate('ProductDetails', {
                   product: node,