From 9910dfa19b61c183ccfdfba4c1185b31416bbb19 Mon Sep 17 00:00:00 2001
From: Saulo Klein Nery <saulokn@outlook.com>
Date: Fri, 10 Feb 2023 15:41:19 -0300
Subject: [PATCH] docs: adiciona os data test

---
 react/components/Pix/Pix.tsx                  |   8 +-
 store/blocks/pdp/product.jsonc                | 115 ++++++++++++++----
 .../product-summary/product-summary.jsonc     |   8 ++
 styles/css/vtex.rich-text.css                 |  10 ++
 styles/sass/pages/product/vtex.rich-text.scss |   8 ++
 5 files changed, 123 insertions(+), 26 deletions(-)

diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
index b692894..35387d7 100644
--- a/react/components/Pix/Pix.tsx
+++ b/react/components/Pix/Pix.tsx
@@ -64,7 +64,7 @@ const Pix = () => {
   }, [productContext?.selectedItem]);
 
   return (
-    <div className="pix-container">
+    <div data-testid="pix-price" className="pix-container">
       <img
         className="pix-image"
         src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-sauloklein-m3academy.svg"
@@ -72,13 +72,13 @@ const Pix = () => {
       />
 
       <div className="price-wrapper">
-        <span className="price-value">
+        <p className="price-value">
           {(pixValue / 100).toLocaleString("pt-br", {
             style: "currency",
             currency: "BRL",
           })}
-        </span>
-        <span className="price-discount">{discountValue}</span>
+        </p>
+        <p className="price-discount">{discountValue}</p>
       </div>
     </div>
   );
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 72d7f9b..94cde86 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -1,10 +1,10 @@
 {
   "store.product": {
     "children": [
-      "html#breadcrumb",
+      "html#breadcontainer",
       //"example-component",
       "condition-layout.product#availability",
-      "tab-layout",
+      "html#product-description",
       //"flex-layout.row#specifications-title",
       //"product-specification-group#table",
       "flex-layout.row#shelf-row"
@@ -33,10 +33,17 @@
   },
 
   "list-context.product-list": {
-    "children": ["slider-layout#shelf-prod"],
+    "children": ["html#slider"],
     "blocks": ["product-summary.shelf"]
   },
 
+  "html#slider": {
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": ["slider-layout#shelf-prod"]
+  },
+
   "slider-layout#shelf-prod": {
     "props": {
       "itemsPerPage": {
@@ -47,12 +54,11 @@
       "infinite": true,
       "showNavigationArrows": "always",
       "showPaginationDots": "always",
-      "blockClass": "slide-shelf",
-      "colGap": 16
+      "blockClass": "slide-shelf"
     }
   },
 
-  "html#breadcrumb": {
+  "html#breadcontainer": {
     "props": {
       "tag": "section",
       "testId": "breadcrumbs",
@@ -121,8 +127,9 @@
     }
   },
   "flex-layout.row#product-image": {
-    "children": ["product-images"]
+    "children": ["html#imagens"]
   },
+
   "product-images": {
     "props": {
       "aspectRatio": {
@@ -136,14 +143,29 @@
     }
   },
 
+  "html#imagens": {
+    "props": {
+      "testId": "product-images"
+    },
+    "children": ["product-images"]
+  },
+
   "product-installments": {
     "props": {
       "blockClass": "sellingInfo"
     }
   },
 
-  "flex-layout.row#selling-prices": {
+  "html#product-installments": {
     "props": {
+      "testId": "product-installments"
+    },
+    "children": ["product-installments"]
+  },
+
+  "html#selling-price": {
+    "props": {
+      "testId": "product-price",
       "blockClass": "sellingPrice"
     },
     "children": ["product-selling-price"]
@@ -156,28 +178,49 @@
       "rowGap": 0
     },
     "children": [
-      "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#product-name",
+      "html#codigo",
       //"availability-subscriber",
       //"product-assembly-options",
       "product-rating-summary",
       //"flex-layout.row#list-price-savings",
-      "flex-layout.row#selling-prices",
-      "product-installments",
-      "pix-component",
+      "html#selling-price",
+      "html#product-installments",
+      "html#pixzap",
       //"product-separator",
-      "sku-selector",
-      //"product-quantity",
+      "html#sku-selector",
       //"product-gifts",
       "flex-layout.row#buy-button",
-      "shipping-simulator",
+      "html#shipping-simulator",
       "placeholder-component"
       //"share#default"
     ]
   },
 
-  "flex-layout.row#product-name": {
+  "html#shipping-simulator": {
     "props": {
+      "testId": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
+  },
+
+  "html#pixzap": {
+    "props": {
+      "testId": "pix-price"
+    },
+    "children": ["pix-component"]
+  },
+
+  "html#codigo": {
+    "props": {
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
+  },
+
+  "html#product-name": {
+    "props": {
+      "testId": "product-name",
       "marginBottom": 3,
       "blockClass": "productName"
     },
@@ -192,6 +235,13 @@
     }
   },
 
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
+
   "product-quantity": {
     "props": {
       "size": "large",
@@ -199,22 +249,36 @@
     }
   },
 
+  "html#product-quantity": {
+    "props": {
+      "testId": "product-quantity"
+    },
+    "children": ["product-quantity"]
+  },
+
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
       "marginBottom": 7,
       "blockClass": "quantityAndBuy"
     },
-    "children": ["product-quantity", "add-to-cart-button"]
+    "children": ["html#product-quantity", "html#add-to-cart-button"]
   },
 
-  "add-to-cart-button": {
+  "add-to-cart-button#addSacola": {
     "props": {
       "blockClass": "addToCartButton",
       "text": "ADICIONAR À SACOLA"
     }
   },
 
+  "html#add-to-cart-button": {
+    "props": {
+      "testId": "add-to-cart-button"
+    },
+    "children": ["add-to-cart-button#addSacola"]
+  },
+
   "flex-layout.row#product-availability": {
     "props": {
       "blockClass": "productPanel"
@@ -231,10 +295,10 @@
       "blockClass": "info-availability"
     },
     "children": [
-      "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#product-name",
+      "html#codigo",
       "flex-layout.row#availability",
-      "sku-selector"
+      "html#sku-selector"
     ]
   },
   "flex-layout.row#availability": {
@@ -330,6 +394,13 @@
     }
   },
 
+  "html#product-description": {
+    "props": {
+      "testId": "product-description"
+    },
+    "children": ["tab-layout"]
+  },
+
   "tab-content.item#1": {
     "children": ["product-images#2", "product-description"],
     "props": {
diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc
index 54c378d..7efa965 100644
--- a/store/blocks/product-summary/product-summary.jsonc
+++ b/store/blocks/product-summary/product-summary.jsonc
@@ -1,5 +1,12 @@
 {
   "product-summary.shelf": {
+    "children": ["html#prateleira"]
+  },
+
+  "html#prateleira": {
+    "props": {
+      "testId": "vtex-product-summary"
+    },
     "children": [
       "stack-layout#prodsum",
       "product-summary-name",
@@ -12,6 +19,7 @@
       //"add-to-cart-button"
     ]
   },
+
   "flex-layout.col#productRating": {
     "props": {
       "blockClass": "productRating"
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 1bf58dc..7952978 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -12,6 +12,16 @@
   justify-content: center;
   margin: 0 0 32px;
 }
+@media only screen and (max-width: 1024px) {
+  .container--shelf-title {
+    margin: 0 0 24px;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .container--shelf-title {
+    margin: 0 0 16px;
+  }
+}
 .container--shelf-title .headingLevel3 {
   font-weight: 400;
   font-size: 20px;
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index b60c0c6..77be60c 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -2,6 +2,14 @@
   justify-content: center;
   margin: 0 0 32px;
 
+  @include mq(lg, max) {
+    margin: 0 0 24px;
+  }
+
+  @include mq(md, max) {
+    margin: 0 0 16px;
+  }
+
   .headingLevel3 {
     font-weight: 400;
     font-size: 20px;