Fix sample 13 for wrong Speech Services region

CHANGELOG.md

@@ -90,6 +90,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#2428](https://github.com/microsoft/BotFramework-WebChat/issues/2428). Should interrupt speech synthesis after microphone button is clicked, by [@compulim](https://github.com/compulim) in PR [#2429](https://github.com/microsoft/BotFramework-WebChat/pull/2429)
 -  Fix [#2435](https://github.com/microsoft/BotFramework-WebChat/issues/2435). Fix microphone button getting stuck on voice-triggered expecting input hint without a speech synthesis engine, by [@compulim](https://github.com/compulim) in PR [#2445](https://github.com/microsoft/BotFramework-WebChat/pull/2445)
 -  Fix [#2472](https://github.com/microsoft/BotFramework-WebChat/issues/2472). Update samples to use repo's version of React, by [@corinagum](https://github.com/corinagum) in PR [#2478](https://github.com/microsoft/BotFramework-WebChat/pull/2478)
+-  Fix [#2473](https://github.com/microsoft/BotFramework-WebChat/issues/2473). Fix samples 13 using wrong region for Speech Services credentials, by [@compulim](https://github.com/compulim) in PR [#2482](https://github.com/microsoft/BotFramework-WebChat/pull/2482)
 
 ### Added
 

__tests__/richCards.js

@@ -24,6 +24,7 @@ test('audio card', async () => {
   const audioElement = await driver.findElement(By.css('audio'));
 
   await driver.wait(mediaBuffered(audioElement));
+  await pageObjects.playMediaToCompletion(audioElement);
 
   const base64PNG = await driver.takeScreenshot();
 

__tests__/setup/pageObjects/index.js

@@ -13,6 +13,7 @@ import getSendBoxText from './getSendBoxText';
 import getStore from './getStore';
 import isDictating from './isDictating';
 import pingBot from './pingBot';
+import playMediaToCompletion from './playMediaToCompletion';
 import putSpeechRecognitionResult from './putSpeechRecognitionResult';
 import sendFile from './sendFile';
 import sendMessageViaMicrophone from './sendMessageViaMicrophone';
@@ -48,6 +49,7 @@ export default function pageObjects(driver) {
       getStore,
       isDictating,
       pingBot,
+      playMediaToCompletion,
       putSpeechRecognitionResult,
       sendFile,
       sendMessageViaMicrophone,

__tests__/setup/pageObjects/playMediaToCompletion.js

@@ -0,0 +1,14 @@
+import executePromiseScript from './executePromiseScript';
+
+export default async function pingBot(driver, mediaElement) {
+  await executePromiseScript(
+    driver,
+    mediaElement =>
+      new Promise(resolve => {
+        mediaElement.loop = false;
+        mediaElement.play();
+        mediaElement.onended = resolve;
+      }),
+    mediaElement
+  );
+}

samples/13.customization-speech-ui/src/App.js

@@ -8,7 +8,10 @@ import React, { Component } from 'react';
 
 import CustomDictationInterims from './CustomDictationInterims';
 import CustomMicrophoneButton from './CustomMicrophoneButton';
-import fetchSpeechServicesToken from './fetchSpeechServicesToken';
+import {
+  region as fetchSpeechServicesRegion,
+  token as fetchSpeechServicesToken
+} from './fetchSpeechServicesCredentials';
 import LastBotActivity from './LastBotActivity';
 
 const { Composer } = Components;
@@ -27,9 +30,8 @@ export default class App extends Component {
     const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
     const { token } = await res.json();
     const webSpeechPonyfillFactory = await createCognitiveServicesSpeechServicesPonyfillFactory({
-      // TODO: [P3] Fetch token should be able to return different region
       authorizationToken: fetchSpeechServicesToken,
-      region: 'westus'
+      region: await fetchSpeechServicesRegion()
     });
 
     this.setState(() => ({

samples/13.customization-speech-ui/src/fetchSpeechServicesToken.js → samples/13.customization-speech-ui/src/fetchSpeechServicesCredentials.js

@@ -1,16 +1,27 @@
 const RENEW_EVERY = 300000;
-let fetchPromise,
-  lastFetch = 0;
+let fetchPromise;
+let lastFetch = 0;
+
+async function region() {
+  const { region } = await fetchCredentials();
+
+  return region;
+}
+
+async function token() {
+  const { token } = await fetchCredentials();
+
+  return token;
+}
 
 // This fetch function will be called every time Web Speech recognizer or synthesizer start
 // You are advised to cache the token to prevent unnecessary network call and delay
-export default function() {
+async function fetchCredentials() {
   const now = Date.now();
 
   if (!fetchPromise || now - lastFetch > RENEW_EVERY) {
     fetchPromise = fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' })
       .then(res => res.json())
-      .then(({ token }) => token)
       .catch(() => {
         lastFetch = 0;
       });
@@ -20,3 +31,6 @@ export default function() {
 
   return fetchPromise;
 }
+
+export default fetchCredentials;
+export { region, token };