redux-ab-test/dist/components/experiment/experiment-component.jest.js

A/B testing React components with Redux and debug tools. Isomorphic with a simple, universal interface. Well documented and lightweight. Tested in popular browsers and Node.js. Includes helpers for React, Redux, and Segment.io

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactTestRenderer = require('react-test-renderer');

var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);

var _reactRedux = require('react-redux');

var _redux = require('redux');

var _sinon = require('sinon');

var _experiment = require('./experiment');

var _variation = require('../variation');

var _variation2 = _interopRequireDefault(_variation);

var _module = require('../../module');

var _module2 = _interopRequireDefault(_module);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var reduxAbTestState = _module.initialState.merge({
  experiments: [{
    name: 'Test-experimentName',
    variations: [{ name: 'Original', weight: 10000 }, { name: 'Variation B', weight: 0 }]
  }],
  'availableExperiments': {
    'Test-experimentName': 'Test-experimentName'
  },
  'active': { 'Test-experimentName': 'Variation B' }
}); // eslint-disable-line no-unused-vars


describe('(Component) src/components/experiment/experiment.js', function () {
  var component = void 0;
  var tree = void 0;
  var props = void 0;
  var dispatchActivate = void 0;
  var dispatchDeactivate = void 0;
  var dispatchPlay = void 0;
  var dispatchWin = void 0;

  beforeEach(function () {
    dispatchActivate = (0, _sinon.spy)();
    dispatchDeactivate = (0, _sinon.spy)();
    dispatchPlay = (0, _sinon.spy)();
    dispatchWin = (0, _sinon.spy)();

    props = {
      reduxAbTest: reduxAbTestState,
      name: 'Test-experimentName',
      children: [_react2['default'].createElement(
        _variation2['default'],
        { name: 'Original' },
        'Test Original'
      ), _react2['default'].createElement(
        _variation2['default'],
        { name: 'Variation B' },
        'Test Variation B'
      )],
      experiment: reduxAbTestState.getIn(['experiments', 0]),
      variation: reduxAbTestState.getIn(['experiments', 0, 'variations', 1]),
      dispatchActivate: dispatchActivate,
      dispatchDeactivate: dispatchDeactivate,
      dispatchPlay: dispatchPlay,
      dispatchWin: dispatchWin
    };
    component = _reactTestRenderer2['default'].create(_react2['default'].createElement(
      _reactRedux.Provider,
      { store: (0, _redux.createStore)(_module2['default'], { reduxAbTest: reduxAbTestState }) },
      _react2['default'].createElement(_experiment.Experiment, props)
    ));
    tree = component.toJSON();
  });

  it('exists', function () {
    expect(component).not.toBeUndefined;
  });

  it('has 1x rendered Experiment', function () {
    expect(tree).toMatchSnapshot();
    expect(tree.type).toEqual('span');
    expect(tree.children).toEqual(['Test Variation B']);
  });

  it('has 1x rendered variation', function () {
    expect(tree).toMatchSnapshot();
    expect(tree.type).toEqual('span');
    expect(tree.props['data-experiment-id']).toBeUndefined;
    expect(tree.props['data-experiment-name']).toEqual('Test-experimentName');
    expect(tree.props['data-variation-id']).toBeUndefined;
    expect(tree.props['data-variation-name']).toEqual('Variation B');
    expect(tree.children).toEqual(['Test Variation B']);
  });

  it('wraps the text children in a Variation', function () {
    props['children'] = 'Testing a single child';
    component = _reactTestRenderer2['default'].create(_react2['default'].createElement(
      _reactRedux.Provider,
      { store: (0, _redux.createStore)(_module2['default'], { reduxAbTest: reduxAbTestState }) },
      _react2['default'].createElement(_experiment.Experiment, props)
    ));
    tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    expect(tree.type).toEqual('span');
    expect(tree.props['data-experiment-id']).toBeUndefined;
    expect(tree.props['data-experiment-name']).toEqual('Test-experimentName');
    expect(tree.props['data-variation-id']).toBeUndefined;
    expect(tree.props['data-variation-name']).toEqual('Variation B');
    expect(tree.children).toEqual(['Testing a single child']);
  });

  it('wraps the component children in a Variation', function () {
    props['children'] = _react2['default'].createElement(
      'div',
      null,
      'Testing a single child'
    );
    component = _reactTestRenderer2['default'].create(_react2['default'].createElement(
      _reactRedux.Provider,
      { store: (0, _redux.createStore)(_module2['default'], { reduxAbTest: reduxAbTestState }) },
      _react2['default'].createElement(_experiment.Experiment, props)
    ));
    tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    expect(component).not.toBeUndefined;
    expect(tree.type).toEqual('div');
    expect(tree.props['data-experiment-id']).toBeUndefined;
    expect(tree.props['data-experiment-name']).toEqual('Test-experimentName');
    expect(tree.props['data-variation-id']).toBeUndefined;
    expect(tree.props['data-variation-name']).toEqual('Variation B');
    expect(tree.children).toEqual(['Testing a single child']);
  });

  it('renders null on blank children', function () {
    props['children'] = [];
    component = _reactTestRenderer2['default'].create(_react2['default'].createElement(
      _reactRedux.Provider,
      { store: (0, _redux.createStore)(_module2['default'], { reduxAbTest: reduxAbTestState }) },
      _react2['default'].createElement(_experiment.Experiment, props)
    ));
    tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    expect(component).not.toBeUndefined;
    expect(tree).toBeNull;
  });

  it('creates Ad-hoc experiments');

  it('should update on componentWillReceiveProps');

  describe.skip('find by :id', function () {
    var reduxAbTestState = _module.initialState.merge({
      experiments: [{
        id: 'Test-id',
        name: 'Test-experimentName',
        variations: [{ name: 'Original', weight: 10000 }, { name: 'Variation B', weight: 0 }]
      }],
      'availableExperiments': { 'Test-id': 'Test-id' },
      'active': { 'Test-id': 'Variation B' }
    });

    beforeEach(function () {
      props = {
        reduxAbTest: reduxAbTestState,
        id: 'Test-id',
        children: [_react2['default'].createElement(
          _variation2['default'],
          { name: 'Original' },
          'Test Original'
        ), _react2['default'].createElement(
          _variation2['default'],
          { name: 'Variation B' },
          'Test Variation B'
        )],
        dispatchActivate: dispatchActivate,
        dispatchDeactivate: dispatchDeactivate,
        dispatchPlay: dispatchPlay,
        dispatchWin: dispatchWin
      };
      component = _reactTestRenderer2['default'].create(_react2['default'].createElement(
        _reactRedux.Provider,
        { store: (0, _redux.createStore)(_module2['default'], { reduxAbTest: reduxAbTestState }) },
        _react2['default'].createElement(_experiment.Experiment, props)
      ));
      tree = component.toJSON();
    });

    it('exists', function () {
      expect(component).not.toBeUndefined;
      expect(component.html()).to.be.present;
    });

    it('has 1x rendered Experiment', function () {
      expect(component.find(_experiment.Experiment)).to.have.length(1);
      expect(tree.type).toEqual('span');
      expect(tree.children).toEqual('Test Variation B');
    });
  });

  describe.skip('find by :selector', function () {
    var reduxAbTestState = _module.initialState.merge({
      experiments: [{
        id: 'Test-id',
        name: 'Test-experimentName',
        component: {
          key: 'Example component key selector'
        },
        variations: [{ name: 'Original', weight: 10000 }, { name: 'Variation B', weight: 0 }]
      }],
      availableExperiments: {
        'Example component key selector': 'Test-id'
      },
      active: { 'Test-id': 'Variation B' },
      key_path: ['component', 'key']
    });

    beforeEach(function () {
      props = {
        reduxAbTest: reduxAbTestState,
        selector: 'Example component key selector',
        children: [_react2['default'].createElement(
          _variation2['default'],
          { name: 'Original' },
          'Test Original'
        ), _react2['default'].createElement(
          _variation2['default'],
          { name: 'Variation B' },
          'Test Variation B'
        )],
        dispatchActivate: dispatchActivate,
        dispatchDeactivate: dispatchDeactivate,
        dispatchPlay: dispatchPlay,
        dispatchWin: dispatchWin
      };
      component = _reactTestRenderer2['default'].create(_react2['default'].createElement(
        _reactRedux.Provider,
        { store: (0, _redux.createStore)(_module2['default'], { reduxAbTest: reduxAbTestState }) },
        _react2['default'].createElement(_experiment.Experiment, props)
      ));
      tree = component.toJSON();
    });

    it('exists', function () {
      expect(component).not.toBeUndefined;
      expect(component.html()).to.be.present;
    });

    it('has 1x rendered Experiment', function () {
      expect(component.find(_experiment.Experiment)).to.have.length(1);
      expect(tree.type).toEqual('span');
      expect(tree.children).toEqual('Test Variation B');
    });
  });
});