mercredi 3 janvier 2018

React test react-truncate using enzyme

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