Skip to content

Commit b2ec4e5

Browse files
laurawarrlaurawarr
authored
Update app text to use example-text variable (#19)
1 parent 7a8e080 commit b2ec4e5

File tree

3 files changed

+85
-53
lines changed

3 files changed

+85
-53
lines changed

‎src/__snapshots__/devcycle.test.js.snap

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`App content App description is updated for value "default" 1`] = `"Welcome to DevCycle's example app."`;
4+
5+
exports[`App content App description is updated for value "default" 2`] = `
6+
"
7+
8+
If you got to the example app on your own, follow our README guide to create the Feature and Variables you need in DevCycle to control this app.
9+
10+
"
11+
`;
12+
13+
exports[`App content App description is updated for value "step-1" 1`] = `"Welcome to DevCycle's example app."`;
14+
15+
exports[`App content App description is updated for value "step-1" 2`] = `
16+
"
17+
18+
If you got here through the onboarding flow, just follow the instructions to change and create new Variations and see how the app reacts to new Variable values.
19+
20+
"
21+
`;
22+
23+
exports[`App content App description is updated for value "step-2" 1`] = `"Great! You've taken the first step in exploring DevCycle."`;
24+
25+
exports[`App content App description is updated for value "step-2" 2`] = `
26+
"
27+
28+
You've successfully toggled your very first variation. You are now serving a different value to your users and you can see how the example app has reacted to this change.
29+
30+
31+
Next, go ahead and create a whole new variation to see what else is possible in this app.
32+
33+
"
34+
`;
35+
36+
exports[`App content App description is updated for value "step-3" 1`] = `"Welcome to DevCycle's example app."`;
37+
38+
exports[`App content App description is updated for value "step-3" 2`] = `
39+
"
40+
41+
If you got to the example app on your own, follow our README guide to create the Feature and Variables you need in DevCycle to control this app.
42+
43+
"
44+
`;

‎src/devcycle.test.js

Lines changed: 21 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { fireEvent, waitFor } from '@testing-library/dom';
1+
import { waitFor } from '@testing-library/dom';
22
import fs from 'fs';
33
import path from 'path';
44
import '@testing-library/jest-dom';
55
import { setUpDevCycle } from './devcycle.js';
6-
import { users } from './users.js';
76

87
process.env.DEVCYCLE_CLIENT_SDK_KEY = 'mocked-sdk-key';
98

@@ -48,55 +47,38 @@ describe('DevCycle client initialization', () => {
4847
})
4948
})
5049

