[Ripple] Test with react-testing-library

mui · Jun 20, 2019 · ac8ce27 · ac8ce27
1 parent aa68662
commit ac8ce27
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 36 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -85,6 +85,8 @@ module.exports = {
     'react/sort-prop-types': 'error',
 
     'import/no-extraneous-dependencies': 'off', // It would be better to enable this rule.
+    // does not work with wildcard imports. Mistakes will throw at runtime anyway
+    'import/named': false,
     'import/namespace': ['error', { allowComputed: true }],
     'import/order': [
       'error',

diff --git a/packages/material-ui/src/ButtonBase/Ripple.test.js b/packages/material-ui/src/ButtonBase/Ripple.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { assert } from 'chai';
+import { assert, expect } from 'chai';
 import { spy, useFakeTimers } from 'sinon';
-import { getClasses, createMount } from '@material-ui/core/test-utils';
+import { getClasses, cleanup, createMuiRender } from '@material-ui/core/test-utils';
 import TouchRipple from './TouchRipple';
 import Ripple from './Ripple';
 
@@ -11,27 +11,20 @@ describe('<Ripple />', () => {
 
   before(() => {
     classes = getClasses(<TouchRipple />);
-    mount = createMount({ strict: undefined });
+    mount = createMuiRender({ strict: undefined });
   });
 
   after(() => {
-    mount.cleanUp();
-  });
-
-  it('should render a Transition', () => {
-    const wrapper = mount(
-      <Ripple classes={classes} timeout={{}} rippleX={0} rippleY={0} rippleSize={10} />,
-    );
-    assert.strictEqual(wrapper.find('Transition').exists(), true);
+    cleanup();
   });
 
   it('should have the ripple className', () => {
-    const wrapper = mount(
+    const { container } = mount(
       <Ripple classes={classes} timeout={{}} rippleX={0} rippleY={0} rippleSize={11} />,
     );
-    const rippleWrapper = wrapper.find('span').first();
-    assert.strictEqual(rippleWrapper.hasClass(classes.ripple), true);
-    assert.strictEqual(rippleWrapper.hasClass(classes.fast), false);
+    const ripple = container.querySelector('span');
+    expect(ripple).to.have.class(classes.ripple);
+    expect(ripple).not.to.have.class(classes.fast);
   });
 
   describe('starting and stopping', () => {
@@ -51,17 +44,15 @@ describe('<Ripple />', () => {
 
     it('should start the ripple', () => {
       wrapper.setProps({ in: true });
-      wrapper.update();
-      const rippleWrapper = wrapper.find('span').first();
-      assert.strictEqual(rippleWrapper.hasClass(classes.rippleVisible), true);
+      const ripple = wrapper.container.querySelector('span');
+      expect(ripple).to.have.class(classes.rippleVisible);
     });
 
     it('should stop the ripple', () => {
       wrapper.setProps({ in: true });
       wrapper.setProps({ in: false });
-      wrapper.update();
-      const childWrapper = wrapper.find('span').last();
-      assert.strictEqual(childWrapper.hasClass(classes.childLeaving), true);
+      const child = wrapper.container.querySelector('span > span');
+      expect(child).to.have.class(classes.childLeaving);
     });
   });
 
@@ -83,29 +74,26 @@ describe('<Ripple />', () => {
     });
 
     it('should render the ripple inside a pulsating Ripple', () => {
-      assert.strictEqual(wrapper.name(), 'Ripple');
-      const rippleWrapper = wrapper.find('span').first();
-      assert.strictEqual(rippleWrapper.hasClass(classes.ripple), true);
-      assert.strictEqual(rippleWrapper.hasClass(classes.ripplePulsate), true);
-      const childWrapper = wrapper.find('span').last();
-      assert.strictEqual(childWrapper.hasClass(classes.childPulsate), true);
+      const ripple = wrapper.container.querySelector('span');
+      expect(ripple).to.have.class(classes.ripple);
+      expect(ripple).to.have.class(classes.ripplePulsate);
+      const child = wrapper.container.querySelector('span > span');
+      expect(child).to.have.class(classes.childPulsate);
     });
 
     it('should start the ripple', () => {
       wrapper.setProps({ in: true });
-      wrapper.update();
-      const rippleWrapper = wrapper.find('span').first();
-      assert.strictEqual(rippleWrapper.hasClass(classes.rippleVisible), true);
-      const childWrapper = wrapper.find('span').last();
-      assert.strictEqual(childWrapper.hasClass(classes.childPulsate), true);
+      const ripple = wrapper.container.querySelector('span');
+      expect(ripple).to.have.class(classes.rippleVisible);
+      const child = wrapper.container.querySelector('span > span');
+      expect(child).to.have.class(classes.childPulsate);
     });
 
     it('should stop the ripple', () => {
       wrapper.setProps({ in: true });
       wrapper.setProps({ in: false });
-      wrapper.update();
-      const childWrapper = wrapper.find('span').last();
-      assert.strictEqual(childWrapper.hasClass(classes.childLeaving), true);
+      const child = wrapper.container.querySelector('span > span');
+      expect(child).to.have.class(classes.childLeaving);
     });
   });
 

diff --git a/packages/material-ui/src/test-utils/createMuiRender.js b/packages/material-ui/src/test-utils/createMuiRender.js
@@ -23,7 +23,8 @@ function muiRender(element, options = {}) {
    * convenience helper. Better than repeating all props.
    */
   result.setProps = function setProps(props) {
-    return render(React.cloneElement(element, props), { wrapper: TestWrapper });
+    result.rerender(React.cloneElement(element, props));
+    return result;
   };
 
   return result;