@magento/venia-ui 9.2.0-beta.1 → 9.3.0-beta.1

package/lib/components/CartPage/ProductListing/EditModal/productDetail.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import Price from '@magento/venia-ui/lib/components/Price';
+import configuredVariant from '@magento/peregrine/lib/util/configuredVariant';
 
 import { useStyle } from '../../../../classify';
 import Image from '../../../Image';
@@ -9,18 +10,12 @@ import defaultClasses from './productDetail.module.css';
 const IMAGE_SIZE = 240;
 
 const ProductDetail = props => {
-    const { item, variantPrice } = props;
+    const { item, variantPrice, configurableThumbnailSource } = props;
     const { formatMessage } = useIntl();
     const { prices, product } = item;
     const { price } = prices;
     const { currency, value: unitPrice } = variantPrice || price;
-    const {
-        name,
-        sku,
-        small_image: smallImage,
-        stock_status: stockStatusValue
-    } = product;
-    const { url: imageURL } = smallImage;
+    const { name, sku, stock_status: stockStatusValue } = product;
     const stockStatusLabels = new Map([
         [
             'IN_STOCK',
@@ -44,7 +39,10 @@ const ProductDetail = props => {
             defaultMessage: 'Unknown'
         });
     const classes = useStyle(defaultClasses, props.classes);
-
+    const configured_variant = configuredVariant(
+        item.configurable_options,
+        product
+    );
     return (
         <div className={classes.root}>
             <Image
@@ -54,7 +52,12 @@ const ProductDetail = props => {
                     root: classes.imageContainer
                 }}
                 width={IMAGE_SIZE}
-                resource={imageURL}
+                resource={
+                    configurableThumbnailSource === 'itself' &&
+                    configured_variant
+                        ? configured_variant.small_image.url
+                        : product.small_image.url
+                }
             />
             <span className={classes.productName}>{name}</span>
             <div className={classes.stockRow}>

package/lib/components/CartPage/ProductListing/EditModal/productForm.js

@@ -34,7 +34,8 @@ const ProductForm = props => {
         isLoading,
         isSaving,
         isDialogOpen,
-        handleClose
+        handleClose,
+        configurableThumbnailSource
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -90,7 +91,11 @@ const ProductForm = props => {
                     errors={Array.from(errors.values())}
                     scrollOnError={false}
                 />
-                <ProductDetail item={cartItem} variantPrice={variantPrice} />
+                <ProductDetail
+                    item={cartItem}
+                    variantPrice={variantPrice}
+                    configurableThumbnailSource={configurableThumbnailSource}
+                />
                 <Options
                     classes={{
                         root: classes.optionRoot

package/lib/components/CartPage/ProductListing/product.js

@@ -111,6 +111,7 @@ const Product = props => {
                         }}
                         width={IMAGE_SIZE}
                         resource={image}
+                        data-cy="Product-image"
                     />
                 </Link>
                 <div className={classes.details}>

package/lib/components/CartPage/ProductListing/productListing.js

@@ -59,7 +59,7 @@ const ProductListing = props => {
         const productComponents = items.map(product => (
             <Product
                 item={product}
-                key={product.id}
+                key={product.uid}
                 setActiveEditItem={setActiveEditItem}
                 setIsCartUpdating={setIsCartUpdating}
                 onAddToWishlistSuccess={onAddToWishlistSuccess}

package/lib/components/CartPage/cartPage.js

@@ -93,7 +93,7 @@ const CartPage = props => {
                 })}
             </StoreTitle>
             <div className={classes.heading_container}>
-                <h1 className={classes.heading}>
+                <h1 data-cy="CartPage-heading" className={classes.heading}>
                     <FormattedMessage
                         id={'cartPage.heading'}
                         defaultMessage={'Cart'}

package/lib/components/Checkbox/checkbox.js

@@ -38,7 +38,12 @@ const Checkbox = props => {
 
     return (
         <Fragment>
-            <label aria-label={ariaLabel} className={classes.root} htmlFor={id}>
+            <label
+                data-cy="Checkbox-label"
+                aria-label={ariaLabel}
+                className={classes.root}
+                htmlFor={id}
+            >
                 <InformedCheckbox
                     {...rest}
                     className={classes.input}

package/lib/components/Checkbox/checkbox.module.css

@@ -45,6 +45,7 @@
 }
 
 .input:disabled {
+    background: rgb(var(--venia-global-color-gray-100));
     cursor: default;
 }
 

package/lib/components/CheckoutPage/ItemsReview/__tests__/__snapshots__/item.spec.js.snap

@@ -60,9 +60,9 @@ exports[`Snapshot test when configured to use variant image 1`] = `
     options={
       Array [
         Object {
-          "id": 22,
+          "configurable_product_option_uid": 22,
+          "configurable_product_option_value_uid": "Y29uZmlndXJhYmxlLzIyLzI=",
           "option_label": "Color",
-          "value_id": 2,
           "value_label": "red",
         },
       ]

package/lib/components/CheckoutPage/ItemsReview/__tests__/__snapshots__/itemsReview.spec.js.snap

@@ -21,6 +21,11 @@ exports[`Snapshot test 1`] = `
           className="undefined undefined"
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          style={
+            Object {
+              "--width": "100px",
+            }
+          }
           width={100}
         />
         <img
@@ -40,6 +45,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+          style={
+            Object {
+              "--height": "125px",
+              "--width": "100px",
+            }
+          }
           width={100}
         />
       </div>
@@ -85,6 +96,11 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
           className="undefined undefined"
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          style={
+            Object {
+              "--width": "100px",
+            }
+          }
           width={100}
         />
         <img
@@ -104,6 +120,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+          style={
+            Object {
+              "--height": "125px",
+              "--width": "100px",
+            }
+          }
           width={100}
         />
       </div>
@@ -149,6 +171,11 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
           className="undefined undefined"
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          style={
+            Object {
+              "--width": "100px",
+            }
+          }
           width={100}
         />
         <img
@@ -168,6 +195,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+          style={
+            Object {
+              "--height": "125px",
+              "--width": "100px",
+            }
+          }
           width={100}
         />
       </div>

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

@@ -60,8 +60,8 @@ test('Snapshot test when configured to use variant image', () => {
         {
             option_label: 'Color',
             value_label: 'red',
-            id: 22,
-            value_id: 2
+            configurable_product_option_uid: 22,
+            configurable_product_option_value_uid: 'Y29uZmlndXJhYmxlLzIyLzI='
         }
     ];
     const tree = createTestInstance(

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

@@ -62,7 +62,10 @@ const ItemsReview = props => {
             data-cy="ItemsReview-container"
         >
             <div className={classes.items_container}>
-                <div className={classes.total_quantity}>
+                <div
+                    data-cy="ItemsReview-totalQuantity"
+                    className={classes.total_quantity}
+                >
                     <span className={classes.total_quantity_amount}>
                         {totalQuantity}
                     </span>

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

@@ -35,6 +35,10 @@ const defaultTalonProps = {
             firstname: 'Avatar',
             lastname: 'Aang'
         }
+    },
+    recaptchaWidgetProps: {
+        containerElement: jest.fn(),
+        shouldRender: false
     }
 };
 describe('CreateAccount', () => {

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

@@ -19,6 +19,7 @@ import Field from '../../Field';
 import FormError from '../../FormError';
 import TextInput from '../../TextInput';
 import Password from '../../Password';
+import GoogleReCaptcha from '../../GoogleReCaptcha';
 
 import defaultClasses from './createAccount.module.css';
 
@@ -59,7 +60,13 @@ const CreateAccount = props => {
         onSubmit
     });
 
-    const { errors, handleSubmit, isDisabled, initialValues } = talonProps;
+    const {
+        errors,
+        handleSubmit,
+        isDisabled,
+        initialValues,
+        recaptchaWidgetProps
+    } = talonProps;
 
     return (
         <div className={classes.root}>
@@ -152,6 +159,7 @@ const CreateAccount = props => {
                         })}
                     />
                 </div>
+                <GoogleReCaptcha {...recaptchaWidgetProps} />
                 <div className={classes.actions}>
                     <Button
                         disabled={isDisabled}

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

@@ -91,7 +91,10 @@ const OrderConfirmationPage = props => {
                         values={{ orderNumber }}
                     />
                 </div>
-                <div className={classes.shippingInfoHeading}>
+                <div
+                    data-cy="OrderConfirmationPage-shippingInfoHeading"
+                    className={classes.shippingInfoHeading}
+                >
                     <FormattedMessage
                         id={'global.shippingInformation'}
                         defaultMessage={'Shipping Information'}
@@ -105,7 +108,10 @@ const OrderConfirmationPage = props => {
                         {additionalAddressString}
                     </span>
                 </div>
-                <div className={classes.shippingMethodHeading}>
+                <div
+                    data-cy="OrderConfirmationPage-shippingMethodHeading"
+                    className={classes.shippingMethodHeading}
+                >
                     <FormattedMessage
                         id={'global.shippingMethod'}
                         defaultMessage={'Shipping Method'}
@@ -115,7 +121,10 @@ const OrderConfirmationPage = props => {
                 <div className={classes.itemsReview}>
                     <ItemsReview data={data} />
                 </div>
-                <div className={classes.additionalText}>
+                <div
+                    data-cy="OrderConfirmationPage-additionalText"
+                    className={classes.additionalText}
+                >
                     <FormattedMessage
                         id={'checkoutPage.additionalText'}
                         defaultMessage={

package/lib/components/CheckoutPage/PaymentInformation/__tests__/__snapshots__/creditCard.spec.js.snap

@@ -8,6 +8,7 @@ exports[`Should return correct shape 1`] = `
     className="credit_card_root"
   >
     <FormError
+      allowErrorMessages={true}
       classes={
         Object {
           "root": "formErrorContainer",

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

@@ -83,7 +83,8 @@ const useCreditCardReturnValue = {
         phoneNumber: 'sample phone number',
         isBillingAddressSame: false
     },
-    shippingAddressCountry: 'US'
+    shippingAddressCountry: 'US',
+    recaptchaWidgetProps: {}
 };
 
 test('Should return correct shape', () => {

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

@@ -129,8 +129,6 @@ const BraintreeDropin = props => {
      * The parent component does this by setting `shouldTeardownDropin` `true`.
      */
     useEffect(() => {
-        let unmounted = false;
-
         const teardownAndRenderDropin = async () => {
             try {
                 dropinInstance.teardown();
@@ -138,32 +136,18 @@ const BraintreeDropin = props => {
 
                 const instance = await createDropinInstance();
 
-                if (!unmounted) {
-                    setDropinInstance(instance);
-                    onReady(true);
-                } else {
-                    /**
-                     * Component has been unmounted, tear down the instance.
-                     */
-                    instance.teardown();
-                }
+                setDropinInstance(instance);
+                onReady(true);
             } catch (err) {
                 console.error(
                     `Unable to tear down and re-initialize Credit Card form (Braintree). \n${err}`
                 );
-                if (!unmounted) {
-                    setIsError(true);
-                }
             }
         };
 
         if (shouldTeardownDropin) {
             teardownAndRenderDropin();
         }
-
-        return () => {
-            unmounted = true;
-        };
     }, [
         shouldTeardownDropin,
         dropinInstance,

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

@@ -16,6 +16,7 @@ import { useStyle } from '../../../classify';
 
 import defaultClasses from './creditCard.module.css';
 import FormError from '../../FormError';
+import GoogleReCaptcha from '../../GoogleReCaptcha';
 
 const STEP_DESCRIPTIONS = [
     { defaultMessage: 'Loading Payment', id: 'checkoutPage.step0' },
@@ -83,7 +84,8 @@ const CreditCard = props => {
         initialValues,
         shippingAddressCountry,
         shouldTeardownDropin,
-        resetShouldTeardownDropin
+        resetShouldTeardownDropin,
+        recaptchaWidgetProps
     } = talonProps;
 
     const creditCardComponentClassName = isLoading
@@ -154,6 +156,7 @@ const CreditCard = props => {
         <div className={classes.root} data-cy="CreditCard-root">
             <div className={creditCardComponentClassName}>
                 <FormError
+                    allowErrorMessages
                     classes={{ root: classes.formErrorContainer }}
                     errors={Array.from(errors.values())}
                 />
@@ -167,7 +170,10 @@ const CreditCard = props => {
                         resetShouldTeardownDropin={resetShouldTeardownDropin}
                     />
                 </div>
-                <div className={classes.address_check}>
+                <div
+                    data-cy="CreditCard-AddressCheck-root"
+                    className={classes.address_check}
+                >
                     <Checkbox
                         data-cy="PaymentInformation-billingAddressSame"
                         field="isBillingAddressSame"
@@ -179,7 +185,10 @@ const CreditCard = props => {
                         initialValue={initialValues.isBillingAddressSame}
                     />
                 </div>
-                <div className={billingAddressFieldsClassName}>
+                <div
+                    data-cy="CreditCard-billingAddressFields"
+                    className={billingAddressFieldsClassName}
+                >
                     <Field
                         id="firstName"
                         classes={fieldClasses.first_name}
@@ -304,6 +313,7 @@ const CreditCard = props => {
                         />
                     </Field>
                 </div>
+                <GoogleReCaptcha {...recaptchaWidgetProps} />
             </div>
             {loadingIndicator}
         </div>

package/lib/components/CheckoutPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap

@@ -18,12 +18,7 @@ exports[`renders price adjustments 1`] = `
     <GiftCardSection
       setIsCartUpdating={[MockFunction setPageIsUpdating]}
     />
-    <mock-Section
-      id="gift_options"
-      title="See Gift Options"
-    >
-      <GiftOptions />
-    </mock-Section>
+    <GiftOptionsSection />
   </mock-Accordion>
 </div>
 `;

package/lib/components/CheckoutPage/PriceAdjustments/__tests__/priceAdjustments.spec.js

@@ -14,8 +14,8 @@ jest.mock(
     () => 'GiftCardSection'
 );
 jest.mock(
-    '../../../CartPage/PriceAdjustments/GiftOptions',
-    () => 'GiftOptions'
+    '../../../CartPage/PriceAdjustments/giftOptionsSection',
+    () => 'GiftOptionsSection'
 );
 
 test('renders price adjustments', () => {

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

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { useIntl } from 'react-intl';
 import { func } from 'prop-types';
 
 import { useStyle } from '../../../classify';
+import LoadingIndicator from '../../LoadingIndicator';
 import { Accordion, Section } from '../../Accordion';
 import CouponCode from '../../CartPage/PriceAdjustments/CouponCode';
 import GiftCardSection from '../../CartPage/PriceAdjustments/giftCardSection';
-import GiftOptions from '../../CartPage/PriceAdjustments/GiftOptions';
+import GiftOptionsSection from '../../CartPage/PriceAdjustments/giftOptionsSection';
 
 import defaultClasses from './priceAdjustments.module.css';
 
@@ -25,24 +26,19 @@ const PriceAdjustments = props => {
         <div className={classes.root}>
             <Accordion canOpenMultiple={true}>
                 <Section
+                    data-cy="PriceAdjustments-couponCodeSection"
                     id={'coupon_code'}
                     title={formatMessage({
                         id: 'checkoutPage.couponCode',
                         defaultMessage: 'Enter Coupon Code'
                     })}
                 >
-                    <CouponCode setIsCartUpdating={setPageIsUpdating} />
+                    <Suspense fallback={<LoadingIndicator />}>
+                        <CouponCode setIsCartUpdating={setPageIsUpdating} />
+                    </Suspense>
                 </Section>
                 <GiftCardSection setIsCartUpdating={setPageIsUpdating} />
-                <Section
-                    id={'gift_options'}
-                    title={formatMessage({
-                        id: 'checkoutPage.giftOptions',
-                        defaultMessage: 'See Gift Options'
-                    })}
-                >
-                    <GiftOptions />
-                </Section>
+                <GiftOptionsSection />
             </Accordion>
         </div>
     );

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

@@ -76,7 +76,7 @@ const CustomerForm = props => {
     ) : null;
 
     const formMessageRow = !hasDefaultShipping ? (
-        <div className={classes.formMessage}>
+        <div data-cy="CustomerForm-formMessage" className={classes.formMessage}>
             <Message>
                 <FormattedMessage
                     id={'customerForm.formMessage'}

package/lib/components/CheckoutPage/ShippingInformation/shippingInformation.js

@@ -93,7 +93,10 @@ const ShippingInformation = props => {
         </Fragment>
     ) : (
         <Fragment>
-            <h3 className={classes.editTitle}>
+            <h3
+                data-cy="ShippingInformation-editTitle"
+                className={classes.editTitle}
+            >
                 <FormattedMessage
                     id={'shippingInformation.editTitle'}
                     defaultMessage={'1. Shipping Information'}

package/lib/components/CheckoutPage/ShippingMethod/shippingMethod.js

@@ -118,8 +118,11 @@ const ShippingMethod = props => {
         }
 
         contents = (
-            <div className={classes.root}>
-                <h3 className={classes.editingHeading}>
+            <div data-cy="ShippingMethod-root" className={classes.root}>
+                <h3
+                    data-cy="ShippingMethod-heading"
+                    className={classes.editingHeading}
+                >
                     <FormattedMessage
                         id={'shippingMethod.heading'}
                         defaultMessage={'Shipping Method'}

package/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap

@@ -253,7 +253,7 @@ exports[`CheckoutPage renders an error and disables review order button if there
       </span>
     </button>
     <div
-      className="summaryContainer"
+      className="summaryContainer signInContainerVisible"
     >
       <OrderSummary
         isUpdating={true}
@@ -596,7 +596,7 @@ exports[`CheckoutPage renders checkout content for guest on desktop 1`] = `
       </h3>
     </div>
     <div
-      className="summaryContainer"
+      className="summaryContainer signInContainerVisible"
     >
       <OrderSummary
         isUpdating={false}
@@ -739,7 +739,7 @@ exports[`CheckoutPage renders checkout content for guest on mobile 1`] = `
       </h3>
     </div>
     <div
-      className="summaryContainer"
+      className="summaryContainer signInContainerVisible"
     >
       <OrderSummary
         isUpdating={false}

package/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js

@@ -77,6 +77,7 @@ const defaultTalonProps = {
     orderDetailsLoading: false,
     orderNumber: null,
     placeOrderLoading: false,
+    placeOrderButtonClicked: false,
     setGuestSignInUsername: jest.fn().mockName('setGuestSignInUsername'),
     setIsUpdating: jest.fn().mockName('setIsUpdating'),
     setShippingInformationDone: jest
@@ -84,6 +85,10 @@ const defaultTalonProps = {
         .mockName('setShippingInformationDone'),
     setShippingMethodDone: jest.fn().mockName('setShippingMethodDone'),
     setPaymentInformationDone: jest.fn().mockName('setPaymentInformationDone'),
+    recaptchaWidgetProps: {
+        containerElement: [Function],
+        shouldRender: false
+    },
     toggleAddressBookContent: jest.fn().mockName('toggleAddressBookContent'),
     toggleSignInContent: jest.fn().mockName('toggleSignInContent')
 };