Repository URL to install this package:
|
Version:
3.7.3 ▾
|
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');
});
});