Rename sendTyping to sendTypingIndicator and add deprecation notes

CHANGELOG.md

@@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Removed
 - `botAvatarImage` and `userAvatarImage` props, as they are moved inside `styleOptions`, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)
+- `sendTyping` props is now renamed to `sendTypingIndicator`, by [@compulim](https://github.com/compulim), in PR [#1584](https://github.com/Microsoft/BotFramework-WebChat/pull/1584)
 
 ### Samples
 - `core`: [Programmatic access to post activity](https://microsoft.github.io/BotFramework-WebChat/15.c.programmatic-post-activity/), in [#1568](https://github.com/Microsoft/BotFramework-WebChat/pull/1568)

__tests__/sendTypingIndicator.js

@@ -0,0 +1,41 @@
+import { By, Key } from 'selenium-webdriver';
+
+import directLineConnected from './setup/conditions/directLineConnected';
+import minNumActivitiesReached from './setup/conditions/minNumActivitiesReached';
+import webChatLoaded from './setup/conditions/webChatLoaded';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+test('Send typing indicator', async () => {
+  const { driver } = await setupWebDriver({ props: { sendTypingIndicator: true } });
+
+  await driver.wait(webChatLoaded(), 2000);
+  await driver.wait(directLineConnected(), 2000);
+
+  const input = await driver.findElement(By.tagName('input[type="text"]'));
+
+  await input.sendKeys('echo-typing', Key.RETURN);
+  await driver.wait(minNumActivitiesReached(3), 2000);
+  await input.sendKeys('ABC');
+
+  // Typing indicator takes longer to come back
+  await driver.wait(minNumActivitiesReached(4), 5000);
+}, 60000);
+
+// TODO: [P3] Take this deprecation code out when releasing on or after January 13 2020
+test('Send typing indicator using deprecated props', async () => {
+  const { driver } = await setupWebDriver({ props: { sendTyping: true } });
+
+  await driver.wait(webChatLoaded(), 2000);
+  await driver.wait(directLineConnected(), 2000);
+
+  const input = await driver.findElement(By.tagName('input[type="text"]'));
+
+  await input.sendKeys('echo-typing', Key.RETURN);
+  await driver.wait(minNumActivitiesReached(3), 2000);
+  await input.sendKeys('ABC');
+
+  // Typing indicator takes longer to come back
+  await driver.wait(minNumActivitiesReached(4), 5000);
+}, 60000);

__tests__/setup/conditions/directLineConnected.js

@@ -1,7 +1,10 @@
 import { Condition } from 'selenium-webdriver';
 
 export default function () {
-  return new Condition('Waiting for Direct Line to connect', async driver => {
-    return await driver.executeScript(() => ~window.WebChatTest.actions.findIndex(({ type }) => type === 'DIRECT_LINE/CONNECT_FULFILLED'));
-  });
+  return new Condition('Waiting for Direct Line to connect with a welcome message', async driver =>
+    await driver.executeScript(() =>
+      !!~window.WebChatTest.actions.findIndex(({ type }) => type === 'DIRECT_LINE/CONNECT_FULFILLED')
+      && !!document.querySelector(`[role="listitem"]:nth-child(1)`)
+    )
+  );
 }

__tests__/setup/conditions/typingActivityReceived.js

@@ -0,0 +1,10 @@
+import { Condition } from 'selenium-webdriver';
+
+export default function () {
+  return new Condition('Waiting for incoming typing activity', async driver => {
+    await driver.executeScript(() =>
+      // TODO: [P2] We should use activities selector from core
+      !!~window.WebChatTest.store.getState().activities.findIndex(({ type }) => type === 'typing')
+    )
+  );
+}

__tests__/setup/setupTestFramework.js

@@ -21,7 +21,7 @@ expect.extend({
 let driverPromise;
 let serverPromise;
 
-global.setupWebDriver = async () => {
+global.setupWebDriver = async ({ props } = {}) => {
   if (!driverPromise) {
     driverPromise = (async () => {
       let { baseURL, builder } = await setupTestEnvironment(BROWSER_NAME, new Builder());
@@ -36,10 +36,10 @@ global.setupWebDriver = async () => {
         await driver.get(baseURL);
       }
 
-      await driver.executeScript(coverage => {
+      await driver.executeScript((coverage, options) => {
         window.__coverage__ = coverage;
-        main();
-      }, global.__coverage__);
+        main(options);
+      }, global.__coverage__, { props });
 
       return { driver };
     })();

__tests__/setup/web/index.html

@@ -52,7 +52,7 @@
     <script>
       window.WebChatTest = { actions: [] };
 
-      function main() {
+      function main({ props } = {}) {
         const webChatScript = document.createElement('script');
 
         webChatScript.setAttribute('src', '/webchat-instrumented.js');
@@ -78,7 +78,8 @@
             //   webSocket: false
             // })
             directLine: window.WebChat.createDirectLine({ token }),
-            store
+            store,
+            ...props
           }, document.getElementById('webchat'));
 
           document.querySelector('#webchat > *').focus();

packages/component/src/Composer.js

@@ -25,7 +25,7 @@ import {
   setLanguage,
   setSendBox,
   setSendTimeout,
-  setSendTyping,
+  setSendTypingIndicator,
   startDictate,
   startSpeakingActivity,
   stopDictate,
@@ -158,13 +158,13 @@ function patchPropsForAvatarInitials({ botAvatarInitials, userAvatarInitials, ..
   if (botAvatarInitials) {
     styleOptions = { ...styleOptions, botAvatarInitials };
 
-    console.warn('Web Chat: "botAvatarInitials" is deprecated. Please use "styleOptions.botAvatarInitials" instead.');
+    console.warn('Web Chat: "botAvatarInitials" is deprecated. Please use "styleOptions.botAvatarInitials" instead. "botAvatarInitials" will be removed on or after December 11 2019 .');
   }
 
   if (userAvatarInitials) {
     styleOptions = { ...styleOptions, userAvatarInitials };
 
-    console.warn('Web Chat: "userAvatarInitials" is deprecated. Please use "styleOptions.userAvatarInitials" instead.');
+    console.warn('Web Chat: "botAvatarInitials" is deprecated. Please use "styleOptions.botAvatarInitials" instead. "botAvatarInitials" will be removed on or after December 11 2019 .');
   }
 
   return {
@@ -222,14 +222,14 @@ class Composer extends React.Component {
 
     this.setLanguageFromProps(props);
     this.setSendTimeoutFromProps(props);
-    this.setSendTypingFromProps(props);
+    this.setSendTypingIndicatorFromProps(props);
 
     props.dispatch(createConnectAction({ directLine, userID }));
   }
 
   componentDidUpdate(prevProps) {
     const { props } = this;
-    const { directLine, locale, sendTimeout, sendTyping, userID } = props;
+    const { directLine, locale, sendTimeout, sendTyping, sendTypingIndicator, userID } = props;
 
     if (prevProps.locale !== locale) {
       this.setLanguageFromProps(props);
@@ -239,8 +239,13 @@ class Composer extends React.Component {
       this.setSendTimeoutFromProps(props);
     }
 
-    if (!prevProps.sendTyping !== !sendTyping) {
-      this.setSendTypingFromProps(props);
+    if (
+      !prevProps.sendTypingIndicator !== !sendTypingIndicator
+
+      // TODO: [P3] Take this deprecation code out when releasing on or after January 13 2020
+      || !prevProps.sendTyping !== !sendTyping
+    ) {
+      this.setSendTypingIndicatorFromProps(props);
     }
 
     if (
@@ -261,8 +266,14 @@ class Composer extends React.Component {
     props.dispatch(setSendTimeout(props.sendTimeout || 20000));
   }
 
-  setSendTypingFromProps(props) {
-    props.dispatch(setSendTyping(!!props.sendTyping));
+  setSendTypingIndicatorFromProps(props) {
+    if (typeof props.sendTyping === 'undefined') {
+      props.dispatch(setSendTypingIndicator(!!props.sendTypingIndicator));
+    } else {
+      // TODO: [P3] Take this deprecation code out when releasing on or after January 13 2020
+      console.warn('Web Chat: "sendTyping" has been renamed to "sendTypingIndicator". Please use "sendTypingIndicator" instead. This deprecation migration will be removed on or after January 13 2020.');
+      props.dispatch(setSendTypingIndicator(!!props.sendTyping));
+    }
   }
 
   render() {
@@ -375,7 +386,7 @@ ConnectedComposerWithStore.propTypes = {
   renderMarkdown: PropTypes.func,
   scrollToBottom: PropTypes.func,
   sendTimeout: PropTypes.number,
-  sendTyping: PropTypes.bool,
+  sendTypingIndicator: PropTypes.bool,
   store: PropTypes.any,
   userID: PropTypes.string,
   webSpeechPonyfillFactory: PropTypes.func

packages/core/src/actions/setSendTyping.js

@@ -1,6 +1,8 @@
+// TODO: [P3] Take this deprecation code out when releasing on or after 2020 January 13
 const SET_SEND_TYPING = 'WEB_CHAT/SET_SEND_TYPING';
 
 export default function (value) {
+  // Deprecation notes added to reducer
   return {
     type: SET_SEND_TYPING,
     payload: { sendTyping: !!value }

packages/core/src/actions/setSendTypingIndicator.js

@@ -0,0 +1,10 @@
+const SET_SEND_TYPING_INDICATOR = 'WEB_CHAT/SET_SEND_TYPING_INDICATOR';
+
+export default function (value) {
+  return {
+    type: SET_SEND_TYPING_INDICATOR,
+    payload: { sendTypingIndicator: !!value }
+  };
+}
+
+export { SET_SEND_TYPING_INDICATOR }

packages/core/src/index.js

@@ -14,6 +14,7 @@ import setLanguage from './actions/setLanguage';
 import setSendBox from './actions/setSendBox';
 import setSendTimeout from './actions/setSendTimeout';
 import setSendTyping from './actions/setSendTyping';
+import setSendTypingIndicator from './actions/setSendTypingIndicator';
 import startDictate from './actions/startDictate';
 import startSpeakingActivity from './actions/startSpeakingActivity';
 import stopDictate from './actions/stopDictate';
@@ -43,11 +44,14 @@ export {
   setLanguage,
   setSendBox,
   setSendTimeout,
-  setSendTyping,
+  setSendTypingIndicator,
   startDictate,
   startSpeakingActivity,
   stopDictate,
   stopSpeakingActivity,
   submitSendBox,
-  version
+  version,
+
+  // TODO: [P3] Take this deprecation code out when releasing on or after January 13 2020 
+  setSendTyping
 }

packages/core/src/reducer.ts

@@ -8,7 +8,7 @@ import readyState from './reducers/readyState';
 import referenceGrammarID from './reducers/referenceGrammarID';
 import sendBoxValue from './reducers/sendBoxValue';
 import sendTimeout from './reducers/sendTimeout';
-import sendTyping from './reducers/sendTyping';
+import sendTypingIndicator from './reducers/sendTypingIndicator';
 import suggestedActions from './reducers/suggestedActions';
 
 export default combineReducers({
@@ -20,6 +20,9 @@ export default combineReducers({
   referenceGrammarID,
   sendBoxValue,
   sendTimeout,
-  sendTyping,
-  suggestedActions
+  sendTypingIndicator,
+  suggestedActions,
+
+  // TODO: [P3] Take this deprecation code out when releasing on or after January 13 2020
+  sendTyping: sendTypingIndicator
 })

packages/core/src/reducers/sendTypingIndicator.js

@@ -0,0 +1,22 @@
+import { SET_SEND_TYPING } from '../actions/setSendTyping';
+import { SET_SEND_TYPING_INDICATOR } from '../actions/setSendTypingIndicator';
+
+const DEFAULT_STATE = false;
+
+export default function (state = DEFAULT_STATE, { payload, type }) {
+  switch (type) {
+    // TODO: [P3] Take this deprecation code out when releasing on or after 2020 January 13
+    case SET_SEND_TYPING:
+      console.warn('Web Chat: "sendTyping" has been renamed to "sendTypingIndicator". Please use "sendTypingIndicator" instead. This deprecation migration will be removed on or after January 13 2020.');
+      state = payload.sendTyping;
+      break;
+
+    case SET_SEND_TYPING_INDICATOR:
+      state = payload.sendTypingIndicator;
+      break;
+
+    default: break;
+  }
+
+  return state;
+}

packages/core/src/sagas.js

@@ -14,7 +14,7 @@ import sendFilesToPostActivitySaga from './sagas/sendFilesToPostActivitySaga';
 import sendMessageToPostActivitySaga from './sagas/sendMessageToPostActivitySaga';
 import sendMessageBackToPostActivitySaga from './sagas/sendMessageBackToPostActivitySaga';
 import sendPostBackToPostActivitySaga from './sagas/sendPostBackToPostActivitySaga';
-import sendTypingOnSetSendBoxSaga from './sagas/sendTypingOnSetSendBoxSaga';
+import sendTypingIndicatorOnSetSendBoxSaga from './sagas/sendTypingIndicatorOnSetSendBoxSaga';
 import startDictateAfterSpeakActivitySaga from './sagas/startDictateAfterSpeakActivitySaga';
 import startSpeakActivityOnPostActivitySaga from './sagas/startSpeakActivityOnPostActivitySaga';
 import stopDictateOnCardActionSaga from './sagas/stopDictateOnCardActionSaga';
@@ -36,7 +36,7 @@ export default function* () {
   yield fork(sendMessageToPostActivitySaga);
   yield fork(sendMessageBackToPostActivitySaga);
   yield fork(sendPostBackToPostActivitySaga);
-  yield fork(sendTypingOnSetSendBoxSaga);
+  yield fork(sendTypingIndicatorOnSetSendBoxSaga);
   yield fork(startDictateAfterSpeakActivitySaga);
   yield fork(startSpeakActivityOnPostActivitySaga);
   yield fork(stopDictateOnCardActionSaga);

packages/core/src/sagas/sendTypingOnSetSendBoxSaga.js → packages/core/src/sagas/sendTypingIndicatorOnSetSendBoxSaga.js

@@ -9,29 +9,37 @@ import {
 
 import { SET_SEND_BOX } from '../actions/setSendBox';
 import { SET_SEND_TYPING } from '../actions/setSendTyping';
+import { SET_SEND_TYPING_INDICATOR } from '../actions/setSendTypingIndicator';
 import postActivity, { POST_ACTIVITY } from '../actions/postActivity';
 
 import whileConnected from './effects/whileConnected';
 
-import sendTypingSelector from '../selectors/sendTyping';
+import sendTypingIndicatorSelector from '../selectors/sendTypingIndicator';
 
 import sleep from '../utils/sleep';
 
 const SEND_INTERVAL = 3000;
 
-function takeSendTyping(value) {
-  return take(({ payload, type }) => type === SET_SEND_TYPING && !payload.sendTyping === !value);
+function takeSendTypingIndicator(value) {
+  return take(
+    ({ payload, type }) => (
+      (type === SET_SEND_TYPING_INDICATOR && !payload.sendTypingIndicator === !value)
+
+      // TODO: [P3] Take this deprecation code out when releasing on or after January 13 2020
+      || (type === SET_SEND_TYPING && !payload.sendTyping === !value)
+    )
+  );
 }
 
 export default function* () {
-  yield whileConnected(sendTypingOnSetSendBox);
+  yield whileConnected(sendTypingIndicatorOnSetSendBox);
 }
 
-function* sendTypingOnSetSendBox() {
-  const sendTyping = yield select(sendTypingSelector);
+function* sendTypingIndicatorOnSetSendBox() {
+  const sendTypingIndicator = yield select(sendTypingIndicatorSelector);
 
-  if (!sendTyping) {
-    yield takeSendTyping(true);
+  if (!sendTypingIndicator) {
+    yield takeSendTypingIndicator(true);
   }
 
   for (;;) {
@@ -61,8 +69,8 @@ function* sendTypingOnSetSendBox() {
       }
     );
 
-    yield takeSendTyping(false);
+    yield takeSendTypingIndicator(false);
     yield cancel(task);
-    yield takeSendTyping(true);
+    yield takeSendTypingIndicator(true);
   }
 }

packages/core/src/selectors/sendTypingIndicator.js

@@ -0,0 +1 @@
+export default ({ sendTypingIndicator }) => sendTypingIndicator