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

package/lib/components/Newsletter/__tests__/newsletter.spec.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import { act } from 'react-test-renderer';
+import { Form } from 'informed';
+import { createTestInstance, useToasts } from '@magento/peregrine';
+import LoadingIndicator from '../../LoadingIndicator';
+import Newsletter from '../newsletter';
+import { useMutation } from '@apollo/client';
+import { useNewsletter } from '@magento/peregrine/lib/talons/Newsletter/useNewsletter';
+
+jest.mock('@apollo/client', () => ({
+    gql: jest.fn(),
+    useApolloClient: jest.fn().mockImplementation(() => {}),
+    useMutation: jest.fn().mockImplementation(() => [
+        jest.fn(),
+        {
+            error: null
+        }
+    ])
+}));
+jest.mock('../../../classify');
+jest.mock('../../Button', () => () => <i />);
+jest.mock('../../LinkButton', () => () => <i />);
+jest.mock('../../FormError/formError', () => 'FormError');
+jest.mock('../../LoadingIndicator', () => () => <i />);
+jest.mock('../newsletter.shimmer', () => 'NewsletterShimmer');
+
+jest.mock('@magento/peregrine', () => {
+    const actual = jest.requireActual('@magento/peregrine');
+    const useToasts = jest.fn().mockReturnValue([{}, { addToast: jest.fn() }]);
+    return {
+        createTestInstance: actual.createTestInstance,
+        useToasts
+    };
+});
+jest.mock('@magento/peregrine/lib/talons/Newsletter/useNewsletter', () => {
+    return {
+        useNewsletter: jest.fn()
+    };
+});
+jest.mock('@magento/peregrine/lib/hooks/useAwaitQuery', () => {
+    const useAwaitQuery = jest
+        .fn()
+        .mockResolvedValue({ data: { subscribeEmailToNewsletter: {} } });
+
+    return { useAwaitQuery };
+});
+const mockHandleSubmit = jest.fn();
+const talonProps = {
+    isEnabled: true,
+    errors: [],
+    handleSubmit: mockHandleSubmit,
+    isBusy: false,
+    isLoading: false,
+    setFormApi: jest.fn()
+};
+const props = {};
+
+describe('#Newsletter display', () => {
+    test('renders correctly', () => {
+        useNewsletter.mockReturnValueOnce(talonProps);
+        const component = createTestInstance(<Newsletter {...props} />);
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('it renders shimmer while loading config', () => {
+        useNewsletter.mockReturnValueOnce({
+            ...talonProps,
+            isLoading: true
+        });
+        const component = createTestInstance(<Newsletter {...props} />);
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('it does not display when disabled', () => {
+        useNewsletter.mockReturnValueOnce({
+            ...talonProps,
+            isEnabled: false
+        });
+        const component = createTestInstance(<Newsletter {...props} />);
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+});
+
+describe('#Newsletter submit', () => {
+    test('calls `handleSubmit` on submit', () => {
+        useNewsletter.mockReturnValueOnce(talonProps);
+        useMutation.mockReturnValueOnce([mockHandleSubmit, {}]);
+        const values = { email: 'a' };
+        const { root } = createTestInstance(<Newsletter {...props} />);
+
+        act(() => {
+            root.findByType(Form).props.onSubmit(values);
+        });
+
+        expect(mockHandleSubmit).toHaveBeenCalledTimes(1);
+        expect(mockHandleSubmit).toHaveBeenNthCalledWith(1, {
+            email: values.email
+        });
+    });
+
+    test('renders the loading indicator when form is submitting', () => {
+        useNewsletter.mockReturnValueOnce({
+            ...talonProps,
+            isBusy: true
+        });
+        const { root } = createTestInstance(<Newsletter {...props} />);
+        act(() => {
+            expect(root.findByType(LoadingIndicator)).toBeTruthy();
+        });
+    });
+
+    test('displays an error message if the email already subscribed', () => {
+        useMutation.mockReturnValueOnce([
+            jest.fn(),
+            {
+                error: {
+                    graphQLErrors: [
+                        {
+                            message: 'This email address is already subscribed.'
+                        }
+                    ]
+                }
+            }
+        ]);
+
+        useNewsletter.mockReturnValueOnce({
+            ...talonProps,
+            errors: ['This email address is already subscribed.']
+        });
+        const component = createTestInstance(<Newsletter {...props} />);
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('shows a toast if there is response', () => {
+        useNewsletter.mockReturnValueOnce({
+            ...talonProps,
+            newsLetterResponse: { status: 'SUBSCRIBED' }
+        });
+        const [, { addToast }] = useToasts();
+        createTestInstance(<Newsletter {...props} />);
+        expect(addToast).toHaveBeenCalled();
+    });
+});

package/lib/components/Newsletter/index.js

@@ -0,0 +1 @@
+export { default } from './newsletter';

package/lib/components/Newsletter/newsletter.js

@@ -0,0 +1,148 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Form } from 'informed';
+import { shape, string } from 'prop-types';
+
+import { useNewsletter } from '@magento/peregrine/lib/talons/Newsletter/useNewsletter';
+import { useToasts } from '@magento/peregrine';
+
+import { isRequired } from '../../util/formValidators';
+import { useStyle } from '../../classify';
+import FormError from '../FormError';
+import Button from '../Button';
+import Field from '../Field';
+import LoadingIndicator from '../LoadingIndicator';
+import TextInput from '../TextInput';
+import LinkButton from '../LinkButton';
+import Shimmer from './newsletter.shimmer';
+import defaultClasses from './newsletter.module.css';
+
+const Newsletter = props => {
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = useNewsletter();
+    const [, { addToast }] = useToasts();
+    const {
+        isEnabled,
+        errors,
+        handleSubmit,
+        isBusy,
+        isLoading,
+        setFormApi,
+        newsLetterResponse,
+        clearErrors
+    } = talonProps;
+
+    useEffect(() => {
+        if (newsLetterResponse && newsLetterResponse.status) {
+            addToast({
+                type: 'success',
+                message: formatMessage({
+                    id: 'newsletter.subscribeMessage',
+                    defaultMessage: 'The email address is subscribed.'
+                }),
+                timeout: 5000
+            });
+        }
+    }, [addToast, formatMessage, newsLetterResponse]);
+
+    if (isLoading) {
+        return <Shimmer />;
+    }
+
+    if (!isEnabled) {
+        return null;
+    }
+
+    const maybeLoadingIndicator = isBusy ? (
+        <div className={classes.loadingContainer}>
+            <LoadingIndicator>
+                <FormattedMessage
+                    id={'newsletter.loadingText'}
+                    defaultMessage={'Subscribing'}
+                />
+            </LoadingIndicator>
+        </div>
+    ) : null;
+
+    return (
+        <div className={classes.root} data-cy={'Newsletter-root'}>
+            {maybeLoadingIndicator}
+            <span className={classes.title}>
+                <FormattedMessage
+                    id={'newsletter.titleText'}
+                    defaultMessage={'Subscribe to Venia'}
+                />
+            </span>
+
+            <p className={classes.newsletter_text}>
+                <FormattedMessage
+                    id={'newsletter.infoText'}
+                    defaultMessage={
+                        'Recieve the latest news, update and special offers right to your inbox.'
+                    }
+                />
+            </p>
+            <FormError
+                allowErrorMessages
+                errors={Array.from(errors.values())}
+            />
+            <Form
+                getApi={setFormApi}
+                className={classes.form}
+                onSubmit={handleSubmit}
+            >
+                <Field
+                    id="email"
+                    label={formatMessage({
+                        id: 'global.email',
+                        defaultMessage: 'Email'
+                    })}
+                >
+                    <TextInput
+                        autoComplete="email"
+                        field="email"
+                        id="email"
+                        validate={isRequired}
+                    />
+                </Field>
+                <LinkButton
+                    className={classes.subscribe_link}
+                    type="submit"
+                    disabled={isBusy}
+                    onClick={clearErrors}
+                >
+                    <FormattedMessage
+                        id={'newsletter.subscribeText'}
+                        defaultMessage={'Subscribe'}
+                    />
+                </LinkButton>
+                <div className={classes.buttonsContainer}>
+                    <Button
+                        priority="normal"
+                        type="submit"
+                        disabled={isBusy}
+                        onClick={clearErrors}
+                    >
+                        <FormattedMessage
+                            id={'newsletter.subscribeText'}
+                            defaultMessage={'Subscribe'}
+                        />
+                    </Button>
+                </div>
+            </Form>
+        </div>
+    );
+};
+
+Newsletter.propTypes = {
+    classes: shape({
+        modal_active: string,
+        root: string,
+        title: string,
+        form: string,
+        buttonsContainer: string
+    })
+};
+
+export default Newsletter;

package/lib/components/Newsletter/newsletter.module.css

@@ -0,0 +1,94 @@
+.root {
+    position: relative;
+    display: block;
+    gap: 1.5rem;
+    justify-items: stretch;
+}
+
+.form {
+    display: grid;
+    row-gap: 0.9375rem;
+    position: relative;
+}
+
+.form input {
+    padding-right: calc(1.875rem * var(--iconsAfter) + 5.625rem);
+}
+
+.form label {
+    position: absolute;
+    z-index: -11111;
+}
+
+.buttonsContainer {
+    gap: 1.5rem;
+    grid-auto-flow: row;
+    justify-content: center;
+    margin-top: 1rem;
+    width: 100%;
+    display: none;
+}
+
+.title {
+    color: rgb(var(--venia-global-color-gray-900));
+    font-size: var(--venia-typography-body-S-fontSize);
+    font-weight: 600;
+    margin-bottom: 15px;
+    display: block;
+}
+
+.subscribe_link {
+    display: inline-block;
+    position: absolute;
+    right: 4px;
+    top: 0;
+    transform: translateY(7%);
+    max-height: 35px;
+    padding: 0 10px;
+    background: rgb(var(--venia-global-color-gray-50));
+    min-height: 35px;
+}
+
+.subscribe_link span {
+    display: inline-block;
+    color: rgb(var(--venia-global-color-text));
+    text-decoration: underline;
+    text-shadow: 0px 0px 0px;
+}
+
+.subscribe_link:hover span {
+    color: rgb(var(--stroke));
+}
+
+.newsletter_text {
+    margin-bottom: 20px;
+}
+
+.loadingContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: rgba(252, 252, 252, 0.75);
+}
+
+@media screen and (max-width: 767px) {
+    .buttonsContainer {
+        display: grid;
+    }
+
+    .subscribe_link {
+        display: none;
+    }
+
+    .root {
+        text-align: center;
+        grid-column: span 2;
+    }
+
+    .form input {
+        padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
+    }
+}

package/lib/components/Newsletter/newsletter.shimmer.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { useStyle } from '../../classify';
+import Shimmer from '../Shimmer';
+import defaultClasses from './newsletter.module.css';
+import defaultShimmerClasses from './newsletter.shimmer.module.css';
+
+const NewsletterShimmer = props => {
+    const classes = useStyle(
+        defaultClasses,
+        defaultShimmerClasses,
+        props.classes
+    );
+
+    return (
+        <div className={classes.root}>
+            <Shimmer
+                key="title"
+                classes={{
+                    root_rectangle: classes.shimmerItem
+                }}
+            />
+            <Shimmer
+                key="text"
+                classes={{
+                    root_rectangle: classes.shimmerParagraphLine
+                }}
+            />
+            <Shimmer
+                key="text2"
+                width="50%"
+                classes={{
+                    root_rectangle: classes.shimmerItem
+                }}
+            />
+            <div className={classes.form}>
+                <Shimmer type="textInput" />
+                <div className={classes.buttonsContainer}>
+                    <Shimmer type="button" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NewsletterShimmer;

package/lib/components/Newsletter/newsletter.shimmer.module.css

@@ -0,0 +1,11 @@
+.shimmerItem {
+    composes: root_rectangle from '../Shimmer/shimmer.module.css';
+    display: block;
+    margin-bottom: 1rem;
+}
+
+.shimmerParagraphLine {
+    composes: root_rectangle from '../Shimmer/shimmer.module.css';
+    display: block;
+    margin-bottom: 0.5rem;
+}

package/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap

@@ -57,7 +57,7 @@ https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=2560&he
   </dl>
   <span>
     <mock-FormattedMessage
-      defaultMessage="Qty"
+      defaultMessage="Qty : {quantity}"
       id="orderDetails.quantity"
       values={
         Object {

package/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/shippingMethod.spec.js.snap

@@ -30,6 +30,7 @@ exports[`should render properly 1`] = `
   <div>
     <span>
       <mock-FormattedMessage
+        defaultMessage="<strong>Tracking number:</strong> {number}"
         id="orderDetails.trackingInformation"
         values={
           Object {
@@ -41,6 +42,7 @@ exports[`should render properly 1`] = `
     </span>
     <span>
       <mock-FormattedMessage
+        defaultMessage="<strong>Tracking number:</strong> {number}"
         id="orderDetails.trackingInformation"
         values={
           Object {
@@ -52,6 +54,7 @@ exports[`should render properly 1`] = `
     </span>
     <span>
       <mock-FormattedMessage
+        defaultMessage="<strong>Tracking number:</strong> {number}"
         id="orderDetails.trackingInformation"
         values={
           Object {

package/lib/components/OrderHistoryPage/OrderDetails/billingInformation.js

@@ -30,7 +30,10 @@ const BillingInformation = props => {
     });
 
     return (
-        <div className={classes.root}>
+        <div
+            className={classes.root}
+            data-cy="OrderDetails-BillingInformation-root"
+        >
             <div className={classes.heading}>
                 <FormattedMessage
                     id="orderDetails.billingInformationLabel"

package/lib/components/OrderHistoryPage/OrderDetails/item.js

@@ -64,7 +64,7 @@ const Item = props => {
             <span className={classes.quantity}>
                 <FormattedMessage
                     id="orderDetails.quantity"
-                    defaultMessage="Qty"
+                    defaultMessage="Qty : {quantity}"
                     values={{
                         quantity: quantity_ordered
                     }}

package/lib/components/OrderHistoryPage/OrderDetails/items.js

@@ -17,7 +17,7 @@ const Items = props => {
     ));
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="OrderDetails-Items-root">
             <h3 className={classes.heading}>
                 <FormattedMessage
                     id="orderItems.itemsHeading"

package/lib/components/OrderHistoryPage/OrderDetails/paymentMethod.js

@@ -17,7 +17,7 @@ const PaymentMethod = props => {
     const [{ name }] = data;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="OrderDetails-PaymentMethod-root">
             <div className={classes.heading}>
                 <FormattedMessage
                     id="orderDetails.paymentMethodLabel"

package/lib/components/OrderHistoryPage/OrderDetails/shippingInformation.js

@@ -52,7 +52,10 @@ const ShippingInformation = props => {
     }
 
     return (
-        <div className={classes.root}>
+        <div
+            className={classes.root}
+            data-cy="OrderDetails-ShippingInformation-root"
+        >
             <div className={classes.heading}>
                 <FormattedMessage
                     id="orderDetails.shippingInformationLabel"

package/lib/components/OrderHistoryPage/OrderDetails/shippingMethod.js

@@ -23,6 +23,7 @@ const ShippingMethod = props => {
                         <span className={classes.trackingRow} key={number}>
                             <FormattedMessage
                                 id="orderDetails.trackingInformation"
+                                defaultMessage="<strong>Tracking number:</strong> {number}"
                                 values={{
                                     number,
                                     strong: chunks => <strong>{chunks}</strong>
@@ -43,7 +44,10 @@ const ShippingMethod = props => {
     }
 
     return (
-        <div className={classes.root}>
+        <div
+            className={classes.root}
+            data-cy="OrderDetails-ShippingMethod-root"
+        >
             <div className={classes.heading}>
                 <FormattedMessage
                     id="orderDetails.shippingMethodLabel"

package/lib/components/OrderHistoryPage/orderHistoryPage.js

@@ -89,7 +89,14 @@ const OrderHistoryPage = props => {
                 </h3>
             );
         } else {
-            return <ul className={classes.orderHistoryTable}>{orderRows}</ul>;
+            return (
+                <ul
+                    className={classes.orderHistoryTable}
+                    data-cy="OrderHistoryPage-orderHistoryTable"
+                >
+                    {orderRows}
+                </ul>
+            );
         }
     }, [
         classes.emptyHistoryMessage,

package/lib/components/Pagination/pagination.js

@@ -50,7 +50,7 @@ const Pagination = props => {
     }
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="Pagination-root">
             <NavButton
                 name={navButtons.firstPage.name}
                 active={isActiveLeft}

package/lib/components/Pagination/tile.js

@@ -11,7 +11,11 @@ const Tile = props => {
     const handleClick = useCallback(() => onClick(number), [onClick, number]);
 
     return (
-        <button className={rootClass} onClick={handleClick}>
+        <button
+            className={rootClass}
+            onClick={handleClick}
+            data-cy={isActive ? 'Tile-activeRoot' : 'Tile-root'}
+        >
             {number}
         </button>
     );

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Boolean/__tests__/__snapshots__/boolean.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#Boolean renders boolean when data is provided 1`] = `
+Array [
+  <div>
+    Boolean Label
+  </div>,
+  <div>
+    Yes
+  </div>,
+]
+`;
+
+exports[`#Boolean renders empty when no data is provided 1`] = `null`;
+
+exports[`#Boolean renders label only when data is missing 1`] = `
+<div>
+  Boolean Label
+</div>
+`;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Boolean/__tests__/boolean.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Boolean from '../boolean';
+
+let inputProps = {};
+
+const Component = () => {
+    return <Boolean {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        attribute_metadata: {
+            label: 'Boolean Label'
+        }
+    };
+};
+
+describe('#Boolean', () => {
+    it('renders empty when no data is provided', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders label only when data is missing', () => {
+        givenDefaultValues();
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders boolean when data is provided', () => {
+        givenDefaultValues();
+        inputProps = {
+            ...inputProps,
+            selected_attribute_options: {
+                attribute_option: [
+                    {
+                        label: 'Yes'
+                    }
+                ]
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});