V9.0.0 alpha.0 - Fixing tests (#210)

* fix tests

* fix tests

* fix tests

* fix tests

* fix tests

* fix tests

* fix tests

* fix tests

Co-authored-by: Oleksandr Chernichenko <oleksandr.chernichenko@Oleksandr-Chernichenko.local>

Author: chernichenko

package-lock.json

@@ -55,7 +55,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-image-magnify": "^2.7.4",
-    "react-swipeable-views": "0.13.3",
+    "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "0.13.3",
     "react-visibility-sensor": "^5.1.1",
     "resize-observer-polyfill": "^1.5.1",

package.json

@@ -17,7 +17,7 @@ const classes = {
 
 const StyledPWAContextProvider = styled(PWAContext.Provider)(({ theme }) => ({
   [`& .${classes.body}`]: {
-    '-webkit-tap-highlight-color': 'transparent',
+    'WebkitTapHighlightColor?': 'transparent',
   },
 
   [`& .${classes.a}`]: {

src/PWA.js

@@ -98,7 +98,7 @@ const Carousel = React.forwardRef((props, ref) => {
   const classes = { ...defaultClasses, ...c }
 
   const { selected, setSelected } = useSelected(props)
-  const count = children && children.length
+  const count = !!children ? children.length : 0
 
   let Tag = infinite ? VirtualizeSwipeableViews : SwipeableViews
   Tag = autoplay ? AutoPlaySwipeableViews : Tag
@@ -140,6 +140,7 @@ const Carousel = React.forwardRef((props, ref) => {
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onClick={onClick}
+      height={height}
     >
       {aboveAdornments}
       <Fill height={height}>
@@ -154,15 +155,15 @@ const Carousel = React.forwardRef((props, ref) => {
             interval={interval}
             containerStyle={{ alignItems: 'center' }}
           />
-          {arrows !== false && (
+          {arrows !== false ? (
             <CarouselArrows
               className={arrows === 'desktop' ? classes.hideTouchArrows : null}
               selected={selected}
               setSelected={setSelected}
               count={count}
               infinite={infinite}
             />
-          )}
+          ) : <div />}
           {indicators && <CarouselDots count={count} selected={selected} />}
         </div>
       </Fill>

src/carousel/Carousel.js

@@ -81,7 +81,7 @@ CarouselDots.propTypes = {
   /**
    * The total number of dots to show.
    */
-  count: PropTypes.number.isRequired,
+  count: PropTypes.number,
 
   /**
    * The index of the selected dot.

src/carousel/CarouselDots.js

@@ -94,7 +94,7 @@ export default function Drawer({
   variant,
   showCloseButton,
   open,
-  onClose,
+  onClose = () => {},
   title,
   children,
   className,

src/drawer/Drawer.js

@@ -1,12 +1,11 @@
 import React, { useCallback } from 'react'
-import { styled } from '@mui/material/styles'
-import { Hidden, Fade, Tab, Paper } from '@mui/material'
+import { styled, useTheme } from '@mui/material/styles'
+import { Fade, Tab, Paper } from '@mui/material'
 import PropTypes from 'prop-types'
 import Link from '../link/Link'
-
+import useMediaQuery from '@mui/material/useMediaQuery'
 import { bindHover, bindPopover } from 'material-ui-popup-state'
 import { usePopupState } from 'material-ui-popup-state/hooks'
-
 import HoverPopover from 'material-ui-popup-state/HoverPopover'
 
 const PREFIX = 'RSFNavTab'
@@ -95,6 +94,8 @@ const Root = styled('div')(({ theme }) => ({
  */
 const NavTab = function({ href, as, prefetch, children, classes: c = {}, ...props }) {
   const classes = { ...defaultClasses, ...c }
+  const theme = useTheme()
+  const isSmall = useMediaQuery(theme.breakpoints.down('sm'))
 
   const popupState = usePopupState({
     variant: 'popover',
@@ -136,9 +137,8 @@ const NavTab = function({ href, as, prefetch, children, classes: c = {}, ...prop
           }}
         />
       </Link>
-      {!children ? null : (
-        <Hidden smDown>
-          <HoverPopover
+      {(children && !isSmall) ? (
+        <HoverPopover
             {...bindPopover(popupState)}
             className={classes.popover}
             anchorOrigin={{
@@ -163,8 +163,7 @@ const NavTab = function({ href, as, prefetch, children, classes: c = {}, ...prop
               {children}
             </Paper>
           </HoverPopover>
-        </Hidden>
-      )}
+      ) : null}
     </Root>
   )
 }

src/nav/NavTab.js

@@ -1,4 +1,5 @@
-import { createTheme as createMuiTheme, adaptV4Theme } from '@mui/material/styles'
+import { createTheme, adaptV4Theme } from '@mui/material/styles'
+// import { createTheme } from '@mui/material/styles';
 import merge from 'lodash/merge'
 
 /**
@@ -8,11 +9,11 @@ import merge from 'lodash/merge'
  * @return {Object} A material UI theme
  */
 
-export default function createTheme(values = {}) {
-  const theme = createMuiTheme(
+export default function createThemeFunc(values = {}) {
+  const theme = createTheme(
     merge(
       {},
-      adaptV4Theme({
+      {
         zIndex: {
           modal: 999,
           amp: {
@@ -23,7 +24,7 @@ export default function createTheme(values = {}) {
         loadMaskOffsetTop: 64 + 56 + 4,
         drawerWidth: 330,
         components: {},
-      }),
+      },
       values,
     ),
   )

src/theme/createTheme.js

@@ -6,6 +6,7 @@ import {
   AccordionSummary as ExpansionPanelSummary,
   Accordion as ExpansionPanel,
 } from '@mui/material'
+import { getFiberIndex } from './methods'
 
 describe('Accordion', () => {
   it('should be empty render without children', () => {
@@ -45,9 +46,9 @@ describe('Accordion', () => {
       ).toBe(0)
     })
 
-    it.skip('should expand section on section click ', () => {
+    it('should expand section on section click ', () => {
       wrapper
-        .find(ExpansionPanelSummary)
+        .find('.MuiButtonBase-root')
         .last()
         .simulate('click')
 
@@ -59,10 +60,10 @@ describe('Accordion', () => {
       ).toBe(true)
     })
 
-    it.skip('should verify that previous opened section is closed on new section click', () => {
+    it('should verify that previous opened section is closed on new section click', () => {
       wrapper
-        .find(ExpansionPanelSummary)
-        .first()
+        .find('.MuiButtonBase-root')
+        .at(getFiberIndex(0))
         .simulate('click')
 
       expect(
@@ -73,7 +74,7 @@ describe('Accordion', () => {
       ).toBe(true)
 
       wrapper
-        .find(ExpansionPanelSummary)
+        .find('.MuiButtonBase-root')
         .last()
         .simulate('click')
 
@@ -96,10 +97,10 @@ describe('Accordion', () => {
       ).toBe(1)
     })
 
-    it.skip('should close the section if clicked again on the same section', () => {
+    it('should close the section if clicked again on the same section', () => {
       wrapper
-        .find(ExpansionPanelSummary)
-        .first()
+        .find('.MuiButtonBase-root')
+        .at(getFiberIndex(0))
         .simulate('click')
       expect(
         wrapper
@@ -109,8 +110,8 @@ describe('Accordion', () => {
       ).toBe(true)
 
       wrapper
-        .find(ExpansionPanelSummary)
-        .first()
+        .find('.MuiButtonBase-root')
+        .at(getFiberIndex(0))
         .simulate('click')
       expect(
         wrapper

test/Accordion.test.js

@@ -34,7 +34,7 @@ describe('BackToTop', () => {
     expect(wrapper.find(CustomIcon).exists()).toBe(true)
   })
 
-  it.skip('should show back to top button when scrolled more than showUnderY prop value', () => {
+  it('should show back to top button when scrolled more than showUnderY prop value', () => {
     window.pageYOffset = 201
     wrapper = mount(<BackToTop showUnderY={200} />)
 
@@ -44,32 +44,32 @@ describe('BackToTop', () => {
 
     expect(wrapper.find(Fab).prop('style').visibility).toBe('hidden')
 
-    wrapper.find(Fab).simulate('click')
+    wrapper.find('.MuiFab-root').last().simulate('click')
 
     expect(wrapper.find(Fab).prop('style').visibility).toBe(undefined)
   })
 
-  it.skip('should scroll to top instantly if scroll position is more than instantBehaviorUnderY prop value', () => {
+  it('should scroll to top instantly if scroll position is more than instantBehaviorUnderY prop value', () => {
     window.scrollY = 300
     wrapper = mount(<BackToTop instantBehaviorUnderY={250} />)
 
     act(() => {
       map.scroll()
     })
 
-    wrapper.find(Fab).simulate('click')
+    wrapper.find('.MuiFab-root').last().simulate('click')
     expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'auto', left: 0, top: 0 })
   })
 
-  it.skip('should scroll to top smoothly if scroll position is less than instantBehaviorUnderY prop value', () => {
+  it('should scroll to top smoothly if scroll position is less than instantBehaviorUnderY prop value', () => {
     window.pageYOffset = 201
     wrapper = mount(<BackToTop instantBehaviorUnderY={250} />)
 
     act(() => {
       map.scroll()
     })
 
-    wrapper.find(Fab).simulate('click')
+    wrapper.find('.MuiFab-root').last().simulate('click')
     expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', left: 0, top: 0 })
   })
 })