Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DRAFT: Add like/dislike button #5399

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
264 changes: 264 additions & 0 deletions __tests__/html2/likeAction/behavior.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
</head>

<body>
<main id="webchat"></main>
<script type="text/babel">
run(async function () {
const {
React,
ReactDOM: { render },
testHelpers: { createDirectLineEmulator },
WebChat: {
Components: { BasicWebChat, Composer },
hooks: { useActivities },
testIds
}
} = window;

const { directLine, store } = createDirectLineEmulator();

const RunFunction = ({ fn }) => {
fn();

return false;
};

const renderWithFunction = fn =>
new Promise(resolve =>
ReactDOM.render(
<Composer directLine={directLine} store={store}>
<BasicWebChat />
<RunFunction fn={() => resolve(fn?.())} key={Date.now() + ''} />
</Composer>,
document.getElementById('webchat')
)
);

renderWithFunction();

await pageConditions.uiConnected();

await directLine.emulateIncomingActivity({
from: { role: 'bot' },
id: 'a-00001',
type: 'message',
text: "Hi! I'm Cody, the devbot. How can I help?",
entities: [
{
'@context': 'https://schema.org',
'@id': '',
'@type': 'Message',
type: 'https://schema.org/Message',
potentialAction: [
{
'@type': 'LikeAction',
// Will change to "ActiveActionStatus" during submission.
// Will change to "CompletedActionStatus" after we receive the echoback of this messageBack/postBack.
actionStatus: 'PotentialActionStatus',
target: {
'@type': 'EntryPoint',
// We use URL handler to catch ms-directline:// protocol.
urlTemplate: 'ms-directline://postback?interaction=like'
}
},
{
'@type': 'DislikeAction',
actionStatus: 'PotentialActionStatus',
result: {
'@type': 'Review',
reviewBody: "I don't like it.",
// This is related to W3C Hyrda, will become variable "reason" to use in URL Template later.
'reviewBody-input': {
'@type': 'PropertyValueSpecification',
// Many things at PropertyValueSpecification can be directly map to HTML Form elements.
// We may be able to build a form automatically.
valueMinLength: 3,
valueName: 'reason'
}
},
target: {
'@type': 'EntryPoint',
// RFC-6570 URL Template syntax to add &reason=I%20don't%20like%20it.
// We use URL handler to catch ms-directline:// protocol.
urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}'
}
}
]
}
]
});

await pageConditions.numActivitiesShown(1);

// ---

// WHEN: Click on the "Like" button.
// TODO: Click on the "Like" button, instead of emulating outgoing activity.
const likeEmulation = await directLine.emulateOutgoingActivity({
channelData: { postBack: true },
from: { role: 'user' },
replyToId: 'a-00001',
type: 'message',
value: { interaction: 'like' }
});

const likeActivities1 = await renderWithFunction(() => useActivities()[0]);

expect(likeActivities1).toHaveLength(2);
expect(likeActivities1).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: 'a-00001',
entities: expect.arrayContaining([
expect.objectContaining({
'@id': '',
'@type': 'Message',
potentialAction: expect.arrayContaining([
expect.objectContaining({
'@type': 'LikeAction'
// THEN: Should mark the button as active (a.k.a. processing.)
// TODO: Uncomment this like, it should pass.
// actionStatus: 'ActiveActionStatus'
}),
expect.objectContaining({
'@type': 'LikeAction',
actionStatus: 'PotentialActionStatus'
})
])
})
])
})
])
);

await likeEmulation.echoBack();

const likeActivities2 = await renderWithFunction(() => useActivities()[0]);

expect(likeActivities2).toHaveLength(2);
expect(likeActivities2).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: 'a-00001',
entities: expect.arrayContaining([
expect.objectContaining({
'@id': '',
'@type': 'Message',
potentialAction: expect.arrayContaining([
expect.objectContaining({
'@type': 'LikeAction'
// THEN: Should mark the button as active completed.
// TODO: Uncomment this like, it should pass.
// actionStatus: 'CompletedActionStatus'
}),
expect.objectContaining({
'@type': 'LikeAction',
actionStatus: 'PotentialActionStatus'
})
])
})
])
})
])
);

likeEmulation.resolvePostActivity();

// THEN: postBack should not show as a visible message.
await pageConditions.numActivitiesShown(1);
await host.snapshot('local');

// --- Changing thought, click on the "Dislike" button.

// WHEN: Click on the "Dislike" button.
// TODO: Click on the "Dislike" button, instead of emulating outgoing activity.
const dislikeEmulation = await directLine.emulateOutgoingActivity({
channelData: { postBack: true },
from: { role: 'user' },
replyToId: 'a-00001',
type: 'message',
value: { interaction: 'like' }
});

const dislikeActivities1 = await renderWithFunction(() => useActivities()[0]);

expect(dislikeActivities1).toHaveLength(3);
expect(dislikeActivities1).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: 'a-00001',
entities: expect.arrayContaining([
expect.objectContaining({
'@id': '',
'@type': 'Message',
potentialAction: expect.arrayContaining([
expect.objectContaining({
'@type': 'LikeAction',
// THEN: Should undo the interaction and turn it back into PotentialActionStatus.
actionStatus: 'PotentialActionStatus'
}),
expect.objectContaining({
'@type': 'DislikeAction'
// THEN: Should mark the button as active (a.k.a. processing.)
// TODO: Uncomment this like, it should pass.
// actionStatus: 'ActiveActionStatus'
})
])
})
])
})
])
);

await dislikeEmulation.echoBack();

const dislikeActivities2 = await renderWithFunction(() => useActivities()[0]);

