Skip to content

Commit 78bbf5f

Browse files
compulimcompulim
committed
Use <input type="checkbox"> for like/dislike button
1 parent a762859 commit 78bbf5f

16 files changed

Lines changed: 332 additions & 114 deletions

‎__tests__/html2/feedbackForm/behavior.noopByEnterKey.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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="/test-harness.js"></script>
7+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
8+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
9+
</head>
10+
<body>
11+
<main id="webchat"></main>
12+
<script type="module">
13+
run(async function () {
14+
const {
15+
WebChat: { renderWebChat, testIds }
16+
} = window; // Imports in UMD fashion.
17+
18+
const { directLine, store } = testHelpers.createDirectLineEmulator();
19+
20+
const styleOptions = {
21+
feedbackActionsPlacement: 'activity-actions'
22+
};
23+
24+
renderWebChat({ directLine, store, styleOptions }, document.getElementById('webchat'));
25+
26+
await pageConditions.uiConnected();
27+
28+
await directLine.emulateIncomingActivity({
29+
channelData: {
30+
feedbackLoop: {
31+
type: 'default'
32+
}
33+
},
34+
entities: [
35+
{
36+
'@context': 'https://schema.org',
37+
'@id': '',
38+
'@type': 'Message',
39+
type: 'https://schema.org/Message',
40+
potentialAction: [
41+
{
42+
'@type': 'LikeAction',
43+
actionStatus: 'PotentialActionStatus',
44+
target: {
45+
'@type': 'EntryPoint',
46+
urlTemplate: 'ms-directline://postback?interaction=like'
47+
}
48+
},
49+
{
50+
'@type': 'DislikeAction',
51+
actionStatus: 'PotentialActionStatus',
52+
result: {
53+
'@type': 'Review',
54+
reviewBody: "I don't like it.",
55+
'reviewBody-input': {
56+
'@type': 'PropertyValueSpecification',
57+
valueMinLength: 3,
58+
valueName: 'reason'
59+
}
60+
},
61+
target: {
62+
'@type': 'EntryPoint',
63+
urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}'
64+
}
65+
}
66+
]
67+
}
68+
],
69+
text: `Occaecat cillum amet ipsum amet pariatur proident commodo eiusmod cupidatat voluptate.`,
70+
type: 'message'
71+
});
72+
73+
await pageConditions.numActivitiesShown(1);
74+
75+
// WHEN: The first feedback button is focused.
76+
document.querySelector(`[data-testid="${testIds.feedbackButton}"]`).focus();
77+
78+
// WHEN: ENTER key is pressed.
79+
await host.sendKeys('ENTER');
80+
81+
// THEN: The like button should not be pressed.
82+
// REASON: Because it is a feedback form, pressing ENTER key would submit the form which is not desirable.
83+
expect(
84+
Array.from(document.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`)).map(
85+
element => element.checked
86+
)
87+
).toEqual([false, false]);
88+
});
89+
</script>
90+
</body>
91+
</html>

‎__tests__/html2/feedbackForm/behavior.resetByEscapeKey.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -96,16 +96,16 @@
9696
await host.sendShiftTab(3);
9797
await host.sendKeys('UP', 'ENTER');
9898
await host.sendTab();
99-
await host.sendKeys('ENTER');
99+
await host.sendKeys('SPACE');
100100

101101
console.log(document.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`));
102102

103103
// THEN: The dislike button should be pressed.
104104
expect(
105-
Array.from(document.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`)).map(element =>
106-
element.getAttribute('aria-pressed')
105+
Array.from(document.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`)).map(
106+
element => element.checked
107107
)
108-
).toEqual(['false', 'true']);
108+
).toEqual([false, true]);
109109

110110
// THEN: It should focus on the feedback box.
111111
await waitFor(() =>
@@ -123,10 +123,10 @@
123123

124124
// THEN: It should unselect all feedback buttons.
125125
expect(
126-
Array.from(document.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`)).map(element =>
127-
element.getAttribute('aria-pressed')
126+
Array.from(document.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`)).map(
127+
element => element.checked
128128
)
129-
).toEqual(['false', 'false']);
129+
).toEqual([false, false]);
130130

