QFE for 4.5.3

CHANGELOG.md

@@ -16,12 +16,53 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#XXX](https://github.com/microsoft/BotFramework-WebChat/issues/XXX). Patched something, by [@johndoe](https://github.com/johndoe) in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX)
 -->
 
-## [Unreleased]
-
 <!-- ### Added
 -  Added something, by [@johndoe](https://github.com/johndoe), in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX)
 -->
 
+## [Unreleased]
+
+## [4.5.3] - 2019-10-06
+
+### Changed
+
+-  `bundle`: Bumped DirectLineJS to support metadata when uploading attachments, in PR [#2433](https://github.com/microsoft/BotFramework-WebChat/pull/2433)
+   - [`botframework-directlinejs@0.11.5`](https://www.npmjs.com/package/botframework-directlinejs)
+   - Removed DirectLineJS as a dev dependency for `component` because it was not referenced
+
+### Fixed
+
+-  Fix [#2248](https://github.com/microsoft/BotFramework-WebChat/issues/2248). Remove download links from user-uploaded attachment without thumbnails, by [@compulim](https://github.com/compulim) in PR [#2262](https://github.com/microsoft/BotFramework-WebChat/pull/2262)
+-  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 [#2422](https://github.com/microsoft/BotFramework-WebChat/issues/2422). Store thumbnail URL using the activity's `attachment.thumbnailUrl` field, by [@compulim](https://github.com/compulim) in PR [#2433](https://github.com/microsoft/BotFramework-WebChat/pull/2433)
+
+### Added
+
+-  Make thumbnails when uploading GIF/JPEG/PNG and store it in `channelData.attachmentThumbnails`, by [@compulim](https://github.com/compulim), in PR [#2206](https://github.com/microsoft/BotFramework-WebChat/pull/2206), requires modern browsers with following features:
+   - [Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)
+   - [`createImageBitmap`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap)
+   - [`MessageChannel`](https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel)/[`MessagePort`](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort)
+   - [`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)
+      - Specifically [`OffscreenCanvas.getContext('2d')`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/getContext)
+-  Render thumbnail for image attachments using `activity.attachments[].thumbnailUrl`, by [@compulim](https://github.com/compulim) in PR [#2433](https://github.com/microsoft/BotFramework-WebChat/pull/2433)
+
+## [4.5.2] - 2019-08-07
+
+### Fixed
+
+-  Fix [#2273](https://github.com/microsoft/BotFramework-WebChat/issues/2273). Add `ScreenReaderText` component, by [@corinagum](https://github.com/corinagum) in PR [#2278](https://github.com/microsoft/BotFramework-WebChat/pull/2278)
+
+## [4.5.1] - 2019-08-01
+
+### Fixed
+
+-  Fix [#2187](https://github.com/microsoft/BotFramework-WebChat/issues/2187). Bump core-js and update core-js modules on index-es5.js, by [@corinagum](https://github.com/corinagum) in PR [#2195](https://github.com/microsoft/BotFramework-WebChat/pull/2195)
+-  Fix [#2193](https://github.com/microsoft/BotFramework-WebChat/issues/2193). Fix Adaptive Card/attachments do not get read by Narrator, by [@corinagum](https://github.com/corinagum) in PR [#2226](https://github.com/microsoft/BotFramework-WebChat/pull/2226)
+-  Fix [#2150](https://github.com/microsoft/BotFramework-WebChat/issues/2193). Fix timestamps read by Narrator, by [@corinagum](https://github.com/corinagum) in PR [#2226](https://github.com/microsoft/BotFramework-WebChat/pull/2226)
+-  Fix [#2250](https://github.com/microsoft/BotFramework-WebChat/issues/2250). Fix React warnings related prop types, by [@compulim](https://github.com/compulim) in PR [#2253](https://github.com/microsoft/BotFramework-WebChat/pull/2253)
+
+## [4.5.0] - 2019-07-10
+
 ### Added
 
 -  `*`: Added [`eslint`](https://npmjs.com/package/eslint/) to static code analysis, by [@compulim](https://github.com/compulim), in PR [#1970](https://github.com/microsoft/BotFramework-WebChat/pull/1970)
@@ -70,6 +111,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#1872](https://github.com/microsoft/BotFramework-WebChat/issues/1872). Fixed `observeOnce` to unsubscribe properly, by [@compulim](https://github.com/compulim) in PR [#2140](https://github.com/microsoft/BotFramework-WebChat/pull/2140)
 -  Fix [#2022](https://github.com/microsoft/BotFramework-WebChat/issues/2022). Fixed `"expectingInput"` in `inputHint` is not respected, by [@compulim](https://github.com/compulim) and [@corinagum](https://github.com/corinagum) in PR [#2149](https://github.com/microsoft/BotFramework-WebChat/pull/2149) and PR [#2166](https://github.com/microsoft/BotFramework-WebChat/pull/2166)
 
+
 ### Samples
 
 -  `*`: [Single sign-on for enterprise apps](https://microsoft.github.io/BotFramework-WebChat/19.a.single-sign-on-for-enterprise-apps/), by [@compulim](https://github.com/compulim) in [#2002](https://github.com/microsoft/BotFramework-WebChat/pull/2002)

Dockerfile-selenium

@@ -0,0 +1,6 @@
+# https://github.com/SeleniumHQ/docker-selenium
+# https://hub.docker.com/r/selenium/standalone-chrome/tags/
+
+FROM selenium/standalone-chrome:3.141.59-radium
+
+ADD __tests__/setup/local ~/Downloads

__tests__/setup/pageObjects/getActivityElements.js

@@ -0,0 +1,5 @@
+import { By } from 'selenium-webdriver';
+
+export default async function getActivityElements(driver) {
+  return await driver.findElements(By.css(`[role="listitem"]`));
+}

__tests__/setup/pageObjects/getSendBoxTextBox.js

@@ -1,5 +1,5 @@
 import { By } from 'selenium-webdriver';
 
-export default async function isRecognizingSpeech(driver) {
+export default async function getSendBoxTextBox(driver) {
   return await driver.findElement(By.css('[role="form"] > * > form > input[type="text"]'));
 }

__tests__/setup/pageObjects/getUploadButton.js

@@ -0,0 +1,5 @@
+import { By } from 'selenium-webdriver';
+
+export default async function getUploadButton(driver) {
+  return await driver.findElement(By.css('input[type="file"]'));
+}

__tests__/setup/pageObjects/index.js

@@ -1,12 +1,16 @@
 import dispatchAction from './dispatchAction';
 import endSpeechSynthesize from './endSpeechSynthesize';
 import executePromiseScript from './executePromiseScript';
+import getActivityElements from './getActivityElements';
 import getMicrophoneButton from './getMicrophoneButton';
 import getSendBoxTextBox from './getSendBoxTextBox';
+import getStore from './getStore';
+import getUploadButton from './getUploadButton';
 import hasPendingSpeechSynthesisUtterance from './hasPendingSpeechSynthesisUtterance';
 import isRecognizingSpeech from './isRecognizingSpeech';
 import pingBot from './pingBot';
 import putSpeechRecognitionResult from './putSpeechRecognitionResult';
+import sendFile from './sendFile';
 import sendMessageViaMicrophone from './sendMessageViaMicrophone';
 import sendMessageViaSendBox from './sendMessageViaSendBox';
 import startSpeechSynthesize from './startSpeechSynthesize';
@@ -25,12 +29,16 @@ export default function pageObjects(driver) {
       dispatchAction,
       endSpeechSynthesize,
       executePromiseScript,
+      getActivityElements,
       getMicrophoneButton,
       getSendBoxTextBox,
+      getStore,
+      getUploadButton,
       hasPendingSpeechSynthesisUtterance,
       isRecognizingSpeech,
       pingBot,
       putSpeechRecognitionResult,
+      sendFile,
       sendMessageViaMicrophone,
       sendMessageViaSendBox,
       startSpeechSynthesize

__tests__/setup/pageObjects/sendFile.js

@@ -0,0 +1,28 @@
+import { join, posix } from 'path';
+import { timeouts } from '../../constants.json';
+import allOutgoingActivitiesSent from '../conditions/allOutgoingActivitiesSent';
+import getActivityElements from './getActivityElements';
+import getUploadButton from './getUploadButton';
+import minNumActivitiesShown from '../conditions/minNumActivitiesShown.js';
+
+function resolveDockerFile(filename) {
+  return posix.join('/~/Downloads', filename);
+}
+
+function resolveLocalFile(filename) {
+  return join(__dirname, '../local', filename);
+}
+
+export default async function sendFile(driver, filename, { waitForSend = true } = {}) {
+  const uploadButton = await getUploadButton(driver);
+  const isUnderDocker = !!(await driver.getCapabilities()).get('webdriver.remote.sessionid');
+
+  // The send file function is asynchronous, it doesn't send immediately until thumbnails are generated.
+  // We will save the numActivities, anticipate for numActivities + 1, then wait until everything is sent
+  const numActivities = (await getActivityElements(driver)).length;
+
+  await uploadButton.sendKeys(isUnderDocker ? resolveDockerFile(filename) : resolveLocalFile(filename));
+
+  await driver.wait(minNumActivitiesShown(numActivities + 1));
+  waitForSend && (await driver.wait(allOutgoingActivitiesSent(), timeouts.directLine));
+}

__tests__/upload.js

@@ -0,0 +1,169 @@
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
+import allImagesLoaded from './setup/conditions/allImagesLoaded';
+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);
+
+describe('upload a picture', () => {
+  test('', async () => {
+    const { driver, pageObjects } = await setupWebDriver();
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+
+    await pageObjects.sendFile('seaofthieves.jpg');
+    await driver.wait(minNumActivitiesShown(2));
+    await driver.wait(allImagesLoaded());
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
+
+  test('with custom thumbnail size', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        styleOptions: {
+          uploadThumbnailContentType: 'image/png',
+          uploadThumbnailHeight: 60,
+          uploadThumbnailWidth: 120
+        }
+      }
+    });
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+
+    await pageObjects.sendFile('seaofthieves.jpg');
+    await driver.wait(minNumActivitiesShown(2));
+    await driver.wait(allImagesLoaded());
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
+
+  test('with custom thumbnail quality', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        styleOptions: {
+          uploadThumbnailQuality: 0.1
+        }
+      }
+    });
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+
+    await pageObjects.sendFile('seaofthieves.jpg');
+    await driver.wait(minNumActivitiesShown(2));
+    await driver.wait(allImagesLoaded());
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
+
+  test('with custom thumbnail disabled', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        styleOptions: {
+          enableUploadThumbnail: false
+        }
+      }
+    });
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+
+    await pageObjects.sendFile('seaofthieves.jpg');
+    await driver.wait(minNumActivitiesShown(2));
+    await driver.wait(allImagesLoaded());
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
+
+  describe('without Web Worker', () => {
+    test('', async () => {
+      const { driver, pageObjects } = await setupWebDriver();
+
+      await driver.executeScript(() => {
+        window.Worker = undefined;
+      });
+      await driver.wait(uiConnected(), timeouts.directLine);
+
+      await pageObjects.sendFile('seaofthieves.jpg');
+      await driver.wait(minNumActivitiesShown(2));
+      await driver.wait(allImagesLoaded());
+
+      const base64PNG = await driver.takeScreenshot();
+
+      expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+    });
+
+    test('with custom thumbnail size', async () => {
+      const { driver, pageObjects } = await setupWebDriver({
+        props: {
+          styleOptions: {
+            uploadThumbnailContentType: 'image/png',
+            uploadThumbnailHeight: 60,
+            uploadThumbnailWidth: 120
+          }
+        }
+      });
+
+      await driver.executeScript(() => {
+        window.Worker = undefined;
+      });
+      await driver.wait(uiConnected(), timeouts.directLine);
+
+      await pageObjects.sendFile('seaofthieves.jpg');
+      await driver.wait(minNumActivitiesShown(2));
+      await driver.wait(allImagesLoaded());
+
+      const base64PNG = await driver.takeScreenshot();
+
+      expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+    });
+
+    test('with custom thumbnail quality', async () => {
+      const { driver, pageObjects } = await setupWebDriver({
+        props: {
+          styleOptions: {
+            uploadThumbnailQuality: 0.1
+          }
+        }
+      });
+
+      await driver.executeScript(() => {
+        window.Worker = undefined;
+      });
+      await driver.wait(uiConnected(), timeouts.directLine);
+
+      await pageObjects.sendFile('seaofthieves.jpg');
+      await driver.wait(minNumActivitiesShown(2));
+      await driver.wait(allImagesLoaded());
+
+      const base64PNG = await driver.takeScreenshot();
+
+      expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+    });
+  });
+});
+
+test('upload a ZIP file', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+
+  await pageObjects.sendFile('empty.zip');
+  await driver.wait(minNumActivitiesShown(2));
+  await driver.wait(allImagesLoaded());
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});

docker-compose.yml

@@ -4,9 +4,9 @@ services:
   # On Windows, run with COMPOSE_CONVERT_WINDOWS_PATHS=1
 
   chrome:
-    # https://github.com/SeleniumHQ/docker-selenium
-    # https://hub.docker.com/r/selenium/standalone-chrome/tags/
-    image: selenium/standalone-chrome:3.141.0-actinium
+    build:
+      context: ./
+      dockerfile: Dockerfile-selenium
     networks:
     - selenium
     depends_on:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-root",
-  "version": "4.4.3-0",
+  "version": "4.5.3",
   "private": true,
   "files": [
     "lib/**/*"