Repository: react-materialize/react-materialize
Pull request #711 (2018-12-13 09:45:01)

clean up sidenav specs
- no need for extra div, can use `Fragment`
- removed complex test setup method
- removed redundant tests


Patch:
diff --git a/src/SideNav.js b/src/SideNav.js
index e45e6e6..57c19d7 100644
--- a/src/SideNav.js
+++ b/src/SideNav.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import idgen from './idgen';
@@ -31,12 +31,12 @@ class SideNav extends Component {
     );
 
     return (
-      <div>
+      <Fragment>
         {this.renderTrigger()}
         <ul id={this.id} className={classNames} {...props}>
           {children}
         </ul>
-      </div>
+      </Fragment>
     );
   }
 


Test patch:
diff --git a/test/SideNav.spec.js b/test/SideNav.spec.js
index 9c2b783..b2b9673 100644
--- a/test/SideNav.spec.js
+++ b/test/SideNav.spec.js
@@ -3,29 +3,8 @@ import { shallow, mount } from 'enzyme';
 import SideNav from '../src/SideNav';
 import mocker from './helper/new-mocker';
 
-function setup(props = {}, children, mounted) {
-  const propsIn = {
-    trigger: <button className="trigger">Show sidenav</button>,
-    ...props
-  };
-  const component = <SideNav {...propsIn}>{children}</SideNav>;
-  const wrapper = mounted ? mount(component) : shallow(component);
-  const sideNav = wrapper.find('.sidenav');
-  const trigger = wrapper.find('.sidenav-trigger');
-  const sideNavProps = sideNav.props();
-  const triggerProps = trigger.props();
-
-  return {
-    propsIn,
-    wrapper,
-    sideNav,
-    trigger,
-    sideNavProps,
-    triggerProps
-  };
-}
-
 describe('<SideNav />', () => {
+  let wrapper;
   const sideNavInitMock = jest.fn();
   const sideNavInstanceDestroyMock = jest.fn();
   const sideNavMock = {
@@ -37,57 +16,40 @@ describe('<SideNav />', () => {
     }
   };
   const restore = mocker('Sidenav', sideNavMock);
+  const trigger = <button className="trigger">Show sidenav</button>;
 
   afterAll(() => {
     restore();
   });
 
   test('renders', () => {
-    const { sideNav } = setup();
-    expect(sideNav).toMatchSnapshot();
+    wrapper = shallow(<SideNav trigger={trigger} />);
+    expect(wrapper).toMatchSnapshot();
   });
 
   test('can be `fixed`', () => {
-    const { sideNav } = setup({ className: 'red', fixed: true });
-    expect(sideNav).toMatchSnapshot();
-  });
-
-  test('can render a `trigger`', () => {
-    const { trigger } = setup({ className: 'green' });
-    expect(trigger).toMatchSnapshot();
+    wrapper = shallow(<SideNav trigger={trigger} fixed />);
+    expect(wrapper).toMatchSnapshot();
   });
 
-  test('should be fixed if no trigger is passed', () => {
-    const { sideNavProps } = setup({
-      id: 'test123',
-      options: {},
-      shouldTransfer: true
-    });
-    const component = <SideNav className="red" />;
-    const wrapper = shallow(component);
-    const sideNav = wrapper.find('.sidenav-fixed');
-    expect(sideNav).toMatchSnapshot();
-    expect(sideNavProps.trigger).toBeUndefined();
+  test('is `fixed` if no trigger is passed', () => {
+    wrapper = shallow(<SideNav />);
+    expect(wrapper).toMatchSnapshot();
   });
 
-  test('should render a given id', () => {
-    const { sideNavProps, triggerProps } = setup({ id: 'test' });
-    expect(sideNavProps.id).toEqual('test');
-    expect(triggerProps['data-target']).toEqual('test');
+  test('renders', () => {
+    wrapper = shallow(<SideNav trigger={trigger} id="test" />);
+    expect(wrapper).toMatchSnapshot();
   });
-  test('should render children', () => {
-    const { sideNav } = setup({}, <span className="test-child" />);
-    const children = sideNav.find('.test-child');
 
-    expect(children).toHaveLength(1);
-  });
+  test('renders children', () => {
+    wrapper = shallow(
+      <SideNav trigger={trigger}>
+        <span className="test-child" />
+      </SideNav>
+    );
 
-  test('should consume props it uses', () => {
-    const { sideNavProps } = setup({
-      id: 'test123',
-      options: {},
-      shouldTransfer: true
-    });
+    expect(wrapper).toMatchSnapshot();
   });
 
   test('should call sideNav with the given options', () => {
@@ -95,13 +57,15 @@ describe('<SideNav />', () => {
       closeOnClick: true,
       edge: 'right'
     };
-    mount(<SideNav trigger={<span>trigger</span>} options={options} />);
+    mount(<SideNav trigger={trigger} options={options} />);
+
     expect(sideNavInitMock).toHaveBeenCalledWith(options);
   });
 
   test('should be destroyed when unmounted', () => {
-    const component = shallow(<SideNav className="red" />);
+    const component = shallow(<SideNav />);
     component.unmount();
+
     expect(sideNavInstanceDestroyMock).toHaveBeenCalled();
   });
 });
diff --git a/test/__snapshots__/SideNav.spec.js.snap b/test/__snapshots__/SideNav.spec.js.snap
index d768d1c..6e7e3f9 100644
--- a/test/__snapshots__/SideNav.spec.js.snap
+++ b/test/__snapshots__/SideNav.spec.js.snap
@@ -1,31 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SideNav /> can be \`fixed\` 1`] = `
-<ul
-  className="sidenav sidenav-fixed red"
-  id="sidenav_mockId"
-/>
+<Fragment>
+  <button
+    className="trigger hide-on-large-only sidenav-trigger"
+    data-target="sidenav_mockId"
+  >
+    Show sidenav
+  </button>
+  <ul
+    className="sidenav sidenav-fixed"
+    id="sidenav_mockId"
+  />
+</Fragment>
 `;
 
-exports[`<SideNav /> can render a \`trigger\` 1`] = `
-<button
-  className="trigger show-on-large sidenav-trigger"
-  data-target="sidenav_mockId"
->
-  Show sidenav
-</button>
+exports[`<SideNav /> is \`fixed\` if no trigger is passed 1`] = `
+<Fragment>
+  <ul
+    className="sidenav sidenav-fixed"
+    id="sidenav_mockId"
+  />
+</Fragment>
 `;
 
 exports[`<SideNav /> renders 1`] = `
-<ul
-  className="sidenav"
-  id="sidenav_mockId"
-/>
+<Fragment>
+  <button
+    className="trigger show-on-large sidenav-trigger"
+    data-target="sidenav_mockId"
+  >
+    Show sidenav
+  </button>
+  <ul
+    className="sidenav"
+    id="sidenav_mockId"
+  />
+</Fragment>
 `;
 
-exports[`<SideNav /> should be fixed if no trigger is passed 1`] = `
-<ul
-  className="sidenav sidenav-fixed red"
-  id="sidenav_mockId"
-/>
+exports[`<SideNav /> renders 2`] = `
+<Fragment>
+  <button
+    className="trigger show-on-large sidenav-trigger"
+    data-target="test"
+  >
+    Show sidenav
+  </button>
+  <ul
+    className="sidenav"
+    id="test"
+  />
+</Fragment>
+`;
+
+exports[`<SideNav /> renders children 1`] = `
+<Fragment>
+  <button
+    className="trigger show-on-large sidenav-trigger"
+    data-target="sidenav_mockId"
+  >
+    Show sidenav
+  </button>
+  <ul
+    className="sidenav"
+    id="sidenav_mockId"
+  >
+    <span
+      className="test-child"
+    />
+  </ul>
+</Fragment>
 `;