Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@doodle/ab-connector / src / hoc / withAbTest.spec.js
Size: Mime:
import React from 'react';
import { shallow, mount } from 'enzyme';
import configureStore from 'redux-mock-store';
import withAbTest from './withAbTest';
import { optimizeActivate } from '../state/actions/abActions';

// We use fake timers for skipping the render timeout
jest.useFakeTimers();

describe('Test withAb', () => {
  let mockStore;
  beforeEach(() => {
    mockStore = configureStore();
  });

  it('should render wrapped component if pending is undefined', () => {
    const renderedText = 'Test';
    const renderedComponent = () => <div>{renderedText}</div>;
    const Hoc = withAbTest(renderedComponent, 'test', {});
    const store = mockStore({
      ab: {
        experiments: {},
        optimize: {},
      },
    });
    const wrappedComponent = mount(<Hoc store={store} />);

    expect(wrappedComponent.text()).toEqual(renderedText);
  });

  it('should render wrapped component if pending is defined but no experiment is pushed', () => {
    const renderedComponent = () => <div />;
    const Hoc = withAbTest(renderedComponent, 'test', {});
    const store = mockStore({
      ab: {
        experiments: {},
        optimize: {
          pending: true,
        },
      },
    });
    const dispatchSpy = jest.spyOn(store, 'dispatch');
    // Need to use shallow here to actually be able to dive and spy instance methods
    const wrappedComponent = shallow(<Hoc store={store} />).dive();
    const renderVariantSpy = jest.spyOn(wrappedComponent.instance(), 'setRenderedVariant');

    // Check that onActivateOptimize is properly called
    expect(dispatchSpy).toHaveBeenCalledTimes(1);
    expect(dispatchSpy).toHaveBeenCalledWith(optimizeActivate());

    // Check that nothing is rendered yet
    expect(renderVariantSpy).toHaveBeenCalledTimes(0);
    expect(wrappedComponent.getElement()).toBe(null);

    jest.runAllTimers();

    expect(renderVariantSpy).toHaveBeenCalledTimes(1);
    // Check if the right component is rendered
    expect(wrappedComponent.name()).toEqual('renderedComponent');
  });

  it('should render the right variant connected to the passed experiment', () => {
    const component = () => <div />;
    const variantA = () => <div />;
    const Hoc = withAbTest(component, 'test', { variantA });
    const store = mockStore({
      ab: {
        experiments: {},
        optimize: {
          pending: true,
        },
      },
    });
    const mockedExperiment = { test: { variant: 'variantA' } };

    // Need to use shallow here to actually be able to dive and spy instance methods
    const wrappedComponent = shallow(<Hoc store={store} />).dive();

    expect(wrappedComponent.getElement()).toBe(null);

    // Change incoming experiments
    wrappedComponent.setProps({ experiments: mockedExperiment });

    // Check if the right component is rendered
    expect(wrappedComponent.name()).toEqual('variantA');
  });

  it('should render the right variant connected to the passed experiment and isLocal is set', () => {
    const component = () => <div />;
    const variantA = () => <div />;
    const variantB = () => <div />;
    const Hoc = withAbTest(component, 'test', { variantA, variantB }, { isLocal: true });
    const store = mockStore({
      ab: {
        experiments: {},
        optimize: {
          pending: true,
        },
      },
    });
    const firstMockedExperiment = { test: { variant: 'variantA' } };
    const secondMockedExperiment = { test: { variant: 'variantB' } };

    // Need to use shallow here to actually be able to dive and spy instance methods
    const wrappedComponent = shallow(<Hoc store={store} />).dive();

    expect(wrappedComponent.getElement().type).toBe(component);

    // Change incoming experiments
    wrappedComponent.setProps({ experiments: firstMockedExperiment });

    // Check if the right component is rendered
    expect(wrappedComponent.name()).toEqual('variantA');

    // Change incoming experiments
    wrappedComponent.setProps({ experiments: secondMockedExperiment });

    // Check if the right component is rendered
    expect(wrappedComponent.name()).toEqual('variantB');
  });

  it('should render the right variant if aleardy passed to the constructor', () => {
    const component = () => <div />;
    const variantA = () => <div />;
    const Hoc = withAbTest(component, 'test', { variantA });
    const store = mockStore({
      ab: {
        experiments: { test: { variant: 'variantA' } },
        optimize: {
          pending: true,
        },
      },
    });

    // Need to use shallow here to actually be able to dive and spy instance methods
    const wrappedComponent = shallow(<Hoc store={store} />).dive();

    // Check if the right component is rendered
    expect(wrappedComponent.name()).toEqual('variantA');
  });

  it('should pass extra data to wrapped variant', () => {
    const component = () => <div />;
    const variantA = () => <div />;
    const Hoc = withAbTest(component, 'test', { variantA });
    const testExperiment = { variant: 'variantA', key: 'value' };
    const store = mockStore({
      ab: {
        experiments: { test: testExperiment },
        optimize: {
          pending: true,
        },
      },
    });

    // Need to use shallow here to actually be able to dive and spy instance methods
    const wrappedComponent = shallow(<Hoc store={store} />).dive();

    // Check if the right abTestData prop is rendered
    expect(wrappedComponent.props().abTestData).toEqual(testExperiment);
  });

  it('should render the original component if google_optimize returns 0', () => {
    window.google_optimize = {
      get: jest.fn(() => '0'),
    };
    const experimentId = '1';
    const component = () => <div>Test</div>;
    const variantA = () => <div />;
    const Hoc = withAbTest(component, 'test', { variantA }, { experimentId, debug: true });
    const store = mockStore({
      ab: {
        experiments: {},
        optimize: {
          pending: true,
        },
      },
    });

    // Need to use shallow here to actually be able to dive and spy instance methods
    const wrappedComponent = mount(<Hoc store={store} />);

    expect(wrappedComponent.text()).toEqual('Test');
  });
});