#1525 Add "Render error" connectivity status for JavaScript errors. (#…

…1927)

* Update documentation

* Add new offlineUI component: Render error

* Modify/add offlineUI tests

* semicolon clean up

* Update CHANGELOG.md

* Fix test

* Spacing fix

* Use lolex

* Add store middleware option

* Typo

* Use page object to send message

* Reliability

* Reliability

* Update offlineUI tests with lolex mock clock

* Capitalization fix

* Fix failing tests

* Fix tests

* Cleanup

.github/HowToQuestions.md

@@ -1,5 +1,5 @@
 Please feel free to peruse our [samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples), which provide a lot of ideas and foundation for customizing your version of Web Chat.
 
-'How to' questions such as this one are better suited for [Stack Overflow](https://stackoverflow.com/tags/botframework). Please feel free to post other questions you have about developing your own features over there so the community at large may help out. Thank you!
+'How to' questions such as this one are better suited for [Stack Overflow](https://stackoverflow.com/tags/botframework). Please feel free to post other questions you have about developing your own features over there so the community at large may help out. If you need help with a Web Chat implementation, you can post a question to the [Web Chat tag](https://stackoverflow.com/questions/tagged/web-chat). Thank you!
 
 Please share the link to your Stack Overflow question on this issue. The Web Chat team will close this issue after a week of inactivity or when the Stack Overflow link has been added.

CHANGELOG.md

@@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1877](https://github.com/Microsoft/BotFramework-WebChat/issues/1877). Add viewport meta tag and fix a few sample links, by [@corinagum](https://github.com/corinagum) in PR [#1919](https://github.com/Microsoft/BotFramework-WebChat/pull/1919)
 - Fix [#1789](https://github.com/Microsoft/BotFramework-WebChat/issues/1789). Focus send box after message is being sent, by [@corinagum](https://github.com/corinagum) in PR [#1915](https://github.com/Microsoft/BotFramework-WebChat/pull/1915)
 - Fix [#1920](https://github.com/Microsoft/BotFramework-WebChat/issues/1920). Added disabled property to send button, by [@tdurnford](https://github.com/tdurnford) in PR [#1922](https://github.com/Microsoft/BotFramework-WebChat/pull/1922)
+- Fix [#1525](https://github.com/Microsoft/BotFramework-WebChat/issues/1525). Add JavaScript error Offline UI, by [@corinagum](https://github.com/corinagum) in PR [#1927](https://github.com/Microsoft/BotFramework-WebChat/pull/1927)
 
 ### Changed
 - Deployment: Bumps to [`blobxfer@1.7.1`](https://github.com/azure/blobxfer/), by [@compulim](https://github.com/compulim), in PR [#1897](https://github.com/Microsoft/BotFramework-WebChat/pull/1897)

README.md

@@ -280,6 +280,7 @@ There are several properties that you might pass into your Web Chat React Compon
 | `attachmentMiddleware`     | A chain of middleware that allows the developer to add their own custom HTML Elements on attachments. The signature is the following: `options => next => card => next(card)`.                                                                                                                                                                                 |
 | `attachmentRenderer`       | The "flattened" version of `attachmentMiddleware`.                                                                                                            |
 | `cardActionMiddleware`     | A chain of middleware that allows the developer to modify card actions, like Adaptive Cards or suggested actions. The middleware signature is the following: `cardActionMiddleware: () => next => ({ cardAction, getSignInUrl }) => next(cardAction)`                                                                                   |
+| `createStore`              | A chain of middleware that allows the developer to modify the store actions. The middleware signature is the following: `createStore: ({}, ({ dispatch }) => next => action => next(cardAction)`                                                                                   |
 | `directLine`               | Specify the DirectLine object with DirectLine token.                                                                                                                                                                                                                                                                                      |
 | `disabled`                 | Disable the UI (i.e. for presentation mode) of Web Chat.                                                                                                                                                                                                                                                                                  |
 | `grammars`                 | Specify a grammar list for Speech  (Bing Speech or Cognitive Services Speech Services).                                                                                                                                                                                                                                                   |

__tests__/basic.js

@@ -13,7 +13,7 @@ test('setup', async () => {
   const { driver, pageObjects } = await setupWebDriver();
 
   await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaSendBox('layout carousel');
+  await pageObjects.sendMessageViaSendBox('layout carousel', { waitForSend: true });
 
   await driver.wait(minNumActivitiesShown(2), 2000);
   await driver.wait(allImagesLoaded(), 2000);
@@ -27,7 +27,7 @@ test('long URLs with break-word', async () => {
   const { driver, pageObjects } = await setupWebDriver();
 
   await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
+  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/', { waitForSend: true })
 
   await driver.wait(minNumActivitiesShown(2), 2000);
   await driver.wait(allImagesLoaded(), 2000);
@@ -43,7 +43,7 @@ test('long URLs with break-all', async () => {
   const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
   await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
+  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/', { waitForSend: true })
 
   await driver.wait(minNumActivitiesShown(2), 2000);
   await driver.wait(allImagesLoaded(), 2000);
@@ -58,7 +58,7 @@ test('long URLs with keep-all', async () => {
 
   const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
-  await pageObjects.sendMessageViaSendBox('箸より重いものを持ったことがない箸より重いものを持ったことがない');
+  await pageObjects.sendMessageViaSendBox('箸より重いものを持ったことがない箸より重いものを持ったことがない', { waitForSend: true });
 
   await driver.wait(minNumActivitiesShown(2), 2000);
   await driver.wait(allImagesLoaded(), 2000);
@@ -72,7 +72,7 @@ test('unknown activities do not render anything in the transcript', async () =>
   const { driver, pageObjects } = await setupWebDriver();
 
   await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaSendBox('unknown activity');
+  await pageObjects.sendMessageViaSendBox('unknown activity', { waitForSend: true });
 
   await driver.wait(minNumActivitiesShown(1), 2000);
 

__tests__/cardActionMiddleware.js

@@ -29,7 +29,7 @@ test('card action "openUrl"', async () => {
   });
 
   await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaSendBox('card-actions');
+  await pageObjects.sendMessageViaSendBox('card-actions', { waitForSend: true });
 
   await driver.wait(suggestedActionsShowed(), timeouts.directLine);
 
@@ -65,7 +65,7 @@ test('card action "signin"', async () => {
   });
 
   await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaSendBox('oauth');
+  await pageObjects.sendMessageViaSendBox('oauth', { waitForSend: true });
 
   const openUrlButton = await driver.findElement(By.css('[role="log"] ul > li button'));
 

__tests__/carousel.js

@@ -16,7 +16,7 @@ describe('carousel without avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver();
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('carousel');
+    await pageObjects.sendMessageViaSendBox('carousel', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -40,7 +40,7 @@ describe('carousel without avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver();
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout carousel');
+    await pageObjects.sendMessageViaSendBox('layout carousel', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -64,7 +64,7 @@ describe('carousel without avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver();
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout double');
+    await pageObjects.sendMessageViaSendBox('layout double', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -76,7 +76,7 @@ describe('carousel without avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver({ width: 640 });
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout double');
+    await pageObjects.sendMessageViaSendBox('layout double', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -88,7 +88,7 @@ describe('carousel without avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver();
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout single carousel');
+    await pageObjects.sendMessageViaSendBox('layout single carousel', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -100,7 +100,7 @@ describe('carousel without avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver({ width: 640 });
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout single carousel');
+    await pageObjects.sendMessageViaSendBox('layout single carousel', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -116,7 +116,7 @@ describe('carousel with avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('carousel');
+    await pageObjects.sendMessageViaSendBox('carousel', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -140,7 +140,7 @@ describe('carousel with avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout carousel');
+    await pageObjects.sendMessageViaSendBox('layout carousel', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -164,7 +164,7 @@ describe('carousel with avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout double');
+    await pageObjects.sendMessageViaSendBox('layout double', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -176,7 +176,7 @@ describe('carousel with avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS, width: 640 });
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout double');
+    await pageObjects.sendMessageViaSendBox('layout double', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -188,7 +188,7 @@ describe('carousel with avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout single carousel');
+    await pageObjects.sendMessageViaSendBox('layout single carousel', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);
@@ -200,7 +200,7 @@ describe('carousel with avatar initials', () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS, width: 640 });
 
     await driver.wait(uiConnected(), timeouts.directLine);
-    await pageObjects.sendMessageViaSendBox('layout single carousel');
+    await pageObjects.sendMessageViaSendBox('layout single carousel', { waitForSend: true });
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
     await driver.wait(allImagesLoaded(), timeouts.fetch);