From 1dec297c58f11c5a44f0e1f62264f6198194eb69 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 3 Feb 2023 11:19:33 -0300 Subject: [PATCH] feat: adiciona testid --- react/components/Html/styles.css | 12 +++ react/components/PixPrice/styles.module.css | 1 + store/blocks/minicart.jsonc | 8 ++ store/blocks/pdp/product.jsonc | 83 +++++++++++++++---- styles/css/vtex.product-quantity.css | 4 + styles/css/vtex.product-summary.css | 1 - .../pages/product/vtex.product-quantity.scss | 5 ++ .../pages/product/vtex.product-summary.scss | 1 - 8 files changed, 98 insertions(+), 17 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index d0fd5b3..dcedc6d 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -4,6 +4,14 @@ padding: 0 40px; } +[class*="html--product-quantity"] { + width: 24.335%; +} + +[class*="html--add-to-cart"] { + width: 100%; +} + [class*="html--buy-button"] { display: flex; gap: 10px; @@ -36,6 +44,10 @@ } @media (min-width: 1921px) { + [class*="html--product-quantity"] { + width: 16.712%; + } + [class*="html--descriptionImage"] { width: 47.392%; } diff --git a/react/components/PixPrice/styles.module.css b/react/components/PixPrice/styles.module.css index 0ff58e3..5f5a6d1 100644 --- a/react/components/PixPrice/styles.module.css +++ b/react/components/PixPrice/styles.module.css @@ -7,6 +7,7 @@ .pixPrice-content { display: flex; gap: 26px; + width: 197px; } .pixPrice-img { diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 335c267..0caa02a 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -1,4 +1,12 @@ { + "html#add-to-cart": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "add-to-cart" + }, + "children": ["add-to-cart-button#addToCart"] + }, + "add-to-cart-button#addToCart": { "props": { "blockClass": "addToCart", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 00e7240..7e4edfa 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -94,6 +94,13 @@ } }, "flex-layout.row#product-image": { + "children": ["html#product-images"] + }, + "html#product-images": { + "props": { + "testId": "product-images", + "blockClass": "product-images" + }, "children": ["product-images"] }, "product-images": { @@ -120,17 +127,33 @@ "product-rating-summary", "flex-layout.row#selling-price", "product-installments", - "PixPrice", - "sku-selector", + "html#pix", + "html#sku-selector", "product-gifts", // "flex-layout.row#buy-button", "html#buy-button", // "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, + "html#pix": { + "props": { + "blockClass": "pix", + "testId": "pix-price" + }, + "children": ["PixPrice"] + }, + + "html#shipping-simulator": { + "props": { + "blockClass": "shipping-simulator", + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -153,6 +176,14 @@ } }, + "html#sku-selector": { + "props": { + "blockClass": "sku-selector", + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "sku-selector": { "props": { "variationsSpacing": 3 @@ -163,7 +194,7 @@ "props": { "blockClass": "buy-button" }, - "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"] + "children": ["html#product-quantity", "html#add-to-cart"] }, // "flex-layout.row#buy-button": { @@ -175,12 +206,19 @@ // "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"] // }, + "html#product-quantity": { + "props": { + "testId": "product-quantity", + "blockClass": "product-quantity" + }, + "children": ["product-quantity#addToCart"] + }, + "product-quantity#addToCart": { "props": { "blockClass": "addToCartQuantity", "showLabel": false, - "size": "large", - "width": "25%" + "size": "large" } }, @@ -243,15 +281,6 @@ "blockClass": "shelfTitleText" } }, - - "product-summary.shelf#shelfProducts": { - "children": [ - "product-summary-image", - "product-summary-name", - "product-price" - ] - }, - // "product-summary-image": { // "props": { // "showBadge": false @@ -267,6 +296,30 @@ "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], + "children": ["html#slider-layout"] + }, + + "product-summary.shelf#shelfProducts": { + "children": ["html#product-summary"] + }, + + "html#product-summary": { + "props": { + "blockClass": "product-summary", + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-price" + ] + }, + + "html#slider-layout": { + "props": { + "blockClass": "shelf", + "testId": "product-summary-list" + }, "children": ["slider-layout#demo-products"] }, diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 1e87e7e..1a1f06e 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -26,4 +26,8 @@ border: 1px solid #cccccc; border-left: 0; border-right: 0; +} + +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__input) { + width: 100%; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 3a8da6f..eec33f5 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -9,7 +9,6 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .imageWrapper { - height: 100%; width: 100%; display: flex; justify-content: center; diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 4086ed4..257cdb9 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -20,3 +20,8 @@ border-left: 0; border-right: 0; } + +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__input) { + width: 100%; +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index a98d8da..7f396f9 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,5 +1,4 @@ .imageWrapper { - height: 100%; width: 100%; display: flex; justify-content: center;