@appearhere/bloom/components/Indicators/IndicatorGroup.test.js

Appear Here's pattern library and styleguide

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import IndicatorGroup from './IndicatorGroup';

// Test component *must* be a class so refs work
/* eslint-disable react/prefer-stateless-function */
/* eslint-disable class-methods-use-this */
class TestComp extends Component {
  render() {
    return (
      <div />
    );
  }
}
/* eslint-enable class-methods-use-this */
/* eslint-enable react/prefer-stateless-function */

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(
    <IndicatorGroup>
      { indicator => indicator({ i: 0 }) }
    </IndicatorGroup>,
    div
  );
});

it('outputs children of the correct type', () => {
  let renderedComponent = null;
  const div = document.createElement('div');

  ReactDOM.render(
    <IndicatorGroup Component={TestComp}>
      { indicator => indicator({
        i: 0,
        ref: (c) => { renderedComponent = c; },
      }) }
    </IndicatorGroup>,
    div
  );

  expect(renderedComponent instanceof TestComp).toBe(true);
});

it('passes an active prop to it’s children', () => {
  let renderedComponent = null;
  const div = document.createElement('div');

  ReactDOM.render(
    <IndicatorGroup Component={TestComp}>
      { indicator => indicator({
        i: 0,
        ref: (c) => { renderedComponent = c; },
      }) }
    </IndicatorGroup>,
    div
  );

  expect('active' in renderedComponent.props).toBe(true);
});

it('passes the active prop to the correct child', () => {
  let regularComponent = null;
  let activeComponent = null;
  const div = document.createElement('div');

  ReactDOM.render(
    <IndicatorGroup Component={TestComp} activeIndicator={1}>
      { indicator => (
        <span>
          { indicator({
            i: 0,
            ref: (c) => { regularComponent = c; },
          }) }
          { indicator({
            i: 1,
            ref: (c) => { activeComponent = c; },
          }) }
        </span>
      ) }
    </IndicatorGroup>,
    div
  );

  expect(regularComponent.props.active).toBe(false);
  expect(activeComponent.props.active).toBe(true);
});

it('throws when it’s children aren’t given indices', () => {
  const div = document.createElement('div');
  let hasThrown = false;

  try {
    ReactDOM.render(
      <IndicatorGroup Component={TestComp}>
        { indicator => indicator() }
      </IndicatorGroup>,
      div
    );
  } catch (e) {
    hasThrown = true;
  }

  expect(hasThrown).toBe(true);
});