I am using react-truncate for a project. The basic setup with a expand-collapse and ellipsis is expected to be like this:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Truncate from 'react-truncate';
class ReadMore extends Component {
constructor(...args) {
super(...args);
this.state = {
expanded: false,
truncated: false
};
this.handleTruncate = this.handleTruncate.bind(this);
this.toggleLines = this.toggleLines.bind(this);
}
handleTruncate(truncated) {
if (this.state.truncated !== truncated) {
this.setState({
truncated
});
}
}
toggleLines(event) {
event.preventDefault();
this.setState({
expanded: !this.state.expanded
});
}
render() {
const {
children,
more,
less,
lines
} = this.props;
const {
expanded,
truncated
} = this.state;
return (
<div>
<Truncate
lines={!expanded && lines}
ellipsis={(
<span> <a href='#' onClick={this.toggleLines}>{more}</a></span>
)}
onTruncate={this.handleTruncate}
>
{children}
</Truncate>
{!truncated && expanded && (
<span> <a href='#' onClick={this.toggleLines}>{less}</a></span>
)}
</div>
);
}
}
ReadMore.defaultProps = {
lines: 3,
more: 'Read more',
less: 'Show less'
};
ReadMore.propTypes = {
children: PropTypes.node.isRequired,
text: PropTypes.node,
lines: PropTypes.number
};
export default ReadMore;
I want to test the expand-collapse functionality in my project using enzyme, so far I can verify the basic setup and default behavior:
const wrapper = shallow(<ReadMore />); // where above code is defined
expect(wrapper.state('expanded')).to.equal(false); // passes
But am stuck with how to stimulate the expand click
behavior on this, I tried
wrapper.toggleLines;
// returns undefined.
The debug output console.log(wrapper.debug());
is
<Truncate lines={3} ellipsis= onTruncate={[Function: bound handleTruncate]} trimWhitespace={false} />
I am not sure how to access the onClick
property of the Read more
span
Basically what I am looking for is something like:
const wrapper = shallow(<ExpandCollapse />); // where above code is defined
expect(wrapper.state('expanded')).to.equal(false); // passes
//simulate onclick on Expand button
expect(wrapper.state('expanded')).to.equal(true); // should pass
//then trigger onclick on Collapse button
expect(wrapper.state('expanded')).to.equal(false); // should pass
Any ideas on how to proceed on this? Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire