feat(pdp):add testId

docs/Todo.md

@@ -11,7 +11,7 @@ os Requisitos cobrados serão: {cm:2023-02-07}
 
 - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p {cm:2023-02-07}
 
-- FIXME [Blocos que devem ser ajustado e desenvolvidos](6){
+- FIXME [Blocos que devem ser ajustado e desenvolvidos](testeid){
 
       - [x]  1. BreadCrumb; {cm:2023-01-31}
 
@@ -23,9 +23,9 @@ os Requisitos cobrados serão: {cm:2023-02-07}
 
       - HACK 5. prateleira de produtos, {cm:2023-02-07}
       
-      - HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
+      - HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc) {cm:2023-02-10}
 
-      - HACK 7.Fazer o cep
+      - HACK 7.Fazer o cep {cm:2023-02-10}
 
       - FIXME COLOCAR OS TESTESID!!!!!
 
@@ -36,8 +36,8 @@ os Requisitos cobrados serão: {cm:2023-02-07}
 
 {cm:2023-01-25}
 
-* FIXME Bloco de Preço com Desconto deve ser CUSTOM
+* FIXME Bloco de Preço com Desconto deve ser CUSTOM {cm:2023-02-10}
 
-* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX.
+* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX. {cm:2023-02-10}
 
-* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento.
+* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento. {cm:2023-02-10}

react/components/Html/styles.css

@@ -46,7 +46,9 @@
 .html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
   width: 50%;
 }
