@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

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

@@ -29,14 +29,15 @@ jest.mock('../../ProductOptions', () => () => 'ProductOptions');
 jest.mock('../../CartPage/ProductListing/quantity', () => ({
     QuantityFields: () => 'QuantityFields'
 }));
-jest.mock('../../RichText', () => 'RichText');
+jest.mock('../../RichContent/richContent', () => 'RichContent');
 
 jest.mock('../../../classify');
 
 const mockConfigurableProduct = {
     __typename: 'ConfigurableProduct',
     sku: 'SKU123',
-    name: 'Mock Configrable Product',
+    stock_status: 'IN_STOCK',
+    name: 'Mock Configurable Product',
     price: {
         regularPrice: {
             amount: {
@@ -106,6 +107,27 @@ const mockConfigurableProduct = {
                 sku: 'SKU123-CO1',
                 stock_status: 'IN_STOCK'
             }
+        },
+        {
+            attributes: [
+                {
+                    code: 'configurable_option',
+                    value_index: 2
+                }
+            ],
+            product: {
+                id: 124,
+                media_gallery_entries: [
+                    {
+                        disabled: false,
+                        file: '/variant/image-2.jpg',
+                        label: 'Mock Configurable Product - Variant 2',
+                        position: 1
+                    }
+                ],
+                sku: 'SKU124-CO2',
+                stock_status: 'OUT_OF_STOCK'
+            }
         }
     ]
 };
@@ -113,7 +135,8 @@ const mockConfigurableProduct = {
 const mockSimpleProduct = {
     __typename: 'SimpleProduct',
     sku: 'SKU123',
-    name: 'Mock Configrable Product',
+    stock_status: 'IN_STOCK',
+    name: 'Mock Configurable Product',
     price: {
         regularPrice: {
             amount: {
@@ -139,6 +162,11 @@ const mockSimpleProduct = {
         }
     ]
 };
+
+const mockSimpleOOSProduct = {
+    ...mockSimpleProduct,
+    stock_status: 'OUT_OF_STOCK'
+};
 const mockHandleAddToCart = jest.fn();
 const mockHandleSelectionChange = jest.fn();
 
@@ -147,6 +175,7 @@ const talonProps = {
     errorMessage: null,
     handleAddToCart: mockHandleAddToCart,
     handleSelectionChange: mockHandleSelectionChange,
+    isOutOfStock: false,
     isAddToCartDisabled: false,
     isSupportedProductType: true,
     mediaGalleryEntries: [],
@@ -260,6 +289,20 @@ test('it does not render options if the product is not a ConfigurableProduct', (
     expect(wrapper.toJSON()).toMatchSnapshot();
 });
 
+test('out of stock disabled CTA button is rendered if out of stock', () => {
+    useProductFullDetail.mockReturnValueOnce({
+        ...talonProps,
+        isOutOfStock: true,
+        isAddToCartDisabled: true
+    });
+
+    const wrapper = createTestInstance(
+        <ProductFullDetail product={mockSimpleOOSProduct} />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+});
+
 test('it renders breadcrumbs if there is a breadcrumb category id', () => {
     useProductFullDetail.mockReturnValueOnce({
         ...talonProps,

package/lib/components/ProductFullDetail/productFullDetail.js

@@ -13,10 +13,10 @@ import Breadcrumbs from '../Breadcrumbs';
 import Button from '../Button';
 import Carousel from '../ProductImageCarousel';
 import FormError from '../FormError';
-import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import { QuantityFields } from '../CartPage/ProductListing/quantity';
-import RichText from '../RichText';
-import defaultClasses from './productFullDetail.css';
+import RichContent from '../RichContent/richContent';
+import { ProductOptionsShimmer } from '../ProductOptions';
+import defaultClasses from './productFullDetail.module.css';
 
 const WishlistButton = React.lazy(() => import('../Wishlist/AddToListButton'));
 const Options = React.lazy(() => import('../ProductOptions'));
@@ -45,6 +45,7 @@ const ProductFullDetail = props => {
         errorMessage,
         handleAddToCart,
         handleSelectionChange,
+        isOutOfStock,
         isAddToCartDisabled,
         isSupportedProductType,
         mediaGalleryEntries,
@@ -56,7 +57,7 @@ const ProductFullDetail = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     const options = isProductConfigurable(product) ? (
-        <Suspense fallback={fullPageLoadingIndicator}>
+        <Suspense fallback={<ProductOptionsShimmer />}>
             <Options
                 onSelectionChange={handleSelectionChange}
                 options={product.configurable_options}
@@ -125,12 +126,21 @@ const ProductFullDetail = props => {
         }
     }
 
+    const cartCallToActionText = !isOutOfStock ? (
+        <FormattedMessage
+            id="productFullDetail.addItemToCart"
+            defaultMessage="Add to Cart"
+        />
+    ) : (
+        <FormattedMessage
+            id="productFullDetail.itemOutOfStock"
+            defaultMessage="Out of Stock"
+        />
+    );
+
     const cartActionContent = isSupportedProductType ? (
         <Button disabled={isAddToCartDisabled} priority="high" type="submit">
-            <FormattedMessage
-                id={'productFullDetail.cartAction'}
-                defaultMessage={'Add to Cart'}
-            />
+            {cartCallToActionText}
         </Button>
     ) : (
         <div className={classes.unavailableContainer}>
@@ -172,12 +182,12 @@ const ProductFullDetail = props => {
                 />
                 <section className={classes.options}>{options}</section>
                 <section className={classes.quantity}>
-                    <h2 className={classes.quantityTitle}>
+                    <span className={classes.quantityTitle}>
                         <FormattedMessage
                             id={'global.quantity'}
                             defaultMessage={'Quantity'}
                         />
-                    </h2>
+                    </span>
                     <QuantityFields
                         classes={{ root: classes.quantityRoot }}
                         min={1}
@@ -191,21 +201,21 @@ const ProductFullDetail = props => {
                     </Suspense>
                 </section>
                 <section className={classes.description}>
-                    <h2 className={classes.descriptionTitle}>
+                    <span className={classes.descriptionTitle}>
                         <FormattedMessage
                             id={'productFullDetail.productDescription'}
                             defaultMessage={'Product Description'}
                         />
-                    </h2>
-                    <RichText content={productDetails.description} />
+                    </span>
+                    <RichContent html={productDetails.description} />
                 </section>
                 <section className={classes.details}>
-                    <h2 className={classes.detailsTitle}>
+                    <span className={classes.detailsTitle}>
                         <FormattedMessage
                             id={'global.sku'}
                             defaultMessage={'SKU'}
                         />
-                    </h2>
+                    </span>
                     <strong>{productDetails.sku}</strong>
                 </section>
             </Form>
@@ -233,6 +243,7 @@ ProductFullDetail.propTypes = {
     product: shape({
         __typename: string,
         id: number,
+        stock_status: string,
         sku: string.isRequired,
         price: shape({
             regularPrice: shape({
@@ -244,6 +255,7 @@ ProductFullDetail.propTypes = {
         }).isRequired,
         media_gallery_entries: arrayOf(
             shape({
+                uid: string,
                 label: string,
                 position: number,
                 disabled: bool,

package/lib/components/ProductFullDetail/{productFullDetail.css → productFullDetail.module.css}

@@ -100,7 +100,7 @@
 }
 
 .quantityTitle {
-    composes: title from '../../components/ProductOptions/option.css';
+    composes: title from '../../components/ProductOptions/option.module.css';
 }
 
 .actions {
@@ -169,7 +169,7 @@
 }
 
 .quantityRoot {
-    composes: root from '../CartPage/ProductListing/quantity.css';
+    composes: root from '../CartPage/ProductListing/quantity.module.css';
     grid-template-columns: auto 4rem auto;
     justify-content: start;
 }
@@ -177,7 +177,7 @@
 .unavailableContainer {
     align-items: center;
     background-color: rgb(var(--venia-global-color-gray));
-    color: rgb(var(--venia-global-color-gray-darker));
+    color: rgb(var(--venia-global-color-gray-700));
     column-gap: 0.5rem;
     display: grid;
     font-style: italic;

package/lib/components/ProductImageCarousel/__tests__/__snapshots__/carousel.spec.js.snap

@@ -8,8 +8,20 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
     className="carouselContainer"
   >
     <button
+      aria-label="Previous Image"
       className="previousButton"
       onClick={[Function]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -40,7 +52,7 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
         alt="image-product"
         className="image placeholder"
         loading="eager"
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
       />
       <img
         alt="image-product"
@@ -48,12 +60,24 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
         loading="lazy"
         onError={[Function]}
         onLoad={[Function]}
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
       />
     </div>
     <button
+      aria-label="Next Image"
       className="nextButton"
       onClick={[Function]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -92,8 +116,20 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
     className="carouselContainer"
   >
     <button
+      aria-label="Previous Image"
       className="previousButton"
       onClick={[Function]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -124,7 +160,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
         alt="test-thumbnail1"
         className="image placeholder"
         loading="eager"
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
         width={640}
       />
       <img
@@ -148,8 +184,20 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
       />
     </div>
     <button
+      aria-label="Next Image"
       className="nextButton"
       onClick={[Function]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -177,10 +225,11 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
   <div
     className="thumbnailList"
   >
-    <button
+    <span
+      aria-hidden="true"
       className="rootSelected"
       onClick={[Function]}
-      type="button"
+      role="button"
     >
       <div
         className="root container"
@@ -190,7 +239,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           className="image placeholder"
           height={170}
           loading="eager"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
           width={135}
         />
         <img
@@ -213,11 +262,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </button>
-    <button
+    </span>
+    <span
+      aria-hidden="true"
       className="root"
       onClick={[Function]}
-      type="button"
+      role="button"
     >
       <div
         className="root container"
@@ -227,7 +277,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           className="image placeholder"
           height={170}
           loading="eager"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
           width={135}
         />
         <img
@@ -250,11 +300,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </button>
-    <button
+    </span>
+    <span
+      aria-hidden="true"
       className="root"
       onClick={[Function]}
-      type="button"
+      role="button"
     >
       <div
         className="root container"
@@ -264,7 +315,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           className="image placeholder"
           height={170}
           loading="eager"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
           width={135}
         />
         <img
@@ -287,11 +338,12 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </button>
-    <button
+    </span>
+    <span
+      aria-hidden="true"
       className="root"
       onClick={[Function]}
-      type="button"
+      role="button"
     >
       <div
         className="root container"
@@ -301,7 +353,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           className="image placeholder"
           height={170}
           loading="eager"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
           width={135}
         />
         <img
@@ -324,7 +376,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </button>
+    </span>
   </div>
 </div>
 `;

package/lib/components/ProductImageCarousel/__tests__/__snapshots__/thumbnail.spec.js.snap

@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders root class if not the active Thumbnail 1`] = `
-<button
+<span
+  aria-hidden="true"
   className="root"
   onClick={[Function]}
-  type="button"
+  role="button"
 >
   <div
     className="root container"
@@ -14,7 +15,7 @@ exports[`renders root class if not the active Thumbnail 1`] = `
       className="image placeholder"
       height={170}
       loading="eager"
-      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
       width={135}
     />
     <img
@@ -37,14 +38,15 @@ exports[`renders root class if not the active Thumbnail 1`] = `
       width={135}
     />
   </div>
-</button>
+</span>
 `;
 
 exports[`renders the Thumbnail component correctly 1`] = `
-<button
+<span
+  aria-hidden="true"
   className="rootSelected"
   onClick={[Function]}
-  type="button"
+  role="button"
 >
   <div
     className="root container"
@@ -54,7 +56,7 @@ exports[`renders the Thumbnail component correctly 1`] = `
       className="image placeholder"
       height={170}
       loading="eager"
-      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
       width={135}
     />
     <img
@@ -77,14 +79,15 @@ exports[`renders the Thumbnail component correctly 1`] = `
       width={135}
     />
   </div>
-</button>
+</span>
 `;
 
 exports[`renders transparent placeholder when no file name is provided 1`] = `
-<button
+<span
+  aria-hidden="true"
   className="rootSelected"
   onClick={[Function]}
-  type="button"
+  role="button"
 >
   <div
     className="root container"
@@ -93,7 +96,7 @@ exports[`renders transparent placeholder when no file name is provided 1`] = `
       alt="placeholder-thumbnail"
       className="image placeholder"
       loading="eager"
-      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
     />
     <img
       alt="placeholder-thumbnail"
@@ -101,8 +104,8 @@ exports[`renders transparent placeholder when no file name is provided 1`] = `
       loading="lazy"
       onError={[Function]}
       onLoad={[Function]}
-      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
     />
   </div>
-</button>
+</span>
 `;

package/lib/components/ProductImageCarousel/__tests__/carousel.spec.js

@@ -119,7 +119,7 @@ test('renders prior image when previous button is clicked', () => {
     })[0];
 
     act(() => {
-        leftButton.props.onClick();
+        leftButton.props.onPress();
     });
 
     const activeImage = component.root.findAllByType(Image)[0];
@@ -140,7 +140,7 @@ test('renders last image when previous button is clicked and first item is activ
     })[0];
 
     act(() => {
-        leftButton.props.onClick();
+        leftButton.props.onPress();
     });
 
     const activeImage = component.root.findAllByType(Image)[4];
@@ -161,7 +161,7 @@ test('renders next image when next Button is clicked', () => {
     })[0];
 
     act(() => {
-        rightButton.props.onClick();
+        rightButton.props.onPress();
     });
 
     const activeImage = component.root.findAllByType(Image)[0];
@@ -189,7 +189,7 @@ test('renders first image when next Button is clicked and last item is active',
     })[0];
 
     act(() => {
-        rightButton.props.onClick();
+        rightButton.props.onPress();
     });
 
     const activeImage = component.root.findAllByType(Image)[1];

package/lib/components/ProductImageCarousel/__tests__/thumbnail.spec.js

@@ -36,7 +36,7 @@ test('clicking calls click handler with item index', () => {
         </WindowSizeContextProvider>
     );
 
-    component.root.findByType('button').props.onClick();
+    component.root.findByType('span').props.onClick();
 
     expect(onClickHandler).toHaveBeenCalledWith(itemIndex);
 
@@ -72,5 +72,5 @@ test('renders root class if not the active Thumbnail', () => {
     );
 
     expect(component.toJSON()).toMatchSnapshot();
-    expect(component.root.findByType('button').props.className).toEqual('root');
+    expect(component.root.findByType('span').props.className).toEqual('root');
 });