131131
// THEN: Should focus on the dislike button.
132132
await waitFor(() =>

‎__tests__/html2/feedbackForm/behavior.selectByClick.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
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="/test-harness.js"></script>
7+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
8+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
9+
</head>
10+
<body>
11+
<main id="webchat"></main>
12+
<script type="importmap">
13+
{
14+
"imports": {
15+
"@testduet/wait-for": "https://esm.sh/@testduet/wait-for"
16+
}
17+
}
18+
</script>
19+
<script type="module">
20+
import { waitFor } from '@testduet/wait-for';
21+
22+
run(async function () {
23+
const {
24+
WebChat: { renderWebChat, testIds }
25+
} = window; // Imports in UMD fashion.
26+
27+
const { directLine, store } = testHelpers.createDirectLineEmulator();
28+
29+
const styleOptions = {
30+
feedbackActionsPlacement: 'activity-actions'
31+
};
32+
33+
renderWebChat({ directLine, store, styleOptions }, document.getElementById('webchat'));
34+
35+
await pageConditions.uiConnected();
36+
37+
await directLine.emulateIncomingActivity({
38+
channelData: {
39+
feedbackLoop: {
40+
type: 'default'
41+
}
42+
},
43+
entities: [
44+
{
45+
'@context': 'https://schema.org',
46+
'@id': '',
47+
'@type': 'Message',
48+
type: 'https://schema.org/Message',
49+
potentialAction: [
50+
{
51+
'@type': 'LikeAction',
52+
actionStatus: 'PotentialActionStatus',
53+
target: {
54+
'@type': 'EntryPoint',
55+
urlTemplate: 'ms-directline://postback?interaction=like'
56+
}
57+
},
58+
{
59+
'@type': 'DislikeAction',
60+
actionStatus: 'PotentialActionStatus',
61+
result: {
62+
'@type': 'Review',
63+
reviewBody: "I don't like it.",
64+
'reviewBody-input': {
65+
'@type': 'PropertyValueSpecification',
66+
valueMinLength: 3,
67+
valueName: 'reason'
68+
}
69+
},
70+
target: {
71+
'@type': 'EntryPoint',
72+
urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}'
73+
}
74+
}
75+
]
76+
}
77+
],
78+
text: `Occaecat cillum amet ipsum amet pariatur proident commodo eiusmod cupidatat voluptate.`,
79+
type: 'message'
80+
});
81+
82+
await pageConditions.numActivitiesShown(1);
83+
84+
// WHEN: The first feedback button is clicked.
85+
await host.click(document.querySelector(`[data-testid="${testIds.feedbackButton}"]`));
86+
87+
// THEN: The like button should be pressed.
88+
expect(
89+
Array.from(document.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`)).map(
90+
element => element.checked
91+
)
92+
).toEqual([true, false]);
93+
94+
// THEN: Should match the snapshot.
95+
await host.snapshot('local');
96+
});
97+
</script>
98+
</body>
99+
</html>

‎__tests__/html2/feedbackForm/behavior.selectByClick.html.snap-1.png‎

27 KB
Loading

‎__tests__/html2/feedbackForm/feedback.activity.dismiss.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
await new Promise(resolve => setTimeout(resolve, 400));
9797

9898
await host.snapshot('local');
99-
await host.sendKeys('ENTER');
99+
await host.sendKeys('SPACE');
100100
await host.snapshot('local');
101101

102102
await directLine.emulateIncomingActivity({

‎__tests__/html2/feedbackForm/feedback.activity.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,11 @@
135135
await new Promise(resolve => setTimeout(resolve, 400));
136136

137137
await host.snapshot('local');
138-
await host.sendKeys('ENTER');
138+
await host.sendKeys('SPACE');
139139
await host.snapshot('local');
140140
await host.sendKeys('TAB');
141141
await host.snapshot('local');
142-
await host.sendKeys('ENTER');
142+
await host.sendKeys('SPACE');
143143
await host.snapshot('local');
144144
});
145145
</script>

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,16 +61,16 @@
6161
await host.sendShiftTab(3);
6262

6363
await host.sendKeys('ENTER');
64-
await host.sendKeys('ENTER');
64+
await host.sendKeys('SPACE');
6565

6666
return await host.snapshot('local');
6767

6868
// Dismiss like button
6969
await host.sendShiftTab(2);
70-
await host.sendKeys('ENTER');
70+
await host.sendKeys('SPACE');
7171

7272
// Click like button
73-
await host.sendKeys('ENTER');
73+
await host.sendKeys('SPACE');
7474

7575
await pageConditions.became(
7676
'feedback form is open',
@@ -84,14 +84,9 @@
8484

8585
await host.snapshot('local');
8686

87-
// Re-open feedback form
88-
pageElements.byTestId('send box text area').focus();
89-
await host.sendShiftTab(3);
90-
91-
await host.sendKeys('ENTER');
92-
// Send dislike
87+
// WHEN: Click on dislike button to re-open feedback form
9388
await host.sendTab(1);
94-
await host.sendKeys('ENTER');
89+
await host.sendKeys('SPACE');
9590

9691
await pageConditions.became(
9792
'feedback form is open',

‎__tests__/html2/feedbackForm/feedback.status.html‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,19 @@
22
<html lang="en-US">
33
<head>
44
<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.development.js"></script>
7-
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
85
<script crossorigin="anonymous" src="/test-harness.js"></script>
96
<script crossorigin="anonymous" src="/test-page-object.js"></script>
107
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
118
</head>
129
<body>
1310
<main id="webchat"></main>
14-
<script type="text/babel" data-presets="env,stage-3,react">
15-
const {
16-
React: { useMemo },
17-
WebChat: {
18-
hooks: { useDirection }
19-
}
20-
} = window;
21-
11+
<script>
2212
run(async function () {
23-
WebChat.renderWebChat(
13+
const {
14+
WebChat: { renderWebChat, testIds }
15+
} = window;
16+
17+
renderWebChat(
2418
{
2519
directLine: await testHelpers.createDirectLineWithTranscript([
2620
{
@@ -133,7 +127,7 @@
133127
await host.snapshot('local');
134128

135129
const [, , activityStatus] = pageElements.activityStatuses();
136-
const buttons = activityStatus.querySelectorAll('button');
130+
const buttons = activityStatus.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`);
137131

138132
pageElements.sendBoxTextBox().focus();
139133

@@ -162,7 +156,7 @@
162156

163157
await host.snapshot('local');
164158

165-
await host.sendKeys('ENTER');
159+
await host.sendKeys('SPACE');
166160
await host.snapshot('local');
167161
});
168162
</script>

‎__tests__/html2/feedbackForm/layout.withCopyButton.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
await host.sendShiftTab(2);
9292
await host.sendKeys('ENTER');
9393
await host.sendTab();
94-
await host.sendKeys('ENTER');
94+
await host.sendKeys('SPACE');
9595

9696
// THEN: It should match the snapshot.
9797
await host.snapshot('local');

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
await host.sendShiftTab(2);
5959

6060
await host.sendKeys('ENTER');
61-
await host.sendKeys('ENTER');
61+
await host.sendKeys('SPACE');
6262

6363
await pageConditions.became(
6464
'feedback form is open',

0 commit comments

Comments
 (0)