@magento/venia-ui 9.4.0-beta.1 → 9.5.0-alpha.2

package/lib/components/Header/__tests__/__snapshots__/storeSwitcher.spec.js.snap

@@ -7,6 +7,7 @@ exports[`does not render group name when there is only one group 1`] = `
   className="root"
 >
   <button
+    aria-expanded={false}
     aria-label="Store 2"
     className="trigger"
     onClick={[MockFunction]}
@@ -21,9 +22,12 @@ exports[`does not render group name when there is only one group 1`] = `
     >
       <ul
         className="groupList"
+        role="listbox"
       >
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -42,7 +46,9 @@ exports[`does not render group name when there is only one group 1`] = `
           </button>
         </li>
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -91,6 +97,7 @@ exports[`renders the correct tree 1`] = `
   className="root"
 >
   <button
+    aria-expanded={false}
     aria-label="Store 2"
     className="trigger"
     onClick={[MockFunction]}
@@ -105,9 +112,12 @@ exports[`renders the correct tree 1`] = `
     >
       <ul
         className="groupList"
+        role="listbox"
       >
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -126,7 +136,9 @@ exports[`renders the correct tree 1`] = `
           </button>
         </li>
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -167,9 +179,12 @@ exports[`renders the correct tree 1`] = `
       </ul>
       <ul
         className="groupList"
+        role="listbox"
       >
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -188,7 +203,9 @@ exports[`renders the correct tree 1`] = `
           </button>
         </li>
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"

package/lib/components/Header/cartTrigger.js

