useSubmit() should function after reconnect (microsoft#4707)

* useSubmit() should function after reconnect * Add entry
dereksonthejob · Apr 13, 2023 · 753b8a6 · 753b8a6
1 parent 960a5a5
commit 753b8a6
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4557](https://github.com/microsoft/BotFramework-WebChat/issues/4557). Flipper buttons in carousels and suggested actions is now renamed to "next/previous" from "left/right", by [@compulim](https://github.com/compulim), in PR [#4646](https://github.com/microsoft/BotFramework-WebChat/pull/4646)
 -  Fixes [#4652](https://github.com/microsoft/BotFramework-WebChat/issues/4652). Keyboard help screen, activity focus traps, and chat history terminator should not be hidden behind `aria-hidden` because they are focusable, by [@compulim](https://github.com/compulim), in PR [#4659](https://github.com/microsoft/BotFramework-WebChat/pull/4659)
 -  Fixes [#4665](https://github.com/microsoft/BotFramework-WebChat/issues/4665). Updated development server with latest ESBuild API, by [@compulim](https://github.com/compulim), in PR [#4662](https://github.com/microsoft/BotFramework-WebChat/pull/4662).
+-  Fixes [#4706](https://github.com/microsoft/BotFramework-WebChat/issues/4706). Send button and <kbd>ENTER</kbd> key should function after reconnected, by [@compulim](https://github.com/compulim), in PR [#4707](https://github.com/microsoft/BotFramework-WebChat/pull/4707).
 
 ### Changed
 

diff --git a/__tests__/html/chatAdapter.reconnect.html b/__tests__/html/chatAdapter.reconnect.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <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>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // WHEN: Reconnecting.
+
+        const { resolve } = directLine.emulateReconnect();
+
+        // THEN: Connectivity status should show "Network interruption occurred. Reconnecting…"
+
+        await pageConditions.connectivityStatusShown('Network interruption occurred. Reconnecting…');
+
+        // ---
+
+        // WHEN: Reconnected.
+
+        resolve();
+
+        // THEN: Connectivity status should be hidden as it is connected.
+
+        await pageConditions.became(
+          'connectivity status is "connected"',
+          // Connected means the element is not present.
+          () => !pageElements.connectivityStatus(),
+          1000
+        );
+
+        // ---
+
+        // WHEN: Send a message.
+
+        const { resolveAll } = await directLine.actPostActivity(() =>
+          pageObjects.sendMessageViaSendBox('echo Hello, World!', { waitForSend: false })
+        );
+
+        await resolveAll();
+
+        // THEN: Should send successfully.
+
+        await pageConditions.allOutgoingActivitiesSent();
+
+        // THEN: Should show one message.
+
+        await pageConditions.numActivitiesShown(1);
+
+        // ---
+
+        // WHEN: Bot send a message.
+
+        await directLine.emulateIncomingActivity({ text: 'Aloha!', type: 'message' });
+
+        // THEN: Should show 2 messages.
+
+        await pageConditions.numActivitiesShown(2);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/chatAdapter.reconnect.js b/__tests__/html/chatAdapter.reconnect.js
@@ -0,0 +1,3 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+test('after reconnect should send and receive message as usual', () => runHTML('chatAdapter.reconnect.html'));
diff --git a/packages/component/src/providers/internal/SendBox/SendBoxComposer.tsx b/packages/component/src/providers/internal/SendBox/SendBoxComposer.tsx
@@ -91,7 +91,11 @@ const SendBoxComposer = ({ children }: PropsWithChildren<{}>) => {
   setErrorRef.current = setError;
 
   const submitErrorRef = useRefFrom<'empty' | 'offline' | undefined>(
-    connectivityStatus !== 'connected' ? 'offline' : !sendBoxValue ? 'empty' : undefined
+    connectivityStatus !== 'connected' && connectivityStatus !== 'reconnected'
+      ? 'offline'
+      : !sendBoxValue
+      ? 'empty'
+      : undefined
   );
 
   const submit = useCallback<ContextType['submit']>(

diff --git a/packages/test/page-object/src/globals/pageObjects/sendMessageViaSendBox.js b/packages/test/page-object/src/globals/pageObjects/sendMessageViaSendBox.js
@@ -1,6 +1,8 @@
 import allOutgoingActivitiesSent from '../pageConditions/allOutgoingActivitiesSent';
+import became from '../pageConditions/became';
 import numActivitiesShown from '../pageConditions/numActivitiesShown';
 import getActivityElements from '../pageElements/activities';
+import getSendBoxTextBoxElement from '../pageElements/sendBoxTextBox';
 import typeInSendBox from './typeInSendBox';
 
 export default async function sendMessageViaSendBox(text, { waitForNumResponse = 0, waitForSend = true } = {}) {
@@ -14,6 +16,10 @@ export default async function sendMessageViaSendBox(text, { waitForNumResponse =
 
   await typeInSendBox(text, '\n');
 
-  waitForSend && (await allOutgoingActivitiesSent());
+  if (waitForSend) {
+    await became('send box to be emptied', () => !getSendBoxTextBoxElement()?.value, 1000);
+    await allOutgoingActivitiesSent();
+  }
+
   waitForNumResponse && (await numActivitiesShown(numActivitiesShownBeforeSend + 1 + waitForNumResponse));
 }
diff --git a/packages/test/page-object/src/globals/testHelpers/createDirectLineEmulator.js b/packages/test/page-object/src/globals/testHelpers/createDirectLineEmulator.js
@@ -111,6 +111,13 @@ export default function createDirectLineEmulator({ autoConnect = true, ponyfill
       // This is a mock and will no-op on dispatch().
     },
     postActivity,
+    emulateReconnect: () => {
+      connectionStatusDeferredObservable.next(1);
+
+      return {
+        resolve: () => connectionStatusDeferredObservable.next(2)
+      };
+    },
     emulateConnected: connectedDeferred.resolve,
     emulateIncomingActivity: async activity => {
       if (typeof activity === 'string') {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */

		test('after reconnect should send and receive message as usual', () => runHTML('chatAdapter.reconnect.html'));