Repository: react-materialize/react-materialize
Pull request #620 (2018-07-23 22:19:54)

3.0.0 Collapsible.js & CollapsibleItem.js
# Description

Updated Collapsible component in order ot fulfill #590.

## Type of change

Collapsible component now depends on materialize v. 1.0.0-rc.2.

# How Has This Been Tested?

Jest tests added, very much inspired by PR #616.

# Checklist:

- [x] I have commented my code, particularly in hard-to-understand areas
- [x] My changes generate no new warnings
- [x] I have not generated a new package version. (the maintainers will handle that)



Patch:
diff --git a/src/Collapsible.js b/src/Collapsible.js
index 28f0491..05db7ad 100644
--- a/src/Collapsible.js
+++ b/src/Collapsible.js
@@ -15,7 +15,13 @@ class Collapsible extends Component {
   }
 
   componentDidMount() {
-    $(this._collapsible).collapsible();
+    this.instance = M.Collapsible.init(this._collapsible, this.props.options);
+  }
+
+  componentWillUnmount() {
+    if (this.instance) {
+      this.instance.destroy();
+    }
   }
 
   render() {
@@ -95,7 +101,11 @@ Collapsible.propTypes = {
    * item's eventKey value. Ignored if accordion is false.
    */
   defaultActiveKey: PropTypes.any,
-  onSelect: PropTypes.func
+  onSelect: PropTypes.func,
+  /**
+   * Options passed to initializer
+   */
+  options: PropTypes.any
 };
 
 Collapsible.defaultProps = {


Test patch:
diff --git a/test/Collapsible.spec.js b/test/Collapsible.spec.js
index d45b08d..3a933dd 100644
--- a/test/Collapsible.spec.js
+++ b/test/Collapsible.spec.js
@@ -2,17 +2,47 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import Collapsible from '../src/Collapsible';
 import CollapsibleItem from '../src/CollapsibleItem';
-import mocker from './helper/mocker';
+import mocker from './helper/new-mocker';
 
 describe('<Collapsible />', () => {
   let wrapper;
-  const collapsibleMock = jest.fn();
-  const restore = mocker('collapsible', collapsibleMock);
+  const collapsibleInitMock = jest.fn();
+  const collapsibleInstanceDestroyMock = jest.fn();
+  const collapsibleMock = {
+    init: (el, options) => {
+      collapsibleInitMock(options);
+      return {
+        destroy: collapsibleInstanceDestroyMock
+      };
+    }
+  };
+  const restore = mocker('Collapsible', collapsibleMock);
+
+  const options = {
+    onOpenStart: () => {},
+    inDuration: 100,
+    outDuration: 50
+  };
+
+  beforeEach(() => {
+    collapsibleInitMock.mockClear();
+  });
 
   afterAll(() => {
     restore();
   });
 
+  test('initializes Collapsible with options', () => {
+    wrapper = shallow(<Collapsible options={options} />);
+    expect(collapsibleInitMock).toHaveBeenCalledWith(options);
+  });
+
+  test('Destroyed when unmounted', () => {
+    wrapper = shallow(<Collapsible options={options} />);
+    wrapper.unmount();
+    expect(collapsibleInstanceDestroyMock).toHaveBeenCalled();
+  });
+
   test('renders', () => {
     wrapper = shallow(<Collapsible />);
     expect(wrapper).toMatchSnapshot();
@@ -91,4 +121,24 @@ describe('<Collapsible />', () => {
     expect(wrapper.state().activeKey).toEqual(1);
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('onSelect with right called with right argument', () => {
+    const onSelect = jest.fn();
+    wrapper = mount(
+      <Collapsible accordion onSelect={onSelect}>
+        <CollapsibleItem header="A">A</CollapsibleItem>
+        <CollapsibleItem header="B">B</CollapsibleItem>
+        <CollapsibleItem header="C">C</CollapsibleItem>
+        <CollapsibleItem header="D">D</CollapsibleItem>
+        <CollapsibleItem header="E">E</CollapsibleItem>
+      </Collapsible>
+    );
+
+    const clickedIndex = 3;
+    wrapper
+      .find('.collapsible-header')
+      .at(clickedIndex)
+      .simulate('click');
+    expect(onSelect).toHaveBeenCalledWith(clickedIndex);
+  });
 });