Fix tests

__tests__/cardActionMiddleware.js

@@ -1,4 +1,4 @@
-import { By } from 'selenium-webdriver';
+import { By, logging } from 'selenium-webdriver';
 
 import { imageSnapshotOptions, timeouts } from './constants.json';
 
@@ -98,7 +98,7 @@ test('card action "signin" when directLine.getSessionId is falsy', async () => {
     props: {
       cardActionMiddleware: ({ dispatch }) => next => ({ cardAction, getSignInUrl }) => {
         if (cardAction.type === 'signin') {
-          getSignInUrl().then(url => {
+          Promise.resolve(getSignInUrl()).then(url => {
             dispatch({
               type: 'WEB_CHAT/SEND_MESSAGE',
               payload: {
@@ -138,6 +138,6 @@ test('card action "signin" when directLine.getSessionId is falsy', async () => {
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
   expect(await pageObjects.getConsoleErrors()).toEqual([]);
   expect(await pageObjects.getConsoleWarnings()).toEqual([
-    'botframework-webchat: No-magic-code OAuth flow is not supported on this Direct Line adapter.'
+    'botframework-webchat: OAuth is not supported on this Direct Line adapter.'
   ]);
 });

__tests__/html/middleware.liveRegionAttachment.warning.returnRenderFunctionReturnFalse.html

@@ -21,9 +21,7 @@
         const RenderAttachmentForScreenReader = () => {
           const createAttachmentForScreenReaderRenderer = useCreateAttachmentForScreenReaderRenderer();
 
-          createAttachmentForScreenReaderRenderer({ activity: {}, attachment: {} })();
-
-          return false;
+          return createAttachmentForScreenReaderRenderer({ activity: {}, attachment: {} })();
         };
 
         const attachmentForScreenReaderMiddleware = () => next => (...args) => {

packages/api/src/hooks/Composer.js

@@ -149,6 +149,7 @@ const Composer = ({
   activityStatusMiddleware,
   activityStatusRenderer,
   attachmentMiddleware,
+  attachmentForScreenReaderMiddleware,
   attachmentRenderer,
   avatarMiddleware,
   avatarRenderer,
@@ -280,13 +281,18 @@ const Composer = ({
 
     return (
       activityRenderer ||
-      applyMiddlewareForRenderer('activity', ...singleToArray(activityMiddleware), () => () => ({ activity }) => {
-        if (activity) {
-          throw new Error(`No renderer for activity of type "${activity.type}"`);
-        } else {
-          throw new Error('No activity to render');
+      applyMiddlewareForRenderer(
+        'activity',
+        { strict: false },
+        ...singleToArray(activityMiddleware),
+        () => () => ({ activity }) => {
+          if (activity) {
+            throw new Error(`No renderer for activity of type "${activity.type}"`);
+          } else {
+            throw new Error('No activity to render');
+          }
         }
-      })({})
+      )({})
     );
   }, [activityMiddleware, activityRenderer]);
 
@@ -298,53 +304,31 @@ const Composer = ({
 
     return (
       activityStatusRenderer ||
-      applyMiddlewareForRenderer('activity status', ...singleToArray(activityStatusMiddleware), () => () => () =>
-        false
+      applyMiddlewareForRenderer(
+        'activity status',
+        { strict: false },
+        ...singleToArray(activityStatusMiddleware),
+        () => () => () => false
       )({})
     );
   }, [activityStatusMiddleware, activityStatusRenderer]);
 
-  // const patchedAttachmentRenderer = useMemo(() => {
-  //   if (attachmentRenderer) {
-  //     console.warn(
-  //       'Web Chat: "attachmentRenderer" is deprecated and will be removed on 2022-06-15, please use "attachmentMiddleware" instead.'
-  //     );
-
-  //     return attachmentRenderer;
-  //   }
-
-  //   const renderer = applyMiddlewareForRenderer(
-  //     'attachment',
-  //     ...singleToArray(attachmentMiddleware),
-  //     () => () => ({ attachment }) => () => {
-  //       if (attachment) {
-  //         throw new Error(`No renderer for attachment of type "${attachment.contentType}"`);
-  //       } else {
-  //         throw new Error('No attachment to render');
-  //       }
-  //     }
-  //   )({});
-
-  //   let showDeprecationNotes = true;
-
-  //   return (...args) => {
-  //     const result = renderer(...args);
-
-  //     if (isValidElement(result)) {
-  //       if (showDeprecationNotes) {
-  //         console.warn(
-  //           'botframework-webchat: Please upgrade the attachment middleware with a new signature. For details, please see HOOKS.md#usecreateattachmentrenderer.'
-  //         );
-
-  //         showDeprecationNotes = false;
-  //       }
-
-  //       return () => result;
-  //     }
-
-  //     return result;
-  //   };
-  // }, [attachmentMiddleware, attachmentRenderer]);
+  const patchedAttachmentForScreenReaderRenderer = useMemo(
+    () =>
+      applyMiddlewareForRenderer(
+        'attachment for screen reader',
+        { strict: true },
+        ...singleToArray(attachmentForScreenReaderMiddleware),
+        () => () => ({ attachment }) => () => {
+          if (attachment) {
+            throw new Error(`No renderer for attachment of type "${attachment.contentType}"`);
+          } else {
+            throw new Error('No attachment to render');
+          }
+        }
+      )({}),
+    [attachmentForScreenReaderMiddleware]
+  );
 
   const patchedAttachmentRenderer = useMemo(() => {
     if (attachmentRenderer) {
@@ -373,7 +357,9 @@ const Composer = ({
 
     return (
       avatarRenderer ||
-      applyMiddlewareForRenderer('avatar', ...singleToArray(avatarMiddleware), () => () => () => false)({})
+      applyMiddlewareForRenderer('avatar', { strict: false }, ...singleToArray(avatarMiddleware), () => () => () =>
+        false
+      )({})
     );
   }, [avatarMiddleware, avatarRenderer]);
 
@@ -385,13 +371,18 @@ const Composer = ({
 
     return (
       toastRenderer ||
-      applyMiddlewareForRenderer('toast', ...singleToArray(toastMiddleware), () => () => ({ notification }) => {
-        if (notification) {
-          throw new Error(`No renderer for notification of type "${notification.contentType}"`);
-        } else {
-          throw new Error('No notification to render');
+      applyMiddlewareForRenderer(
+        'toast',
+        { strict: false },
+        ...singleToArray(toastMiddleware),
+        () => () => ({ notification }) => {
+          if (notification) {
+            throw new Error(`No renderer for notification of type "${notification.contentType}"`);
+          } else {
+            throw new Error('No notification to render');
+          }
         }
-      })({})
+      )({})
     );
   }, [toastMiddleware, toastRenderer]);
 
@@ -403,8 +394,11 @@ const Composer = ({
 
     return (
       typingIndicatorRenderer ||
-      applyMiddlewareForRenderer('typing indicator', ...singleToArray(typingIndicatorMiddleware), () => () => () =>
-        false
+      applyMiddlewareForRenderer(
+        'typing indicator',
+        { strict: false },
+        ...singleToArray(typingIndicatorMiddleware),
+        () => () => () => false
       )({})
     );
   }, [typingIndicatorMiddleware, typingIndicatorRenderer]);
@@ -427,6 +421,7 @@ const Composer = ({
       ...hoistedDispatchers,
       activityRenderer: patchedActivityRenderer,
       activityStatusRenderer: patchedActivityStatusRenderer,
+      attachmentForScreenReaderRenderer: patchedAttachmentForScreenReaderRenderer,
       attachmentRenderer: patchedAttachmentRenderer,
       avatarRenderer: patchedAvatarRenderer,
       dir: patchedDir,
@@ -463,6 +458,7 @@ const Composer = ({
       onTelemetry,
       patchedActivityRenderer,
       patchedActivityStatusRenderer,
+      patchedAttachmentForScreenReaderRenderer,
       patchedAttachmentRenderer,
       patchedAvatarRenderer,
       patchedDir,
@@ -540,6 +536,7 @@ Composer.defaultProps = {
   activityRenderer: undefined,
   activityStatusMiddleware: undefined,
   activityStatusRenderer: undefined,
+  attachmentForScreenReaderMiddleware: undefined,
   attachmentMiddleware: undefined,
   attachmentRenderer: undefined,
   avatarMiddleware: undefined,
@@ -574,6 +571,7 @@ Composer.propTypes = {
   activityRenderer: PropTypes.func,
   activityStatusMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   activityStatusRenderer: PropTypes.func,
+  attachmentForScreenReaderMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   attachmentMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   attachmentRenderer: PropTypes.func,
   avatarMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),

packages/api/src/hooks/index.js

@@ -7,7 +7,6 @@ import useConnectivityStatus from './useConnectivityStatus';
 import useCreateActivityRenderer from './useCreateActivityRenderer';
 import useCreateActivityStatusRenderer from './useCreateActivityStatusRenderer';
 import useCreateAttachmentForScreenReaderRenderer from './useCreateAttachmentForScreenReaderRenderer';
-import useCreateAttachmentRenderer from './useCreateAttachmentRenderer';
 import useCreateAvatarRenderer from './useCreateAvatarRenderer';
 import useDateFormatter from './useDateFormatter';
 import useDebouncedNotifications from './useDebouncedNotifications';
@@ -71,7 +70,6 @@ export {
   useCreateActivityRenderer,
   useCreateActivityStatusRenderer,
   useCreateAttachmentForScreenReaderRenderer,
-  useCreateAttachmentRenderer,
   useCreateAvatarRenderer,
   useDateFormatter,
   useDebouncedNotifications,

packages/api/src/hooks/middleware/applyMiddleware.js

@@ -11,10 +11,10 @@ export default function applyMiddleware(type, ...middleware) {
     });
 }
 
-export function forRenderer(type, ...middleware) {
+export function forRenderer(type, { strict = false } = {}, ...middleware) {
   return (...setupArgs) => {
     const runMiddleware = concatMiddleware(...middleware)(...setupArgs)(() => (
-      <ErrorBox error={new Error(`reached terminator of ${type}`)} message={`reached terminator of ${type}`} />
+      <ErrorBox error={new Error(`reached terminator of ${type}`)} type={type} />
     ));
 
     // The createRendererArgs is "what to render", for example, activity.
@@ -28,14 +28,30 @@ export function forRenderer(type, ...middleware) {
         if (!render) {
           return false;
         } else if (isValidElement(render)) {
+          if (strict) {
+            console.error(`botframework-webchat: ${type} should only return either false or a render function.`);
+
+            return false;
+          }
+
           return <UserlandBoundary type={`render of ${type}`}>{render}</UserlandBoundary>;
         } else {
           return (...renderTimeArgs) => (
-            <UserlandBoundary type={`render of ${type}`}>{() => render(...renderTimeArgs)}</UserlandBoundary>
+            <UserlandBoundary type={`render of ${type}`}>
+              {() => {
+                const element = render(...renderTimeArgs);
+
+                if (strict && !isValidElement(element)) {
+                  console.error(`botframework-webchat: ${type} should return React element only.`);
+                }
+
+                return element;
+              }}
+            </UserlandBoundary>
           );
         }
       } catch (err) {
-        return <ErrorBox error={err} message={`initialization of ${type}`} />;
+        return <ErrorBox error={err} type={type} />;
       }
     };
   };

packages/api/src/hooks/useCreateAttachmentForScreenReaderRenderer.js

@@ -0,0 +1,5 @@
+import useWebChatAPIContext from './internal/useWebChatAPIContext';
+
+export default function useCreateAttachmentForScreenReaderRenderer() {
+  return useWebChatAPIContext().attachmentForScreenReaderRenderer;
+}

packages/bundle/src/adaptiveCards/Attachment/HeroCardAttachment.js

@@ -16,7 +16,7 @@ HeroCardAttachment.propTypes = {
       buttons: PropTypes.any,
       images: PropTypes.arrayOf(
         PropTypes.shape({
-          alt: PropTypes.string.isRequired,
+          alt: PropTypes.string,
           tap: PropTypes.any,
           url: PropTypes.string.isRequired
         })

packages/bundle/src/adaptiveCards/Attachment/HeroCardContent.js

@@ -44,7 +44,7 @@ HeroCardContent.propTypes = {
   content: PropTypes.shape({
     images: PropTypes.arrayOf(
       PropTypes.shape({
-        alt: PropTypes.string.isRequired,
+        alt: PropTypes.string,
         tap: PropTypes.any,
         url: PropTypes.string.isRequired
       })