51-
describe('Togglebot speed', () => {
50+
describe('App content', () => {
5251
beforeEach(() => {
5352
jest.clearAllMocks();
5453
document.documentElement.innerHTML = html.toString();
5554
});
5655

57-
test('Togglebot handles speed "off"', async () => {
58-
mockVariableValue('togglebot-speed', 'off');
56+
test.each([
57+
['off', 'Hello! Nice to meet you.'],
58+
['slow', 'Awesome, look at you go!'],
59+
['fast', 'This is fun!'],
60+
['off-axis', "...I'm gonna be sick..."],
61+
['surprise', "What the unicorn?"],
62+
])('Togglebot message is updated for speed "%s"', async (speed, expectedMessage) => {
63+
mockVariableValue('togglebot-speed', speed);
5964
setUpDevCycle();
6065
await waitFor(() => {
61-
expect(document.getElementById('togglebot-message')).toHaveTextContent("Hello! Nice to meet you.");
62-
expect(document.getElementById('instructions-header')).toHaveTextContent('Welcome to DevCycle\'s example app');
66+
expect(document.getElementById('togglebot-message')).toHaveTextContent(expectedMessage);
6367
});
6468
})
6569

66-
test('Togglebot handles speed "slow"', async () => {
67-
mockVariableValue('togglebot-speed', 'slow');
70+
test.each([
71+
'default',
72+
'step-1',
73+
'step-2',
74+
'step-3',
75+
])('App description is updated for value "%s"', async (exampleText) => {
76+
mockVariableValue('example-text', exampleText);
6877
setUpDevCycle();
78+
await new Promise((resolve) => setTimeout(resolve, 100));
6979
await waitFor(() => {
70-
expect(document.getElementById('togglebot-message')).toHaveTextContent("Awesome, look at you go!");
71-
expect(document.getElementById('instructions-header')).toHaveTextContent('Great! You\'ve taken the first step in exploring DevCycle.');
72-
});
73-
})
74-
75-
test('Togglebot handles speed "fast"', async () => {
76-
mockVariableValue('togglebot-speed', 'fast');
77-
setUpDevCycle();
78-
await waitFor(() => {
79-
expect(document.getElementById('togglebot-message')).toHaveTextContent("This is fun!");
80-
expect(document.getElementById('instructions-header')).toHaveTextContent('You\'re getting the hang of things.');
81-
});
82-
})
83-
84-
test('Togglebot handles speed "off-axis"', async () => {
85-
mockVariableValue('togglebot-speed', 'off-axis');
86-
setUpDevCycle();
87-
await waitFor(() => {
88-
expect(document.getElementById('togglebot-message')).toHaveTextContent("...I'm gonna be sick...");
89-
expect(document.getElementById('instructions-header')).toHaveTextContent('You\'re getting the hang of things.');
90-
});
91-
})
92-
93-
94-
test('Togglebot handles speed "surprise"', async () => {
95-
mockVariableValue('togglebot-speed', 'surprise');
96-
setUpDevCycle();
97-
await waitFor(() => {
98-
expect(document.getElementById('togglebot-message')).toHaveTextContent("What the unicorn?");
99-
expect(document.getElementById('instructions-header')).toHaveTextContent('You\'re getting the hang of things.');
80+
expect(document.getElementById('instructions-header').textContent).toMatchSnapshot();
81+
expect(document.getElementById('instructions-body').textContent).toMatchSnapshot();
10082
});
10183
})
10284
})

‎src/updateUI.js

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const updateToggleBotSection = (devcycleClient) => {
2626
// Display message based on spinSpeed variable
2727
document.getElementById("togglebot-message").innerHTML = getToggleBotMessage(spinSpeed);
2828

29-
// Choose togglebot image based on message based on shouldWink variable
29+
// Choose togglebot image based on variables
3030
const togglebot = document.getElementById("togglebot");
3131
togglebot.src =
3232
spinSpeed === 'surprise' ? "./images/unicorn.svg" :
@@ -39,39 +39,45 @@ const updateToggleBotSection = (devcycleClient) => {
3939
}
4040

4141
const updateInstructionsSection = (devcycleClient) => {
42-
const spinSpeed = devcycleClient.variableValue('togglebot-speed', 'off');
42+
const text = devcycleClient.variableValue('example-text', 'default');
4343

4444
let header;
4545
let details;
46-
switch (spinSpeed) {
47-
case 'off':
46+
switch (text) {
47+
case 'step-1':
4848
header = "Welcome to DevCycle's example app.";
49-
details = baseVariationInstructions;
49+
details = stepOneInstructions;
5050
break;
51-
case "slow":
51+
case 'step-2':
5252
header = "Great! You've taken the first step in exploring DevCycle.";
53-
details = winkVariationInstructions;
53+
details = stepTwoInstructions;
5454
break;
55-
default: // custom variation
55+
case 'step-3':
5656
header = "You're getting the hang of things.";
57-
details = customVariationInstructions;
57+
details = stepThreeInstructions;
58+
default:
59+
header = "Welcome to DevCycle's example app.";
60+
details = defaultInstructions;
61+
break;
5862
}
5963

6064
document.getElementById("instructions-header").innerHTML = header;
6165
document.getElementById("instructions-body").innerHTML = details;
6266
}
6367

64-
const baseVariationInstructions = `
68+
const defaultInstructions = `
6569
<p>
66-
If you got here through the onboarding flow, just follow the instructions to change and create new Variations and see how the app reacts to new Variable values.
70+
If you got to the example app on your own, follow our <a target="_blank" href="https://github.com/DevCycleHQ-Labs/example-javascript/blob/main/README.md">README</a> guide to create the Feature and Variables you need in DevCycle to control this app.
6771
</p>
72+
`;
6873

74+
const stepOneInstructions = `
6975
<p>
70-
If you got to the example app on your own, follow our <a target="_blank" href="https://github.com/DevCycleHQ-Labs/example-javascript/blob/main/README.md">README</a> guide to create the Feature and Variables you need in DevCycle to control this app.
76+
If you got here through the onboarding flow, just follow the instructions to change and create new Variations and see how the app reacts to new Variable values.
7177
</p>
7278
`;
7379

74-
const winkVariationInstructions = `
80+
const stepTwoInstructions = `
7581
<p>
7682
You've successfully toggled your very first variation. You are now serving a different value to your users and you can see how the example app has reacted to this change.
7783
</p>
@@ -80,7 +86,7 @@ const winkVariationInstructions = `
8086
</p>
8187
`;
8288

83-
const customVariationInstructions = `
89+
const stepThreeInstructions = `
8490
<p>
8591
By creating a new Variation with new Variable values and toggling it on for all users you've already explored the fundamental concepts within DevCycle.
8692
</p>

0 commit comments

Comments
 (0)