Improve test coverage (#44)

* Improve test coverage

* Imrpove test coverage

* Improve test coverage

* 100% test coverage

* Fix warnings

* Add todo test

* thumbnail prop description from master

* proptype

Author: leotoll

package.json

@@ -150,9 +150,6 @@
     ],
     "moduleNameMapper": {
       "react-storefront/(.*)": "<rootDir>/src/$1"
-    },
-    "roots": [
-      "test"
-    ]
+    }
   }
 }

src/carousel/MagnifyHint.js

@@ -178,11 +178,6 @@ MagnifyHint.propTypes = {
    */
   expandTextDesktop: PropTypes.string,
 
-  /**
-   * If `true`, the Carousel is currently being hovered upon.
-   */
-  open: PropTypes.bool,
-
   /**
    * If `true`, zooming is disabled and the hint for zooming is not shown.
    */

src/carousel/MediaCarousel.js

@@ -212,7 +212,7 @@ function MediaCarousel(props) {
               onLoad={i === 0 ? onFullSizeImagesLoaded : null}
               magnifyProps={magnifyProps}
               {...item}
-              magnify={lightboxActive && !isSmall ? false : item.magnify}
+              magnify={isSmall ? undefined : item.magnify}
               imageProps={
                 lightboxActive && !isSmall
                   ? {
@@ -255,18 +255,9 @@ MediaCarousel.propTypes = {
   classes: PropTypes.object,
 
   /**
-   * Array of objects containing the data for an image to be used for thumbnails. If `false`, no
-   * thumbnails will be displayed.
+   * If `true`, the carousel will have thumbnails below it.
    */
-  thumbnails: PropTypes.oneOfType([
-    PropTypes.arrayOf(
-      PropTypes.shape({
-        src: PropTypes.string,
-        alt: PropTypes.string,
-      }),
-    ),
-    PropTypes.bool,
-  ]),
+  thumbnails: PropTypes.bool,
   /**
    * Data for an image to be used for a thumbnail when the images are not yet loaded.
    */

src/drawer/Drawer.js

@@ -123,7 +123,7 @@ export default function Drawer({
       drawerResize.current = new ResizeObserver(() => {
         document.body.style.paddingBottom = el && el.clientHeight + 'px'
       })
-      drawerResize.observe(el)
+      drawerResize.current.observe(el)
     }
 
     return () => {

src/drawer/DrawerCloseButton.js

@@ -73,7 +73,7 @@ export default function DrawerCloseButton({
     ButtonElement = IconButton
   } else {
     ButtonElement = props => (
-      <Fab color="primary" className={clsx(!open && classes.hidden)} {...props}>
+      <Fab color="primary" {...props} className={clsx(props.className, !open && classes.hidden)}>
         <Icon />
       </Fab>
     )

src/drawer/DrawerContext.js

@@ -12,7 +12,7 @@ function MenuLeaf({ item, trackSelected, ...others }) {
       as={item.as}
       className={classes.link}
       server={item.server}
-      state={item.state ? () => JSON.parse(item.state) : null}
+      pageData={item.pageData ? item.pageData : null}
       onClick={close}
     >
       <a>

src/menu/MenuLeaf.js

@@ -94,7 +94,7 @@ function NavTab({ classes, href, as, prefetch, children, ...props }) {
   const menuItemBlurPending = useRef(false)
 
   // accessibility: open the menu when the user presses enter with the tab focused
-  const handleTabKeyDown = useCallback(e => {
+  const handleEnterKeyDown = useCallback(e => {
     if (e.key === 'Enter') {
       e.preventDefault()
       setAnchorEl(e.currentTarget)
@@ -108,11 +108,7 @@ function NavTab({ classes, href, as, prefetch, children, ...props }) {
     // So we need to let the event loop finish one cycle to see if another item in the menu receives focus before
     // determining that the menu has lost focus and should be closed.
     menuItemBlurPending.current = false
-
-    if (!focused) {
-      setFocused(true)
-    }
-  }, [focused])
+  }, [])
 
   // When a menu item loses focus, we close the menu if another menu item doesn't immediately gain focus
   const handleMenuItemBlur = useCallback(() => {
@@ -153,7 +149,7 @@ function NavTab({ classes, href, as, prefetch, children, ...props }) {
         prefetch={prefetch}
       >
         <Tab
-          onKeyDown={handleTabKeyDown}
+          onKeyDown={handleEnterKeyDown}
           classes={{ root: classes.tab }}
           aria-haspopup={children != null}
           aria-expanded={open}

src/nav/NavTab.js

@@ -49,7 +49,7 @@ function SortButton({ title, drawerProps, onClick, sortProps, drawerBreakpoint,
     if (open) {
       setState({ mountDrawer: true, open: true, anchorEl: anchorEl })
     } else {
-      setState({ open: false, anchorEl: null })
+      setState({ ...state, open: false, anchorEl: null })
     }
   }
 

src/plp/SortButton.js

@@ -43,7 +43,7 @@
  * }, { timeout: 50 })
  * ```
  *
- * @param {Function} createApiUrl A function to use to create the URL
+ * @param {Function} fetchCallback A function to use to create the URL
  * @param {Object} options
  * @param {Object} options.timeout The max duration to wait before resolving so that the page
  *  component will be rendered and can display a skeleton while waiting for the promise returned
@@ -68,21 +68,13 @@ export default function createLazyProps(fetchCallback, { timeout = 50 } = {}) {
         return new Promise((resolve, reject) => {
           const fetchPromise = fetchCallback(options)
 
-          let resolved = false
-
           setTimeout(() => {
-            if (!resolved) {
-              resolved = true
-              resolve({ lazy: fetchPromise })
-            }
+            resolve({ lazy: fetchPromise })
           }, timeout)
 
           fetchPromise
             .then(result => {
-              if (!resolved) {
-                resolved = true
-                resolve(result)
-              }
+              resolve(result)
             })
             .catch(e => {
               reject(e)