Skip to content

Commit

Permalink
Merge pull request #157 from glennflanagan/release/2.8.0
Browse files Browse the repository at this point in the history
Release/2.8.0
  • Loading branch information
glennflanagan authored May 15, 2020
2 parents d27ae14 + c06e0cd commit c701c04
Show file tree
Hide file tree
Showing 6 changed files with 6,806 additions and 4,201 deletions.
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
79 changes: 67 additions & 12 deletions __tests__/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
});
});
})
2 changes: 2 additions & 0 deletions index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit c701c04

Please sign in to comment.