Skip to content

Fix streaming behavior by capturing typingActivityId in nextActivityIdToKeyMap #5609

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.

Sign up for GitHub

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

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
+514 −3
Open

Fix streaming behavior by capturing typingActivityId in nextActivityIdToKeyMap #5609

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
88c4d49
Fix streaming behavior by capturing typingActivityId in nextActivityI…
benbrown Oct 3, 2025
8867617
Merge branch 'main' into users/benbro/fix-streaming-behavior
benbrown Oct 3, 2025
00da7ea
Add new test to validate streaming entities in the entities field rat…
benbrown Oct 9, 2025
7c4d142
additional tests for entities
benbrown Oct 9, 2025
8e15b00
Update streaming test data to better match reality
benbrown Oct 10, 2025
5f955d0
remove old snapshot
benbrown Oct 10, 2025
bbe6a55
minor typo
benbrown Oct 10, 2025
9a34ff2
Merge branch 'main' into users/benbro/fix-streaming-behavior
benbrown Oct 13, 2025
02bb569
add one additional message to the test data
benbrown Oct 14, 2025
a669a32
updated snapshots
benbrown Oct 14, 2025
eeec789
:Merge branch 'users/benbro/fix-streaming-behavior' of https://github…
benbrown Oct 14, 2025
442dc40
remove streamId from first entity
benbrown Oct 14, 2025
46c95d5
Merge branch 'main' into users/benbro/fix-streaming-behavior
benbrown Oct 14, 2025
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
90 changes: 90 additions & 0 deletions __tests__/html2/livestream/entities.Informative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<link href="./css/pauseAnimation.css" rel="stylesheet" type="text/css" />
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/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>
</head>
<body>
<main id="webchat"></main>
<script type="module">
run(async function () {
const {
React: { createElement },
ReactDOM: { render },
WebChat: {
Components: { BasicWebChat, Composer },
decorator: { WebChatDecorator }
}
} = window; // Imports in UMD fashion.

const { directLine, store } = testHelpers.createDirectLineEmulator();

const styleOptions = {
typingAnimationBackgroundImage: `url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAUACgDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAYCBwMFCP/EACsQAAECBQIEBQUAAAAAAAAAAAECAwAEBQYRBxITIjFBMlFhccFScoGh8f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD0lctx023JVD9UeKOIcNoSNylkdcCMbauSmXHLOPUx8r4ZAcQtO1SM9Mj5iO1gtWo1syc7S2zMKYSptbIPNgnII8/5HBpRZ9RpaKjNVVCpUzLPAQ1nmA7qPl6fmAondRrcaqhkVTiiQrYXgglsH7vnpHc3DcNNoEimaqT4Q2s4bCRuUs+gEaLd05uNFVMmiS3o3YEwFDhlP1Z7e3WLzUuzahUKHRk0zM07TmeApvOFLGEjcM9+Xp6wFnbN0Uu5GnF0x4qW1je2tO1Sc9Djy9oRD6QWlU6PPzVSqjRlgtksttKPMcqBKiO3h/cIDacIQgEIQgEIQgP/2Q==')`
};

render(
createElement(
WebChatDecorator,
{},
createElement(
Composer,
{
directLine,
store,
styleOptions
},
createElement(BasicWebChat)
)
),
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await directLine.emulateIncomingActivity({
from: {
id: 'u-00001',
name: 'Bot',
role: 'bot'
},
text: 'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
});

const firstTypingActivityId = 't-00001';

// WHEN: An informative message is received.
await directLine.emulateIncomingActivity({
entities: [{
streamSequence: 1,
streamType: 'informative',
type: 'streaminfo',
}],
from: {
id: 'u-00001',
name: 'Bot',
role: 'bot'
},
id: 't-00001',
text: 'Nisi elit quis nisi consectetur.',
type: 'typing'
});

// THEN: Should render the informative message.
expect(pageElements.activityContents()[0]).toHaveProperty(
'textContent',
'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
);
expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'Nisi elit quis nisi consectetur.');

await pageConditions.numActivitiesShown(2);
await host.snapshot('local');
});
</script>
</body>
</html>
Binary file added __tests__/html2/livestream/entities.Informative.html.snap-1.png
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we need to pause the animation, or maybe it is already paused when running in WebDriver.

