From be0cd67e2fda3196dfad916319cea2811fe636e2 Mon Sep 17 00:00:00 2001
From: Bret Little <bret.little@shopify.com>
Date: Wed, 11 Dec 2024 13:11:55 -0500
Subject: [PATCH] Add testing framework

---
 app/components/Cart.tsx                     | 2 +-
 app/components/FeaturedCollections.tsx      | 6 +++++-
 app/components/Hero.tsx                     | 6 +++++-
 app/components/PageLayout.tsx               | 2 ++
 app/components/ProductCard.tsx              | 2 ++
 app/routes/($locale).collections._index.tsx | 1 +
 6 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
index 3befd69..38e8ac4 100644
--- a/app/components/Cart.tsx
+++ b/app/components/Cart.tsx
@@ -188,7 +188,7 @@ function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
 
   return (
     <div className="flex flex-col mt-2">
-      <a href={checkoutUrl} target="_self">
+      <a data-shopify-cart-checkout-link href={checkoutUrl} target="_self">
         <Button as="span" width="full">
           Continue to Checkout
         </Button>
diff --git a/app/components/FeaturedCollections.tsx b/app/components/FeaturedCollections.tsx
index 9ea1470..afa53c6 100644
--- a/app/components/FeaturedCollections.tsx
+++ b/app/components/FeaturedCollections.tsx
@@ -25,7 +25,11 @@ export function FeaturedCollections({
       <Grid items={collectionsWithImage.length}>
         {collectionsWithImage.map((collection) => {
           return (
-            <Link key={collection.id} to={`/collections/${collection.handle}`}>
+            <Link
+              data-shopify-collection-link
+              key={collection.id}
+              to={`/collections/${collection.handle}`}
+            >
               <div className="grid gap-4">
                 <div className="card-image bg-primary/5 aspect-[3/2]">
                   {collection?.image && (
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 1461647..4ac811c 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -31,7 +31,11 @@ export function Hero({
   top,
 }: HeroProps) {
   return (
-    <Link to={`/collections/${handle}`} prefetch="viewport">
+    <Link
+      data-shopify-collection-link
+      to={`/collections/${handle}`}
+      prefetch="viewport"
+    >
       <section
         className={clsx(
           'relative justify-end flex flex-col w-full',
diff --git a/app/components/PageLayout.tsx b/app/components/PageLayout.tsx
index ee5b240..6217e13 100644
--- a/app/components/PageLayout.tsx
+++ b/app/components/PageLayout.tsx
@@ -393,6 +393,7 @@ function Badge({
   return isHydrated ? (
     <button
       onClick={openCart}
+      data-shopify-cart-link
       className="relative flex items-center justify-center w-8 h-8 focus:ring-primary/5"
     >
       {BadgeCounter}
@@ -400,6 +401,7 @@ function Badge({
   ) : (
     <Link
       to="/cart"
+      data-shopify-cart-link
       className="relative flex items-center justify-center w-8 h-8 focus:ring-primary/5"
     >
       {BadgeCounter}
diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx
index 3c3ac10..5a815dd 100644
--- a/app/components/ProductCard.tsx
+++ b/app/components/ProductCard.tsx
@@ -48,6 +48,7 @@ export function ProductCard({
   return (
     <div className="flex flex-col gap-2">
       <Link
+        data-shopify-product-link
         onClick={onClick}
         to={`/products/${product.handle}`}
         prefetch="viewport"
@@ -95,6 +96,7 @@ export function ProductCard({
       </Link>
       {quickAdd && firstVariant.availableForSale && (
         <AddToCartButton
+          data-shopify-product-add-to-cart
           lines={[
             {
               quantity: 1,
diff --git a/app/routes/($locale).collections._index.tsx b/app/routes/($locale).collections._index.tsx
index 425f740..55f84b4 100644
--- a/app/routes/($locale).collections._index.tsx
+++ b/app/routes/($locale).collections._index.tsx
@@ -99,6 +99,7 @@ function CollectionCard({
   return (
     <Link
       prefetch="viewport"
+      data-shopify-collection-link
       to={`/collections/${collection.handle}`}
       className="grid gap-4"
     >