Skip to content

Commit de9876b

Browse files
OEvgenyOEvgeny
committed
Refactor text area and feedback
1 parent 5981589 commit de9876b

27 files changed

Lines changed: 397 additions & 439 deletions

‎__tests__/__image_snapshots__/html/auto-resize-js-fluent-theme-applied-textbox-auto-resize-3-snap.png‎

-55 Bytes
Loading

‎__tests__/__image_snapshots__/html/max-message-length-js-fluent-theme-applied-handles-max-message-length-exceeded-1-snap.png‎

-230 Bytes
Loading

‎__tests__/html2/feedbackForm/feedback.form.scroll.fluent.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<title>Feedback Form (fluent): Scrollbar behavior when input is long</title>
5+
<script>
6+
location.href = './feedback.form.scroll?theme=fluent';
7+
</script>
8+
</head>
9+
<body></body>
10+
</html>

‎__tests__/html2/feedbackForm/feedback.form.scroll.fluent.html.snap-1.png‎

43.3 KB
Loading

‎__tests__/html2/feedbackForm/feedback.form.scroll.fluent.html.snap-2.png‎

43.2 KB
Loading

‎__tests__/html2/feedbackForm/feedback.form.scroll.fluent.html.snap-3.png‎

13.3 KB
Loading

‎__tests__/html2/feedbackForm/feedback.form.scroll.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<title>Feedback Form: Scrollbar behavior when input is long</title>
5+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
6+
<script type="importmap">
7+
{
8+
"imports": {
9+
"react": "https://esm.sh/react@18.3.1",
10+
"react-dom": "https://esm.sh/react-dom@18.3.1",
11+
"react-dom/": "https://esm.sh/react-dom@18.3.1/",
12+
"@fluentui/react-components": "https://esm.sh/@fluentui/react-components?deps=react@18.3.1&exports=FluentProvider,createDarkTheme,webLightTheme"
13+
}
14+
}
15+
</script>
16+
<script crossorigin="anonymous" src="/test-harness.js"></script>
17+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
18+
<script type="module">
19+
import React from 'react';
20+
import ReactDOM from 'react-dom';
21+
window.React = React;
22+
window.ReactDOM = ReactDOM;
23+
</script>
24+
<script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
25+
<script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
26+
</head>
27+
28+
<body>
29+
<main id="webchat"></main>
30+
<script type="module">
31+
run(async function () {
32+
const {
33+
WebChat: { testIds }
34+
} = window; // Imports in UMD fashion.
35+
36+
const { directLine, store } = testHelpers.createDirectLineEmulator();
37+
38+
const { isFluentTheme } = renderWebChat(
39+
{
40+
directLine,
41+
store,
42+
styleOptions: { feedbackActionsPlacement: 'activity-actions' }
43+
},
44+
document.getElementById('webchat')
45+
);
46+
47+
await pageConditions.uiConnected();
48+
pageElements.byTestId(testIds.sendBoxTextBox).focus();
49+
50+
// GIVEN: An activity with feedback form.
51+
await directLine.emulateIncomingActivity({
52+
type: 'message',
53+
id: 'a-00000',
54+
timestamp: 0,
55+
text: 'This is a test message to show feedback buttons',
56+
from: {
57+
role: 'bot'
58+
},
59+
locale: 'en-US',
60+
entities: [],
61+
channelData: {
62+
feedbackLoop: {
63+
type: 'default',
64+
disclaimer: 'This is a test disclaimer message'
65+
}
66+
}
67+
});
68+
69+
await pageConditions.numActivitiesShown(1);
70+
71+
// WHEN: Focus on the like button.
72+
if (isFluentTheme) {
73+
await host.sendShiftTab(1);
74+
await host.sendKeys('ARROW_UP');
75+
await host.sendKeys('ENTER', 'SPACE');
76+
} else {
77+
await host.sendShiftTab(3);
78+
await host.sendKeys('ENTER', 'SPACE');
79+
}
80+
81+
// THEN: The feedback form should be expanded.
82+
await pageConditions.became(
83+
'feedback form is open',
84+
() => document.activeElement === pageElements.byTestId(testIds.feedbackSendBox),
85+
1000
86+
);
87+
88+
// WHEN: The form is filled with more than 10 lines of text.
89+
await host.sendKeys('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris '.repeat(12));
90+
91+
// THEN: The feedback form should have scroll visible
92+
await host.snapshot('local');
93+
94+
// WHEN: The text area is not focused.
95+
await host.sendTab(1);
96+
97+
// THEN: The feedback form should have scrollbar hidden.
98+
await host.snapshot('local');
99+
100+
// WHEN: A feedback form with scroll is being submitted.
101+
await directLine.actPostActivity(async () => {
102+
await host.sendKeys('ENTER');
103+
});
104+
105+
106+
// THEN: Feedback form should be collapsed.
107+
await expect(pageElements.byTestId(testIds.feedbackSendBox)).toBeFalsy();
108+
109+
// THEN: All feedback buttons should be grayed out.
110+
await expect(
111+
Array.from(pageElements.allByTestId(testIds.feedbackButton)).every(
112+
buttonElement => buttonElement.getAttribute('aria-disabled') === 'true'
113+
)
114+
).toBe(true);
115+
116+
// THEN: Should match snapshot.
117+
await host.snapshot('local');
118+
});
119+
</script>
120+
</body>
121+
</html>

‎__tests__/html2/feedbackForm/feedback.form.scroll.html.snap-1.png‎

44.3 KB
Loading

‎__tests__/html2/feedbackForm/feedback.form.scroll.html.snap-2.png‎

44.4 KB
Loading

‎__tests__/html2/feedbackForm/feedback.form.scroll.html.snap-3.png‎

13.2 KB
Loading

0 commit comments

Comments
 (0)