Skip to content

Commit c312f7f

Browse files
OEvgenycompulim
OEvgeny
and
compulim
authored
fix: scope use-propagate to a single Web Chat instance (#5248)
* Add test * fix: scope use-propagate to a single webchat instance * Changelog --------- Co-authored-by: William Wong <compulim@users.noreply.github.com>
1 parent af6b947 commit c312f7f

14 files changed

+166
-82
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
4545
- Added missing support for chat history scroll with keyboard when Fluent send box is focused, in PR [#5191](https://github.com/microsoft/BotFramework-WebChat/pull/5191), by [@OEvgeny](https://github.com/OEvgeny)
4646
- Fixed DTMF command usage sent by telephone keypad, in PR [#5198](https://github.com/microsoft/BotFramework-WebChat/pull/5198), by [@OEvgeny](https://github.com/OEvgeny)
4747
- Fixed decorator import in legacy CommonJS environments, in [#5231](https://github.com/microsoft/BotFramework-WebChat/pull/5231), by [@OEvgeny](https://github.com/OEvgeny)
48+
- Scoped `use-propagate` to individual WebChat instances to prevent interference between multiple instances, in PR [#5248](https://github.com/microsoft/BotFramework-WebChat/pull/5248), by [@OEvgeny](https://github.com/OEvgeny)
4849

4950
### Changed
5051

‎__tests__/__image_snapshots__/html/focus-back-multiple-js-fluent-theme-applied-with-multiple-web-chat-instances-places-focus-back-1-snap.png‎

23.1 KB
Loading

‎__tests__/__image_snapshots__/html/focus-back-multiple-js-fluent-theme-applied-with-multiple-web-chat-instances-places-focus-back-2-snap.png‎

27.9 KB
Loading

‎__tests__/__image_snapshots__/html/focus-back-multiple-js-fluent-theme-applied-with-multiple-web-chat-instances-places-focus-back-3-snap.png‎

29.7 KB
Loading

‎__tests__/__image_snapshots__/html/focus-back-multiple-js-fluent-theme-applied-with-multiple-web-chat-instances-places-focus-back-4-snap.png‎

42.4 KB
Loading

‎__tests__/__image_snapshots__/html/focus-back-multiple-js-fluent-theme-applied-with-multiple-web-chat-instances-places-focus-back-5-snap.png‎

47.7 KB
Loading

‎__tests__/__image_snapshots__/html/focus-back-multiple-js-fluent-theme-applied-with-multiple-web-chat-instances-places-focus-back-6-snap.png‎

30.9 KB
Loading

‎__tests__/html/fluentTheme/focusBack.multiple.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+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/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+
<style>
13+
#webchat {
14+
display: flex;
15+
width: 720px;
16+
}
17+
#webchat > * {
18+
flex-basis: 50%;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<main id="webchat">
24+
<div id="webchat1"></div>
25+
<div id="webchat2"></div>
26+
</main>
27+
<script type="text/babel">
28+
run(
29+
async function () {
30+
const {
31+
React,
32+
ReactDOM: { render },
33+
WebChat: { FluentThemeProvider, ReactWebChat }
34+
} = window; // Imports in UMD fashion.
35+
36+
await host.windowSize(720, 640, document.getElementById('webchat'));
37+
38+
const createWebChat = (id) => {
39+
const { directLine, store } = testHelpers.createDirectLineEmulator();
40+
41+
const App = () => (
42+
<ReactWebChat directLine={directLine} store={store} styleOptions={{ hideTelephoneKeypadButton: false }} />
43+
);
44+
45+
render(
46+
<FluentThemeProvider>
47+
<App />
48+
</FluentThemeProvider>,
49+
document.getElementById(id)
50+
);
51+
52+
return { directLine, store };
53+
};
54+
55+
const webChat1 = createWebChat('webchat1');
56+
const webChat2 = createWebChat('webchat2');
57+
58+
await pageConditions.uiConnected();
59+
60+
// Test WebChat 1
61+
await webChat1.directLine.emulateIncomingActivity(
62+
'WebChat 1: Eiusmod anim adipisicing cupidatat adipisicing officia sint qui consequat veniam id aute.'
63+
);
64+
65+
await pageConditions.numActivitiesShown(1);
66+
67+
document.querySelector(`#webchat1 [data-testid="${WebChat.testIds.sendBoxTextBox}"]`).focus();
68+
69+
// WHEN: SHIFT-TAB key is pressed on WebChat 1.
70+
await host.sendShiftTab();
71+
72+
// THEN: Should focus on the chat history of WebChat 1.
73+
await host.snapshot();
74+
75+
// WHEN: A key is pressed on WebChat 1.
76+
await host.sendKeys('WebChat 1: The quick brown fox jumps over the lazy dog');
77+
78+
// THEN: Should focus on the SendBox of WebChat 1
79+
await host.snapshot();
80+
81+
await (await webChat1.directLine.actPostActivity(() => host.sendKeys('\n'))).resolveAll();
82+
83+
// THEN: Should send the activity in WebChat 1.
84+
await pageConditions.numActivitiesShown(2);
85+
await pageConditions.allOutgoingActivitiesSent();
86+
await host.snapshot();
87+
88+
// Test WebChat 2
89+
await webChat2.directLine.emulateIncomingActivity(
90+
'WebChat 2: Eiusmod anim adipisicing cupidatat adipisicing officia sint qui consequat veniam id aute.'
91+
);
92+
93+
document.querySelector(`#webchat2 [data-testid="${WebChat.testIds.sendBoxTextBox}"]`).focus();
94+
95+
// WHEN: SHIFT-TAB key is pressed on WebChat 2.
96+
await host.sendShiftTab();
97+
98+
// THEN: Should focus on the chat history of WebChat 2.
99+
await host.snapshot();
100+
101+
// WHEN: A key is pressed on WebChat 2.
102+
await host.sendKeys('WebChat 2: The quick brown fox jumps over the lazy dog');
103+
104+
// THEN: Should focus on the SendBox of WebChat 2
105+
await host.snapshot();
106+
107+
await (await webChat2.directLine.actPostActivity(() => host.sendKeys('\n'))).resolveAll();
108+
109+
// THEN: Should send the activity in WebChat 2.
110+
await pageConditions.allOutgoingActivitiesSent();
111+
await host.snapshot();
112+
},
113+
// TODO: unskip and try ShadowDOM when we get support
114+
{ skipCheckAccessibility: true }
115+
);
116+
// TODO: unskip and try ShadowDOM when we get support
117+
// TODO: fix checkAccessibility throws even if skipped
118+
window.checkAccessibility = async () => {}
119+
</script>
120+
</body>
121+
</html>

‎__tests__/html/fluentTheme/focusBack.multiple.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
2+
3+
describe('Fluent theme applied with multiple WebChat instances', () => {
4+
test('places focus back', () => runHTML('fluentTheme/focusBack.multiple'));
5+
});

‎packages/component/package-lock.json‎

Lines changed: 11 additions & 67 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)