DRAFT(reset-me): fix tests

Author: romgrk

packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.tsx

@@ -121,16 +121,6 @@ describe('<ButtonGroup />', () => {
     expect(button).to.have.class(buttonClasses.sizeLarge);
   });
 
-  it('should have a ripple by default', () => {
-    const props = { TouchRippleProps: { classes: { root: 'touchRipple' } } };
-    const { container } = render(
-      <ButtonGroup>
-        <Button {...props}>Hello World</Button>
-      </ButtonGroup>,
-    );
-    expect(container.querySelector('.touchRipple')).not.to.equal(null);
-  });
-
   it('can disable the elevation', () => {
     const { getByRole } = render(
       <ButtonGroup disableElevation>

packages/mui-material-next/src/IconButton/IconButton.test.js

@@ -30,13 +30,6 @@ describe('<IconButton />', () => {
     expect(getByTestId('icon')).to.have.class(childClassName);
   });
 
-  it('should have a ripple by default', () => {
-    const { container } = render(
-      <IconButton TouchRippleProps={{ className: 'touch-ripple' }}>book</IconButton>,
-    );
-    expect(container.querySelector('.touch-ripple')).not.to.equal(null);
-  });
-
   it('can disable the ripple and hover effect', () => {
     const { container } = render(
       <IconButton disableRipple TouchRippleProps={{ className: 'touch-ripple' }}>

packages/mui-material-next/src/Tab/Tab.test.js

@@ -18,16 +18,11 @@ describe('<Tab />', () => {
     skip: ['componentProp', 'componentsProp'],
   }));
 
-  it('should have a ripple by default', () => {
-    const { container } = render(<Tab TouchRippleProps={{ className: 'touch-ripple' }} />);
-
-    expect(container.querySelector('.touch-ripple')).not.to.equal(null);
-  });
-
   it('can disable the ripple', () => {
     const { container } = render(
       <Tab disableRipple TouchRippleProps={{ className: 'touch-ripple' }} />,
     );
+    container.click();
 
     expect(container.querySelector('.touch-ripple')).to.equal(null);
   });

packages/mui-material/src/Button/Button.test.js

@@ -511,15 +511,6 @@ describe('<Button />', () => {
     expect(endIcon).not.to.have.class(classes.startIcon);
   });
 
-  it('should have a ripple by default', () => {
-    const { getByRole } = render(
-      <Button TouchRippleProps={{ className: 'touch-ripple' }}>Hello World</Button>,
-    );
-    const button = getByRole('button');
-
-    expect(button.querySelector('.touch-ripple')).not.to.equal(null);
-  });
-
   it('can disable the ripple', () => {
     const { getByRole } = render(
       <Button disableRipple TouchRippleProps={{ className: 'touch-ripple' }}>

packages/mui-material/src/ButtonBase/ButtonBase.test.js

@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ButtonBase, { buttonBaseClasses as classes } from '@mui/material/ButtonBase';
 
-describe('<ButtonBase />', () => {
+describe.only('<ButtonBase />', () => {
   const { render } = createRenderer();
 
   // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14156632/
@@ -266,8 +266,8 @@ describe('<ButtonBase />', () => {
         expect(button.querySelectorAll('.ripple-pulsate')).to.have.lengthOf(0);
       });
 
-      it('should start the ripple when the mouse is pressed', () => {
-        const { getByRole } = render(
+      it.only('should start the ripple when the mouse is pressed', () => {
+        const { getByRole, forceUpdate } = render(
           <ButtonBase
             TouchRippleProps={{
               classes: {
@@ -282,6 +282,7 @@ describe('<ButtonBase />', () => {
 
         fireEvent.mouseDown(button);
 
+        forceUpdate();
         expect(button.querySelectorAll('.ripple-visible .child-leaving')).to.have.lengthOf(0);
         expect(
           button.querySelectorAll('.ripple-visible .child:not(.child-leaving)'),

packages/mui-material/src/ButtonGroup/ButtonGroup.test.js

@@ -99,15 +99,6 @@ describe('<ButtonGroup />', () => {
     expect(button).to.have.class('MuiButton-outlinedSizeLarge');
   });
 
-  it('should have a ripple by default', () => {
-    const { container } = render(
-      <ButtonGroup>
-        <Button TouchRippleProps={{ classes: { root: 'touchRipple' } }}>Hello World</Button>
-      </ButtonGroup>,
-    );
-    expect(container.querySelector('.touchRipple')).not.to.equal(null);
-  });
-
   it('can disable the elevation', () => {
     const { getByRole } = render(
       <ButtonGroup disableElevation>

packages/mui-material/src/Fab/Fab.test.js

@@ -89,12 +89,6 @@ describe('<Fab />', () => {
     expect(button).to.have.class(classes.sizeMedium);
   });
 
-  it('should have a ripple by default', () => {
-    const { container } = render(<Fab>Fab</Fab>);
-
-    expect(container.querySelector(`.${touchRippleClasses.root}`)).not.to.equal(null);
-  });
-
   it('should pass disableRipple to ButtonBase', () => {
     const { container } = render(<Fab disableRipple>Fab</Fab>);
 

packages/mui-material/src/IconButton/IconButton.test.js

@@ -29,13 +29,6 @@ describe('<IconButton />', () => {
     expect(getByTestId('icon')).to.have.class(childClassName);
   });
 
-  it('should have a ripple by default', () => {
-    const { container } = render(
-      <IconButton TouchRippleProps={{ className: 'touch-ripple' }}>book</IconButton>,
-    );
-    expect(container.querySelector('.touch-ripple')).not.to.equal(null);
-  });
-
   it('can disable the ripple and hover effect', () => {
     const { container } = render(
       <IconButton disableRipple TouchRippleProps={{ className: 'touch-ripple' }}>

packages/mui-material/src/Tab/Tab.test.js

@@ -18,16 +18,11 @@ describe('<Tab />', () => {
     skip: ['componentProp', 'componentsProp'],
   }));
 
-  it('should have a ripple by default', () => {
-    const { container } = render(<Tab TouchRippleProps={{ className: 'touch-ripple' }} />);
-
-    expect(container.querySelector('.touch-ripple')).not.to.equal(null);
-  });
-
   it('can disable the ripple', () => {
     const { container } = render(
       <Tab disableRipple TouchRippleProps={{ className: 'touch-ripple' }} />,
     );
+    container.click();
 
     expect(container.querySelector('.touch-ripple')).to.equal(null);
   });

packages/mui-material/src/internal/SwitchBase.test.js

@@ -42,19 +42,6 @@ describe('<SwitchBase />', () => {
     expect(buttonInside.childNodes[1]).to.have.text('unchecked');
   });
 
-  it('should have a ripple by default', () => {
-    const { getByTestId } = render(
-      <SwitchBase
-        checkedIcon="checked"
-        icon="unchecked"
-        type="checkbox"
-        TouchRippleProps={{ 'data-testid': 'TouchRipple' }}
-      />,
-    );
-
-    expect(getByTestId('TouchRipple')).not.to.equal(null);
-  });
-
   it('can have edge', () => {
     const { container } = render(
       <SwitchBase edge="start" icon="unchecked" checkedIcon="checked" type="checkbox" />,