redux-ab-test/dist/components/experiment/experiment-container.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 _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _immutable = require('immutable');

var _immutable2 = _interopRequireDefault(_immutable);

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 _experiment2 = _interopRequireDefault(_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 }; }

// eslint-disable-line no-unused-vars
describe('(Container) Experiment', function () {
  describe.skip('mapStateToProps', function () {
    it('exists', function () {
      expect(_experiment.mapStateToProps).not.toBeUndefined;
    });

    it('has correct keys', function () {
      expect((0, _keys2['default'])((0, _experiment.mapStateToProps)({ reduxAbTest: _module.initialState }, {}))).toEqual(['reduxAbTest', 'experiment', 'variation']);
    });

    it('has correct state', function () {
      var props = {
        name: 'Test-experimentName'
      };
      var store = {
        reduxAbTest: _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' }
        })
      };
      var output = (0, _experiment.mapStateToProps)(store, props);
      expect((0, _keys2['default'])(output)).toEqual(['reduxAbTest', 'experiment', 'variation']);
      var experiment = output.experiment;
      var variation = output.variation;
      expect(experiment).not.toBeNull;
      expect(variation).not.toBeNull;
      expect(experiment.toJS()).toEqual(store.reduxAbTest.getIn(['experiments', 0]).toJS());
      expect(variation.toJS()).toEqual(store.reduxAbTest.getIn(['experiments', 0, 'variations', 1]).toJS());
    });

    it('has correct experiment', function () {
      expect((0, _keys2['default'])((0, _experiment.mapStateToProps)({ reduxAbTest: _module.initialState }, {}))).toEqual(['reduxAbTest', 'experiment', 'variation']);
    });
  });

  describe.skip('mapDispatchToProps', function () {
    it('exists', function () {
      expect(_experiment.mapDispatchToProps).not.toBeUndefined;
    });
    it('has correct keys', function () {
      var dispatch = (0, _sinon.spy)();
      expect((0, _keys2['default'])((0, _experiment.mapDispatchToProps)(dispatch))).toEqual(['dispatchActivate', 'dispatchDeactivate', 'dispatchPlay', 'dispatchWin']);
    });
  });

  it.skip('renders something', function () {
    var experiment = _immutable2['default'].fromJS({
      name: 'Test-experimentName',
      id: 'Test-id',
      variations: [{ name: 'Original', weight: 10000 }, { name: 'Variation B', weight: 0 }]
    });
    var state = {
      reduxAbTest: _module.initialState.merge({
        experiments: [experiment],
        availableExperiments: {
          'Test-experimentName': 'Test-id'
        }
      })
    };
    var component = _reactTestRenderer2['default'].create(_react2['default'].createElement(
      _reactRedux.Provider,
      { store: (0, _redux.createStore)(_module2['default'], state) },
      _react2['default'].createElement(
        _experiment2['default'],
        {
          selector: 'Test-experimentName',
          experiment: experiment,
          variation: experiment.getIn(['variations', 1]),
          dispatchActivate: function () {
            function dispatchActivate() {
              console.log('dispatchActivate!');
            }

            return dispatchActivate;
          }(),
          dispatchDeactivate: function () {
            function dispatchDeactivate() {
              console.log('dispatchDeactivate!');
            }

            return dispatchDeactivate;
          }(),
          dispatchPlay: function () {
            function dispatchPlay() {
              console.log('dispatchPlay!');
            }

            return dispatchPlay;
          }(),
          dispatchWin: function () {
            function dispatchWin() {
              console.log('dispatchWin!');
            }

            return dispatchWin;
          }()
        },
        _react2['default'].createElement(
          _variation2['default'],
          {
            name: 'Original'
          },
          'Original Version'
        ),
        _react2['default'].createElement(
          _variation2['default'],
          {
            name: 'Variation B'
          },
          'B Version'
        )
      )
    ));
    expect(component).not.toBeUndefined;
  });

  describe.skip('component', function () {
    var component = void 0;
    var tree = void 0;

    beforeEach(function () {
      var state = {
        reduxAbTest: _module.initialState.merge({
          experiments: [{
            name: 'Test-experimentName',
            variations: [{ name: 'Original', weight: 10000 }, { name: 'Variation B', weight: 0 }]
          }],
          availableExperiments: {
            'Test-experimentName': 'Test-experimentName'
          }
        })
      };
      var props = {
        reduxAbTest: state.reduxAbTest,
        name: 'Test-experimentName',
        children: [_react2['default'].createElement(
          _variation2['default'],
          { name: 'Original' },
          'Test Original'
        ), _react2['default'].createElement(
          _variation2['default'],
          { name: 'Variation B' },
          'Test Variation B'
        )]
      };
      component = _reactTestRenderer2['default'].create(_react2['default'].createElement(
        _reactRedux.Provider,
        { store: (0, _redux.createStore)(_module2['default'], state) },
        _react2['default'].createElement(_experiment2['default'], props)
      ));
      tree = component.toJSON();
    });

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

    it.skip('has 1x 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']);
    });

    describe.skip('find by :id', function () {
      var props = void 0;
      var dispatchActivate = void 0;
      var dispatchDeactivate = void 0;
      var dispatchPlay = void 0;
      var dispatchWin = void 0;

      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 () {
        dispatchActivate = (0, _sinon.spy)();
        dispatchDeactivate = (0, _sinon.spy)();
        dispatchPlay = (0, _sinon.spy)();
        dispatchWin = (0, _sinon.spy)();

        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(_experiment2['default'], 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(_experiment2['default'])).to.have.length(1);
        expect(tree.type).toEqual('span');
        expect(tree.children).toEqual('Test Variation B');
      });
    });

    describe.skip('find by :selector', function () {
      var props = void 0;
      var dispatchActivate = void 0;
      var dispatchDeactivate = void 0;
      var dispatchPlay = void 0;
      var dispatchWin = void 0;

      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 () {
        dispatchActivate = (0, _sinon.spy)();
        dispatchDeactivate = (0, _sinon.spy)();
        dispatchPlay = (0, _sinon.spy)();
        dispatchWin = (0, _sinon.spy)();

        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(_experiment2['default'], 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(_experiment2['default'])).to.have.length(1);
        expect(tree.type).toEqual('span');
        expect(tree.children).toEqual('Test Variation B');
      });
    });
  });
});