4

I have a component that has a getChildContext() method and children that receive that context which is derived from the props of the parent.

How do I test that they have received it?

Here is the code for the components... some tab components.

The tab:

function _handleTabChange(eventKey, id, tabsChange, e) {
  e.preventDefault();
  tabsChange({ id, eventKey });
}

const _Tab = ({ eventKey, children, ...props }, { activeKey, parentContainer, tabsChange }) => (
  <li className={classNames('b-tab', { active: eventKey === activeKey })} {...props}>
    <a href="#"
      role="tab"
      data-toggle="tab"
      onClick={_handleTabChange.bind(this, eventKey, parentContainer, tabsChange)}>
      {children}
    </a>
  </li>
);

The Tab Container:

class _TabContainer extends Component {

  static displayName = 'TabContainer'

  static propTypes = {
    children: PropTypes.node.isRequired,
    tabsAddContainer: PropTypes.func.isRequired,
    tabsRemoveContainer: PropTypes.func.isRequired,
    tabsChange: PropTypes.func.isRequired,
    tabs: PropTypes.object.isRequired,
    tabContainerID: PropTypes.string,
  }

  static childContextTypes = {
    parentContainer: PropTypes.string.isRequired,
    tabsChange: PropTypes.func.isRequired,
    activeKey: PropTypes.number.isRequired,
  }

  constructor(props) {
    super(props);
    this.clones = Children.map(this.props.children, (element, eventKey) => {
      if (element.props.active) {
        this.defaultActive = eventKey;
      }
      console.log("defaultActive", this.defaultActive);
      return cloneElement(element, { eventKey });
    });
  }

  getChildContext() {
    const { tabContainerID, tabsChange, tabs } = this.props;
    //activeKey is tabs[tabContainerID] unless it hasn't been instantiated, in which case
    //it is the defaultActive gathered by mapping over Tabs to find one with an active prop
    const activeKey = (tabs && tabs[tabContainerID] && tabs[tabContainerID] !== '') ?
      tabs[tabContainerID] :
      this.defaultActive;
    return {
      parentContainer: tabContainerID,
      activeKey,
      tabsChange,
    };
  }

  componentWillMount() {
    const { tabContainerID, tabsAddContainer } = this.props;
    if (tabContainerID) {
      tabsAddContainer({ tabContainerID, defaultActive: this.defaultActive });
    }
  }

  componentWillUnmount() {
    const { tabContainerID, tabsRemoveContainer } = this.props;
    if (tabContainerID) {
      tabsRemoveContainer(tabContainerID);
    }
  }

  defaultActive = 0;

  render() {
    const { children, tabsChange, ...restProps } = this.props;
    return (
      <div {...restProps} className='tab-container'>
        <ul className='nav nav-tabs nav-default' role='tablist'>
          {this.clones}
        </ul>
      </div>
    );
  }
}
realisation
  • 475
  • 6
  • 19

1 Answers1

3

Actually, this is not necessary - instead of testing the context by telling whether or not the child actually ended up with the proper contexts, you can trust getChildContext() and merely test whether that returns the expected data.

For this, create a function to return the logic necessary and test that function, which will be invoked in getChildContext().

realisation
  • 475
  • 6
  • 19