@@ -56,6 +56,7 @@ const CartTrigger = props => {
         <Fragment>
             <div className={triggerClassName} ref={miniCartTriggerRef}>
                 <button
+                    aria-expanded={miniCartIsOpen}
                     aria-label={buttonAriaLabel}
                     className={classes.trigger}
                     onClick={handleTriggerClick}
@@ -66,6 +67,7 @@ const CartTrigger = props => {
                 </button>
             </div>
             <button
+                aria-expanded={miniCartIsOpen}
                 aria-label={buttonAriaLabel}
                 className={classes.link}
                 onClick={handleLinkClick}

package/lib/components/Header/currencySwitcher.js

@@ -33,7 +33,12 @@ const CurrencySwitcher = props => {
 
     const currencies = availableCurrencies.map(code => {
         return (
-            <li key={code} className={classes.menuItem}>
+            <li
+                role="option"
+                aria-selected={currentCurrencyCode}
+                key={code}
+                className={classes.menuItem}
+            >
                 <SwitcherItem
                     active={code === currentCurrencyCode}
                     onClick={handleSwitchCurrency}
@@ -58,6 +63,7 @@ const CurrencySwitcher = props => {
                 aria-label={currentCurrencyCode}
                 onClick={handleTriggerClick}
                 ref={currencyMenuTriggerRef}
+                aria-expanded={currencyMenuIsOpen}
             >
                 <span className={classes.label}>
                     <CurrencySymbol
@@ -69,7 +75,7 @@ const CurrencySwitcher = props => {
                 </span>
             </button>
             <div ref={currencyMenuRef} className={menuClassName}>
-                <ul>{currencies}</ul>
+                <ul role="listbox">{currencies}</ul>
             </div>
         </div>
     );

package/lib/components/Header/header.js

@@ -17,6 +17,7 @@ import StoreSwitcher from './storeSwitcher';
 import CurrencySwitcher from './currencySwitcher';
 import MegaMenu from '../MegaMenu';
 import PageLoadingIndicator from '../PageLoadingIndicator';
+import { useIntl } from 'react-intl';
 
 const SearchBar = React.lazy(() => import('../SearchBar'));
 
@@ -51,6 +52,9 @@ const Header = props => {
         </Suspense>
     ) : null;
 
+    const { formatMessage } = useIntl();
+    const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
+
     return (
         <Fragment>
             <div className={classes.switchersContainer}>
@@ -69,6 +73,7 @@ const Header = props => {
                         isOnline={isOnline}
                     />
                     <Link
+                        aria-label={title}
                         to={resourceUrl('/')}
                         className={classes.logoContainer}
                         data-cy="Header-logoContainer"

package/lib/components/Header/storeSwitcher.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shape, string } from 'prop-types';
 
 import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreSwitcher';
+import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
 
 import { useStyle } from '../../classify';
 import defaultClasses from './storeSwitcher.module.css';
@@ -19,7 +20,7 @@ const StoreSwitcher = props => {
         storeMenuTriggerRef,
         storeMenuIsOpen,
         handleTriggerClick
-    } = useStoreSwitcher();
+    } = useStoreSwitcher({ availableRoutes });
 
     const classes = useStyle(defaultClasses, props.classes);
     const menuClassName = storeMenuIsOpen ? classes.menu_open : classes.menu;
@@ -33,7 +34,7 @@ const StoreSwitcher = props => {
 
     storeGroups.forEach((group, key) => {
         const stores = [];
-        group.forEach(({ storeGroupName, storeName, isCurrent, code }) => {
+        group.forEach(({ storeGroupName, storeName, isCurrent, storeCode }) => {
             let label;
             if (hasOnlyOneGroup) {
                 label = `${storeName}`;
@@ -42,14 +43,16 @@ const StoreSwitcher = props => {
             }
             stores.push(
                 <li
-                    key={code}
+                    aria-selected={currentStoreName}
+                    role="option"
+                    key={storeCode}
                     className={classes.menuItem}
                     data-cy="StoreSwitcher-view"
                 >
                     <SwitcherItem
                         active={isCurrent}
                         onClick={handleSwitchStore}
-                        option={code}
+                        option={storeCode}
                     >
                         {label}
                     </SwitcherItem>
@@ -59,6 +62,7 @@ const StoreSwitcher = props => {
 
         groups.push(
             <ul
+                role="listbox"
                 className={classes.groupList}
                 key={key}
                 data-cy="StoreSwitcher-group"
@@ -84,6 +88,7 @@ const StoreSwitcher = props => {
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
                 data-cy="StoreSwitcher-trigger"
+                aria-expanded={storeMenuIsOpen}
             >
                 {triggerLabel}
             </button>

package/lib/components/Logo/logo.js

@@ -23,7 +23,6 @@ const Logo = props => {
 
     return (
         <Image
-            alt={title}
             classes={{ image: classes.logo }}
             height={height}
             src={logo}

package/lib/components/MiniCart/miniCart.js

@@ -33,6 +33,7 @@ const MiniCart = React.forwardRef((props, ref) => {
     useScrollLock(isOpen);
 
     const talonProps = useMiniCart({
+        isOpen,
         setIsOpen,
         operations
     });

package/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap

@@ -5,7 +5,9 @@ exports[`should render error message if token is falsy 1`] = `
   <mock-StoreTitle>
     Reset Password
   </mock-StoreTitle>
-  <h1>
+  <h1
+    aria-live="polite"
+  >
     <mock-FormattedMessage
       defaultMessage="Reset Password"
       id="resetPassword.header"
@@ -27,7 +29,9 @@ exports[`should render formErrors 1`] = `
   <mock-StoreTitle>
     Reset Password
   </mock-StoreTitle>
-  <h1>
+  <h1
+    aria-live="polite"
+  >
     <mock-FormattedMessage
       defaultMessage="Reset Password"
       id="resetPassword.header"
@@ -174,7 +178,9 @@ exports[`should render properly 1`] = `
   <mock-StoreTitle>
     Reset Password
   </mock-StoreTitle>
-  <h1>
+  <h1
+    aria-live="polite"
+  >
     <mock-FormattedMessage
       defaultMessage="Reset Password"
       id="resetPassword.header"
@@ -321,7 +327,9 @@ exports[`should render success message if hasCompleted is true 1`] = `
   <mock-StoreTitle>
     Reset Password
   </mock-StoreTitle>
-  <h1>
+  <h1
+    aria-live="polite"
+  >
     <mock-FormattedMessage
       defaultMessage="Reset Password"
       id="resetPassword.header"

package/lib/components/MyAccount/ResetPassword/resetPassword.js

@@ -113,7 +113,7 @@ const ResetPassword = props => {
                     defaultMessage: 'Reset Password'
                 })}
             </StoreTitle>
-            <h1 className={classes.header}>
+            <h1 aria-live="polite" className={classes.header}>
                 <FormattedMessage
                     id="resetPassword.header"
                     defaultMessage="Reset Password"

package/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap

@@ -7,6 +7,7 @@ exports[`renders correctly with data 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History
@@ -207,6 +208,7 @@ exports[`renders correctly without data 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History
@@ -383,6 +385,7 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History
@@ -570,6 +573,7 @@ exports[`renders loading indicator 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History
@@ -780,6 +784,7 @@ exports[`renders no orders message is orders is empty 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History

package/lib/components/OrderHistoryPage/orderHistoryPage.js

@@ -160,7 +160,9 @@ const OrderHistoryPage = props => {
         <OrderHistoryContextProvider>
             <div className={classes.root}>
                 <StoreTitle>{PAGE_TITLE}</StoreTitle>
-                <h1 className={classes.heading}>{PAGE_TITLE}</h1>
+                <h1 aria-live="polite" className={classes.heading}>
+                    {PAGE_TITLE}
+                </h1>
                 <div className={classes.filterRow}>
                     <span className={classes.pageInfo}>{pageInfoLabel}</span>
                     <Form className={classes.search} onSubmit={handleSubmit}>

package/lib/components/PageLoadingIndicator/__tests__/__snapshots__/pageLoadingIndicator.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#PageLoadingIndicator displays correctly depend on the position type when absolute is false and page is loading 1`] = `
+<div
+  className="root_relative"
+>
+  <div
+    className="indicator_undefined"
+  />
+</div>
+`;
+
+exports[`#PageLoadingIndicator displays correctly depend on the position type when absolute is true and page is not loading 1`] = `
+<div
+  className="root_absolute"
+>
+  <div
+    className="indicator_undefined"
+  />
+</div>
+`;

package/lib/components/PageLoadingIndicator/__tests__/pageLoadingIndicator.spec.js

@@ -38,8 +38,8 @@ describe('#PageLoadingIndicator does not render', () => {
     });
 });
 
-describe('#PageLoadingIndicator displays', () => {
-    test('when page is loading', async () => {
+describe('#PageLoadingIndicator displays correctly depend on the position type', () => {
+    test('when absolute is false and page is loading', async () => {
         givenPageLoading();
         let tree;
 
@@ -47,7 +47,7 @@ describe('#PageLoadingIndicator displays', () => {
             tree = create(<PageLoadingIndicator />);
         });
 
-        expect(tree.toJSON()).not.toBeNull();
+        expect(tree.toJSON()).toMatchSnapshot();
     });
 
     test('when absolute is true and page is not loading', async () => {
@@ -58,6 +58,6 @@ describe('#PageLoadingIndicator displays', () => {
             tree = create(<PageLoadingIndicator absolute />);
         });
 
-        expect(tree.toJSON()).not.toBeNull();
+        expect(tree.toJSON()).toMatchSnapshot();
     });
 });

package/lib/components/PageLoadingIndicator/pageLoadingIndicator.js

@@ -14,7 +14,9 @@ const PageLoadingIndicator = props => {
     }
 
     return (
-        <div className={absolute ? classes.root_absolute : classes.root}>
+        <div
+            className={absolute ? classes.root_absolute : classes.root_relative}
+        >
             <div className={classes[`indicator_${loadingState}`]} />
         </div>
     );
@@ -27,7 +29,9 @@ PageLoadingIndicator.defaultProps = {
 
 PageLoadingIndicator.propTypes = {
     classes: shape({
-        root: string
+        root: string,
+        root_absolute: string,
+        root_relative: string
     }),
     absolute: bool
 };

package/lib/components/PageLoadingIndicator/pageLoadingIndicator.module.css

@@ -1,11 +1,16 @@
 .root {
     composes: bg-gray-100 from global;
     composes: h-[2px] from global;
-    composes: relative from global;
     composes: overflow-hidden from global;
     composes: w-full from global;
 }
 
+.root_relative {
+    composes: root;
+
+    composes: relative from global;
+}
+
 .root_absolute {
     composes: root;
 

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

@@ -18,6 +18,7 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -193,6 +194,7 @@ exports[`it does not render options if the product is not a ConfigurableProduct
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -338,6 +340,7 @@ exports[`it renders an error for an invalid cart 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -517,6 +520,7 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -701,6 +705,7 @@ Array [
       className="title"
     >
       <h1
+        aria-live="polite"
         className="productName"
       >
         Flux Capacitor
@@ -877,6 +882,7 @@ exports[`it renders correctly 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1052,6 +1058,7 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1227,6 +1234,7 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1402,6 +1410,7 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1577,6 +1586,7 @@ exports[`it renders form level errors 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1756,6 +1766,7 @@ exports[`it renders message with unsupported product type 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1944,6 +1955,7 @@ exports[`out of stock disabled CTA button is rendered if out of stock 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -2089,6 +2101,7 @@ exports[`renders a WishlistButton with props 1`] = `
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor

package/lib/components/ProductFullDetail/productFullDetail.js

@@ -229,6 +229,7 @@ const ProductFullDetail = props => {
                 </section>
                 <section className={classes.title}>
                     <h1
+                        aria-live="polite"
                         className={classes.productName}
                         data-cy="ProductFullDetail-productName"
                     >

package/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap

@@ -6,6 +6,7 @@ exports[`renders correctly when there are existing saved payments 1`] = `
 >
   Title
   <h1
+    aria-live="polite"
     className="heading"
   >
     Saved Payments
@@ -37,6 +38,7 @@ exports[`renders correctly when there are no existing saved payments 1`] = `
 >
   Title
   <h1
+    aria-live="polite"
     className="heading"
   >
     Saved Payments

package/lib/components/SavedPaymentsPage/savedPaymentsPage.js

@@ -55,7 +55,9 @@ const SavedPaymentsPage = props => {
     return (
         <div className={classes.root}>
             <StoreTitle>{title}</StoreTitle>
-            <h1 className={classes.heading}>{title}</h1>
+            <h1 aria-live="polite" className={classes.heading}>
+                {title}
+            </h1>
             <div className={classes.content}>{savedPaymentElements}</div>
             <div className={classes.noPayments}>{noSavedPayments}</div>
         </div>

package/lib/components/SearchBar/__tests__/autocomplete.spec.js

@@ -1,6 +1,9 @@
 import React from 'react';
+import { InMemoryCache } from '@apollo/client';
+import { MockedProvider } from '@apollo/client/testing';
 import { Form } from 'informed';
 import { createTestInstance } from '@magento/peregrine';
+import typePolicies from '@magento/peregrine/lib/Apollo/policies';
 
 import Autocomplete from '../autocomplete';
 import { IntlProvider } from 'react-intl';
@@ -8,13 +11,23 @@ import { IntlProvider } from 'react-intl';
 jest.mock('../../../classify');
 jest.mock('../suggestions', () => () => null);
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
+const cache = new InMemoryCache({
+    typePolicies
+});
+
 test('renders correctly', () => {
     const { root } = createTestInstance(
-        <IntlProvider locale="en-US">
-            <Form>
-                <Autocomplete visible={false} />
-            </Form>
-        </IntlProvider>
+        <MockedProvider addTypename={true} cache={cache}>
+            <IntlProvider locale="en-US">
+                <Form>
+                    <Autocomplete visible={false} />
+                </Form>
+            </IntlProvider>
+        </MockedProvider>
     );
 
     expect(root.findByProps({ className: 'root_hidden' })).toBeTruthy();
@@ -24,11 +37,13 @@ test('renders correctly', () => {
 
 test('renders correctly when visible', () => {
     const { root } = createTestInstance(
-        <IntlProvider locale="en-US">
-            <Form>
-                <Autocomplete visible={true} />
-            </Form>
-        </IntlProvider>
+        <MockedProvider addTypename={true} cache={cache}>
+            <IntlProvider locale="en-US">
+                <Form>
+                    <Autocomplete visible={true} />
+                </Form>
+            </IntlProvider>
+        </MockedProvider>
     );
 
     expect(root.findByProps({ className: 'root_visible' })).toBeTruthy();

package/lib/components/SearchBar/__tests__/suggestedProduct.spec.js

@@ -7,6 +7,9 @@ jest.mock('react-router-dom', () => ({
     Link: ({ children }) => children
 }));
 jest.mock('@magento/peregrine/lib/util/makeUrl');
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
 
 const defaultProps = {
     handleOnProductOpen: jest.fn(),

package/lib/components/SearchBar/autocomplete.js

@@ -26,6 +26,7 @@ const GET_AUTOCOMPLETE_RESULTS = gql`
             items {
                 id
                 uid
+                sku
                 name
                 small_image {
                     url
@@ -46,6 +47,9 @@ const GET_AUTOCOMPLETE_RESULTS = gql`
                             currency
                             value
                         }
+                        discount {
+                            amount_off
+                        }
                     }
                 }
             }