Merge branch 'develop' into jconabree/PWA-2355-upward-js-computed-res…

…olver
magento · Nov 8, 2021 · 1e9abe5 · 1e9abe5
2 parents 86037a6 + 4756299
commit 1e9abe5
Show file tree

Hide file tree

Showing 46 changed files with 1,336 additions and 171 deletions.
diff --git a/packages/pagebuilder/lib/ContentTypes/Image/__tests__/__snapshots__/image.spec.js.snap b/packages/pagebuilder/lib/ContentTypes/Image/__tests__/__snapshots__/image.spec.js.snap
@@ -88,6 +88,47 @@ exports[`renders a Image component with all props configured 1`] = `
 </figure>
 `;
 
+exports[`renders a Image component with only mobile image 1`] = `
+<figure
+  className="root"
+  style={
+    Object {
+      "marginBottom": undefined,
+      "marginLeft": undefined,
+      "marginRight": undefined,
+      "marginTop": undefined,
+      "paddingBottom": undefined,
+      "paddingLeft": undefined,
+      "paddingRight": undefined,
+      "paddingTop": undefined,
+      "textAlign": undefined,
+    }
+  }
+>
+  <picture>
+    <source
+      media="(max-width: 48rem)"
+      srcSet="mobile-image.png"
+    />
+    <img
+      className="img mobileOnly"
+      loading="lazy"
+      src=""
+      srcSet=" 1x"
+      style={
+        Object {
+          "border": undefined,
+          "borderColor": undefined,
+          "borderRadius": undefined,
+          "borderWidth": undefined,
+        }
+      }
+    />
+  </picture>
+  
+</figure>
+`;
+
 exports[`renders a Image component with openInNewTab set to false 1`] = `
 <figure
   className="root"

diff --git a/packages/pagebuilder/lib/ContentTypes/Image/__tests__/configAggregator.spec.js b/packages/pagebuilder/lib/ContentTypes/Image/__tests__/configAggregator.spec.js
@@ -49,6 +49,19 @@ test('image config aggregator sets proper mobileImage when desktopImage equals m
         })
     );
 });
+test('image config aggregator sets proper mobileImage only', () => {
+    const node = document.createElement('div');
+    node.innerHTML = `<figure data-content-type="image" data-appearance="full-width" data-element="main" style="margin: 0px; padding: 0px; border-style: none;"><img class="pagebuilder-mobile-only" src="mobile-image.png" alt="Test Alt Text" title="Test Title Text" data-element="mobile_image" style="border-style: none; border-width: 1px; border-radius: 0px; max-width: 100%; height: auto;"></figure>`;
+
+    const config = configAggregator(node.childNodes[0]);
+
+    expect(config).toEqual(
+        expect.objectContaining({
+            desktopImage: null,
+            mobileImage: 'mobile-image.png'
+        })
+    );
+});
 
 test('image config aggregator doesnt fail on empty figure', () => {
     const node = document.createElement('div');

diff --git a/packages/pagebuilder/lib/ContentTypes/Image/__tests__/image.spec.js b/packages/pagebuilder/lib/ContentTypes/Image/__tests__/image.spec.js
@@ -62,3 +62,12 @@ test('renders a Image component with openInNewTab set to false', () => {
 
     expect(component.toJSON()).toMatchSnapshot();
 });
+
+test('renders a Image component with only mobile image', () => {
+    const imageProps = {
+        mobileImage: 'mobile-image.png'
+    };
+    const component = createTestInstance(<Image {...imageProps} />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/pagebuilder/lib/ContentTypes/Image/configAggregator.js b/packages/pagebuilder/lib/ContentTypes/Image/configAggregator.js
@@ -17,9 +17,22 @@ export default node => {
             ? node.childNodes[0].childNodes
             : node.childNodes;
 
+    const mobileImageSrc = () => {
+        if (imageNode[1]) {
+            return imageNode[1].getAttribute('src');
+        }
+        if (imageNode[0]) {
+            return imageNode[0].getAttribute('src');
+        }
+        return null;
+    };
+
     const props = {
-        desktopImage: imageNode[0] ? imageNode[0].getAttribute('src') : null,
-        mobileImage: imageNode[1] ? imageNode[1].getAttribute('src') : null,
+        desktopImage:
+            imageNode[0] && imageNode[1]
+                ? imageNode[0].getAttribute('src')
+                : null,
+        mobileImage: mobileImageSrc(),
         altText: imageNode[0] ? imageNode[0].getAttribute('alt') : null,
         title: imageNode[0] ? imageNode[0].getAttribute('title') : null,
         openInNewTab: node.childNodes[0].getAttribute('target') === '_blank',

diff --git a/packages/pagebuilder/lib/ContentTypes/Image/image.js b/packages/pagebuilder/lib/ContentTypes/Image/image.js
@@ -79,17 +79,24 @@ const Image = props => {
         ''
     );
 
-    const imgSrc = resourceUrl(desktopImage, {
-        type: 'image-wysiwyg',
-        quality: 85
-    });
+    const imgSrc = desktopImage
+        ? resourceUrl(desktopImage, {
+              type: 'image-wysiwyg',
+              quality: 85
+          })
+        : '';
+
+    const imgClassName =
+        mobileImage && !desktopImage
+            ? [classes.img, classes.mobileOnly].join(' ')
+            : classes.img;
 
     const PictureFragment = (
         <>
             <picture>
                 {SourceFragment}
                 <img
-                    className={classes.img}
+                    className={imgClassName}
                     srcSet={`${imgSrc} 1x`}
                     src={imgSrc}
                     title={title}
@@ -164,7 +171,8 @@ const Image = props => {
 Image.propTypes = {
     classes: shape({
         root: string,
-        img: string
+        img: string,
+        mobileOnly: string
     }),
     desktopImage: string,
     mobileImage: string,

diff --git a/packages/pagebuilder/lib/ContentTypes/Image/image.module.css b/packages/pagebuilder/lib/ContentTypes/Image/image.module.css
@@ -4,3 +4,9 @@
 .img {
     max-width: 100%;
 }
+
+@media (min-width: 48rem) {
+    .mobileOnly {
+        display: none;
+    }
+}
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadio.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadio.js
@@ -19,7 +19,7 @@ const ShippingRadio = props => {
 
     return (
         <Fragment>
-            <span>{props.name}</span>
+            <span data-cy="ShippingRadio-name">{props.name}</span>
             <div className={classes.price}>{priceElement}</div>
         </Fragment>
     );

diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/discountSummary.js b/packages/venia-ui/lib/components/CartPage/PriceSummary/discountSummary.js
@@ -52,7 +52,10 @@ const DiscountSummary = props => {
                     defaultMessage={'Discounts applied'}
                 />
             </span>
-            <span className={classes.price}>
+            <span
+                data-cy="DiscountSummary-discountValue"
+                className={classes.price}
+            >
                 {MINUS_SYMBOL}
                 <Price
                     value={discount.value}

diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js b/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js
@@ -99,7 +99,10 @@ const PriceSummary = props => {
                         defaultMessage={'Subtotal'}
                     />
                 </span>
-                <span className={priceClass}>
+                <span
+                    data-cy="PriceSummary-subtotalValue"
+                    className={priceClass}
+                >
                     <Price
                         value={subtotal.value}
                         currencyCode={subtotal.currency}
@@ -136,7 +139,10 @@ const PriceSummary = props => {
                     isCheckout={isCheckout}
                 />
                 <span className={classes.totalLabel}>{totalPriceLabel}</span>
-                <span className={totalPriceClass}>
+                <span
+                    data-cy="PriceSummary-totalValue"
+                    className={totalPriceClass}
+                >
                     <Price value={total.value} currencyCode={total.currency} />
                 </span>
             </div>

diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/shippingSummary.js b/packages/venia-ui/lib/components/CartPage/PriceSummary/shippingSummary.js
@@ -45,7 +45,12 @@ const ShippingSummary = props => {
     return (
         <>
             <span className={classes.lineItemLabel}>{shippingLabel}</span>
-            <span className={classes.price}>{price}</span>
+            <span
+                data-cy="ShippingSummary-shippingValue"
+                className={classes.price}
+            >
+                {price}
+            </span>
         </>
     );
 };

diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/taxSummary.js b/packages/venia-ui/lib/components/CartPage/PriceSummary/taxSummary.js
@@ -47,7 +47,7 @@ const TaxSummary = props => {
     return (
         <>
             <span className={classes.lineItemLabel}>{taxLabel}</span>
-            <span className={classes.price}>
+            <span data-cy="TaxSummary-taxValue" className={classes.price}>
                 <Price value={tax.value} currencyCode={tax.currency} />
             </span>
         </>

diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js
@@ -72,13 +72,19 @@ const OrderConfirmationPage = props => {
                 })}
             </StoreTitle>
             <div className={classes.mainContainer}>
-                <h2 className={classes.heading}>
+                <h2
+                    data-cy="OrderConfirmationPage-header"
+                    className={classes.heading}
+                >
                     <FormattedMessage
                         id={'checkoutPage.thankYou'}
                         defaultMessage={'Thank you for your order!'}
                     />
                 </h2>
-                <div className={classes.orderNumber}>
+                <div
+                    data-cy="OrderConfirmationPage-orderNumber"
+                    className={classes.orderNumber}
+                >
                     <FormattedMessage
                         id={'checkoutPage.orderNumber'}
                         defaultMessage={'Order Number'}

diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.js b/packages/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.js
@@ -8,7 +8,7 @@ import defaultClasses from './orderSummary.module.css';
 const OrderSummary = props => {
     const classes = useStyle(defaultClasses, props.classes);
     return (
-        <div className={classes.root}>
+        <div data-cy="OrderSummary-root" className={classes.root}>
             <h1 className={classes.title}>
                 <FormattedMessage
                     id={'checkoutPage.orderSummary'}

diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.js b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.js
@@ -169,6 +169,7 @@ const CreditCard = props => {
                 </div>
                 <div className={classes.address_check}>
                     <Checkbox
+                        data-cy="PaymentInformation-billingAddressSame"
                         field="isBillingAddressSame"
                         label={formatMessage({
                             id: 'checkoutPage.billingAddressSame',
@@ -188,6 +189,7 @@ const CreditCard = props => {
                         })}
                     >
                         <TextInput
+                            data-cy="CreditCard-billingAddress-firstname"
                             id="firstName"
                             field="firstName"
                             validate={isFieldRequired}
@@ -203,13 +205,15 @@ const CreditCard = props => {
                         })}
                     >
                         <TextInput
+                            data-cy="CreditCard-billingAddress-lastname"
                             id="lastName"
                             field="lastName"
                             validate={isFieldRequired}
                             initialValue={initialValues.lastName}
                         />
                     </Field>
                     <Country
+                        data-cy="CreditCard-billingAddress-country"
                         classes={fieldClasses.country}
                         validate={isFieldRequired}
                         initialValue={
@@ -229,6 +233,7 @@ const CreditCard = props => {
                         })}
                     >
                         <TextInput
+                            data-cy="CreditCard-billingAddress-street1"
                             id="street1"
                             field="street1"
                             validate={isFieldRequired}
@@ -245,6 +250,7 @@ const CreditCard = props => {
                         optional={true}
                     >
                         <TextInput
+                            data-cy="CreditCard-billingAddress-street2"
                             id="street2"
                             field="street2"
                             initialValue={initialValues.street2}
@@ -259,13 +265,15 @@ const CreditCard = props => {
                         })}
                     >
                         <TextInput
+                            data-cy="CreditCard-billingAddress-city"
                             id="city"
                             field="city"
                             validate={isFieldRequired}
                             initialValue={initialValues.city}
                         />
                     </Field>
                     <Region
+                        data-cy="CreditCard-billingAddress-region"
                         classes={fieldClasses.region}
                         initialValue={initialValues.region}
                         validate={isFieldRequired}
@@ -274,6 +282,7 @@ const CreditCard = props => {
                         optionValueKey={'id'}
                     />
                     <Postcode
+                        data-cy="CreditCard-billingAddress-postcode"
                         classes={fieldClasses.postal_code}
                         validate={isFieldRequired}
                         initialValue={initialValues.postcode}
@@ -287,6 +296,7 @@ const CreditCard = props => {
                         })}
                     >
                         <TextInput
+                            data-cy="CreditCard-billingAddress-phoneNumber"
                             id="phoneNumber"
                             field="phoneNumber"
                             validate={isFieldRequired}

diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.js
@@ -100,6 +100,7 @@ const ShippingMethod = props => {
                     />
                     <div className={classes.formButtons}>
                         <Button
+                            data-cy="ShippingMethod-submitButton"
                             priority="normal"
                             type="submit"
                             disabled={pageIsUpdating || isLoading}

diff --git a/packages/venia-ui/lib/components/Dialog/dialog.js b/packages/venia-ui/lib/components/Dialog/dialog.js
@@ -87,6 +87,7 @@ const Dialog = props => {
     const maybeButtons = shouldShowButtons ? (
         <div className={classes.buttons}>
             <Button
+                data-cy="Dialog-cancelButton"
                 classes={cancelButtonClasses}
                 disabled={shouldDisableAllButtons}
                 onClick={onCancel}
@@ -99,6 +100,7 @@ const Dialog = props => {
                 />
             </Button>
             <Button
+                data-cy="Dialog-confirmButton"
                 classes={confirmButtonClasses}
                 disabled={confirmButtonDisabled}
                 priority="high"

diff --git a/packages/venia-ui/lib/components/RadioGroup/radioGroup.js b/packages/venia-ui/lib/components/RadioGroup/radioGroup.js
@@ -26,6 +26,7 @@ const RadioGroup = props => {
         children ||
         items.map(({ value, ...item }) => (
             <Radio
+                data-cy=""
                 key={value}
                 disabled={disabled}
                 {...item}
@@ -40,7 +41,7 @@ const RadioGroup = props => {
 
     return (
         <Fragment>
-            <div className={classes.root}>
+            <div data-cy="RadioGroup-root" className={classes.root}>
                 <InformedRadioGroup {...rest} field={field} id={id}>
                     {options}
                 </InformedRadioGroup>