Add test IDs for future e2e testing (#286)

Author: markmur

sample/src/App.tsx

@@ -298,7 +298,7 @@ function CartIcon({onPress}: {onPress: () => void}) {
   const theme = useTheme();
 
   return (
-    <Pressable onPress={onPress}>
+    <Pressable onPress={onPress} testID="header-cart-icon">
       <Icon name="shopping-basket" size={24} color={theme.colors.secondary} />
     </Pressable>
   );
@@ -462,13 +462,15 @@ function Routes() {
         component={CatalogStack}
         options={{
           headerShown: false,
+          tabBarButtonTestID: 'catalog-tab',
           tabBarIcon: createNavigationIcon('shop'),
         }}
       />
       <Tab.Screen
         name="Cart"
         component={CartScreen}
         options={{
+          tabBarButtonTestID: 'cart-tab',
           tabBarIcon: createNavigationIcon('shopping-bag'),
           tabBarBadge: totalQuantity > 0 ? totalQuantity : undefined,
         }}
@@ -477,6 +479,7 @@ function Routes() {
         name="Settings"
         component={SettingsScreen}
         options={{
+          tabBarButtonTestID: 'settings-tab',
           tabBarIcon: createNavigationIcon('cog'),
         }}
       />

sample/src/screens/CartScreen.tsx

@@ -176,6 +176,7 @@ function CartScreen(): React.JSX.Element {
               />
 
               <Pressable
+                testID="checkout-button"
                 style={styles.cartButton}
                 disabled={totalQuantity === 0}
                 onPress={presentCheckout}>

sample/src/screens/CatalogScreen.tsx

@@ -33,7 +33,6 @@ import {
   ActivityIndicator,
 } from 'react-native';
 
-import {useShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit';
 import useShopify from '../hooks/useShopify';
 
 import type {ShopifyProduct} from '../../@types';
@@ -47,8 +46,7 @@ import {currency} from '../utils';
 type Props = NativeStackScreenProps<RootStackParamList, 'CatalogScreen'>;
 
 function CatalogScreen({navigation}: Props) {
-  const ShopifyCheckout = useShopifyCheckoutSheet();
-  const {checkoutURL, totalQuantity, addToCart, addingToCart} = useCart();
+  const {addToCart, addingToCart} = useCart();
   const {colors} = useTheme();
   const styles = createStyles(colors);
   const {queries} = useShopify();
@@ -59,12 +57,6 @@ function CatalogScreen({navigation}: Props) {
     fetchProducts();
   }, [fetchProducts]);
 
-  const presentCheckout = async () => {
-    if (checkoutURL) {
-      ShopifyCheckout.present(checkoutURL);
-    }
-  };
-
   if (error) {
     return (
       <View style={styles.loading}>
@@ -91,10 +83,11 @@ function CatalogScreen({navigation}: Props) {
         contentInsetAdjustmentBehavior="automatic"
         contentContainerStyle={styles.scrollView}>
         <View style={styles.productList}>
-          {data?.products.edges.map(({node}) => (
+          {data?.products.edges.map(({node}, index) => (
             <Product
               key={node.id}
               product={node}
+              testID={`product-${index}`}
               onPress={() => {
                 navigation.navigate('ProductDetails', {
                   product: node,
@@ -107,17 +100,6 @@ function CatalogScreen({navigation}: Props) {
           ))}
         </View>
       </ScrollView>
-      {totalQuantity > 0 && (
-        <Pressable
-          style={styles.cartButton}
-          disabled={totalQuantity === 0}
-          onPress={presentCheckout}>
-          <Text style={styles.cartButtonText}>Checkout</Text>
-          <Text style={styles.cartButtonTextSubtitle}>
-            {totalQuantity} {totalQuantity === 1 ? 'item' : 'items'}
-          </Text>
-        </Pressable>
-      )}
     </SafeAreaView>
   );
 }
@@ -131,19 +113,25 @@ function Product({
   onAddToCart,
   loading = false,
   onPress,
+  testID,
 }: {
   product: ShopifyProduct;
   loading?: boolean;
   onPress: () => void;
   onAddToCart: (variantId: string) => void;
+  testID: string;
 }) {
   const {colors} = useTheme();
   const styles = createStyles(colors);
   const image = product.images?.edges[0]?.node;
   const variant = getVariant(product);
 
   return (
-    <Pressable key={product.id} style={styles.productItem} onPress={onPress}>
+    <Pressable
+      key={product.id}
+      style={styles.productItem}
+      onPress={onPress}
+      testID={testID}>
       {image?.url && (
         <Image
           resizeMethod="resize"

sample/src/screens/ProductDetailsScreen.tsx

@@ -117,7 +117,7 @@ function ProductDetails({
         <View>
           <Text style={styles.productTitle}>{product.title}</Text>
           <Text style={styles.productDescription}>
-            {product.description.slice(0, 100)} ...
+            {product.description.slice(0, 100)}...
           </Text>
         </View>
 
@@ -140,7 +140,11 @@ function ProductDetails({
             {loading ? (
               <ActivityIndicator size="small" color="white" />
             ) : (
-              <Text style={styles.addToCartButtonText}>Add to cart</Text>
+              <Text
+                testID="add-to-cart-button"
+                style={styles.addToCartButtonText}>
+                Add to cart
+              </Text>
             )}
           </Pressable>
         </View>
@@ -217,7 +221,7 @@ function createStyles(colors: Colors, cornerRadius: number) {
     },
     addToCartButtonText: {
       fontSize: 20,
-      lineHeight: 20,
+      lineHeight: 24,
       color: colors.secondaryText,
       fontWeight: 'bold',
       textAlign: 'center',