@magento/venia-ui 9.1.0 → 9.2.0-alpha.1

package/lib/components/CheckoutPage/ItemsReview/item.js

@@ -43,7 +43,7 @@ const Item = props => {
             <span className={classes.quantity}>
                 <FormattedMessage
                     id={'checkoutPage.quantity'}
-                    defaultMessage={'Qty :'}
+                    defaultMessage={'Qty : {quantity}'}
                     values={{ quantity }}
                 />
             </span>

package/lib/components/CheckoutPage/ItemsReview/itemsReview.js

@@ -57,7 +57,10 @@ const ItemsReview = props => {
     }
 
     return (
-        <div className={classes.items_review_container}>
+        <div
+            className={classes.items_review_container}
+            data-cy="ItemsReview-container"
+        >
             <div className={classes.items_container}>
                 <div className={classes.total_quantity}>
                     <span className={classes.total_quantity_amount}>

package/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/orderConfirmationPage.spec.js.snap

@@ -12,7 +12,7 @@ exports[`OrderConfirmationPage renders OrderConfirmationPage component 1`] = `
     </h2>
     <div>
       <mock-FormattedMessage
-        defaultMessage="Order Number"
+        defaultMessage="Order Number: {orderNumber}"
         id="checkoutPage.orderNumber"
         values={
           Object {

package/lib/components/CheckoutPage/OrderConfirmationPage/createAccount.js

@@ -92,6 +92,7 @@ const CreateAccount = props => {
                     <TextInput
                         field="customer.firstname"
                         autoComplete="given-name"
+                        data-cy="OrderConfirmationPage-CreateAccount-firstName"
                         validate={isRequired}
                         validateOnBlur
                     />
@@ -105,6 +106,7 @@ const CreateAccount = props => {
                     <TextInput
                         field="customer.lastname"
                         autoComplete="family-name"
+                        data-cy="OrderConfirmationPage-CreateAccount-lastName"
                         validate={isRequired}
                         validateOnBlur
                     />
@@ -118,6 +120,7 @@ const CreateAccount = props => {
                     <TextInput
                         field="customer.email"
                         autoComplete="email"
+                        data-cy="OrderConfirmationPage-CreateAccount-email"
                         validate={isRequired}
                         validateOnBlur
                     />
@@ -130,6 +133,7 @@ const CreateAccount = props => {
                     fieldName="password"
                     isToggleButtonHidden={false}
                     autoComplete="new-password"
+                    data-cy="OrderConfirmationPage-CreateAccount-password"
                     validate={combine([
                         isRequired,
                         [hasLengthAtLeast, 8],
@@ -141,6 +145,7 @@ const CreateAccount = props => {
                     <Checkbox
                         field="subscribe"
                         id="subscribe"
+                        data-cy="OrderConfirmationPage-CreateAccount-subscribe"
                         label={formatMessage({
                             id: 'checkoutPage.subscribe',
                             defaultMessage: 'Subscribe to news and updates'
@@ -152,6 +157,7 @@ const CreateAccount = props => {
                         disabled={isDisabled}
                         type="submit"
                         className={classes.create_account_button}
+                        data-cy="OrderConfirmationPage-CreateAccount-createAccountButton"
                     >
                         <FormattedMessage
                             id={'checkoutPage.createAccount'}

package/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js

@@ -64,7 +64,7 @@ const OrderConfirmationPage = props => {
     const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="OrderConfirmationPage-root">
             <StoreTitle>
                 {formatMessage({
                     id: 'checkoutPage.titleReceipt',
@@ -72,16 +72,22 @@ 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'}
+                        defaultMessage={'Order Number: {orderNumber}'}
                         values={{ orderNumber }}
                     />
                 </div>

package/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'}

package/lib/components/CheckoutPage/PaymentInformation/braintreeSummary.js

@@ -39,7 +39,7 @@ const BraintreeSummary = props => {
         formatMessage(
             {
                 id: 'checkoutPage.paymentSummary',
-                defaultMessage: 'Card'
+                defaultMessage: '{cardType} ending in {lastFour}'
             },
             {
                 cardType: paymentNonce.details.cardType,
@@ -94,6 +94,7 @@ const BraintreeSummary = props => {
                     className={classes.edit_button}
                     onClick={onEdit}
                     type="button"
+                    data-cy="BrainTreeSummary-editButton"
                 >
                     <Icon
                         size={16}

package/lib/components/CheckoutPage/PaymentInformation/creditCard.js

@@ -151,7 +151,7 @@ const CreditCard = props => {
     ) : null;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="CreditCard-root">
             <div className={creditCardComponentClassName}>
                 <FormError
                     classes={{ root: classes.formErrorContainer }}
@@ -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,6 +205,7 @@ const CreditCard = props => {
                         })}
                     >
                         <TextInput
+                            data-cy="CreditCard-billingAddress-lastname"
                             id="lastName"
                             field="lastName"
                             validate={isFieldRequired}
@@ -210,6 +213,7 @@ const CreditCard = props => {
                         />
                     </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,6 +265,7 @@ const CreditCard = props => {
                         })}
                     >
                         <TextInput
+                            data-cy="CreditCard-billingAddress-city"
                             id="city"
                             field="city"
                             validate={isFieldRequired}
@@ -266,6 +273,7 @@ const CreditCard = props => {
                         />
                     </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}

package/lib/components/CheckoutPage/PaymentInformation/editCard.js

@@ -18,7 +18,7 @@ const EditCard = props => {
     } = props;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="EditCard">
             <CreditCard
                 onPaymentReady={onPaymentReady}
                 onPaymentSuccess={onPaymentSuccess}

package/lib/components/CheckoutPage/PaymentInformation/editModal.js

@@ -45,7 +45,7 @@ const EditModal = props => {
                     <FormattedMessage
                         id={'checkoutPage.paymentMethodStatus'}
                         defaultMessage={
-                            'The selected method is not supported for editing.'
+                            '{selectedPaymentMethod} is not supported for editing.'
                         }
                         values={{ selectedPaymentMethod }}
                     />

package/lib/components/CheckoutPage/PaymentInformation/paymentInformation.js

@@ -75,7 +75,7 @@ const PaymentInformation = props => {
     ) : null;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="PaymentInformation-root">
             <div className={classes.payment_info_container}>
                 <Suspense fallback={null}>{paymentInformation}</Suspense>
             </div>

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap

@@ -36,11 +36,13 @@ Array [
             className="input"
           >
             <input
+              autoComplete="off"
               className="input"
               id="email"
               name="email"
               onBlur={[Function]}
               onChange={[Function]}
+              onPaste={[Function]}
               value=""
             />
           </span>
@@ -475,11 +477,13 @@ Array [
             className="input"
           >
             <input
+              autoComplete="off"
               className="input"
               id="email"
               name="email"
               onBlur={[Function]}
               onChange={[Function]}
+              onPaste={[Function]}
               value=""
             />
           </span>
@@ -910,11 +914,13 @@ Array [
             className="input"
           >
             <input
+              autoComplete="off"
               className="input"
               id="email"
               name="email"
               onBlur={[Function]}
               onChange={[Function]}
+              onPaste={[Function]}
               value="fry@planet.express"
             />
           </span>
@@ -1363,11 +1369,13 @@ Array [
             className="input"
           >
             <input
+              autoComplete="off"
               className="input"
               id="email"
               name="email"
               onBlur={[Function]}
               onChange={[Function]}
+              onPaste={[Function]}
               value="fry@planet.express"
             />
           </span>

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/guestForm.spec.js

@@ -1,9 +1,22 @@
 import React from 'react';
-import { createTestInstance } from '@magento/peregrine';
+import { createTestInstance, useToasts } from '@magento/peregrine';
 import { useGuestForm } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm';
 
 import GuestForm from '../guestForm';
 
+jest.mock('@magento/peregrine', () => {
+    const state = {};
+    const api = {
+        addToast: jest.fn()
+    };
+
+    const useToasts = jest.fn(() => [state, api]);
+    return {
+        ...jest.requireActual('@magento/peregrine'),
+        useToasts
+    };
+});
+
 jest.mock(
     '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm'
 );
@@ -48,6 +61,48 @@ test('renders form error', () => {
     expect(tree.toJSON()).toMatchSnapshot();
 });
 
+test('renders signIn suggestion toast message', () => {
+    const addToast = jest.fn();
+    useToasts.mockReturnValueOnce([{}, { addToast }]);
+    useGuestForm.mockReturnValueOnce({
+        ...emptyFormProps,
+        showSignInToast: true
+    });
+
+    createTestInstance(<GuestForm {...mockProps} />);
+
+    expect(addToast).toHaveBeenCalled();
+    expect(addToast.mock.calls[0][0]).toMatchInlineSnapshot(`
+        Object {
+          "actionText": "Yes, sign in",
+          "dismissActionText": "No, thanks",
+          "dismissable": true,
+          "hasDismissAction": true,
+          "icon": <Icon
+            attrs={
+              Object {
+                "width": 20,
+              }
+            }
+            src={
+              Object {
+                "$$typeof": Symbol(react.forward_ref),
+                "propTypes": Object {
+                  "color": [Function],
+                  "size": [Function],
+                },
+                "render": [Function],
+              }
+            }
+          />,
+          "message": "The email you provided is associated with an existing Venia account. Would you like to sign into this account?",
+          "onAction": [Function],
+          "timeout": false,
+          "type": "info",
+        }
+    `);
+});
+
 describe('renders prefilled form with data', () => {
     const initialValues = {
         city: 'Manhattan',

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js

@@ -122,6 +122,7 @@ const CustomerForm = props => {
             <Checkbox
                 disabled={!!initialValues.default_shipping}
                 id="default_shipping"
+                data-cy="CustomerForm-defaultShipping"
                 field="default_shipping"
                 label={formatMessage({
                     id: 'customerForm.defaultShipping',
@@ -138,6 +139,7 @@ const CustomerForm = props => {
             <FormError errors={Array.from(errors.values())} />
             <Form
                 className={classes.root}
+                data-cy="CustomerForm-root"
                 initialValues={initialValues}
                 onSubmit={handleSubmit}
             >
@@ -155,6 +157,7 @@ const CustomerForm = props => {
                             disabled={!hasDefaultShipping}
                             field="firstname"
                             id="customer_firstname"
+                            data-cy="CustomerForm-firstName"
                             validate={isRequired}
                         />
                     </Field>
@@ -171,12 +174,16 @@ const CustomerForm = props => {
                             disabled={!hasDefaultShipping}
                             field="lastname"
                             id="customer_lastname"
+                            data-cy="CustomerForm-lastName"
                             validate={isRequired}
                         />
                     </Field>
                 </div>
                 <div className={classes.country}>
-                    <Country validate={isRequired} />
+                    <Country
+                        validate={isRequired}
+                        data-cy="CustomerForm-country"
+                    />
                 </div>
                 <div className={classes.street0}>
                     <Field
@@ -190,6 +197,7 @@ const CustomerForm = props => {
                             field="street[0]"
                             validate={isRequired}
                             id="customer_street0"
+                            data-cy="CustomerForm-street0"
                         />
                     </Field>
                 </div>
@@ -202,7 +210,11 @@ const CustomerForm = props => {
                         })}
                         optional={true}
                     >
-                        <TextInput field="street[1]" id="customer_street1" />
+                        <TextInput
+                            field="street[1]"
+                            id="customer_street1"
+                            data-cy="CustomerForm-street1"
+                        />
                     </Field>
                 </div>
                 <div className={classes.city}>
@@ -217,19 +229,24 @@ const CustomerForm = props => {
                             field="city"
                             validate={isRequired}
                             id="customer_city"
+                            data-cy="CustomerForm-city"
                         />
                     </Field>
                 </div>
                 <div className={classes.region}>
                     <Region
                         validate={isRequired}
+                        data-cy="CustomerForm-region"
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
                         optionValueKey={'id'}
                     />
                 </div>
                 <div className={classes.postcode}>
-                    <Postcode validate={isRequired} />
+                    <Postcode
+                        validate={isRequired}
+                        data-cy="CustomerForm-postcode"
+                    />
                 </div>
                 <div className={classes.telephone}>
                     <Field
@@ -243,13 +260,19 @@ const CustomerForm = props => {
                             field="telephone"
                             validate={isRequired}
                             id="customer_telephone"
+                            data-cy="CustomerForm-telephone"
                         />
                     </Field>
                 </div>
                 {defaultShippingElement}
                 <div className={classes.buttons}>
                     {cancelButton}
-                    <Button {...submitButtonProps}>{submitButtonText}</Button>
+                    <Button
+                        {...submitButtonProps}
+                        data-cy="CustomerForm-submitButton"
+                    >
+                        {submitButtonText}
+                    </Button>
                 </div>
             </Form>
         </Fragment>