1523 Offline UI - connecting for the first time

CHANGELOG.md

@@ -40,6 +40,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `component`: Allow root component height and width customization via `styleOptions.rootHeight` and `styleOptions.rootWidth`, by [@tonyanziano](https://github.com/tonyanziano), in PR [#1702](https://github.com/Microsoft/BotFramework-WebChat/pull/1702)
 - `component`: Added `cardActionMiddleware` to customize the behavior of card action, by [@compulim](https://github.com/compulim), in PR [#1704](https://github.com/Microsoft/BotFramework-WebChat/pull/1704)
 - `bundle`: Add `watermark` and `streamUrl` parameters to createDirectLine, by [@corinagum](https://github.com/corinagum), in PR [#1817](https://github.com/Microsoft/BotFramework-WebChat/pull/1817)
+- Add [#1523](https://github.com/Microsoft/BotFramework-WebChat/issues/1523) Offline UI connecting for the first time, by [@corinagum](https://github.com/corinagum), in PR [#1866](https://github.com/Microsoft/BotFramework-WebChat/pull/1866)
 
 ### Changed
 

__tests__/basic.js

@@ -2,6 +2,7 @@ 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
@@ -11,6 +12,7 @@ jest.setTimeout(timeouts.test);
 test('setup', async () => {
   const { driver, pageObjects } = await setupWebDriver();
 
+  await driver.wait(uiConnected(), timeouts.directLine);
   await pageObjects.sendMessageViaSendBox('layout carousel');
 
   await driver.wait(minNumActivitiesShown(2), 2000);
@@ -24,6 +26,7 @@ test('setup', async () => {
 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 driver.wait(minNumActivitiesShown(2), 2000);
@@ -39,6 +42,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 driver.wait(minNumActivitiesShown(2), 2000);
@@ -54,6 +58,7 @@ test('long URLs with keep-all', async () => {
 
   const { driver, pageObjects} = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
   await pageObjects.sendMessageViaSendBox('箸より重いものを持ったことがない箸より重いものを持ったことがない')
 
   await driver.wait(minNumActivitiesShown(2), 2000);

__tests__/cardActionMiddleware.js

@@ -3,8 +3,9 @@ import { By, Key } from 'selenium-webdriver';
 import { imageSnapshotOptions, timeouts } from './constants.json';
 
 import allOutgoingActivitiesSent from './setup/conditions/allOutgoingActivitiesSent';
-import suggestedActionsShowed from './setup/conditions/suggestedActionsShowed';
 import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown.js';
+import suggestedActionsShowed from './setup/conditions/suggestedActionsShowed';
+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
@@ -27,6 +28,7 @@ test('card action "openUrl"', async () => {
     }
   });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
   await pageObjects.sendMessageViaSendBox('card-actions');
 
   await driver.wait(suggestedActionsShowed(), timeouts.directLine);
@@ -62,6 +64,7 @@ test('card action "signin"', async () => {
     }
   });
 
+  await driver.wait(uiConnected(), timeouts.directLine);
   await pageObjects.sendMessageViaSendBox('oauth');
 
   const openUrlButton = await driver.findElement(By.css('[role="log"] ul > li button'));

__tests__/carousel.js

@@ -4,6 +4,7 @@ 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
@@ -14,6 +15,7 @@ describe('carousel without avatar initials', () => {
   test('4 attachments and no message', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('carousel');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -37,6 +39,7 @@ describe('carousel without avatar initials', () => {
   test('4 attachments and message', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout carousel');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -60,6 +63,7 @@ describe('carousel without avatar initials', () => {
   test('2 attachments', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout double');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -71,6 +75,7 @@ describe('carousel without avatar initials', () => {
   test('2 attachments with wide screen', async () => {
     const { driver, pageObjects } = await setupWebDriver({ width: 640 });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout double');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -82,6 +87,7 @@ describe('carousel without avatar initials', () => {
   test('1 attachment', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single carousel');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -93,6 +99,7 @@ describe('carousel without avatar initials', () => {
   test('1 attachment with wide screen', async () => {
     const { driver, pageObjects } = await setupWebDriver({ width: 640 });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single carousel');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -108,6 +115,7 @@ describe('carousel with avatar initials', () => {
   test('4 attachments and no message', async () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('carousel');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -131,6 +139,7 @@ describe('carousel with avatar initials', () => {
   test('4 attachments and message', async () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout carousel');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -154,6 +163,7 @@ describe('carousel with avatar initials', () => {
   test('2 attachments', async () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout double');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -165,6 +175,7 @@ describe('carousel with avatar initials', () => {
   test('2 attachments with wide screen', async () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS, width: 640 });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout double');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -176,6 +187,7 @@ describe('carousel with avatar initials', () => {
   test('1 attachment', async () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single carousel');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -187,6 +199,7 @@ describe('carousel with avatar initials', () => {
   test('1 attachment with wide screen', async () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS, width: 640 });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single carousel');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);

__tests__/offlineUI.js

@@ -1,6 +1,7 @@
 import { By, Condition, Key } from 'selenium-webdriver';
 
 import { imageSnapshotOptions, 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
@@ -110,7 +111,7 @@ describe('offline UI', async () => {
         document.head.appendChild(scriptElement);
       })
     });
-
+    await driver.wait(uiConnected(), 10000);
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('42', Key.RETURN);
@@ -164,6 +165,7 @@ describe('offline UI', async () => {
       })
     });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('42', Key.RETURN);
@@ -173,4 +175,43 @@ describe('offline UI', async () => {
 
     expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
   });
+
+  test('should display the "Connecting..." connectivity status when connecting for the first time', async() => {
+    const { driver } = await setupWebDriver({
+      createDirectline: options => {
+        const workingDirectLine = window.WebChat.createDirectLine(options);
+
+        return {
+          activity$: workingDirectLine.activity$,
+          postActivity: workingDirectLine.postActivity.bind(workingDirectLine),
+
+          connectionStatus$: new Observable(observer => {
+            const subscription = workingDirectLine.connectionStatus$.subscribe( {
+              complete: () => observer.complete(),
+              error: err => observer.error(err),
+              next: connectionStatus => {
+                connectionStatus == 1 && observer.next(connectionStatus);
+              }
+            });
+
+            return subscription.unsubscribe();
+          })
+        };
+      },
+      pingBotOnLoad: false,
+      setup: () => new Promise(resolve => {
+        const scriptElement = document.createElement('script');
+
+        scriptElement.onload = resolve;
+        scriptElement.setAttribute('src', 'https://unpkg.com/[email protected]/client/core.min.js');
+
+        document.head.appendChild(scriptElement);
+
+      })
+    });
+
+    const base64PNG = await driver.takeScreenshot();
+
+    // Snapshots are intentionally not compared because the spinner will cause the snapshot to fail regularly
+  });
 });

__tests__/setup/conditions/uiConnected.js

@@ -0,0 +1,14 @@
+import { Condition } from 'selenium-webdriver';
+import directLineConnected from './directLineConnected';
+
+export default function () {
+  return new Condition( 'for UI to connect', async driver => {
+    const connected = await driver.wait( directLineConnected(), 5000 );
+
+    if ( connected ) {
+      await driver.sleep( 500 );
+    }
+
+    return connected;
+  } );
+}

__tests__/stacked.js

@@ -2,6 +2,7 @@ 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
@@ -12,6 +13,7 @@ describe('stacked without avatar initials', () => {
   test('4 attachments', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout stacked');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -23,6 +25,7 @@ describe('stacked without avatar initials', () => {
   test('1 attachment', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -34,6 +37,7 @@ describe('stacked without avatar initials', () => {
   test('1 attachment with wide screen', async () => {
     const { driver, pageObjects } = await setupWebDriver({ width: 640 });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -49,6 +53,7 @@ describe('stacked with avatar initials', () => {
   test('4 attachments', async () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout stacked');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -60,6 +65,7 @@ describe('stacked with avatar initials', () => {
   test('1 attachment', async () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
@@ -71,6 +77,7 @@ describe('stacked with avatar initials', () => {
   test('1 attachment with wide screen', async () => {
     const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS, width: 640 });
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);

__tests__/suggestedActions.js

@@ -5,6 +5,7 @@ import { imageSnapshotOptions, timeouts } from './constants.json';
 import allOutgoingActivitiesSent from './setup/conditions/allOutgoingActivitiesSent';
 import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown';
 import suggestedActionsShowed from './setup/conditions/suggestedActionsShowed';
+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
@@ -15,6 +16,7 @@ describe('suggested-actions command', async () => {
   test('should show correctly formatted buttons when suggested actions are displayed', async() => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('suggested-actions');
 
     await driver.wait(suggestedActionsShowed(), timeouts.directLine);
@@ -27,6 +29,7 @@ describe('suggested-actions command', async () => {
   test('should show response from bot and no text from user on imback', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('suggested-actions');
 
     await driver.wait(suggestedActionsShowed(), timeouts.directLine);
@@ -47,6 +50,7 @@ describe('suggested-actions command', async () => {
   test('should show response from bot and no text from user on postback', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('suggested-actions');
 
     await driver.wait(suggestedActionsShowed(), timeouts.directLine);
@@ -67,6 +71,7 @@ describe('suggested-actions command', async () => {
   test('should show response from bot and text from user on postback', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('suggested-actions');
 
     await driver.wait(suggestedActionsShowed(), timeouts.directLine);
@@ -87,6 +92,7 @@ describe('suggested-actions command', async () => {
   test('should show response from bot and no text from user on messageback', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('suggested-actions');
 
     await driver.wait(suggestedActionsShowed(), timeouts.directLine);
@@ -107,6 +113,7 @@ describe('suggested-actions command', async () => {
   test('should show response from bot and text from user on messageback', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('suggested-actions');
 
     await driver.wait(suggestedActionsShowed(), timeouts.directLine);
@@ -127,6 +134,7 @@ describe('suggested-actions command', async () => {
   test('should not show suggested actions not destined for the user', async () => {
     const { driver, pageObjects } = await setupWebDriver();
 
+    await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('suggested-actions others');
 
     await driver.wait(minNumActivitiesShown(2), timeouts.directLine);

__tests__/username.js

@@ -1,6 +1,7 @@
 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
@@ -10,6 +11,7 @@ jest.setTimeout(timeouts.test);
 test('send username in activity', async () => {
   const { driver, pageObjects } = await setupWebDriver();
 
+  await driver.wait(uiConnected(), timeouts.directLine);
   await pageObjects.sendMessageViaSendBox('user name');
 
   await driver.wait(minNumActivitiesShown(2), timeouts.directLine);