Skip to content

Commit 845bfaf

Browse files
author
Guy
committed
remove experimentName
1 parent ee6a719 commit 845bfaf

13 files changed

+52
-132
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Changes in 2.1
22
- Added the ```parametrizeComponent``` function that takes in experiment information and a component and parametrizes the component with the experiment parameters as props.
3-
- Added the ability to pass in an array of experiment parameters instead of only the experiment name
3+
- Added the requirement to pass in an array of experiment parameters as props to the Parametrize component and removed the experimentName prop.

‎README.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,8 @@ The implementation of all the components provided by this library are wrappers a
7272
7373
**experiment**: This is an instance of a PlanOut.js experiment / namespace class or the base experimentClass. [REQUIRED]
7474
75-
**experimentName**: This is the name of the experiment. It is particularly important if you're using a PlanOut.js namespace, since this corresponds to the name of the experiment WITHIN the namespace, not the name of the namespace itself. This is required so that exposure gets logged correctly. [REQUIRED, if params prop not provided]
7675
77-
**params**: This is the list of experiment parameters that you want to use to parametrize the component. [REQUIRED, if experimentName not provided]
76+
**params**: This is the list of experiment parameters that you want to use to parametrize the component. They should correspond to the parameter names defined in your PlanOut script / experiment definition. [REQUIRED]
7877
7978
[any arbitrary prop]: You can pass arbitrary props to the Parametrize component and they will be available via context.experimentProps in all descendants of the Parametrize component.
8079
@@ -134,7 +133,7 @@ There are two common types of experimental parameters:
134133
While the core component of this library focuses on the first type of parameter, it also includes some convenience components built around the Parametrize component for running "branching" experiments using the ```ABTest``` component.
135134
136135
```javascript
137-
<ABTest on='foo' experiment={TestNamespace} experimentName='SimpleExperiment' shouldEnroll={this.shouldEnroll()}>
136+
<ABTest on='foo' experiment={TestNamespace} shouldEnroll={this.shouldEnroll()}>
138137
<When value='foobar'>
139138
variation 1
140139
</When>
@@ -158,8 +157,6 @@ The ABTest component takes the following as props:
158157
159158
**on** - the parameter name to "branch" off [REQUIRED]
160159
161-
**experimentName** - the name of the experiment with which the component corresponds. This is particularly important if you are passing in a namespace class. If you are passing in a namespace class then experimentName should correspond to the name of the experiment within the namespace that this component should handle. Use this if you want your component to deal with any arbitrary number of parameters. [REQUIRED]
162-
163160
**shouldEnroll** - this determines whether or not the user should be enrolled in the experiment or not. It defaults to true. If false is passed, nothing is returned and no exposure is logged. [OPTIONAL]
164161
165162
## Customized Experiment Components

‎__tests__/testExperiment.js renamed to ‎__tests__/testAbTest.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('Test experiment component', () => {
1717

1818
it('renders only one, correct variation', () => {
1919
const experimentComponent = TestUtils.renderIntoDocument(
20-
<ReactExperiments.ABTest on='foo' experiment={exp} experimentName={exp.getName()}>
20+
<ReactExperiments.ABTest on='foo' experiment={exp}>
2121
<ReactExperiments.When value='Variation A'>
2222
<span className='variation-a'>
2323
foo
@@ -48,7 +48,7 @@ describe('Test experiment component', () => {
4848

4949
it('renders the default variation when needed', () => {
5050
const experimentComponent = TestUtils.renderIntoDocument(
51-
<ReactExperiments.ABTest experiment={exp} experimentName='SampleExperiment' on='foo'>
51+
<ReactExperiments.ABTest experiment={exp} on='foo'>
5252
<ReactExperiments.When value='foo'>
5353
foo
5454
</ReactExperiments.When>
@@ -67,7 +67,7 @@ describe('Test experiment component', () => {
6767

6868
it('renders nothing with no default variation', () => {
6969
const experimentComponent = TestUtils.renderIntoDocument(
70-
<ReactExperiments.ABTest experiment={exp} on='foob' experimentName='SampleExperiment'>
70+
<ReactExperiments.ABTest experiment={exp} on='foob' >
7171
<ReactExperiments.When value = 'Variation B'>
7272
<div className='foobar'>
7373
test
@@ -83,7 +83,7 @@ describe('Test experiment component', () => {
8383

8484
it('handles enrollment properly', () => {
8585
const experimentComponent = TestUtils.renderIntoDocument(
86-
<ReactExperiments.ABTest on='foo' experiment={exp} shouldEnroll={false} experimentName='SampleExperiment'>
86+
<ReactExperiments.ABTest on='foo' experiment={exp} shouldEnroll={false}>
8787
<ReactExperiments.When value='Variation B'>
8888
<div className='foo'>
8989
test
@@ -97,7 +97,7 @@ describe('Test experiment component', () => {
9797
).length).toBe(0);
9898

9999
const experimentComponent2 = TestUtils.renderIntoDocument(
100-
<ReactExperiments.ABTest on='foo'experiment={exp} experimentName='SampleExperiment' shouldEnroll={true}>
100+
<ReactExperiments.ABTest on='foo'experiment={exp} shouldEnroll={true}>
101101
<ReactExperiments.When value='Variation B'>
102102
<div className='foo'>
103103
test

‎__tests__/testExperimentClass.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ let logs = [];
55
const paramKey = 'foo';
66
const paramVal = 'bar';
77
class experiment extends ReactExperiments.experimentClass {
8-
getParams() {
9-
let ret = {};
10-
ret[paramKey] = paramVal;
11-
return ret;
8+
get(param) {
9+
if (param === paramKey) {
10+
return paramVal;
11+
}
1212
}
1313

1414
logExposure(data) {
@@ -47,7 +47,7 @@ describe('Test experiment', () => {
4747
});
4848

4949
const parametrized = TestUtils.renderIntoDocument(
50-
<ReactExperiments.Parametrize experiment={expClass} experimentName={expClass.getName()}>
50+
<ReactExperiments.Parametrize experiment={expClass} params={[paramKey]}>
5151
<Comp />
5252
</ReactExperiments.Parametrize>
5353
);

‎__tests__/testNamespace.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('Test that experiment component works with namespaces', () => {
1212
it('works when the user is enrolled in the namespace', () => {
1313
const namespace = new DefaultNamespace(expInitializeObject);
1414
const experimentComponent = TestUtils.renderIntoDocument(
15-
<ReactExperiments.ABTest on='foo' experimentName='SampleExperiment' experiment={namespace}>
15+
<ReactExperiments.ABTest on='foo' experiment={namespace}>
1616
<ReactExperiments.When value='Variation A'>
1717
<span className='variation-a'>
1818
foo
@@ -43,7 +43,7 @@ describe('Test that experiment component works with namespaces', () => {
4343
it('default component works when the user is not enrolled in a namespace', () => {
4444
const emptyNamespace = new DefaultEmptyNamespace(expInitializeObject);
4545
const experimentComponent = TestUtils.renderIntoDocument(
46-
<ReactExperiments.ABTest on='foo' experimentName='SampleExperiment' experiment={emptyNamespace}>
46+
<ReactExperiments.ABTest on='foo' experiment={emptyNamespace}>
4747
<ReactExperiments.When value='Variation A'>
4848
<span className='variation-a'>
4949
foo
@@ -92,7 +92,7 @@ describe('Test that experiment component works with namespaces', () => {
9292
});
9393
SampleComponent = ReactExperiments.withExperimentParams(SampleComponent);
9494
const experimentComponent = TestUtils.renderIntoDocument(
95-
<ReactExperiments.Parametrize experimentName='SampleExperiment' experiment={namespace}>
95+
<ReactExperiments.Parametrize params={['foo']} experiment={namespace}>
9696
<SampleComponent />
9797
</ReactExperiments.Parametrize>
9898
);
@@ -111,7 +111,7 @@ describe('Test that experiment component works with namespaces', () => {
111111
expect(getLogLength()).toEqual(1);
112112

113113
const experimentComponent2 = TestUtils.renderIntoDocument(
114-
<ReactExperiments.Parametrize experimentName='SimpleExperiment' experiment={namespace}>
114+
<ReactExperiments.Parametrize params={['fz']} experiment={namespace}>
115115
<SampleComponent />
116116
</ReactExperiments.Parametrize>
117117
);
@@ -148,7 +148,7 @@ describe('Test that experiment component works with namespaces', () => {
148148
});
149149
SampleComponent = ReactExperiments.withExperimentParams(SampleComponent);
150150
const experimentComponent = TestUtils.renderIntoDocument(
151-
<ReactExperiments.Parametrize experimentName='SampleExperiment' experiment={emptyNamespace}>
151+
<ReactExperiments.Parametrize params={['foo']} experiment={emptyNamespace}>
152152
<SampleComponent />
153153
</ReactExperiments.Parametrize>
154154
);
@@ -184,7 +184,7 @@ describe('Test that experiment component works with namespaces', () => {
184184
});
185185
SampleComponent = ReactExperiments.withExperimentParams(SampleComponent);
186186
const experimentComponent = TestUtils.renderIntoDocument(
187-
<ReactExperiments.Parametrize experimentName='SampleExperiment2' experiment={namespace}>
187+
<ReactExperiments.Parametrize params={['foobar']} experiment={namespace}>
188188
<SampleComponent />
189189
</ReactExperiments.Parametrize>
190190
);

‎__tests__/testParametrize.js

Lines changed: 4 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('Test parametrize component', () => {
2323
});
2424
const ParametrizedComponentWithParams = ReactExperiments.withExperimentParams(ParametrizedComponent);
2525
const parametrized = TestUtils.renderIntoDocument(
26-
<ReactExperiments.Parametrize experiment={exp} experimentName={exp.getName()}>
26+
<ReactExperiments.Parametrize experiment={exp} params={['foo']}>
2727
<ParametrizedComponentWithParams />
2828
</ReactExperiments.Parametrize>
2929
);
@@ -73,7 +73,7 @@ describe('Test parametrize component', () => {
7373
});
7474

7575
const parametrized = TestUtils.renderIntoDocument(
76-
<ReactExperiments.Parametrize experiment={exp} experimentName={exp.getName()}>
76+
<ReactExperiments.Parametrize experiment={exp} params={['foo', 'test2']}>
7777
<ParametrizedComponent />
7878
</ReactExperiments.Parametrize>
7979
);
@@ -108,7 +108,7 @@ describe('Test parametrize component', () => {
108108
const Parametrized = React.createClass({
109109
render() {
110110
return (
111-
<ReactExperiments.Parametrize experiment={exp} experimentName={exp.getName()}>
111+
<ReactExperiments.Parametrize experiment={exp} params={['foo']}>
112112
<TestComponent test={this.props.test}/>
113113
</ReactExperiments.Parametrize>
114114
);
@@ -186,7 +186,7 @@ describe('Test parametrize component', () => {
186186

187187
const otherVal = 'ha';
188188
const parametrized = TestUtils.renderIntoDocument(
189-
<ReactExperiments.Parametrize experiment={exp} experimentName={exp.getName()}>
189+
<ReactExperiments.Parametrize experiment={exp} params={['foo', 'test2']}>
190190
<ExpButton other={otherVal} />
191191
</ReactExperiments.Parametrize>
192192
);
@@ -206,46 +206,6 @@ describe('Test parametrize component', () => {
206206
).length).toBe(1);
207207
});
208208

209-
it('should work with the higher order component and experiment name', () => {
210-
const Buttons = ReactExperiments.parametrizeComponent(exp, exp.getName(), React.createClass({
211-
render() {
212-
return (
213-
<div>
214-
<div className={this.props.foo}>
215-
test
216-
</div>
217-
<div className={this.props.test2}>
218-
testing2
219-
</div>
220-
<div className={this.props.other}>
221-
testing3
222-
</div>
223-
</div>
224-
);
225-
}
226-
}));
227-
228-
const otherVal = 'ha';
229-
const parametrized = TestUtils.renderIntoDocument(
230-
<Buttons other={otherVal} />
231-
);
232-
233-
expect(TestUtils.scryRenderedDOMComponentsWithClass(
234-
parametrized,
235-
exp.get('foo')
236-
).length).toBe(1);
237-
238-
expect(TestUtils.scryRenderedDOMComponentsWithClass(
239-
parametrized,
240-
exp.get('test2')
241-
).length).toBe(1);
242-
243-
expect(TestUtils.scryRenderedDOMComponentsWithClass(
244-
parametrized,
245-
otherVal
246-
).length).toBe(1);
247-
});
248-
249209
it('should work with higher order component and list of params', () => {
250210
const Buttons = ReactExperiments.parametrizeComponent(exp, ['foo', 'test2'], React.createClass({
251211
render() {

‎dist/react-experiments.js

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -196,11 +196,6 @@ return /******/ (function(modules) { // webpackBootstrap
196196
}
197197

198198
_createClass(experimentClass, {
199-
getParams: {
200-
value: function getParams(experimentName) {
201-
throw "IMPLEMENT getParams";
202-
}
203-
},
204199
get: {
205200
value: function get(parameter) {
206201
throw "IMPLEMENT get";
@@ -252,9 +247,7 @@ return /******/ (function(modules) { // webpackBootstrap
252247

253248
getDefaultProps: function getDefaultProps() {
254249
return {
255-
shouldEnroll: true,
256-
param: null,
257-
experimentName: null
250+
shouldEnroll: true
258251
};
259252
},
260253

@@ -277,16 +270,12 @@ return /******/ (function(modules) { // webpackBootstrap
277270
var on = _props.on;
278271
var shouldEnroll = _props.shouldEnroll;
279272
var experiment = _props.experiment;
280-
var experimentName = _props.experimentName;
281273

282274
if (!shouldEnroll) {
283275
return null;
284276
} else if (!experiment) {
285277
console.error("You must pass in an experiment instance as a prop");
286278
return null;
287-
} else if (!experimentName) {
288-
console.error("You must pass an experiment name as prop");
289-
return null;
290279
} else if (!on) {
291280
console.error("You must pass an 'on' prop indicating what parameter you want to branch off");
292281
return null;
@@ -296,7 +285,7 @@ return /******/ (function(modules) { // webpackBootstrap
296285
Parametrize,
297286
{
298287
experiment: experiment,
299-
experimentName: experimentName,
288+
params: [on],
300289
on: on,
301290
enrolledInVariation: this.enrolledInVariation,
302291
hasRendered: this.state.hasRendered },
@@ -349,26 +338,25 @@ return /******/ (function(modules) { // webpackBootstrap
349338
fetchParameters: function fetchParameters() {
350339
var _props = this.props;
351340
var experiment = _props.experiment;
352-
var experimentName = _props.experimentName;
353341
var params = _props.params;
354342

355-
if (!experiment || !experiment.getParams) {
343+
if (!experiment || !experiment.get) {
356344
console.error("You must pass in an experiment instance as a prop");
357345
return;
346+
} else if (!params) {
347+
console.error("You mass pass a list of params in as a prop");
348+
return;
358349
}
359350

360351
var paramsObj = {};
361-
if (experimentName) {
362-
paramsObj = experiment.getParams(experimentName) || {};
363-
} else if (params) {
364-
for (var i = 0; i < params.length; i++) {
365-
var param = params[i];
366-
var paramVal = experiment.get(param);
367-
if (paramVal !== null && paramVal !== undefined) {
368-
paramsObj[param] = paramVal;
369-
}
352+
for (var i = 0; i < params.length; i++) {
353+
var param = params[i];
354+
var paramVal = experiment.get(param);
355+
if (paramVal !== null && paramVal !== undefined) {
356+
paramsObj[param] = paramVal;
370357
}
371358
}
359+
372360
if (Object.keys(paramsObj).length !== 0 && experiment.previouslyLogged() === false) {
373361
experiment.logExposure({
374362
params: params,
@@ -450,13 +438,6 @@ return /******/ (function(modules) { // webpackBootstrap
450438
module.exports = function (experiment, experimentParams, Component) {
451439
return React.createClass({
452440
render: function render() {
453-
if (typeof experimentParams === "string") {
454-
return React.createElement(
455-
Parametrize,
456-
{ experiment: experiment, experimentName: experimentParams, _passThrough: true },
457-
React.createElement(Component, this.props)
458-
);
459-
}
460441
return React.createElement(
461442
Parametrize,
462443
{ experiment: experiment, params: experimentParams, _passThrough: true },

0 commit comments

Comments
 (0)