In case pause is needed, set accessibility "reduced motion" in Dev Tools.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
184 changes: 184 additions & 0 deletions __tests__/html2/livestream/entities.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
npm <!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<link href="./css/pauseAnimation.css" rel="stylesheet" type="text/css" />
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/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>
</head>
<body>
<main id="webchat"></main>
<script type="module">
run(async function () {
const {
React: { createElement },
ReactDOM: { render },
WebChat: {
Components: { BasicWebChat, Composer },
decorator: { WebChatDecorator },
hooks: { useActivityKeys, useGetActivitiesByKey }
}
} = window; // Imports in UMD fashion.

const { directLine, store } = testHelpers.createDirectLineEmulator();
let currentActivityKeysWithId = [];

const Monitor = () => {
const [activityKeys] = useActivityKeys();
const getActivitiesByKey = useGetActivitiesByKey();

currentActivityKeysWithId = Object.freeze(
activityKeys.map(key => [key, getActivitiesByKey(key).map(({ id }) => id)])
);

return false;
};

render(
createElement(
WebChatDecorator,
{},
createElement(
Composer,
{
directLine,
store
},
createElement(BasicWebChat),
createElement(Monitor)
)
),
document.getElementById('webchat')
);

await pageConditions.uiConnected();

// SETUP: Bot sent a message.
await directLine.emulateIncomingActivity({
id: 'a-00001',
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
text: 'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.',
type: 'message'
});

let firstActivityKey = currentActivityKeysWithId[0][0];

// WHEN: Bot is typing a message.
const firstTypingActivityId = 't-00001';

await directLine.emulateIncomingActivity({
entities: [{ streamSequence: 1, streamType: 'streaming', type: 'streaminfo', streamId: 'a-entities' }],
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
id: firstTypingActivityId,
text: 'A quick',
type: 'typing'
});

let secondActivityKey = currentActivityKeysWithId[1][0];

// THEN: Should display 2 messages.
await pageConditions.numActivitiesShown(2);

expect(pageElements.typingIndicator()).toBeFalsy();
expect(pageElements.activityContents()[0]).toHaveProperty(
'textContent',
'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
);
expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick');
await host.snapshot('local');

// THEN: Should have 2 activity keys.
expect(currentActivityKeysWithId).toEqual([
[firstActivityKey, ['a-00001']],
[secondActivityKey, ['t-00001']]
]);

// ---

// WHEN: Bot continue typing the message.
await directLine.emulateIncomingActivity({
entities: [{ streamId: 'a-entities', streamSequence: 2, type: 'streaminfo', streamType: 'streaming' }],
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
id: 't-00002',
text: 'A quick brown fox',
type: 'typing'
});

// THEN: Should display 2 messages.
await pageConditions.numActivitiesShown(2);

expect(pageElements.typingIndicator()).toBeFalsy();
expect(pageElements.activityContents()[0]).toHaveProperty(
'textContent',
'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
);
expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox');
await waitFor(() => expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox'));

Probably need waitFor() to eliminate test flaky.

await host.snapshot('local');

// THEN: Should have 2 activity keys only.
expect(currentActivityKeysWithId).toEqual([
[firstActivityKey, ['a-00001']],
[secondActivityKey, ['t-00001', 't-00002']]
]);

// ---

// WHEN: Bot continue typing the message.
await directLine.emulateIncomingActivity({
entities: [{ streamId: 'a-entities', streamSequence: 3, type: 'streaminfo', streamType: 'streaming' }],
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
id: 't-00003',
text: 'A quick brown fox jumped over',
type: 'typing'
});

// THEN: Should display 2 messages.
await pageConditions.numActivitiesShown(2);
expect(pageElements.typingIndicator()).toBeFalsy();
expect(pageElements.activityContents()[0]).toHaveProperty(
'textContent',
'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
);
expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over');
await waitFor(() => expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'A quick brown fox jumped over'));

This probably need waitFor() to eliminate test flaky.

await host.snapshot('local');

// THEN: Should have 2 activity keys.
expect(currentActivityKeysWithId).toEqual([
[firstActivityKey, ['a-00001']],
[secondActivityKey, ['t-00001', 't-00002', 't-00003']]
]);

// WHEN: Bot finished typing the message.
await directLine.emulateIncomingActivity({
entities: [{ streamId: 'a-entities', type: 'streaminfo', streamType: 'final' }],
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
id: 'a-00002',
text: 'A quick brown fox jumped over the lazy dogs.',
type: 'message'
});

// THEN: Should display 2 messages.
await pageConditions.numActivitiesShown(2);
expect(pageElements.typingIndicator()).toBeFalsy();
expect(pageElements.activityContents()[0]).toHaveProperty(
'textContent',
'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
);
expect(pageElements.activityContents()[1]).toHaveProperty(
'textContent',
'A quick brown fox jumped over the lazy dogs.'
);
Comment on lines +170 to +173
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
expect(pageElements.activityContents()[1]).toHaveProperty(
'textContent',
'A quick brown fox jumped over the lazy dogs.'
);
await waitFor(() =>
expect(pageElements.activityContents()[1]).toHaveProperty(
'textContent',
'A quick brown fox jumped over the lazy dogs.'
)
);

await host.snapshot('local');

// THEN: Should have 2 activity keys.
expect(currentActivityKeysWithId).toEqual([
[firstActivityKey, ['a-00001']],
[secondActivityKey, ['t-00001', 't-00002', 't-00003', 'a-00002']]
]);
});
</script>
</body>
</html>
Binary file added __tests__/html2/livestream/entities.html.snap-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added __tests__/html2/livestream/entities.html.snap-2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added __tests__/html2/livestream/entities.html.snap-3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added __tests__/html2/livestream/entities.html.snap-4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading