Add word-wrap to messageActivity (#1832)

* Add word-wrap to messageActivity * Update CHANGELOG.md * Add test for break-all * Add keep-all test
microsoft · Mar 21, 2019 · 1fc6ab4 · 1fc6ab4
1 parent 1512fe6
commit 1fc6ab4
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 - Fix [#1423](https://github.com/Microsoft/BotFramework-WebChat/issues/1423). Added sample for hosting WebChat in Angular, by [@omarsourour](https://github.com/omarsourour) in PR [#1813](https://github.com/Microsoft/BotFramework-WebChat/pull/1813)
 - Fix [#1767](https://github.com/Microsoft/BotFramework-WebChat/issues/1767). Remove `cursor: pointer` from buttons, by [@corinagum](https://github.com/corinagum) in PR [#1819](https://github.com/Microsoft/BotFramework-WebChat/pull/1819)
+- Fix [#1774](https://github.com/Microsoft/BotFramework-WebChat/issues/1774). Add `styleSetOption` to allow word break. Default to `break-word`, by [@corinagum](https://github.com/corinagum) in PR [#1832](https://github.com/Microsoft/BotFramework-WebChat/pull/1832)
 
 ## [4.3.0] - 2019-03-04
 

diff --git a/...__image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-break-all-1-snap.png b/...__image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-break-all-1-snap.png
diff --git a/..._image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-break-word-1-snap.png b/..._image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-break-word-1-snap.png
diff --git a/.../__image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-keep-all-1-snap.png b/.../__image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-keep-all-1-snap.png
diff --git a/__tests__/basic.js b/__tests__/basic.js
@@ -20,3 +20,46 @@ test('setup', async () => {
 
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
+
+test('long URLs with break-word', async () => {
+  const { driver, pageObjects} = await setupWebDriver();
+
+  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
+
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('long URLs with break-all', async () => {
+  const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'break-all' } };
+
+  const { driver, pageObjects} = await setupWebDriver({ props: WEB_CHAT_PROPS });
+
+  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
+
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('long URLs with keep-all', async () => {
+  const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'keep-all' } };
+
+  const { driver, pageObjects} = await setupWebDriver({ props: WEB_CHAT_PROPS });
+
+  await pageObjects.sendMessageViaSendBox('箸より重いものを持ったことがない箸より重いものを持ったことがない')
+
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
diff --git a/packages/component/src/Styles/StyleSet/Bubble.js b/packages/component/src/Styles/StyleSet/Bubble.js
@@ -8,11 +8,13 @@ export default function createBubbleStyle({
   bubbleFromUserTextColor,
   bubbleMaxWidth,
   bubbleMinHeight,
-  bubbleTextColor
+  bubbleTextColor,
+  messageActivityWordBreak
 }) {
   return {
     maxWidth: bubbleMaxWidth,
     minHeight: bubbleMinHeight,
+    wordBreak: messageActivityWordBreak,
 
     '&:not(.from-user)': {
       background: bubbleBackground,

diff --git a/packages/component/src/Styles/defaultStyleSetOptions.js b/packages/component/src/Styles/defaultStyleSetOptions.js
@@ -14,6 +14,9 @@ const DEFAULT_OPTIONS = {
   paddingWide: 20,
   subtle: DEFAULT_SUBTLE,
 
+  // Word break
+  messageActivityWordBreak: 'break-word', // 'normal' || 'break-all' || 'break-word' || 'keep-all'
+
   // fonts
   primaryFont: fontFamily(['Calibri', 'Helvetica Neue', 'Arial', 'sans-serif']),
   monospaceFont: fontFamily(['Consolas', 'Courier New', 'monospace']),
@@ -43,7 +46,7 @@ const DEFAULT_OPTIONS = {
   // Root
   rootHeight: '100%',
   rootWidth: '100%',
-  
+
   // Send box
   hideSendBox: false,
   hideUploadButton: false,