Fix receipt card and disabled Adaptive Cards (#2417)

* Fix receipt card and disabled Adaptive Cards

* Fix ESLint

* Update PR entry

* Add submission test

CHANGELOG.md

@@ -88,6 +88,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#2379](https://github.com/microsoft/BotFramework-WebChat/issues/2379). Speech synthesis can be configured off by passing `null`, by [@compulim](https://github.com/compulim) in PR [#2408](https://github.com/microsoft/BotFramework-WebChat/pull/2408)
 -  Fix [#2418](https://github.com/microsoft/BotFramework-WebChat/issues/2418). Connectivity status should not waste-render every 400 ms, by [@compulim](https://github.com/compulim) in PR [#2419](https://github.com/microsoft/BotFramework-WebChat/pull/2419)
 -  Fix [Emulator:#1823](https://github.com/microsoft/BotFramework-Emulator/issues/1823). Fix Sendbox "Type your message" being read twice by AT, by [@corinagum](https://github.com/corinagum) in PR [#2423](https://github.com/microsoft/BotFramework-WebChat/pull/2423)
+-  Fix [#2415](https://github.com/microsoft/BotFramework-WebChat/issues/2415) and [#2416](https://github.com/microsoft/BotFramework-WebChat/issues/2416). Fix receipt card rendering, by [@compulim](https://github.com/compulim) in PR [#2417](https://github.com/microsoft/BotFramework-WebChat/issues/2417)
+-  Fix [#2415](https://github.com/microsoft/BotFramework-WebChat/issues/2415) and [#2416](https://github.com/microsoft/BotFramework-WebChat/issues/2416). Fix Adaptive Cards cannot be disabled on-the-fly, by [@compulim](https://github.com/compulim) in PR [#2417](https://github.com/microsoft/BotFramework-WebChat/issues/2417)
 
 ### Added
 

__tests__/adaptiveCards.js

@@ -0,0 +1,79 @@
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
+import allImagesLoaded from './setup/conditions/allImagesLoaded';
+import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown';
+import scrollToBottomCompleted from './setup/conditions/scrollToBottomCompleted';
+import uiConnected from './setup/conditions/uiConnected';
+
+import createAdaptiveCardsHostConfig from '../packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig';
+import defaultStyleOptions from '../packages/component/src/Styles/defaultStyleOptions';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+test('breakfast card', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('card breakfast', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('breakfast card with custom host config', async () => {
+  const adaptiveCardHostConfig = createAdaptiveCardsHostConfig({ ...defaultStyleOptions, bubbleTextColor: '#FF0000' });
+
+  const { driver, pageObjects } = await setupWebDriver({
+    props: {
+      adaptiveCardHostConfig
+    }
+  });
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('card breakfast', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('disable card inputs', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('card inputs', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+  await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
+
+  await driver.executeScript(() => {
+    document.querySelector('.ac-input input[type="checkbox"]').checked = true;
+  });
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+  await pageObjects.updateProps({ disabled: true });
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+  await pageObjects.updateProps({ disabled: false });
+  await driver.executeScript(() => {
+    document.querySelector('.ac-actionSet button:nth-of-type(2)').click();
+  });
+
+  await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
+  await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+});

__tests__/richCards.js

@@ -0,0 +1,96 @@
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
+import allImagesLoaded from './setup/conditions/allImagesLoaded';
+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);
+
+test('audio card', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('audiocard', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('hero card', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('herocard', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+  await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('oauth card', async () => {
+  const { driver, pageObjects } = await setupWebDriver({ useProductionBot: true });
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('oauth', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('receipt card', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('receiptcard', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('sign-in card', async () => {
+  const { driver, pageObjects } = await setupWebDriver({ useProductionBot: true });
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('signin', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('thumbnail card', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('thumbnailcard', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});

__tests__/scrollToBottom.js

@@ -34,3 +34,29 @@ test('should stick to bottom if submitting an Adaptive Card while suggested acti
 
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
+
+test('clicking "New messages" button should scroll to end and stick to bottom', 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;
+  });
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+  await pageObjects.clickScrollToBottomButton();
+  await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+  await pageObjects.sendMessageViaSendBox('Hello, World!');
+  await driver.wait(scrollToBottomCompleted(), timeouts.scrollToBottom);
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+});

__tests__/setup/conditions/scrollToBottomCompleted.js

@@ -1,28 +1,11 @@
 import { Condition } from 'selenium-webdriver';
 
-import { timeouts } from '../../constants.json';
-
 export default function scrollToBottomCompleted() {
-  return new Condition('for UI to scroll to bottom', async driver => {
-    const done = await driver.executeAsyncScript((timeoutInMS, callback) => {
+  return new Condition('for UI to scroll to bottom', driver =>
+    driver.executeScript(() => {
       const scrollable = document.querySelector('[role="log"] > *');
 
-      // If we do not receive any "scroll" event at all, probably we are at the bottom.
-      const defaultTimeout = setTimeout(() => callback(true), timeoutInMS);
-      let timeout;
-      const handleScroll = () => {
-        clearTimeout(defaultTimeout);
-        clearTimeout(timeout);
-
-        timeout = setTimeout(() => {
-          scrollable.removeEventListener('scroll', handleScroll);
-          callback(true);
-        }, 200);
-      };
-
-      scrollable.addEventListener('scroll', handleScroll);
-    }, timeouts.scrollToBottom);
-
-    return done;
-  });
+      return scrollable && scrollable.offsetHeight + scrollable.scrollTop === scrollable.scrollHeight;
+    })
+  );
 }

__tests__/setup/elements/getScrollToBottomButton.js

@@ -0,0 +1,5 @@
+import { By } from 'selenium-webdriver';
+
+export default async function getScrollToBottomButton(driver) {
+  return await driver.findElement(By.css('[role="log"] > button:last-child'));
+}

__tests__/setup/marshal.js

@@ -0,0 +1,22 @@
+export default function marshal(props) {
+  return (
+    props &&
+    Object.keys(props).reduce(
+      (nextProps, key) => {
+        const { [key]: value } = props;
+
+        if (typeof value === 'function') {
+          nextProps[key] = `() => ${value.toString()}`;
+          nextProps.__evalKeys.push(key);
+        } else {
+          nextProps[key] = value;
+        }
+
+        return nextProps;
+      },
+      {
+        __evalKeys: []
+      }
+    )
+  );
+}

__tests__/setup/pageObjects/clickScrollToBottomButton.js

@@ -0,0 +1,5 @@
+import getScrollToBottomButton from '../elements/getScrollToBottomButton';
+
+export default async function clickScrollToBottomButton(driver) {
+  (await getScrollToBottomButton(driver)).click();
+}

__tests__/setup/pageObjects/index.js

@@ -1,4 +1,5 @@
 import clickMicrophoneButton from './clickMicrophoneButton';
+import clickScrollToBottomButton from './clickScrollToBottomButton';
 import clickSendButton from './clickSendButton';
 import clickSuggestedActionButton from './clickSuggestedActionButton';
 import dispatchAction from './dispatchAction';
@@ -19,6 +20,7 @@ import sendMessageViaSendBox from './sendMessageViaSendBox';
 import sendTextToClipboard from './sendTextToClipboard';
 import startSpeechSynthesize from './startSpeechSynthesize';
 import typeOnSendBox from './typeOnSendBox';
+import updateProps from './updateProps';
 
 function mapMap(map, mapper) {
   return Object.keys(map).reduce((final, key) => {
@@ -32,6 +34,7 @@ export default function pageObjects(driver) {
   return mapMap(
     {
       clickMicrophoneButton,
+      clickScrollToBottomButton,
       clickSendButton,
       clickSuggestedActionButton,
       dispatchAction,
@@ -51,7 +54,8 @@ export default function pageObjects(driver) {
       sendMessageViaSendBox,
       sendTextToClipboard,
       startSpeechSynthesize,
-      typeOnSendBox
+      typeOnSendBox,
+      updateProps
     },
     fn => fn.bind(null, driver)
   );

__tests__/setup/pageObjects/updateProps.js

@@ -0,0 +1,7 @@
+import marshal from '../marshal';
+
+export default function updateProps(driver, mergeProps) {
+  return driver.executeScript(mergeProps => {
+    window.WebChatTest.updateProps(unmarshal(mergeProps));
+  }, marshal(mergeProps));
+}

__tests__/setup/setupTestFramework.js

@@ -7,6 +7,7 @@ import getPort from 'get-port';
 import handler from 'serve-handler';
 
 import createPageObjects from './pageObjects/index';
+import marshal from './marshal';
 import retry from './retry';
 import setupTestEnvironment from './setupTestEnvironment';
 
@@ -15,29 +16,6 @@ const BROWSER_NAME = process.env.WEBCHAT_TEST_ENV || 'chrome-docker';
 // const BROWSER_NAME = 'chrome-local';
 const NUM_RETRIES = 3;
 
-function marshal(props) {
-  return (
-    props &&
-    Object.keys(props).reduce(
-      (nextProps, key) => {
-        const { [key]: value } = props;
-
-        if (typeof value === 'function') {
-          nextProps[key] = `() => ${value.toString()}`;
-          nextProps.__evalKeys.push(key);
-        } else {
-          nextProps[key] = value;
-        }
-
-        return nextProps;
-      },
-      {
-        __evalKeys: []
-      }
-    )
-  );
-}
-
 expect.extend({
   toMatchImageSnapshot: configureToMatchImageSnapshot({
     customSnapshotsDir: join(__dirname, '../__image_snapshots__', BROWSER_NAME)