-
+.html--card-button{
+  width: -webkit-fill-available;
+}
 .html--buy-button{
   display: flex;
   gap: 10px;
@@ -61,7 +63,7 @@
   display: block;
   background: black;
   height: 49px;
-  max-width: 77.354%;
+  max-width: 97.05%;
   border: 1px solid black;
 }
 .html--pdp-section_descriptions{
@@ -73,7 +75,7 @@
   @media screen and (min-width: 1920px){
     .html--buy-button :global(.vtex-button){
       max-width: 766px;
-      width: 80.126%;
+      width: 96%;
     }
     .html--pdp-productMain,.html--availability{
       padding-right: 12.5393%;

react/components/ProductContext/cep.tsx

@@ -9,9 +9,6 @@ const CEP = () => {
             const tdEstimate = document.querySelectorAll('.vtex-store-components-3-x-shippingTableCellDeliveryEstimate');
             const thEstimate = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryEstimate');
             const thPrice = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryPrice');
-
-            console.log(trRow)
-            console.log(tdEstimate)
             if(tdEstimate){
               tdEstimate.forEach((row) => {
                 if(row.parentNode){
@@ -41,7 +38,6 @@ const CEP = () => {
   }
   if (typeof document !== "undefined") {
     const btnCep = document.querySelector(".vtex-store-components-3-x-shippingContainer .vtex-button");
-    console.log(btnCep)
       if (btnCep) {
       btnCep.addEventListener('click', handleButtonClick);
     }

store/blocks/pdp/product.jsonc

@@ -2,8 +2,8 @@
   "store.product": {
     "children": [
       "html#Placeholder",
-      "html#breadcrumb",
       "html#CEP",
+      "html#breadcrumb",
       "condition-layout.product#availability",
       "html#departaments",
       "flex-layout.row#specifications-title",
@@ -12,6 +12,7 @@
   },
   "html#Pix":{
     "props": {
+      "testId": "pix-price",
       "blockClass": "pdp-pixPrice"
     },
     "children": ["Pix"]
@@ -22,6 +23,12 @@
   "html#CEP":{
     "children": ["CEP"]
   },
+  "html#tab-layout":{
+    "props": {
+      "testId": "tab-layout"
+    },
+    "children": ["tab-layout#pdp"]
+  },
   "tab-layout#pdp": {
     "children": [
       "tab-list#pdp",
@@ -132,7 +139,7 @@
       "product-summary-image#shelfpdp",
       "product-summary-name",
       "product-list-price#summary",
-      "product-selling-price#summary"
+      "product-selling-price#summarypdp"
     ]
   },
   "html#carousel": {
@@ -146,11 +153,19 @@
   },
   "list-context.product-list#pdp": {
     "blocks": ["product-summary.shelf#Pdp"],
-    "children": ["slider-layout#demo-products#pdp"],
+    "children": ["html#slider"],
     "props": {
       "orderBy": "OrderByTopSaleDESC"
     }
   },
+  "html#slider": {
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": [
+      "slider-layout#demo-products#pdp"
+    ]
+  },
   "slider-layout#demo-products#pdp": {
     "props": {
       "itemsPerPage": {
@@ -169,7 +184,7 @@
       "stack-layout#pdp",
       "product-summary-name",
       "product-list-price#summary",
-      "product-selling-price#summarypdp",
+      "html#selling-price",
       "flex-layout.row#selling-price-savingspdp"
     ]
   },
@@ -183,7 +198,7 @@
       "marginBottom": 4
     },
     "children": [
-      "product-selling-price#summary",
+      "product-selling-price#summarypdp",
       "product-price-savings#summary"
     ]
   },
@@ -299,7 +314,7 @@
       "testId": "product-description",
       "blockClass": "pdp-section_descriptions"
     },
-    "children": ["tab-layout#pdp"]
+    "children": ["html#tab-layout"]
   },
 
   "html#description": {
@@ -359,52 +374,86 @@
       "blockClass": "pdp-InfoBuy"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
-      "product-installments",
+      "html#product-installments",
       "html#Pix",
-      "sku-selector",
+      "html#sku-selector",
       "product-assembly-options",
       "product-gifts",
       "html#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "html#shipping-simulator",
       "share#default"
     ]
   },
-  "shipping-simulator": {
+  "html#shipping-simulator":{
-    "props": {}
+    "props":{
+      "testId": "shipping-simulator"
+    },
+      "children": ["shipping-simulator"]
+    },
+  "html#product-installments":{
+    "props":{
+      "testId": "product-installments"
+    },
+      "children": ["product-installments"]
     },
   "product-installments": {
     "props": {
       "message": "{installmentsNumber}  de {installmentValue} sem juros"
     }
   },
+
+  "html#selling-price":{
+  "props":{
+    "testId": "product-price"
+  },
+    "children": ["product-selling-price#summarypdp"]
+  },
+
   "product-selling-price#summarypdp": {
     "props": {
       "blockClass": "desconto",
       "message": "de {sellingPriceWithTax} por"
     }
   },
+
+  "html#product-name": {
+    "props": {
+      "testId": "product-name"
+    },
+    "children": ["flex-layout.row#product-name"]
+  },
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3,
       "blockClass": "title"
     },
     "children": [
-      "product-identifier.product",
+      "html#código",
       "vtex.store-components:product-name"
     ]
   },
-
+  "html#código": {
+    "props": {
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
+  },
   "product-identifier.product": {
     "props": {
-      "label": "hide", //'default' | 'custom' | 'hide'
+      "label": "hide" //'default' | 'custom' | 'hide'
-      "blockClass": "sku"
     }
   },
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
@@ -413,7 +462,7 @@
   },
 
   "flex-layout.row#buy-button": {
-    "children": ["product-quantity", "add-to-cart-button"]
+    "children": ["html#product-quantity", "add-to-cart-button"]
   },
   "html#buy-button": {
     "props": {
@@ -421,7 +470,13 @@
       "marginBottom": 7,
       "blockClass": "buy-button"
     },
-    "children": ["product-quantity", "add-to-cart-button"]
+    "children": ["html#product-quantity", "html#add-to-cart-button#pdp"]
+  },
+  "html#product-quantity": {
+    "props": {
+      "testId": "product-quantity"
+    },
+    "children": ["product-quantity"]
   },
   "product-quantity": {
     "props": {
@@ -430,7 +485,14 @@
       "size": "regular"
     }
   },
-  "add-to-cart-button": {
+  "html#add-to-cart-button#pdp": {
+    "props": {
+      "blockClass": "card-button",
+      "testId": "add-to-cart-button#pdp"
+    },
+    "children": ["add-to-cart-button#pdp"]
+  },
+  "add-to-cart-button#pdp": {
     "props": {
       "text": "ADICIONAR À SACOLA"
     }
@@ -450,7 +512,7 @@
       "blockClass": "info-availability"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
       "flex-layout.row#availability",
       "sku-selector"
     ]

store/blocks/product-price.jsonc

@@ -8,9 +8,15 @@
       "marginBottom": 4
     },
     "children": [
-      "product-selling-price"
+      "html#selling--price"
     ]
   },
+  "html#selling--price":{
+    "props":{
+      "testId": "product-price"
+    },
+      "children": ["product-selling-price"]
+    },
   "product-selling-price#ProducyImage":{
     "props":{
       "blockClass": "price"