Add testing framework

Shopify · Dec 11, 2024 · be0cd67 · be0cd67
1 parent 35965f4
commit be0cd67
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -393,13 +393,15 @@ 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}
     </button>
   ) : (
     <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
@@ -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
@@ -99,6 +99,7 @@ function CollectionCard({
   return (
     <Link
       prefetch="viewport"
+      data-shopify-collection-link
       to={`/collections/${collection.handle}`}
       className="grid gap-4"
     >