react-experiment-hoc/dist/withExperiment.test.js

Simple hoc to provide a/b-test features.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@testing-library/react");

var _index = require("./index");

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

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

var _onFetch = function _onFetch(e) {
  var data = [{
    name: 'exp1',
    variations: [{
      name: 'var1',
      weight: 100
    }]
  }, {
    name: 'exp2',
    variations: [{
      name: 'var1',
      weight: 100
    }]
  }];
  return Promise.resolve(data.find(function (x) {
    return x.name === e;
  }).variations);
};

var RawComponent = function RawComponent(p) {
  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("span", null, "Hello ", p.experimentName, " using variant ", p.experimentVariant), _react["default"].createElement("button", {
    onClick: function onClick() {
      return p.experimentPlay();
    }
  }, "Play experiment"), _react["default"].createElement("button", {
    onClick: function onClick() {
      return p.experimentWin();
    }
  }, "Win experiment"));
};

var PrefixRawComponent = function PrefixRawComponent(p) {
  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("span", null, "Hello ", p.prefixExperimentName, " using variant ", p.prefixExperimentVariant), _react["default"].createElement("button", {
    onClick: function onClick() {
      return p.prefixExperimentPlay();
    }
  }, "Play experiment"), _react["default"].createElement("button", {
    onClick: function onClick() {
      return p.prefixExperimentWin();
    }
  }, "Win experiment"));
};

var renderHelper = function renderHelper(Component, options) {
  return (0, _react2.render)(_react["default"].createElement(_index.ExperimentProvider, {
    options: options
  }, _react["default"].createElement(Component, null)));
};

test('it renders with experiment props',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee() {
  var Component, _renderHelper, container;

  return regeneratorRuntime.wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          Component = (0, _index.withExperiment)('exp2')(RawComponent);
          _renderHelper = renderHelper(Component, {
            onFetch: jest.fn(_onFetch)
          }), container = _renderHelper.container;
          _context.next = 4;
          return (0, _react2.wait)(function () {
            return expect(container.querySelector('span').textContent).toEqual('Hello exp2 using variant var1');
          });

        case 4:
        case "end":
          return _context.stop();
      }
    }
  }, _callee);
})));
test('it calls the correct functions',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2() {
  var onPlay, onWin, onFetch, Component, _renderHelper2, getByText;

  return regeneratorRuntime.wrap(function _callee2$(_context2) {
    while (1) {
      switch (_context2.prev = _context2.next) {
        case 0:
          onPlay = jest.fn();
          onWin = jest.fn();
          onFetch = jest.fn(_onFetch);
          Component = (0, _index.withExperiment)('exp1')(RawComponent);
          _renderHelper2 = renderHelper(Component, {
            onPlay: onPlay,
            onWin: onWin,
            onFetch: onFetch
          }), getByText = _renderHelper2.getByText; // Wait for component to render

          _context2.next = 7;
          return (0, _react2.wait)(function () {
            return expect(getByText('Play experiment'));
          });

        case 7:
          expect(onFetch).toHaveBeenCalledTimes(1);
          expect(onPlay).toHaveBeenCalledTimes(0);
          expect(onWin).toHaveBeenCalledTimes(0);

          _react2.fireEvent.click(getByText('Play experiment'));

          expect(onFetch).toHaveBeenCalledTimes(1);
          expect(onPlay).toHaveBeenCalledTimes(1);
          expect(onWin).toHaveBeenCalledTimes(0);

          _react2.fireEvent.click(getByText('Win experiment'));

          expect(onFetch).toHaveBeenCalledTimes(1);
          expect(onPlay).toHaveBeenCalledTimes(1);
          expect(onWin).toHaveBeenCalledTimes(1);

        case 18:
        case "end":
          return _context2.stop();
      }
    }
  }, _callee2);
})));
test('it auto plays experiment',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee3() {
  var onPlay, onWin, onFetch, Component, _renderHelper3, getByText;

  return regeneratorRuntime.wrap(function _callee3$(_context3) {
    while (1) {
      switch (_context3.prev = _context3.next) {
        case 0:
          onPlay = jest.fn();
          onWin = jest.fn();
          onFetch = jest.fn(_onFetch);
          Component = (0, _index.withExperiment)('exp1', {
            autoPlay: true
          })(RawComponent);
          _renderHelper3 = renderHelper(Component, {
            onPlay: onPlay,
            onWin: onWin,
            onFetch: onFetch
          }), getByText = _renderHelper3.getByText; // Wait for component to render

          _context3.next = 7;
          return (0, _react2.wait)(function () {
            return expect(getByText('Play experiment'));
          });

        case 7:
          expect(onFetch).toHaveBeenCalledTimes(1);
          expect(onPlay).toHaveBeenCalledTimes(1);
          expect(onWin).toHaveBeenCalledTimes(0);

        case 10:
        case "end":
          return _context3.stop();
      }
    }
  }, _callee3);
})));
test('it renders with prefixed experiment props',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee4() {
  var Component, _renderHelper4, container;

  return regeneratorRuntime.wrap(function _callee4$(_context4) {
    while (1) {
      switch (_context4.prev = _context4.next) {
        case 0:
          Component = (0, _index.withExperiment)('exp2', {
            propPrefix: 'prefix'
          })(PrefixRawComponent);
          _renderHelper4 = renderHelper(Component, {
            onFetch: jest.fn(_onFetch)
          }), container = _renderHelper4.container;
          _context4.next = 4;
          return (0, _react2.wait)(function () {
            return expect(container.querySelector('span').textContent).toEqual('Hello exp2 using variant var1');
          });

        case 4:
        case "end":
          return _context4.stop();
      }
    }
  }, _callee4);
})));