Add references for testing (#163)

CommitStudio · Jun 9, 2023 · 769f527 · 769f527
1 parent 336190c
commit 769f527
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/app/_components/Globals/Badge.tsx b/app/_components/Globals/Badge.tsx
@@ -4,7 +4,10 @@ interface BadgeProp {
 
 export const Badge = ({ itemsQuantity }: BadgeProp) => {
   return (
-    <span className="absolute bottom-7 inline-flex items-center px-2 h-5 justify-center text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">
+    <span
+      data-cy="cart-badge"
+      className="absolute bottom-7 inline-flex items-center px-2 h-5 justify-center text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full"
+    >
       {itemsQuantity}
     </span>
   );

diff --git a/app/_components/Globals/Cart.tsx b/app/_components/Globals/Cart.tsx
@@ -106,7 +106,7 @@ const Cart = ({ isCartOpen, setIsCartOpen }: Props) => {
                         style={{ objectFit: 'cover' }}
                       />
                     </div>
-                    <div className="flex flex-col space-y-4 w-full">
+                    <div className="flex flex-col space-y-4 w-full" data-cy="cart-product">
                       <p className="font-bold uppercase">{product.product?.name}</p>
                       <div className="flex justify-between">
                         <div>

diff --git a/app/_components/Globals/ProductCard.tsx b/app/_components/Globals/ProductCard.tsx
@@ -41,11 +41,13 @@ const ProductCard = ({ product }: Props) => {
           </Tooltip>
         </div>
         <div className="flex mx-auto cursor-pointer relative max-w-full max-h-full h-[436px]">
-          <Link href={`/products/${product.slug}`}>
+          <Link href={`/products/${product.slug}`} data-cy="product-link">
             <Image src={image.src} alt={image.alt} fill style={{ objectFit: 'cover' }} />
           </Link>
         </div>
-        <p className="font-quicksand mt-3 mb-3 uppercase line-clamp-2 h-12">{product.name}</p>
+        <p data-cy="product-name" className="font-quicksand mt-3 mb-3 uppercase line-clamp-2 h-12">
+          {product.name}
+        </p>
         {product.salePrice ? (
           <div className="mt-auto">
             <span className="flex">

diff --git a/app/_components/Navbar/UserButtons.tsx b/app/_components/Navbar/UserButtons.tsx
@@ -30,7 +30,7 @@ const UserButtons = ({ toggleCart, isAuthenticated }: Props) => {
         title="Cart"
         onClick={toggleCart}
       >
-        <FaShoppingCart />
+        <FaShoppingCart data-cy="cart-icon" />
         {typeof quantity == 'number' && quantity > 0 && <Badge itemsQuantity={quantity} />}
       </button>
 

diff --git a/app/products/[slug]/_components/ProductInfo/ProductTitle.tsx b/app/products/[slug]/_components/ProductInfo/ProductTitle.tsx
@@ -4,7 +4,9 @@ type TitleProps = {
 };
 
 const ProductTitle = ({ title }: TitleProps) => (
-  <h5 className="text-xl font-quicksand uppercase">{title}</h5>
+  <h5 data-cy="product-title" className="text-xl font-quicksand uppercase">
+    {title}
+  </h5>
 );
 
 export default ProductTitle;