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

package/lib/components/AccountInformationPage/accountInformationPage.gql.js

@@ -3,10 +3,9 @@ import { AccountInformationPageFragment } from './accountInformationPageFragment
 
 export const SET_CUSTOMER_INFORMATION = gql`
     mutation SetCustomerInformation($customerInput: CustomerInput!) {
-        updateCustomer(input: $customerInput)
-            @connection(key: "updateCustomer") {
+        updateCustomer(input: $customerInput) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             customer {
-                id
                 ...AccountInformationPageFragment
             }
         }
@@ -21,9 +20,8 @@ export const CHANGE_CUSTOMER_PASSWORD = gql`
     ) {
         changeCustomerPassword(
             currentPassword: $currentPassword
-            newPassword: $newPassword
-        ) @connection(key: "changeCustomerPassword") {
-            id
+            newPassword: $newPassword # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        ) {
             email
         }
     }
@@ -31,8 +29,8 @@ export const CHANGE_CUSTOMER_PASSWORD = gql`
 
 export const GET_CUSTOMER_INFORMATION = gql`
     query GetCustomerInformation {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             ...AccountInformationPageFragment
         }
     }

package/lib/components/AccountInformationPage/accountInformationPage.js

@@ -91,6 +91,7 @@ const AccountInformationPage = props => {
                             disabled={false}
                             onClick={showUpdateMode}
                             priority="normal"
+                            data-cy="AccountInformationPage-editInformationButton"
                         >
                             <FormattedMessage
                                 id={'global.editButton'}
@@ -123,7 +124,10 @@ const AccountInformationPage = props => {
                     defaultMessage: 'Account Information'
                 })}
             </StoreTitle>
-            <h1 className={classes.title}>
+            <h1
+                className={classes.title}
+                data-cy="AccountInformationPage-title"
+            >
                 <FormattedMessage
                     id={'accountInformationPage.accountInformation'}
                     defaultMessage={'Account Information'}

package/lib/components/AccountInformationPage/editForm.js

@@ -42,16 +42,21 @@ const EditForm = props => {
                     [isNotEqualToField, 'password']
                 ])}
                 isToggleButtonHidden={false}
+                data-cy="newPassword"
             />
         </div>
     ) : null;
 
     const maybeChangePasswordButton = !shouldShowNewPassword ? (
-        <div className={classes.changePasswordButtonContainer}>
+        <div
+            className={classes.changePasswordButtonContainer}
+            data-cy="editForm-changePasswordButtonContainer"
+        >
             <LinkButton
                 classes={classes.changePasswordButton}
                 type="button"
                 onClick={handleChangePassword}
+                data-cy="linkButton-root"
             >
                 <FormattedMessage
                     id={'global.changePassword'}
@@ -81,7 +86,11 @@ const EditForm = props => {
                             defaultMessage: 'First Name'
                         })}
                     >
-                        <TextInput field="firstname" validate={isRequired} />
+                        <TextInput
+                            field="firstname"
+                            validate={isRequired}
+                            data-cy="firstname"
+                        />
                     </Field>
                 </div>
                 <div className={classes.lastname}>
@@ -92,7 +101,11 @@ const EditForm = props => {
                             defaultMessage: 'Last Name'
                         })}
                     >
-                        <TextInput field="lastname" validate={isRequired} />
+                        <TextInput
+                            field="lastname"
+                            validate={isRequired}
+                            data-cy="lastname"
+                        />
                     </Field>
                 </div>
                 <div className={classes.email}>
@@ -103,7 +116,11 @@ const EditForm = props => {
                             defaultMessage: 'Email'
                         })}
                     >
-                        <TextInput field="email" validate={isRequired} />
+                        <TextInput
+                            field="email"
+                            validate={isRequired}
+                            data-cy="email"
+                        />
                     </Field>
                 </div>
                 <div className={classes.password}>
