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

package/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import { array, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import AttributeType from './AttributeType';
+import defaultClasses from './customAttributes.module.css';
+
+const CustomAttributes = props => {
+    const { customAttributes } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const list = useMemo(
+        () =>
+            customAttributes.reduce((previousAttribute, currentAttribute) => {
+                // Visible on front attributes only
+                if (
+                    currentAttribute.attribute_metadata.is_visible_on_front ===
+                    true
+                ) {
+                    const attributeContent = (
+                        <li
+                            key={currentAttribute.attribute_metadata.uid}
+                            className={classes.listItem}
+                        >
+                            <AttributeType data={currentAttribute} />
+                        </li>
+                    );
+
+                    previousAttribute.push(attributeContent);
+                }
+
+                return previousAttribute;
+            }, []),
+        [classes, customAttributes]
+    );
+
+    if (list.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={classes.root}>
+            <p className={classes.title}>
+                <FormattedMessage
+                    id={'customAttributes.title'}
+                    defaultMessage={'Details'}
+                />
+            </p>
+            <ul className={classes.list}>{list}</ul>
+        </div>
+    );
+};
+
+CustomAttributes.propTypes = {
+    classes: shape({
+        root: string,
+        title: string,
+        list: string,
+        listItem: string
+    }),
+    customAttributes: array.isRequired
+};
+
+export default CustomAttributes;

package/lib/components/ProductFullDetail/CustomAttributes/customAttributes.module.css

@@ -0,0 +1,14 @@
+.root {
+    composes: mt-8 from global;
+}
+
+.title {
+    composes: font-semibold from global;
+}
+
+.list {
+    composes: list-disc from global;
+    composes: mb-4 from global;
+    composes: mt-4 from global;
+    composes: pl-6 from global;
+}

package/lib/components/ProductFullDetail/CustomAttributes/index.js

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

package/lib/components/ProductFullDetail/__tests__/__snapshots__/productFullDetail.spec.js.snap

@@ -153,6 +153,9 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -280,6 +283,9 @@ exports[`it does not render options if the product is not a ConfigurableProduct
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -441,6 +447,9 @@ exports[`it renders an error for an invalid cart 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -602,6 +611,9 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -764,6 +776,9 @@ Array [
       <strong>
         BTTF123
       </strong>
+      <CustomAttributes
+        customAttributes={Object {}}
+      />
     </section>
   </form>,
 ]
@@ -922,6 +937,9 @@ exports[`it renders correctly 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1079,6 +1097,9 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1236,6 +1257,9 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1393,6 +1417,9 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1554,6 +1581,9 @@ exports[`it renders form level errors 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1724,6 +1754,9 @@ exports[`it renders message with unsupported product type 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1851,6 +1884,9 @@ exports[`out of stock disabled CTA button is rendered if out of stock 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -2010,6 +2046,9 @@ exports[`renders a WishlistButton with props 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;

package/lib/components/ProductFullDetail/__tests__/productFullDetail.spec.js

@@ -30,6 +30,7 @@ jest.mock('../../CartPage/ProductListing/quantity', () => ({
     QuantityFields: () => 'QuantityFields'
 }));
 jest.mock('../../RichContent/richContent', () => 'RichContent');
+jest.mock('../CustomAttributes', () => 'CustomAttributes');
 
 jest.mock('../../../classify');
 
@@ -187,7 +188,8 @@ const talonProps = {
             currency: 'USD',
             value: 3.5
         }
-    }
+    },
+    customAttributes: {}
 };
 
 test('it renders correctly', () => {

package/lib/components/ProductFullDetail/productFullDetail.js

@@ -16,6 +16,7 @@ import FormError from '../FormError';
 import { QuantityFields } from '../CartPage/ProductListing/quantity';
 import RichContent from '../RichContent/richContent';
 import { ProductOptionsShimmer } from '../ProductOptions';
+import CustomAttributes from './CustomAttributes';
 import defaultClasses from './productFullDetail.module.css';
 
 const WishlistButton = React.lazy(() => import('../Wishlist/AddToListButton'));
@@ -50,6 +51,7 @@ const ProductFullDetail = props => {
         isSupportedProductType,
         mediaGalleryEntries,
         productDetails,
+        customAttributes,
         wishlistButtonProps
     } = talonProps;
     const { formatMessage } = useIntl();
@@ -139,7 +141,12 @@ const ProductFullDetail = props => {
     );
 
     const cartActionContent = isSupportedProductType ? (
-        <Button disabled={isAddToCartDisabled} priority="high" type="submit">
+        <Button
+            data-cy="ProductFullDetail-addToCartButton"
+            disabled={isAddToCartDisabled}
+            priority="high"
+            type="submit"
+        >
             {cartCallToActionText}
         </Button>
     ) : (
@@ -159,9 +166,16 @@ const ProductFullDetail = props => {
     return (
         <Fragment>
             {breadcrumbs}
-            <Form className={classes.root} onSubmit={handleAddToCart}>
+            <Form
+                className={classes.root}
+                data-cy="ProductFullDetail-root"
+                onSubmit={handleAddToCart}
+            >
                 <section className={classes.title}>
-                    <h1 className={classes.productName}>
+                    <h1
+                        className={classes.productName}
+                        data-cy="ProductFullDetail-productName"
+                    >
                         {productDetails.name}
                     </h1>
                     <p className={classes.productPrice}>
@@ -217,6 +231,7 @@ const ProductFullDetail = props => {
                         />
                     </span>
                     <strong>{productDetails.sku}</strong>
+                    <CustomAttributes customAttributes={customAttributes} />
                 </section>
             </Form>
         </Fragment>

package/lib/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap

@@ -17,7 +17,7 @@ exports[`renders Option component correctly 1`] = `
       className="selectionLabel"
     >
       <mock-FormattedMessage
-        defaultMessage="Selected Foo:"
+        defaultMessage="Selected {label}:"
         id="productOptions.selectedLabel"
         values={
           Object {

package/lib/components/ProductOptions/__tests__/__snapshots__/options.spec.js.snap

@@ -20,7 +20,7 @@ Array [
         className="selectionLabel"
       >
         <mock-FormattedMessage
-          defaultMessage="Selected option-1:"
+          defaultMessage="Selected {label}:"
           id="productOptions.selectedLabel"
           values={
             Object {
@@ -52,7 +52,7 @@ Array [
         className="selectionLabel"
       >
         <mock-FormattedMessage
-          defaultMessage="Selected option-1:"
+          defaultMessage="Selected {label}:"
           id="productOptions.selectedLabel"
           values={
             Object {

package/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap

@@ -11,7 +11,28 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
   }
   title="red"
   type="button"
-/>
+>
+  <span
+    className="root"
+  >
+    <svg
+      className="icon"
+      fill="none"
+      height={24}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="20 6 9 17 4 12"
+      />
+    </svg>
+  </span>
+</button>
 `;
 
 exports[`appends "_selected" to className if isSelected is true 1`] = `
@@ -60,7 +81,28 @@ exports[`renders a Swatch correctly 1`] = `
   }
   title="red"
   type="button"
-/>
+>
+  <span
+    className="root"
+  >
+    <svg
+      className="icon"
+      fill="none"
+      height={24}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="20 6 9 17 4 12"
+      />
+    </svg>
+  </span>
+</button>
 `;
 
 exports[`renders an icon if isSelected is true 1`] = `

package/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap

@@ -14,6 +14,27 @@ exports[`renders SwatchList component correctly 1`] = `
     }
     title="foo"
     type="button"
-  />
+  >
+    <span
+      className="root"
+    >
+      <svg
+        className="icon"
+        fill="none"
+        height={24}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polyline
+          points="20 6 9 17 4 12"
+        />
+      </svg>
+    </span>
+  </button>
 </div>
 `;

package/lib/components/ProductOptions/__tests__/swatch.spec.js

@@ -20,8 +20,6 @@ const defaultProps = {
 test('renders a Swatch correctly', () => {
     const component = testRenderer.create(<Swatch {...defaultProps} />);
 
-    expect(() => component.root.findByType(Icon)).toThrow();
-
     expect(component.root.findByType('button').props.className).not.toContain(
         '_selected'
     );

package/lib/components/ProductOptions/option.js

@@ -59,7 +59,7 @@ const Option = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="ProductOptions-Option-root">
             <span className={classes.title}>{label}</span>
             <ValueList
                 getItemKey={getItemKey}
@@ -71,7 +71,7 @@ const Option = props => {
                 <dt className={classes.selectionLabel}>
                     <FormattedMessage
                         id="productOptions.selectedLabel"
-                        defaultMessage={`Selected ${label}:`}
+                        defaultMessage="Selected {label}:"
                         values={{ label }}
                     />
                 </dt>

package/lib/components/ProductOptions/swatch.js

@@ -40,12 +40,13 @@ const Swatch = props => {
 
     const { handleClick } = talonProps;
 
-    const icon = useMemo(() => {
-        return isSelected ? <Icon src={CheckIcon} /> : null;
-    }, [isSelected]);
-
     const classes = useStyle(defaultClasses, props.classes);
 
+    const checkStyle = useMemo(
+        () => (isSelected ? classes.checked : classes.unchecked),
+        [classes.checked, classes.unchecked, isSelected]
+    );
+
     let finalStyle = style;
 
     if (swatch_data) {
@@ -82,8 +83,9 @@ const Swatch = props => {
             style={finalStyle}
             title={label}
             type="button"
+            data-cy="Swatch-root"
         >
-            {icon}
+            <Icon classes={{ root: checkStyle }} src={CheckIcon} />
         </button>
     );
 };

package/lib/components/ProductOptions/swatch.module.css

@@ -19,3 +19,14 @@
 .root_selected_focused {
     composes: root_selected;
 }
+
+.checked {
+    opacity: 1;
+    transition-property: opacity;
+    transition-duration: 256ms;
+}
+
+.unchecked {
+    composes: checked;
+    opacity: 0;
+}

package/lib/components/ProductOptions/tile.js

@@ -32,6 +32,7 @@ const Tile = props => {
             onClick={handleClick}
             title={label}
             type="button"
+            data-cy="Tile-button"
         >
             <span>{label}</span>
         </button>

package/lib/components/ProductSort/__tests__/__snapshots__/sortItem.spec.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<button
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+>
+  <span>
+    <span>
+      relevance
+    </span>
+  </span>
+</button>
+`;

package/lib/components/ProductSort/__tests__/sortItem.spec.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import SortItem from '../sortItem';
+
+const mockOnClick = jest.fn();
+
+const defaultProps = {
+    active: false,
+    onClick: mockOnClick,
+    sortItem: {
+        id: 'foo',
+        text: 'relevance'
+    }
+};
+
+const Component = () => <SortItem {...defaultProps} />;
+
+test('renders correctly', () => {
+    const instance = createTestInstance(<Component />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('calls onClick handler on mousedown event', () => {
+    const component = createTestInstance(<Component />);
+    const { root } = component;
+    const eventMock = {
+        button: 0
+    };
+
+    root.findByType('button').props.onMouseDown(eventMock);
+    expect(mockOnClick).toHaveBeenCalled();
+});
+
+test('it does not call onClick handler on right mousedown event', () => {
+    const component = createTestInstance(<Component />);
+    const { root } = component;
+    const eventMock = {
+        button: 1
+    };
+
+    root.findByType('button').props.onMouseDown(eventMock);
+    expect(mockOnClick).not.toHaveBeenCalled();
+});
+
+test('calls onClick handler on keyboard Enter or space press', () => {
+    const component = createTestInstance(<Component />);
+    const { root } = component;
+
+    root.findByType('button').props.onKeyDown({
+        key: 'Enter',
+        preventDefault: jest.fn()
+    });
+
+    root.findByType('button').props.onKeyDown({
+        key: ' ',
+        preventDefault: jest.fn()
+    });
+
+    expect(mockOnClick).toHaveBeenCalledTimes(2);
+});