Skip to content

Commit ab274ed

Browse files
OEvgenyOEvgeny
authored
Feat: add preact compat tests (#5417)
1 parent fc69871 commit ab274ed

19 files changed

+716
-0
lines changed

‎__tests__/html2/preact/activity/feedback.status.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
6+
<script src="https://unpkg.com/[email protected]/dist/preact.umd.js"></script>
7+
<script src="https://unpkg.com/[email protected]/hooks/dist/hooks.umd.js"></script>
8+
<script src="https://unpkg.com/[email protected]/compat/dist/compat.umd.js"></script>
9+
<script>
10+
// Expose Preact's compat as React for WebChat
11+
window.React = preactCompat;
12+
window.ReactDOM = preactCompat;
13+
</script>
14+
<script crossorigin="anonymous" src="/test-harness.js"></script>
15+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
16+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
17+
</head>
18+
<body>
19+
<main id="webchat"></main>
20+
<script type="text/babel" data-presets="env,stage-3,react">
21+
const {
22+
React: { useMemo },
23+
WebChat: {
24+
hooks: { useDirection }
25+
}
26+
} = window;
27+
28+
run(async function () {
29+
WebChat.renderWebChat(
30+
{
31+
directLine: await testHelpers.createDirectLineWithTranscript([
32+
{
33+
from:{
34+
role: "bot"
35+
},
36+
id: "a-00000",
37+
timestamp: 0,
38+
type: "message",
39+
text: "This is compleded feedback action example.",
40+
entities: [
41+
{
42+
'@context': 'https://schema.org',
43+
'@id': '',
44+
'@type': 'Message',
45+
type: 'https://schema.org/Message',
46+
keywords: ['AIGeneratedContent', 'AllowCopy'],
47+
potentialAction: [
48+
{
49+
"@type": "LikeAction",
50+
actionStatus: "CompletedActionStatus",
51+
target: {
52+
"@type": "EntryPoint",
53+
urlTemplate: "ms-directline://postback?interaction=like"
54+
}
55+
},
56+
{
57+
"@type": "DislikeAction",
58+
actionStatus: "PotentialActionStatus",
59+
result: {
60+
"@type": "Review",
61+
reviewBody: "I don't like it.",
62+
"reviewBody-input": {
63+
"@type": "PropertyValueSpecification",
64+
valueMinLength: 3,
65+
valueName: "reason"
66+
}
67+
},
68+
target: {
69+
"@type": "EntryPoint",
70+
urlTemplate: "ms-directline://postback?interaction=dislike{&reason}"
71+
}
72+
}
73+
]
74+
}
75+
]
76+
},
77+
{
78+
from: {
79+
role: 'user'
80+
},
81+
id: "a-00001",
82+
timestamp: 0,
83+
type: "message",
84+
text: "Test",
85+
},
86+
{
87+
from:{
88+
role: "bot"
89+
},
90+
id: "a-00002",
91+
timestamp: 0,
92+
type: "message",
93+
text: "Hi! I'm *Cody*, the devbot. How can I help?",
94+
entities: [
95+
{
96+
'@context': 'https://schema.org',
97+
'@id': '',
98+
'@type': 'Message',
99+
type: 'https://schema.org/Message',
100+
keywords: [],
101+
potentialAction: [
102+
{
103+
"@type": "LikeAction",
104+
actionStatus: "PotentialActionStatus",
105+
target: {
106+
"@type": "EntryPoint",
107+
urlTemplate: "ms-directline://postback?interaction=like"
108+
}
109+
},
110+
{
111+
"@type": "DislikeAction",
112+
actionStatus: "PotentialActionStatus",
113+
result: {
114+
"@type": "Review",
115+
reviewBody: "I don't like it.",
116+
"reviewBody-input": {
117+
"@type": "PropertyValueSpecification",
118+
valueMinLength: 3,
119+
valueName: "reason"
120+
}
121+
},
122+
target: {
123+
"@type": "EntryPoint",
124+
urlTemplate: "ms-directline://postback?interaction=dislike{&reason}"
125+
}
126+
}
127+
]
128+
}
129+
]
130+
}
131+
]),
132+
store: testHelpers.createStore(),
133+
},
134+
document.getElementById('webchat')
135+
);
136+
137+
await pageConditions.uiConnected();
138+
139+
await host.snapshot('local');
140+
141+
const [,, activityStatus] = pageElements.activityStatuses();
142+
const buttons = activityStatus.querySelectorAll('button');
143+
144+
pageElements.sendBoxTextBox().focus();
145+
146+
await host.sendShiftTab(3);
147+
await host.sendKeys('ENTER');
148+
await expect(document.activeElement).toBe(buttons[0]);
149+
await host.snapshot('local');
150+
151+
await host.sendTab();
152+
await expect(document.activeElement).toBe(buttons[1]);
153+
await host.snapshot('local');
154+
155+
await host.sendTab();
156+
await expect(document.activeElement).toBe(buttons[0]);
157+
await host.snapshot('local');
158+
159+
await host.sendKeys('ENTER');
160+
await host.snapshot('local');
161+
});
162+
</script>
163+
</body>
164+
</html>

‎__tests__/html2/preact/activity/feedback.status.html.snap-1.png

24 KB
Loading

‎__tests__/html2/preact/activity/feedback.status.html.snap-2.png

24.2 KB
Loading

‎__tests__/html2/preact/activity/feedback.status.html.snap-3.png

24.2 KB
Loading

‎__tests__/html2/preact/activity/feedback.status.html.snap-4.png

24.2 KB
Loading

‎__tests__/html2/preact/activity/feedback.status.html.snap-5.png

25.1 KB
Loading

‎__tests__/html2/preact/activity/viewCodeButton.html

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
6+
<script src="https://unpkg.com/[email protected]/dist/preact.umd.js"></script>
7+
<script src="https://unpkg.com/[email protected]/hooks/dist/hooks.umd.js"></script>
8+
<script src="https://unpkg.com/[email protected]/compat/dist/compat.umd.js"></script>
9+
<script>
10+
// Expose Preact's compat as React for WebChat
11+
window.React = preactCompat;
12+
window.ReactDOM = preactCompat;
13+
</script>
14+
<script crossorigin="anonymous" src="/test-harness.js"></script>
15+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
16+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
17+
</head>
18+
<body>
19+
<main id="webchat"></main>
20+
<script type="text/babel">
21+
run(async function () {
22+
const {
23+
React,
24+
ReactDOM: { render },
25+
WebChat: { ReactWebChat }
26+
} = window; // Imports in UMD fashion.
27+
28+
const aiMessageEntity = {
29+
'@context': 'https://schema.org',
30+
'@id': '',
31+
'@type': 'Message',
32+
keywords: ['AIGeneratedContent', 'AllowCopy'],
33+
type: 'https://schema.org/Message'
34+
};
35+
36+
const waveSvg = `data:image/svg+xml;utf8,${encodeURIComponent(`
37+
<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
38+
<!-- Primary Wave -->
39+
<path d="M0,100 C50,50 100,150 150,100 C200,50 250,150 300,100 C350,50 400,150 400,100"
40+
stroke="#3B82F6" fill="none" stroke-width="2" opacity="0.5"/>
41+
42+
<!-- Second Harmonic -->
43+
<path d="M0,100 C25,75 50,125 75,100 C100,75 125,125 150,100 C175,75 200,125 225,100 C250,75 275,125 300,100 C325,75 350,125 375,100 C400,75 400,125 400,100"
44+
stroke="#10B981" fill="none" stroke-width="2" opacity="0.5"/>
45+
46+
<!-- Combined Wave -->
47+
<path d="M0,100 C40,30 80,170 120,100 C160,30 200,170 240,100 C280,30 320,170 360,100 C380,65 400,135 400,100"
48+
stroke="#EF4444" fill="none" stroke-width="3"/>
49+
50+
<!-- Grid Lines -->
51+
<line x1="0" y1="100" x2="400" y2="100" stroke="#CBD5E1" stroke-width="0.5" stroke-dasharray="4"/>
52+
<line x1="100" y1="0" x2="100" y2="200" stroke="#CBD5E1" stroke-width="0.5" stroke-dasharray="4"/>
53+
<line x1="200" y1="0" x2="200" y2="200" stroke="#CBD5E1" stroke-width="0.5" stroke-dasharray="4"/>
54+
<line x1="300" y1="0" x2="300" y2="200" stroke="#CBD5E1" stroke-width="0.5" stroke-dasharray="4"/>
55+
</svg>`)}`;
56+
57+
const { directLine, store } = testHelpers.createDirectLineEmulator();
58+
59+
render(
60+
<ReactWebChat directLine={directLine} store={store} />,
61+
document.getElementById('webchat')
62+
);
63+
64+
await pageConditions.uiConnected();
65+
66+
directLine.emulateIncomingActivity({
67+
from: { role: 'bot' },
68+
entities: [{
69+
...aiMessageEntity,
70+
isBasedOn: {
71+
'@type': 'SoftwareSourceCode',
72+
'programmingLanguage': 'python',
73+
"text": `import numpy as np
74+
import matplotlib.pyplot as plt
75+
76+
def plot_sine_waves():
77+
"""Create a beautiful visualization of sine waves with different frequencies."""
78+
# Generate time points
79+
t = np.linspace(0, 10, 1000)
80+
81+
# Create waves with different frequencies and phases
82+
wave1 = np.sin(t)
83+
wave2 = 0.5 * np.sin(2 * t + np.pi/4)
84+
wave3 = 0.3 * np.sin(3 * t + np.pi/3)
85+
86+
# Combine waves
87+
combined = wave1 + wave2 + wave3
88+
89+
# Create a stylish plot
90+
plt.style.use('seaborn-darkgrid')
91+
plt.figure(figsize=(12, 8))
92+
93+
# Plot individual waves
94+
plt.plot(t, wave1, label='Primary Wave', alpha=0.5)
95+
plt.plot(t, wave2, label='Second Harmonic', alpha=0.5)
96+
plt.plot(t, wave3, label='Third Harmonic', alpha=0.5)
97+
98+
# Plot combined wave with a thicker line
99+
plt.plot(t, combined, 'r-',
100+
label='Combined Wave',
101+
linewidth=2)
102+
103+
plt.title('Harmonic Wave Composition', fontsize=14)
104+
plt.xlabel('Time', fontsize=12)
105+
plt.ylabel('Amplitude', fontsize=12)
106+
plt.legend()
107+
plt.grid(True, alpha=0.3)
108+
109+
# Show the plot
110+
plt.tight_layout()
111+
plt.show()
112+
113+
# Generate the visualization
114+
plot_sine_waves()`
115+
}
116+
}],
117+
type: "message",
118+
text: `This example demonstrates creating a beautiful visualization of harmonic waves using Python's Matplotlib library. The code generates three sine waves with different frequencies and phases, then combines them to show wave interference patterns.\n<img alt="wave plot" src="${waveSvg}">`,
119+
});
120+
121+
await pageConditions.numActivitiesShown(1);
122+
123+
// When: Focus the "Code" button
124+
const codeButton = document.querySelector(`[data-testid="${WebChat.testIds.viewCodeButton}"]`);
125+
codeButton.focus();
126+
127+
// Then: Shows a focus ring around the "Code" button
128+
expect(document.activeElement).toBe(codeButton);
129+
await host.snapshot('local');
130+
131+
// WHEN: Press ENTER on the "Code" button.
132+
await host.sendKeys('ENTER');
133+
134+
// THEN: The code dialog should open.
135+
await host.snapshot('local');
136+
137+
// WHEN: Press ENTER to close the View Code dialog.
138+
await host.sendKeys('ENTER');
139+
140+
// // THEN: The code dialog should close.
141+
await host.snapshot('local');
142+
});
143+
</script>
144+
</body>
145+
</html>

‎__tests__/html2/preact/activity/viewCodeButton.html.snap-1.png

42.6 KB
Loading

‎__tests__/html2/preact/activity/viewCodeButton.html.snap-2.png

57.1 KB
Loading

‎__tests__/html2/preact/activity/viewCodeButton.html.snap-3.png

42.6 KB
Loading

0 commit comments

Comments
 (0)