expect(dislikeActivities2).toHaveLength(3);
expect(dislikeActivities2).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: 'a-00001',
entities: expect.arrayContaining([
expect.objectContaining({
'@id': '',
'@type': 'Message',
potentialAction: expect.arrayContaining([
expect.objectContaining({
'@type': 'LikeAction',
// THEN: Should undo the interaction and turn it back into PotentialActionStatus.
actionStatus: 'PotentialActionStatus'
}),
expect.objectContaining({
'@type': 'DislikeAction'
// THEN: Should mark the button as completed.
// TODO: Uncomment this like, it should pass.
// actionStatus: 'CompletedActionStatus'
})
])
})
])
})
])
);

dislikeEmulation.resolvePostActivity();

// THEN: postBack should not show as a visible message.
await pageConditions.numActivitiesShown(1);
await host.snapshot('local');
});
</script>
</body>
</html>

Unchanged files with check annotations Beta

const screenshot = await takeStabilizedScreenshot(webDriver);
expect(screenshot).toMatchImageSnapshot(

Check failure on line 15 in packages/test/harness/src/host/common/host/snapshot.js

GitHub Actions / HTML test (2/17)

conversationStartProperties › with locale of zh-CN should get "Hello and welcome!" in Simplified Chinese.

Expected image to match or be a close match to snapshot but was 0.4544270833333333% different from snapshot (1047 differing pixels). See diff for details: /home/runner/work/BotFramework-WebChat/BotFramework-WebChat/__tests__/__image_snapshots__/html/__diff_output__/conversation-start-properties-send-zh-cn-js-conversation-start-properties-with-locale-of-zh-cn-should-get-hello-and-welcome-in-simplified-chinese-1-snap-diff.png at toMatchImageSnapshot (packages/test/harness/src/host/common/host/snapshot.js:15:24) at tryCatch (node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) at Generator.<anonymous> (node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) at Generator.next (node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17) at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)

Check failure on line 15 in packages/test/harness/src/host/common/host/snapshot.js

GitHub Actions / HTML test (15/17)

fluentTheme/carousel.html

Expected image to match or be a close match to snapshot but was 8.37109375% different from snapshot (19287 differing pixels). See diff for details: /home/runner/work/BotFramework-WebChat/BotFramework-WebChat/__tests__/html2/fluentTheme/carousel.html.snap-1-diff.png at toMatchImageSnapshot (packages/test/harness/src/host/common/host/snapshot.js:15:24) at tryCatch (node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) at Generator.<anonymous> (node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) at Generator.next (node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17) at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)

Check failure on line 15 in packages/test/harness/src/host/common/host/snapshot.js

GitHub Actions / HTML test (5/17)

likeAction/behavior.html

New snapshot was not written. The update flag must be explicitly passed to write a new snapshot. + This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default. at toMatchImageSnapshot (packages/test/harness/src/host/common/host/snapshot.js:15:24) at tryCatch (node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) at Generator.<anonymous> (node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) at Generator.next (node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17) at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
mode === 'local'
? {
customDiffDir: testRoot,
await expect(driver.takeScreenshot()).resolves.toMatchImageSnapshot(imageSnapshotOptions);
});
test('with default avatar only on one side', async () => {

Check failure on line 264 in __tests__/customizableAvatar.js

GitHub Actions / HTML test (10/17)

customizable avatar › in RTL › with default avatar only on one side

thrown: "Exceeded timeout of 50000 ms for a test. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test." at test (__tests__/customizableAvatar.js:264:5) at describe (__tests__/customizableAvatar.js:193:3) at Object.describe (__tests__/customizableAvatar.js:11:1)
let props = createDefaultProps();
props = { ...props, locale: 'ar-EG', styleOptions: { ...props.styleOptions, userAvatarInitials: undefined } };
// In real world, there could be multiple downstream middleware in the chain.
// We found this bug only affect if we call the same instance of downstream middleware more than once.
// https://github.com/microsoft/BotFramework-WebChat/issues/2838
test('file upload should show thumbnail and file name', async () => {

Check failure on line 17 in __tests__/attachmentMiddleware.js

GitHub Actions / HTML test (7/17)

file upload should show thumbnail and file name

thrown: "Exceeded timeout of 50000 ms for a test. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test." at Object.test (__tests__/attachmentMiddleware.js:17:1)
const { driver, pageObjects } = await setupWebDriver({
props: {
attachmentMiddleware:
expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
});
test('oauth card', async () => {

Check failure on line 49 in __tests__/richCards.js

GitHub Actions / HTML test (12/17)

oauth card

thrown: "Exceeded timeout of 50000 ms for a test. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test." at Object.test (__tests__/richCards.js:49:1)
const { driver, pageObjects } = await setupWebDriver({ useProductionBot: true });
await driver.wait(uiConnected(), timeouts.directLine);
expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
});
test('card action "signin"', async () => {

Check failure on line 53 in __tests__/cardActionMiddleware.js

GitHub Actions / HTML test (6/17)

card action "signin"

thrown: "Exceeded timeout of 50000 ms for a test. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test." at Object.test (__tests__/cardActionMiddleware.js:53:1)
const { driver, pageObjects } = await setupWebDriver({
props: {
cardActionMiddleware:
jest.setTimeout(timeouts.test);
test('calling sendFile should send files', async () => {

Check failure on line 12 in __tests__/hooks/useSendFiles.js

GitHub Actions / HTML test (6/17)

calling sendFile should send files

thrown: "Exceeded timeout of 50000 ms for a test. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test." at Object.test (__tests__/hooks/useSendFiles.js:12:1)
const { driver, pageObjects } = await setupWebDriver({
// TODO: [P3] Offline bot did not reply with a downloadable attachment, we need to use production bot
useProductionBot: true