Merge pull request #157 from glennflanagan/release/2.8.0

Release/2.8.0

Author: glennflanagan

README.md

@@ -115,6 +115,12 @@ Is called when the Collapsible is opening.
 ### **onClosing** | *function*
 Is called when the Collapsible is closing.
 
+### **onTriggerOpening** | *function*
+Is called when the Collapsible open trigger is clicked. Like onOpening except it isn't called when the open prop is updated.
+
+### **onTriggerClosing** | *function*
+Is called when the Collapsible close trigger is clicked. Like onClosing except it isn't called when the open prop is updated.
+
 ### **lazyRender** | *bool* | default: false
 Set this to true to postpone rendering of all of the content of the Collapsible until before it's opened for the first time
 

__tests__/index.js

@@ -9,7 +9,20 @@ configure({ adapter: new Adapter() });
 
 const dummyEvent = { preventDefault: () => {}};
 
-describe('<Collapsbile />', () => {
+class CollapsibleStateContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {open: !this.props.changeOpenTo};
+  }
+  componentDidMount(){
+    this.setState({open: this.props.changeOpenTo});
+  }
+  render() {
+    return <Collapsible {...this.props} open={this.state.open}/>;
+  }
+}
+
+describe('<Collapsible />', () => {
   it('renders an element with the class `.Collapsible`.', () => {
     const wrapper = shallow(<Collapsible />);
     expect(wrapper.is('.Collapsible')).toEqual(true);
@@ -22,8 +35,8 @@ describe('<Collapsbile />', () => {
 
   it('given a closed Collapsible fires the onOpening prop when clicked to open', () => {
     const mockOnOpening = jest.fn();
-    const collapsbile = shallow(<Collapsible trigger='Hello World' onOpening={mockOnOpening}/> );
-    const trigger = collapsbile.find('.Collapsible__trigger');
+    const collapsible = shallow(<Collapsible trigger='Hello World' onOpening={mockOnOpening}/> );
+    const trigger = collapsible.find('.Collapsible__trigger');
 
     expect(trigger).toHaveLength(1);
     trigger.simulate('click', dummyEvent);
@@ -32,8 +45,8 @@ describe('<Collapsbile />', () => {
 
   it('given an open Collapsible fires the onClosing prop when clicked to close', () => {
     const mockOnClosing = jest.fn();
-    const collapsbile = mount(<Collapsible open trigger='Hello World' onClosing={mockOnClosing}/> );
-    const trigger = collapsbile.find('.Collapsible__trigger');
+    const collapsible = mount(<Collapsible open trigger='Hello World' onClosing={mockOnClosing}/> );
+    const trigger = collapsible.find('.Collapsible__trigger');
 
     expect(trigger).toHaveLength(1);
     trigger.simulate('click', dummyEvent);
@@ -42,8 +55,8 @@ describe('<Collapsbile />', () => {
 
   it('given a closed Collapsible it fires the onOpen prop after the transistion', () => {
     const mockOnOpen = jest.fn();
-    const collapsbile = shallow(<Collapsible open trigger='Hello World' onOpen={mockOnOpen}>Some Content</Collapsible> );
-    const outer = collapsbile.find('.Collapsible__contentOuter');
+    const collapsible = shallow(<Collapsible open trigger='Hello World' onOpen={mockOnOpen}>Some Content</Collapsible> );
+    const outer = collapsible.find('.Collapsible__contentOuter');
 
     expect(outer).toHaveLength(1);
     outer.simulate('transitionEnd', dummyEvent);
@@ -52,8 +65,8 @@ describe('<Collapsbile />', () => {
 
   it('given an open Collapsible it fires the onClose prop after the transistion', () => {
     const mockOnClose = jest.fn();
-    const collapsbile = shallow(<Collapsible trigger='Hello World' onClose={mockOnClose}>Some Content</Collapsible> );
-    const outer = collapsbile.find('.Collapsible__contentOuter');
+    const collapsible = shallow(<Collapsible trigger='Hello World' onClose={mockOnClose}>Some Content</Collapsible> );
+    const outer = collapsible.find('.Collapsible__contentOuter');
 
     expect(outer).toHaveLength(1);
     outer.simulate('transitionEnd', dummyEvent);
@@ -62,11 +75,53 @@ describe('<Collapsbile />', () => {
 
   it('given a Collapsible with the handleTriggerClick prop, the handleTriggerClick prop gets fired', () => {
     const mockHandleTriggerClick = jest.fn();
-    const collapsbile = shallow(<Collapsible handleTriggerClick={mockHandleTriggerClick} trigger="Hello world" />);
-    const trigger = collapsbile.find('.Collapsible__trigger');
+    const collapsible = shallow(<Collapsible handleTriggerClick={mockHandleTriggerClick} trigger="Hello world" />);
+    const trigger = collapsible.find('.Collapsible__trigger');
 
     expect(trigger).toHaveLength(1);
     trigger.simulate('click', dummyEvent);
     expect(mockHandleTriggerClick.mock.calls).toHaveLength(1);
   })
-})
+  
+  describe('onTriggerOpening prop', () => {
+    it('is called when a closed Collapsible is triggered', () => {
+      const mockOnTriggerOpening = jest.fn();
+      const collapsible = mount(<Collapsible trigger='Hello World' onTriggerOpening={mockOnTriggerOpening} />);
+      const trigger = collapsible.find('.Collapsible__trigger');
+      
+      expect(trigger).toHaveLength(1);
+      trigger.simulate('click', dummyEvent);
+      expect(mockOnTriggerOpening.mock.calls).toHaveLength(1);
+    });
+    
+    it("is not called when a closed collapsible's open prop changes to true", () => {
+      const mockOnTriggerOpening = jest.fn();
+      const collapsible = mount(<CollapsibleStateContainer changeOpenTo={true} trigger='Hello World' onTriggerOpening={mockOnTriggerOpening} />);
+      const trigger = collapsible.find('.Collapsible__trigger');
+      
+      expect(trigger).toHaveLength(1);
+      expect(mockOnTriggerOpening.mock.calls).toHaveLength(0);
+    });
+  });
+  
+  describe('onTriggerClosing prop', () => {
+    it('is called when an open Collapsible is triggered', () => {
+      const mockOnTriggerClosing = jest.fn();
+      const collapsible = mount(<Collapsible open trigger='Hello World' onTriggerClosing={mockOnTriggerClosing} />);
+      const trigger = collapsible.find('.Collapsible__trigger');
+      
+      expect(trigger).toHaveLength(1);
+      trigger.simulate('click', dummyEvent);
+      expect(mockOnTriggerClosing.mock.calls).toHaveLength(1);
+    });
+    
+    it("is not called when an open collapsible's open prop changes to false", () => {
+      const mockOnTriggerClosing = jest.fn();
+      const collapsible = mount(<CollapsibleStateContainer changeOpenTo={false} trigger='Hello World' onTriggerClosing={mockOnTriggerClosing} />);
+      const trigger = collapsible.find('.Collapsible__trigger');
+      
+      expect(trigger).toHaveLength(1);
+      expect(mockOnTriggerClosing.mock.calls).toHaveLength(0);
+    });
+  });
+})

index.d.ts

@@ -21,6 +21,8 @@ export interface CollapsibleProps extends React.HTMLProps<Collapsible> {
   onClose?: () => void;
   onOpening?: () => void;
   onClosing?: () => void;
+  onTriggerOpening?: () => void;
+  onTriggerClosing?: () => void;
   trigger: string | React.ReactElement<any>;
   triggerWhenOpen?: string | React.ReactElement<any>;
   triggerDisabled?: boolean;