Add React Hooks for customization (part 11) (#2552)

* Add send box related hooks

* Fix merge

CHANGELOG.md

@@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  PR [#2544](https://github.com/microsoft/BotFramework-WebChat/pull/2544): `useAvatarForBot`, `useAvatarForUser`
    -  PR [#2547](https://github.com/microsoft/BotFramework-WebChat/pull/2547): `useEmitTypingIndicator`, `usePeformCardAction`, `usePostActivity`, `useSendEvent`, `useSendFiles`, `useSendMessage`, `useSendMessageBack`, `useSendPostBack`
    -  PR [#2548](https://github.com/microsoft/BotFramework-WebChat/pull/2548): `useDisabled`
+   -  PR [#2552](https://github.com/microsoft/BotFramework-WebChat/pull/2552): `useFocusSendBox`, `useScrollToEnd`, `useSendBoxValue`, `useSubmitSendBox`, `useTextBoxSubmit`, `useTextBoxValue`
 -  Fixes [#2597](https://github.com/microsoft/BotFramework-WebChat/issues/2597). Modify `watch` script to `start` and add `tableflip` script for throwing `node_modules`, by [@corinagum](https://github.com/corinagum) in PR [#2598](https://github.com/microsoft/BotFramework-WebChat/pull/2598)
 
 ### Fixed

__tests__/hooks/useFocusSendBox.js

@@ -0,0 +1,19 @@
+import { timeouts } from '../constants.json';
+
+import sendBoxTextBoxFocused from '../setup/conditions/sendBoxTextBoxFocused';
+import uiConnected from '../setup/conditions/uiConnected';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+test('calling emitTypingIndicator should send a typing activity', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+
+  await pageObjects.runHook('useFocusSendBox', [], fn => fn());
+
+  await driver.wait(sendBoxTextBoxFocused(), timeouts.ui);
+});

__tests__/hooks/useScrollToEnd.js

@@ -0,0 +1,34 @@
+import { imageSnapshotOptions, timeouts } from '../constants.json';
+
+import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
+import scrollToBottomButtonVisible from '../setup/conditions/scrollToBottomButtonVisible';
+import scrollToBottomCompleted from '../setup/conditions/scrollToBottomCompleted';
+import uiConnected from '../setup/conditions/uiConnected';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+test('calling scrollToEnd should scroll to end', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+
+  await pageObjects.sendMessageViaSendBox('help');
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
+
+  await driver.executeScript(() => {
+    document.querySelector('[role="log"] > *').scrollTop = 0;
+  });
+
+  await driver.wait(scrollToBottomButtonVisible(), timeouts.ui);
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+  await pageObjects.runHook('useScrollToEnd', [], scrollToEnd => scrollToEnd());
+  await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+});

__tests__/hooks/useSendBoxValue.js

@@ -0,0 +1,26 @@
+import { timeouts } from '../constants.json';
+
+import uiConnected from '../setup/conditions/uiConnected';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+test('getter should get the send box text', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+
+  await pageObjects.typeOnSendBox('Hello, World!');
+  await expect(pageObjects.runHook('useSendBoxValue', [], result => result[0])).resolves.toBe('Hello, World!');
+});
+
+test('setter should set the send box text', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+
+  await pageObjects.runHook('useSendBoxValue', [], result => result[1]('Hello, World!'));
+  await expect(pageObjects.getSendBoxText()).resolves.toBe('Hello, World!');
+});

__tests__/hooks/useSubmitSendBox.js

@@ -0,0 +1,24 @@
+import { imageSnapshotOptions, timeouts } from '../constants.json';
+
+import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
+import uiConnected from '../setup/conditions/uiConnected';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+test('calling submitSendBox should send the message in send box', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+
+  await pageObjects.typeOnSendBox('Hello, World!');
+  await pageObjects.runHook('useSubmitSendBox', [], submitSendBox => submitSendBox());
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});

__tests__/hooks/useTextBox.js

@@ -0,0 +1,29 @@
+import { imageSnapshotOptions, timeouts } from '../constants.json';
+
+import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
+import scrollToBottomCompleted from '../setup/conditions/scrollToBottomCompleted';
+import uiConnected from '../setup/conditions/uiConnected';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+// TODO: [P1] Test is temporarily disable until fully implemented
+test('calling submit should scroll to end', async () => {
+  // const { driver, pageObjects } = await setupWebDriver();
+  // await driver.wait(uiConnected(), timeouts.directLine);
+  // await pageObjects.typeOnSendBox('help');
+  // await expect(pageObjects.runHook('useTextBoxValue', [], textBoxValue => textBoxValue[0])).resolves.toBe('help');
+  // await pageObjects.clickSendButton();
+  // await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  // await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
+  // await driver.executeScript(() => {
+  //   document.querySelector('[role="log"] > *').scrollTop = 0;
+  // });
+  // expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  // await pageObjects.runHook('useTextBoxValue', [], textBoxValue => textBoxValue[1]('Hello, World!'));
+  // await pageObjects.runHook('useTextBoxSubmit', [], textBoxSubmit => textBoxSubmit());
+  // await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
+  // expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+});

packages/component/src/Activity/ScrollToEndButton.js

@@ -4,12 +4,13 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import connectToWebChat from '../connectToWebChat';
 import Localize from '../Localization/Localize';
+import useScrollToEnd from '../hooks/useScrollToEnd';
 import useStyleSet from '../hooks/useStyleSet';
 
-const ScrollToEndButton = ({ className, scrollToEnd }) => {
+const ScrollToEndButton = ({ className }) => {
   const [{ scrollToEndButton: scrollToEndButtonStyleSet }] = useStyleSet();
+  const scrollToEnd = useScrollToEnd();
 
   return (
     <button className={classNames(scrollToEndButtonStyleSet + '', className + '')} onClick={scrollToEnd} type="button">
@@ -24,17 +25,14 @@ ScrollToEndButton.defaultProps = {
 
 ScrollToEndButton.propTypes = {
   className: PropTypes.string,
-  scrollToEnd: PropTypes.func.isRequired,
   styleSet: PropTypes.shape({
     scrollToEndButton: PropTypes.any.isRequired
   }).isRequired
 };
 
-const WebChatConnectedScrollToEndButton = connectToWebChat(({ scrollToEnd }) => ({ scrollToEnd }))(ScrollToEndButton);
-
 const ConnectedScrollToEndButton = props => (
   <ScrollToBottomStateContext.Consumer>
-    {({ sticky }) => !sticky && <WebChatConnectedScrollToEndButton {...props} />}
+    {({ sticky }) => !sticky && <ScrollToEndButton {...props} />}
   </ScrollToBottomStateContext.Consumer>
 );
 

packages/component/src/Activity/SendStatus.js

@@ -4,6 +4,7 @@ import React, { useCallback } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import ScreenReaderText from '../ScreenReaderText';
+import useFocusSendBox from '../hooks/useFocusSendBox';
 import useLocalize from '../hooks/useLocalize';
 import usePostActivity from '../hooks/usePostActivity';
 import useStyleSet from '../hooks/useStyleSet';
@@ -29,8 +30,9 @@ const connectSendStatus = (...selectors) =>
     ...selectors
   );
 
-const SendStatus = ({ activity, focusSendBox }) => {
+const SendStatus = ({ activity }) => {
   const [{ sendStatus: sendStatusStyleSet }] = useStyleSet();
+  const focusSendBox = useFocusSendBox();
   const postActivity = usePostActivity();
 
   // TODO: [P4] Currently, this is the only place which use a templated string
@@ -91,10 +93,9 @@ SendStatus.propTypes = {
     channelData: PropTypes.shape({
       state: PropTypes.string
     })
-  }).isRequired,
-  focusSendBox: PropTypes.func.isRequired
+  }).isRequired
 };
 
-export default connectSendStatus(({ focusSendBox }) => ({ focusSendBox }))(SendStatus);
+export default SendStatus;
 
 export { connectSendStatus };

packages/component/src/Dictation.js

@@ -8,6 +8,8 @@ import connectToWebChat from './connectToWebChat';
 import useActivities from './hooks/useActivities';
 import useDisabled from './hooks/useDisabled';
 import useLanguage from './hooks/useLanguage';
+import useSendBoxValue from './hooks/useSendBoxValue';
+import useSubmitSendBox from './hooks/useSubmitSendBox';
 
 const {
   DictateState: { DICTATING, IDLE, STARTING }
@@ -20,15 +22,15 @@ const Dictation = ({
   sendTypingIndicator,
   setDictateInterims,
   setDictateState,
-  setSendBox,
   startSpeakingActivity,
   stopDictate,
-  submitSendBox,
   webSpeechPonyfill: { SpeechGrammarList, SpeechRecognition } = {}
 }) => {
+  const [, setSendBox] = useSendBoxValue();
   const [activities] = useActivities();
   const [disabled] = useDisabled();
   const [language] = useLanguage();
+  const submitSendBox = useSubmitSendBox();
 
   const numSpeakingActivities = useMemo(() => activities.filter(({ channelData: { speak } = {} }) => speak).length, [
     activities
@@ -96,10 +98,8 @@ Dictation.propTypes = {
   sendTypingIndicator: PropTypes.bool.isRequired,
   setDictateInterims: PropTypes.func.isRequired,
   setDictateState: PropTypes.func.isRequired,
-  setSendBox: PropTypes.func.isRequired,
   startSpeakingActivity: PropTypes.func.isRequired,
   stopDictate: PropTypes.func.isRequired,
-  submitSendBox: PropTypes.func.isRequired,
   webSpeechPonyfill: PropTypes.shape({
     SpeechGrammarList: PropTypes.any.isRequired,
     SpeechRecognition: PropTypes.any.isRequired
@@ -114,10 +114,8 @@ export default connectToWebChat(
     sendTypingIndicator,
     setDictateInterims,
     setDictateState,
-    setSendBox,
     startSpeakingActivity,
     stopDictate,
-    submitSendBox,
     webSpeechPonyfill
   }) => ({
     dictateState,
@@ -126,10 +124,8 @@ export default connectToWebChat(
     sendTypingIndicator,
     setDictateInterims,
     setDictateState,
-    setSendBox,
     startSpeakingActivity,
     stopDictate,
-    submitSendBox,
     webSpeechPonyfill
   })
 )(Dictation);

packages/component/src/SendBox/SendButton.js

@@ -1,11 +1,11 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
 import SendIcon from './Assets/SendIcon';
 import useDisabled from '../hooks/useDisabled';
 import useLocalize from '../hooks/useLocalize';
+import useSubmitSendBox from '../hooks/useSubmitSendBox';
 
 const connectSendButton = (...selectors) =>
   connectToWebChat(
@@ -17,9 +17,10 @@ const connectSendButton = (...selectors) =>
     ...selectors
   );
 
-const SendButton = ({ submitSendBox }) => {
+const SendButton = () => {
   const [disabled] = useDisabled();
   const altText = useLocalize('Send');
+  const submitSendBox = useSubmitSendBox();
 
   return (
     <IconButton alt={altText} disabled={disabled} onClick={submitSendBox}>
@@ -28,10 +29,6 @@ const SendButton = ({ submitSendBox }) => {
   );
 };
 
-SendButton.propTypes = {
-  submitSendBox: PropTypes.func.isRequired
-};
-
-export default connectSendButton()(SendButton);
+export default SendButton;
 
 export { connectSendButton };