Skip to content

Commit aa4dfeb

Browse files
rafinutshaw-optimizelyrafinutshaw-optimizely
committed
Add more tests
1 parent d8c88ef commit aa4dfeb

File tree

1 file changed

+263
-11
lines changed

1 file changed

+263
-11
lines changed

‎bug_bash/src/pages/fetch-qualified-segments/fetch-qualified-segments.tsx

Lines changed: 263 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,239 @@ import React, { useEffect, useState } from 'react';
22
import { createInstance, OptimizelyProvider, useDecision } from '@optimizely/react-sdk';
33
import { OptimizelyReturnType } from './fetch-qualified-segments.types';
44
import { OptimizelySegmentOption } from '@optimizely/optimizely-sdk';
5+
import { OdpSegmentManager } from '@optimizely/optimizely-sdk/lib/core/odp/odp_segment_manager';
56

6-
const optimizelyClient = createInstance({
7-
sdkKey: process.env.REACT_APP_OPTIMIZELY_SDK_KEY,
8-
});
7+
// const optimizelyClient = createInstance({
8+
// sdkKey: process.env.REACT_APP_OPTIMIZELY_SDK_KEY,
9+
// });
910

1011
export const FetchQualifiedSegments: React.FC = () => {
12+
// const optimizelyClient = createInstance({
13+
// sdkKey: 'KZbunNn9bVfBWLpZPq2XC4',
14+
// });
15+
const [featureKey, setFeatureKey] = useState<string>('some_key');
1116
const [isSegmentsFetched, setIsSegmentsFetched] = useState<boolean | null>(null);
1217
const [readyResult, setReadyResult] = useState<OptimizelyReturnType>();
1318

14-
const [userId] = useState<string>('matjaz-user-1');
15-
// const [userId] = useState<string>("matjaz-user-2");
16-
// const [userId] = useState<string>("matjaz-user-3");
19+
const [enableDecision, setEnableDecision] = useState<boolean>(false);
20+
// 1. console should show two qualified segments and a viud
21+
// const [userId] = useState<string>('matjaz-user-1');
22+
23+
// 2. console should show three qualified segments and the same viud
24+
// const [userId] = useState<string>('matjaz-user-2');
25+
26+
// 3. console should show no qualified segments and the same viud
27+
// const [userId] = useState<string>('matjaz-user-3');
28+
29+
// 4. console should show no qualified segments and the same viud
1730
// const [userId] = useState<null>(null);
1831

32+
// 5. the network tab zaious call should be sending the vuid_xxxxx as the vuid and there shouldnt be a fs_userid sent
33+
// const [userId] = useState<string>('vuid_overridden');
34+
35+
// 6. the network tab should show 2 graphql calls
36+
// useEffect(() => {
37+
// const callSegments = async () => {
38+
// if (readyResult?.success) {
39+
// await optimizelyClient.fetchQualifiedSegments([OptimizelySegmentOption.RESET_CACHE]);
40+
// await optimizelyClient.fetchQualifiedSegments();
41+
// }
42+
// };
43+
// callSegments();
44+
// }, [readyResult?.success]);
45+
46+
// 7. the network tab should show 2 graphql calls
47+
// useEffect(() => {
48+
// const callSegments = async () => {
49+
// if (readyResult?.success) {
50+
// await optimizelyClient.fetchQualifiedSegments([OptimizelySegmentOption.IGNORE_CACHE]);
51+
// await optimizelyClient.fetchQualifiedSegments();
52+
// }
53+
// };
54+
// callSegments();
55+
// }, [readyResult?.success]);
56+
57+
// 8. there should be an error for the second call to fetchQualifiedSegments the second call should work fine
58+
// const [userId] = useState<string>('random-user-id');
59+
60+
// const prepareClient = () => {
61+
// console.log('optimizelyClient');
62+
// optimizelyClient.onReady().then(async (res: any) => {
63+
// setReadyResult(res);
64+
// setIsSegmentsFetched(true);
65+
// await optimizelyClient.fetchQualifiedSegments([OptimizelySegmentOption.IGNORE_CACHE]);
66+
// });
67+
// };
68+
69+
// 9. fetch should return error in the console, for segment fetch
70+
// const optimizelyClient = createInstance({
71+
// sdkKey: 'TbrfRLeKvLyWGusqANoeR',
72+
// });
73+
// const [userId] = useState<string>('matjaz-user-2');
74+
75+
// const prepareClient = () => {
76+
// optimizelyClient.onReady().then(async (res: any) => {
77+
// setReadyResult(res);
78+
// setIsSegmentsFetched(true);
79+
// await optimizelyClient.fetchQualifiedSegments([OptimizelySegmentOption.IGNORE_CACHE]);
80+
// });
81+
// };
82+
83+
// 10. odp network error
84+
// const optimizelyClient = createInstance({
85+
// logLevel: 'debug',
86+
// sdkKey: 'KZbunNn9bVfBWLpZPq2XC4', // '4XLn6c6LsxMuYKVBLtaKp',
87+
// datafileOptions: {
88+
// urlTemplate: 'https://httpstat.us/521?sdkKey=%s',
89+
// },
90+
// });
91+
// const [userId] = useState<string>('matjaz-user-2');
92+
93+
// const prepareClient = () => {
94+
// optimizelyClient.onReady().then(async (res: any) => {
95+
// setReadyResult(res);
96+
// setIsSegmentsFetched(true);
97+
// await optimizelyClient.fetchQualifiedSegments([OptimizelySegmentOption.IGNORE_CACHE]);
98+
// });
99+
// };
100+
101+
// 11. segment api timeout error
102+
// const optimizelyClient = createInstance({
103+
// sdkKey: 'TbrfRLeKvLyWGusqANoeR',
104+
// odpOptions: {
105+
// segmentsApiTimeout: 1,
106+
// },
107+
// });
108+
// const [userId] = useState<string>('matjaz-user-2');
109+
110+
// const prepareClient = () => {
111+
// optimizelyClient.onReady().then(async (res: any) => {
112+
// setReadyResult(res);
113+
// setIsSegmentsFetched(true);
114+
// await optimizelyClient.fetchQualifiedSegments([OptimizelySegmentOption.IGNORE_CACHE]);
115+
// });
116+
// };
117+
118+
// 12. should work fine for proper timeout value
119+
// const optimizelyClient = createInstance({
120+
// sdkKey: 'TbrfRLeKvLyWGusqANoeR',
121+
// odpOptions: {
122+
// segmentsApiTimeout: 100000,
123+
// },
124+
// });
125+
// const [userId] = useState<string>('matjaz-user-2');
126+
127+
// const prepareClient = () => {
128+
// optimizelyClient.onReady().then(async (res: any) => {
129+
// setReadyResult(res);
130+
// setIsSegmentsFetched(true);
131+
// await optimizelyClient.fetchQualifiedSegments([OptimizelySegmentOption.IGNORE_CACHE]);
132+
// });
133+
// };
134+
135+
// useEffect(prepareClient, []);
136+
137+
// 14. call decide for a segment user is not a part of hence user should not qualify,
138+
// later make the user part of the segment and call decide again to check if user qualifies
139+
// const optimizelyClient = createInstance({
140+
// sdkKey: 'TbrfRLeKvLyWGusqANoeR',
141+
// });
142+
// const [userId] = useState<string>('matjaz-user-2');
143+
144+
// const prepareClient = () => {
145+
// optimizelyClient.onReady().then(async (res: any) => {
146+
// setReadyResult(res);
147+
// setFeatureKey('test_feature_1')
148+
// setIsSegmentsFetched(true);
149+
// setEnableDecision(true);
150+
// });
151+
// };
152+
153+
// 15. test fetchQualifiedSegments with different odpOptions
154+
// const optimizelyClient = createInstance({
155+
// sdkKey: 'TbrfRLeKvLyWGusqANoeR',
156+
// odpOptions: {
157+
// segmentsCacheSize: 1,
158+
// segmentsApiTimeout: 100000,
159+
// segmentManager: new OdpSegmentManager()
160+
// segmentsCache: true,
161+
// eventManager:true,
162+
// eventApiTimeout: 100000,
163+
// eventFlushInterval: 100000,
164+
// }
165+
// });
166+
167+
// const [userId] = useState<string>('matjaz-user-2');
168+
169+
// const prepareClient = () => {
170+
// optimizelyClient.onReady().then(async (res: any) => {
171+
// setReadyResult(res);
172+
// setIsSegmentsFetched(true);
173+
// optimizelyClient.fetchQualifiedSegments();
174+
// optimizelyClient.sendOdpEvent(
175+
// 'ttype',
176+
// '',
177+
// new Map([['FS-USER-ID', 'raju.ahmed2@optimizely.com']]),
178+
// new Map([["foo", "bar"]]),
179+
// );
180+
// });
181+
// };
182+
183+
// 16. test sendOdpEvent with multiple types of data and check in event inspector
184+
// const odpEventType = 'string';
185+
// // const odpEventType = 'boolean';
186+
// // const odpEventType = 'number';
187+
// const optimizelyClient = createInstance({
188+
// sdkKey: 'TbrfRLeKvLyWGusqANoeR',
189+
// });
190+
191+
// const [userId] = useState<string>('matjaz-user-2');
192+
193+
// const prepareClient = () => {
194+
// optimizelyClient.onReady().then(async (res: any) => {
195+
// setReadyResult(res);
196+
// setIsSegmentsFetched(true);
197+
// optimizelyClient.sendOdpEvent(
198+
// 'ttype',
199+
// odpEventType,
200+
// new Map([['FS-USER-ID', 'raju.ahmed2@optimizely.com']]),
201+
// new Map([['foo', 'bar']])
202+
// );
203+
// });
204+
// };
205+
206+
// 17. test identifier vuid key in sendevent
207+
// const optimizelyClient = createInstance({
208+
// sdkKey: 'TbrfRLeKvLyWGusqANoeR',
209+
// });
210+
211+
// const [userId] = useState<string>('matjaz-user-2');
212+
213+
// const prepareClient = () => {
214+
// optimizelyClient.onReady().then(async (res: any) => {
215+
// setReadyResult(res);
216+
// setIsSegmentsFetched(true);
217+
// optimizelyClient.sendOdpEvent(
218+
// 'ttype',
219+
// '',
220+
// new Map([['FS-USER-ID', 'raju.ahmed2@optimizely.com']]),
221+
// new Map([['foo', 'bar']])
222+
// );
223+
// });
224+
// };
225+
226+
// 18. test identifier should return bad request 400
227+
const optimizelyClient = createInstance({
228+
sdkKey: 'TbrfRLeKvLyWGusqANoeR',
229+
});
230+
231+
const [userId] = useState<string>('matjaz-user-2');
232+
19233
const prepareClient = () => {
20-
console.log('optimizelyClient');
21234
optimizelyClient.onReady().then(async (res: any) => {
22235
setReadyResult(res);
23236
setIsSegmentsFetched(true);
24-
// console.log(optimizelyClient.isReady());
25-
await optimizelyClient.fetchQualifiedSegments();
26-
await optimizelyClient.fetchQualifiedSegments([OptimizelySegmentOption.IGNORE_CACHE]);
237+
optimizelyClient.sendOdpEvent('ttype', '', new Map([['test', 'test']]));
27238
});
28239
};
29240

@@ -38,7 +249,12 @@ export const FetchQualifiedSegments: React.FC = () => {
38249
user={{ id: userId }}
39250
>
40251
{readyResult?.success && (
41-
<div>{`Is segments fetched for user ${userId}: ${isSegmentsFetched ? 'Yes' : 'No'} `}</div>
252+
<>
253+
<div>{`Is segments fetched for user ${userId}: ${isSegmentsFetched ? 'Yes' : 'No'} `}</div>
254+
<div> UserID: {optimizelyClient.user.id === null ? 'null' : optimizelyClient.user.id}</div>
255+
<div> Vuid: {localStorage.getItem('optimizely-vuid')}</div>
256+
{enableDecision && featureKey && <Decision userId={userId} featureKey={featureKey} />}
257+
</>
42258
)}
43259
{readyResult && !readyResult.success && (
44260
<div>
@@ -51,4 +267,40 @@ export const FetchQualifiedSegments: React.FC = () => {
51267
);
52268
};
53269

270+
function Decision({ userId, featureKey }: { userId: string; featureKey: string }) {
271+
// Generally React SDK runs for one client at a time i.e for one user throughout the lifecycle.
272+
// You can provide the user Id once while wrapping the app in the Provider component and the SDK will memoize and reuse it throughout the application lifecycle.
273+
// For this example, we are simulating 10 different users so we will ignore this and pass override User IDs to the useDecision hook for demonstration purpose.
274+
// This override will not be needed for normal react sdk use cases.
275+
// return null;
276+
277+
const [decision, clientReady] = useDecision(featureKey, {}, { overrideUserId: userId });
278+
279+
// Don't render the component if SDK client is not ready yet.
280+
if (!clientReady) {
281+
return <></>;
282+
}
283+
284+
const variationKey = decision.variationKey;
285+
286+
// did decision fail with a critical error?
287+
if (variationKey === null) {
288+
console.log(' decision error: ', decision['reasons']);
289+
}
290+
291+
// get a dynamic configuration variable
292+
// "sort_method" corresponds to a variable key in your Optimizely project
293+
const sortMethod = decision.variables['sort_method'];
294+
295+
return (
296+
<div>
297+
{`\nFlag ${
298+
decision.enabled ? 'on' : 'off'
299+
}. User number ${userId} saw flag variation: ${variationKey} and got products sorted by: ${sortMethod} config variable as part of flag rule: ${
300+
decision.ruleKey
301+
}`}
302+
</div>
303+
);
304+
}
305+
54306
export default FetchQualifiedSegments;

0 commit comments

Comments
 (0)