@@ -113,6 +130,7 @@ const EditForm = props => {
                         validate={isRequired}
                         autoComplete="current-password"
                         isToggleButtonHidden={false}
+                        data-cy="password"
                     />
                 </div>
                 {maybeNewPasswordField}

package/lib/components/AccountMenu/accountMenu.js

@@ -81,7 +81,7 @@ const AccountMenu = React.forwardRef((props, ref) => {
     }
 
     return (
-        <aside className={rootClass}>
+        <aside className={rootClass} data-cy="AccountMenu-root">
             <div ref={ref} className={contentsClass}>
                 {accountMenuIsOpen ? dropdownContents : null}
             </div>

package/lib/components/AccountMenu/accountMenuItems.js

@@ -25,12 +25,13 @@ const AccountMenuItems = props => {
     });
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="accountMenuItems-root">
             {menu}
             <button
                 className={classes.signOut}
                 onClick={handleSignOut}
                 type="button"
+                data-cy="accountMenuItems-signOut"
             >
                 <FormattedMessage
                     id={'accountMenu.signOutButtonText'}

package/lib/components/AddressBookPage/__tests__/__snapshots__/addressCard.spec.js.snap

@@ -44,6 +44,7 @@ exports[`renders a default address 1`] = `
       className="telephone"
     >
       <mock-FormattedMessage
+        defaultMessage="Phone {telephone}"
         id="addressBookPage.telephone"
         values={
           Object {
@@ -146,6 +147,7 @@ exports[`renders a non-default address 1`] = `
       className="telephone"
     >
       <mock-FormattedMessage
+        defaultMessage="Phone {telephone}"
         id="addressBookPage.telephone"
         values={
           Object {
@@ -321,6 +323,7 @@ exports[`renders an address with a middle name 1`] = `
       className="telephone"
     >
       <mock-FormattedMessage
+        defaultMessage="Phone {telephone}"
         id="addressBookPage.telephone"
         values={
           Object {
@@ -431,6 +434,7 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
       className="telephone"
     >
       <mock-FormattedMessage
+        defaultMessage="Phone {telephone}"
         id="addressBookPage.telephone"
         values={
           Object {
@@ -597,6 +601,7 @@ exports[`renders disabled delete confirmation if isConfirmingDelete and isDeleti
       className="telephone"
     >
       <mock-FormattedMessage
+        defaultMessage="Phone {telephone}"
         id="addressBookPage.telephone"
         values={
           Object {

package/lib/components/AddressBookPage/addEditDialog.js

@@ -92,10 +92,14 @@ const AddEditDialog = props => {
                 classes={{ root: classes.errorContainer }}
                 errors={Array.from(formErrors.values())}
             />
-            <div className={classes.root}>
+            <div className={classes.root} data-cy="AddEditDialog-root">
                 <div className={classes.firstname}>
                     <Field id="firstname" label={firstNameLabel}>
-                        <TextInput field="firstname" validate={isRequired} />
+                        <TextInput
+                            field="firstname"
+                            validate={isRequired}
+                            data-cy="firstname"
+                        />
                     </Field>
                 </div>
                 <div className={classes.middlename}>
@@ -104,30 +108,46 @@ const AddEditDialog = props => {
                         label={middleNameLabel}
                         optional={true}
                     >
-                        <TextInput field="middlename" />
+                        <TextInput field="middlename" data-cy="middlename" />
                     </Field>
                 </div>
                 <div className={classes.lastname}>
                     <Field id="lastname" label={lastNameLabel}>
-                        <TextInput field="lastname" validate={isRequired} />
+                        <TextInput
+                            field="lastname"
+                            validate={isRequired}
+                            data-cy="lastname"
+                        />
                     </Field>
                 </div>
                 <div className={classes.country}>
-                    <Country field={'country_code'} validate={isRequired} />
+                    <Country
+                        field={'country_code'}
+                        validate={isRequired}
+                        data-cy="country"
+                    />
                 </div>
                 <div className={classes.street1}>
                     <Field id="street1" label={street1Label}>
-                        <TextInput field="street[0]" validate={isRequired} />
+                        <TextInput
+                            field="street[0]"
+                            validate={isRequired}
+                            data-cy="street[0]"
+                        />
                     </Field>
                 </div>
                 <div className={classes.street2}>
                     <Field id="street2" label={street2Label} optional={true}>
-                        <TextInput field="street[1]" />
+                        <TextInput field="street[1]" data-cy="street[1]" />
                     </Field>
                 </div>
                 <div className={classes.city}>
                     <Field id="city" label={cityLabel}>
-                        <TextInput field="city" validate={isRequired} />
+                        <TextInput
+                            field="city"
+                            validate={isRequired}
+                            data-cy="city"
+                        />
                     </Field>
                 </div>
                 <div className={classes.region}>
@@ -137,20 +157,26 @@ const AddEditDialog = props => {
                         fieldSelect={'region[region_id]'}
                         optionValueKey="id"
                         validate={isRequired}
+                        data-cy="region"
                     />
                 </div>
                 <div className={classes.postcode}>
-                    <Postcode validate={isRequired} />
+                    <Postcode validate={isRequired} data-cy="Postcode" />
                 </div>
                 <div className={classes.telephone}>
                     <Field id="telephone" label={telephoneLabel}>
-                        <TextInput field="telephone" validate={isRequired} />
+                        <TextInput
+                            field="telephone"
+                            validate={isRequired}
+                            data-cy="telephone"
+                        />
                     </Field>
                 </div>
                 <div className={classes.default_address_check}>
                     <Checkbox
                         field="default_shipping"
                         label={defaultAddressCheckLabel}
+                        data-cy="default_shipping"
                     />
                 </div>
             </div>

package/lib/components/AddressBookPage/addressBookPage.js

@@ -93,13 +93,16 @@ const AddressBookPage = props => {
     return (
         <div className={classes.root}>
             <StoreTitle>{PAGE_TITLE}</StoreTitle>
-            <h1 className={classes.heading}>{PAGE_TITLE}</h1>
-            <div className={classes.content}>
+            <h1 className={classes.heading} data-cy="AddressBookPage-heading">
+                {PAGE_TITLE}
+            </h1>
+            <div className={classes.content} data-cy="AddressBookPage-content">
                 {addressBookElements}
                 <LinkButton
                     className={classes.addButton}
                     key="addAddressButton"
                     onClick={handleAddAddress}
+                    data-cy="AddressBookPage-addButton"
                 >
                     <Icon
                         classes={{

package/lib/components/AddressBookPage/addressCard.js

@@ -52,7 +52,10 @@ const AddressCard = props => {
     });
 
     const defaultBadge = default_shipping ? (
-        <span className={classes.defaultBadge}>
+        <span
+            className={classes.defaultBadge}
+            data-cy="addressCard-defaultBadge"
+        >
             <FormattedMessage
                 id={'addressCard.defaultText'}
                 defaultMessage={'Default'}
@@ -66,7 +69,11 @@ const AddressCard = props => {
     const additionalAddressString = `${city}, ${region} ${postcode}`;
 
     const deleteButtonElement = !default_shipping ? (
-        <LinkButton classes={{ root: classes.deleteButton }} onClick={onDelete}>
+        <LinkButton
+            classes={{ root: classes.deleteButton }}
+            onClick={onDelete}
+            data-cy="addressCard-deleteButton"
+        >
             <Icon classes={{ icon: null }} size={16} src={TrashIcon} />
             <span className={classes.actionLabel}>
                 <FormattedMessage
@@ -86,6 +93,7 @@ const AddressCard = props => {
                 type="button"
                 negative={true}
                 onClick={onConfirmDelete}
+                data-cy="addressCard-confirmDeleteButton"
             >
                 <FormattedMessage
                     id={'global.deleteButton'}
@@ -108,8 +116,11 @@ const AddressCard = props => {
     ) : null;
 
     return (
-        <div className={classes.root}>
-            <div className={classes.contentContainer}>
+        <div className={classes.root} data-cy="addressCard-root">
+            <div
+                className={classes.contentContainer}
+                data-cy="addressCard-contentContainer"
+            >
                 {defaultBadge}
                 <span className={classes.name}>{nameString}</span>
                 {streetRows}
@@ -122,6 +133,7 @@ const AddressCard = props => {
                 <span className={classes.telephone}>
                     <FormattedMessage
                         id="addressBookPage.telephone"
+                        defaultMessage="Phone {telephone}"
                         values={{ telephone }}
                     />
                 </span>
@@ -130,6 +142,7 @@ const AddressCard = props => {
                 <LinkButton
                     classes={{ root: classes.editButton }}
                     onClick={onEdit}
+                    data-cy="addressCard-editButton"
                 >
                     <Icon classes={{ icon: null }} size={16} src={EditIcon} />
                     <span className={classes.actionLabel}>

package/lib/components/App/app.js

@@ -107,7 +107,11 @@ const App = props => {
             <Main isMasked={hasOverlay}>
                 <Routes />
             </Main>
-            <Mask isActive={hasOverlay} dismiss={handleCloseDrawer} />
+            <Mask
+                isActive={hasOverlay}
+                dismiss={handleCloseDrawer}
+                data-cy="App-Mask-button"
+            />
             <Navigation />
             <ToastContainer />
         </HeadProvider>

package/lib/components/App/localeProvider.js

@@ -5,8 +5,9 @@ import { gql, useQuery } from '@apollo/client';
 
 const GET_LOCALE = gql`
     query getLocale {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             locale
         }
     }

package/lib/components/Breadcrumbs/breadcrumbs.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { number, string } from 'prop-types';
+import { string } from 'prop-types';
 import { Link } from 'react-router-dom';
 
 import { useBreadcrumbs } from '@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs';
@@ -13,7 +13,7 @@ const DELIMITER = '/';
 /**
  * Breadcrumbs! Generates a sorted display of category links.
  *
- * @param {String} props.categoryId the id of the category for which to generate breadcrumbs
+ * @param {String} props.categoryId the uid of the category for which to generate breadcrumbs
  * @param {String} props.currentProduct the name of the product we're currently on, if any.
  */
 const Breadcrumbs = props => {
@@ -103,6 +103,6 @@ const Breadcrumbs = props => {
 export default Breadcrumbs;
 
 Breadcrumbs.propTypes = {
-    categoryId: number.isRequired,
+    categoryId: string.isRequired,
     currentProduct: string
 };

package/lib/components/Breadcrumbs/breadcrumbs.module.css

@@ -1,11 +1,18 @@
 .root {
+    --whitespace-start: 1rem;
+    --whitespace-end: 10px;
+
     composes: h-auto from global;
-    margin-left: 1rem;
-    margin-top: 1rem;
+    padding-left: var(--whitespace-start);
+    padding-top: var(--whitespace-start);
+    padding-bottom: var(--whitespace-end); /* Allow space for focus ring */
+    margin-bottom: calc(
+        -1 * var(--whitespace-end)
+    ); /* Prevent focus ring space affecting the rest of the UI */
     font-size: 0.875rem;
 
     /* Permanent height to prevent pop-in. */
-    height: 0.875rem;
+    height: calc(0.875rem + var(--whitespace-start) + var(--whitespace-end));
 
     /* Show ellipses when overflowing. */
     overflow: hidden;

package/lib/components/CartPage/GiftCards/giftCard.js

@@ -36,6 +36,7 @@ const GiftCard = props => {
             <LinkButton
                 disabled={isRemovingCard}
                 onClick={removeGiftCardWithCode}
+                data-cy="GiftCards-GiftCard-removeButton"
             >
                 <FormattedMessage
                     id={'giftCard.remove'}

package/lib/components/CartPage/GiftCards/giftCards.js

@@ -166,6 +166,7 @@ const GiftCards = props => {
                 <div className={containerClass}>
                     <TextInput
                         id={classes.card}
+                        data-cy="GiftCards-card"
                         disabled={isApplyingCard || isCheckingBalance}
                         field="card"
                         mask={value => value && value.trim()}
@@ -187,6 +188,7 @@ const GiftCards = props => {
             >
                 <Button
                     priority={'normal'}
+                    data-cy="GiftCards-apply"
                     disabled={isApplyingCard}
                     onClick={applyGiftCard}
                 >

package/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js

@@ -98,6 +98,7 @@ const CouponCode = props => {
                     <LinkButton
                         className={classes.removeButton}
                         disabled={removingCoupon}
+                        data-cy="CouponCode-removeCouponButton"
                         onClick={() => {
                             handleRemoveCoupon(code);
                         }}
@@ -133,6 +134,7 @@ const CouponCode = props => {
                     <TextInput
                         field="couponCode"
                         id={'couponCode'}
+                        data-cy="CouponCode-couponCode"
                         placeholder={formatMessage({
                             id: 'couponCode.enterCode',
                             defaultMessage: 'Enter code'
@@ -144,6 +146,7 @@ const CouponCode = props => {
                 </Field>
                 <Field>
                     <Button
+                        data-cy="CouponCode-submit"
                         disabled={applyingCoupon}
                         priority={'normal'}
                         type={'submit'}

package/lib/components/CartPage/PriceAdjustments/GiftOptions/giftOptions.js

@@ -38,6 +38,7 @@ const GiftOptions = props => {
             <div className={classes.option}>
                 <Checkbox
                     {...giftReceiptProps}
+                    data-cy="GiftOptions-includeGiftReceipt"
                     label={formatMessage({
                         id: 'giftOptions.includeGiftReceipt',
                         defaultMessage: 'Include gift receipt'
@@ -47,6 +48,7 @@ const GiftOptions = props => {
             <div className={classes.option}>
                 <Checkbox
                     {...printedCardProps}
+                    data-cy="GiftOptions-includePrintedCard"
                     label={formatMessage({
                         id: 'giftOptions.includePrintedCard',
                         defaultMessage: 'Include printed card'
@@ -57,6 +59,7 @@ const GiftOptions = props => {
                 <Relevant when={shouldPromptForMessage}>
                     <TextArea
                         {...cardMessageProps}
+                        data-cy="GiftOptions-cardMessage"
                         placeholder={formatMessage({
                             id: 'giftOptions.cardMessage',
                             defaultMessage: 'Enter your message here'

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.js

@@ -54,10 +54,17 @@ const ShippingForm = props => {
                 initialValues={selectedShippingFields}
                 onSubmit={handleOnSubmit}
             >
-                <Country validate={isRequired} />
-                <Region validate={isRequired} />
+                <Country
+                    data-cy="ShippingMethods-ShippingForm-country"
+                    validate={isRequired}
+                />
+                <Region
+                    data-cy="ShippingMethods-ShippingForm-region"
+                    validate={isRequired}
+                />
                 <Postcode
                     fieldInput="zip"
+                    data-cy="ShippingMethods-ShippingForm-postCode"
                     validate={isRequired}
                     onValueChange={handleZipChange}
                 />
@@ -66,6 +73,7 @@ const ShippingForm = props => {
                         classes={{
                             root_normalPriority: classes.submit
                         }}
+                        data-cy="ShippingMethods-ShippingForm-submit"
                         disabled={isSetShippingLoading}
                         priority="normal"
                         type="submit"

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.js

@@ -72,6 +72,7 @@ const ShippingMethods = props => {
             classes={{
                 root_normalPriority: classes.estimateButton
             }}
+            data-cy="ShippingMethods-estimateButton"
             onClick={showForm}
         >
             <FormattedMessage
@@ -82,7 +83,7 @@ const ShippingMethods = props => {
     );
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="ShippingMethods-root">
             <p className={classes.message}>
                 <FormattedMessage
                     id={'shippingMethods.message'}

package/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>
     );

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadios.js

@@ -66,7 +66,7 @@ export const SET_SHIPPING_METHOD_MUTATION = gql`
     ) {
         setShippingMethodsOnCart(
             input: { cart_id: $cartId, shipping_methods: [$shippingMethod] }
-        ) @connection(key: "setShippingMethodsOnCart") {
+        ) {
             cart {
                 id
                 # If this mutation causes "free" to become available we need to know.

package/lib/components/CartPage/PriceAdjustments/giftCardSection.ee.js

@@ -12,6 +12,7 @@ const GiftCardSection = props => {
     return (
         <Section
             id={'gift_card'}
+            data-cy="PriceAdjustments-giftCardSection"
             title={formatMessage({
                 id: 'giftCardSection.giftCard',
                 defaultMessage: 'Apply Gift Card'

package/lib/components/CartPage/PriceAdjustments/priceAdjustments.js

@@ -36,10 +36,11 @@ const PriceAdjustments = props => {
     const { formatMessage } = useIntl();
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="PriceAdjustments-root">
             <Accordion canOpenMultiple={true}>
                 <Section
                     id={'shipping_method'}
+                    data-cy="PriceAdjustments-shippingMethodSection"
                     title={formatMessage({
                         id: 'priceAdjustments.shippingMethod',
                         defaultMessage: 'Estimate your Shipping'
@@ -53,6 +54,7 @@ const PriceAdjustments = props => {
                 </Section>
                 <Section
                     id={'coupon_code'}
+                    data-cy="PriceAdjustments-couponCodeSection"
                     title={formatMessage({
                         id: 'priceAdjustments.couponCode',
                         defaultMessage: 'Enter Coupon Code'
@@ -65,6 +67,7 @@ const PriceAdjustments = props => {
                 <GiftCardSection setIsCartUpdating={setIsCartUpdating} />
                 <Section
                     id={'gift_options'}
+                    data-cy="PriceAdjustments-giftOptionsSection"
                     title={formatMessage({
                         id: 'priceAdjustments.giftOptions',
                         defaultMessage: 'See Gift Options'

package/lib/components/CartPage/PriceSummary/discountSummary.js

@@ -43,13 +43,19 @@ const DiscountSummary = props => {
 
     return discount.value ? (
         <Fragment>
-            <span className={classes.lineItemLabel}>
+            <span
+                className={classes.lineItemLabel}
+                data-cy="PriceSummary-DiscountSummary-label"
+            >
                 <FormattedMessage
                     id={'discountSummary.lineItemLabel'}
                     defaultMessage={'Discounts applied'}
                 />
             </span>
-            <span className={classes.price}>
+            <span
+                data-cy="DiscountSummary-discountValue"
+                className={classes.price}
+            >
                 {MINUS_SYMBOL}
                 <Price
                     value={discount.value}