Skip to content

Commit d0661ef

Browse files
lexi-taylorlexi-taylor
committed
initial commit
1 parent a6b3ad8 commit d0661ef

7 files changed

Lines changed: 94 additions & 5 deletions

File tree

‎__tests__/html2/fluentTheme/defaultFeedback.activity.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,13 @@
6666
await host.sendShiftTab(2);
6767
await host.sendKeys('ENTER');
6868

69+
// Tooltip is only present sometimes
70+
const toolTip = pageElements.byTestId('thumb button tooltip');
71+
if (toolTip) {
72+
// Dismiss tooltip
73+
await host.sendKeys('ESCAPE');
74+
}
75+
6976
await host.snapshot('local');
7077

7178
// Click like button
@@ -121,6 +128,9 @@
121128
}
122129
})
123130
);
131+
132+
// Feedback button state should persist
133+
await host.snapshot('local');
124134
});
125135
</script>
126136
</body>

‎__tests__/html2/fluentTheme/feedback.form.markdown.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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/standalone@7.8.7/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
8+
<script crossorigin="anonymous" src="/test-harness.js"></script>
9+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
11+
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
12+
</head>
13+
14+
<body>
15+
<main id="webchat"></main>
16+
<script type="text/babel">
17+
run(async function () {
18+
const {
19+
React,
20+
ReactDOM: { render },
21+
WebChat: { FluentThemeProvider, ReactWebChat }
22+
} = window; // Imports in UMD fashion.
23+
24+
const { directLine, store } = testHelpers.createDirectLineEmulator();
25+
26+
const App = () => <ReactWebChat directLine={directLine} store={store} />;
27+
28+
render(
29+
<FluentThemeProvider>
30+
<App />
31+
</FluentThemeProvider>,
32+
document.getElementById('webchat')
33+
);
34+
35+
await pageConditions.uiConnected();
36+
37+
await directLine.emulateIncomingActivity({
38+
type: 'message',
39+
id: 'a-00000',
40+
timestamp: 0,
41+
text: 'This is a test message to show feedback buttons',
42+
from: {
43+
role: 'bot'
44+
},
45+
locale: 'en-US',
46+
entities: [],
47+
channelData: {
48+
feedbackLoop: {
49+
type: 'default',
50+
disclaimer: 'This is a test disclaimer message with **bold** text',
51+
}
52+
}
53+
});
54+
55+
await pageConditions.numActivitiesShown(1);
56+
57+
pageElements.byTestId('send box text area').focus();
58+
await host.sendShiftTab(2);
59+
60+
await host.sendKeys('ENTER');
61+
await host.sendKeys('ENTER');
62+
63+
await pageConditions.became(
64+
'feedback form is open',
65+
() => document.activeElement === pageElements.byTestId('feedback sendbox'),
66+
1000
67+
);
68+
69+
await host.snapshot('local');
70+
71+
});
72+
</script>
73+
</body>
74+
</html>

‎__tests__/html2/fluentTheme/feedback.form.markdown.html.snap-1.png‎

27.7 KB
Loading

‎packages/component/src/Activity/private/FeedbackForm.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,10 @@ function FeedbackForm({ feedbackType, disclaimer, onReset, replyToId }: Feedback
4949
}
5050
} as any);
5151

52-
handleReset();
52+
setUserFeedback('');
53+
setHasFocus(false);
5354
},
54-
[feedbackType, handleReset, postActivity, replyToId, userFeedback]
55+
[feedbackType, postActivity, replyToId, userFeedback]
5556
);
5657

5758
const handleChange: FormEventHandler<HTMLTextAreaElement> = useCallback(

‎packages/component/src/Activity/private/ThumbButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useRefFrom } from 'use-ref-from';
66
import ThumbButtonImage from './ThumbButton.Image';
77
import useStyleSet from '../../hooks/useStyleSet';
88
import { Tooltip } from '../../Tooltip';
9+
import testIds from '../../testIds';
910

1011
const { useLocalizer } = hooks;
1112

@@ -57,7 +58,7 @@ const ThumbButton = memo(({ className, direction, disabled, onClick, pressed, ti
5758
direction={direction}
5859
filled={true}
5960
/>
60-
<Tooltip>{buttonTitle}</Tooltip>
61+
<Tooltip dataTestId={testIds.thumbButtonTooltip}>{buttonTitle}</Tooltip>
6162
</button>
6263
);
6364
});

‎packages/component/src/Tooltip/private/Tooltip.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,16 @@ type TooltipProps = Readonly<{
66
children: ReactNode;
77
className?: string | undefined;
88
position?: 'block-start';
9+
dataTestId?: string | undefined;
910
}>;
1011

11-
function Tooltip({ children, className, position = 'block-start' }: TooltipProps) {
12+
function Tooltip({ children, className, dataTestId, position = 'block-start' }: TooltipProps) {
1213
const [{ tooltip: tooltipClassName }] = useStyleSet();
1314

1415
return (
1516
<span
1617
className={cx('webchat__tooltip', className, tooltipClassName, `webchat__tooltip--${position}`)}
18+
data-testid={dataTestId}
1719
/* @ts-expect-error: inert unknown attribute */
1820
inert="true"
1921
role="tooltip"

‎packages/component/src/testIds.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ const testIds = {
55
sendBoxTextBox: 'send box text area',
66
typingIndicator: 'typing indicator',
77
viewCodeButton: 'view code button',
8-
feedbackSendBox: 'feedback sendbox'
8+
feedbackSendBox: 'feedback sendbox',
9+
thumbButtonTooltip: 'thumb button tooltip'
910
};
1011

1112
export default testIds;

0 commit comments

Comments
 (0)