Fix rendering erroneous Adaptive Card (#4852)

compulim · web-flow · commit 960e67138249 · 2023-09-20T20:29:40.000-07:00
* Fix rendering erroneous Adaptive Card

* Update PR number
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -46,6 +46,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4718](https://github.com/microsoft/BotFramework-WebChat/issues/4718). In high contrast mode, Adaptive Card buttons, when pushed, should highlighted properly, by [@compulim](https://github.com/compulim), in PR [#4746](https://github.com/microsoft/BotFramework-WebChat/pull/4746)
 -  Fixes [#4721](https://github.com/microsoft/BotFramework-WebChat/issues/4721) and [#4726](https://github.com/microsoft/BotFramework-WebChat/issues/4726). Adaptive Cards `TextBlock` heading elements should start at level 2, by [@compulim](https://github.com/compulim), in PR [#4747](https://github.com/microsoft/BotFramework-WebChat/issues/4747)
 -  Fixes [#3699](https://github.com/microsoft/BotFramework-WebChat/issues/3699). Correcting timestamp roundoff, by [@compulim](https://github.com/compulim), in PR [#4821](https://github.com/microsoft/BotFramework-WebChat/pull/4821)
+-  Fixes [#4849](https://github.com/microsoft/BotFramework-WebChat/issues/4849). Rendering an erroneous Adaptive Cards should bail out and not throw `MutationObserver` error, by [@compulim](https://github.com/compulim), in PR [#4852](https://github.com/microsoft/BotFramework-WebChat/issues/4852)
 
 ## [4.15.8] - 2023-06-06
 
diff --git a/__tests__/html/adaptiveCards.renderError.html b/__tests__/html/adaptiveCards.renderError.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              contentType: 'application/vnd.microsoft.card.adaptive',
+              content: {
+                // We want to render a failing Adaptive Cards, adding "*" here to fail the renderer.
+                type: '*AdaptiveCard*',
+                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                version: '1.5',
+                body: [
+                  {
+                    text: 'Hello, World!',
+                    type: 'TextBlock'
+                  }
+                ]
+              }
+            }
+          ],
+          type: 'message'
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/adaptiveCards.renderError.js b/__tests__/html/adaptiveCards.renderError.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Adaptive Cards', () => {
+  test('should not error when render an erroneous card', () => runHTML('adaptiveCards.renderError.html'));
+});
diff --git a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx
@@ -222,12 +222,14 @@ const AdaptiveCardRenderer: VFC<AdaptiveCardRendererProps> = ({
   // Apply all mods regardless whether the element changed or not.
   // This is because we have undoed mods when we call the `useXXXModEffect` hook.
   useLayoutEffect(() => {
-    applyActionShouldBePushButtonMod(element, actionPerformedClassName);
-    applyActionSetShouldNotBeMenuBarMod(element);
-    applyActiveElementMod(element);
-    applyDisabledMod(element, disabled);
-    applyPersistValuesMod(element);
-    applyRoleMod(element);
+    if (element) {
+      applyActionShouldBePushButtonMod(element, actionPerformedClassName);
+      applyActionSetShouldNotBeMenuBarMod(element);
+      applyActiveElementMod(element);
+      applyDisabledMod(element, disabled);
+      applyPersistValuesMod(element);
+      applyRoleMod(element);
+    }
   }, [
     actionPerformedClassName,
     applyActionShouldBePushButtonMod,
@@ -240,6 +242,8 @@ const AdaptiveCardRenderer: VFC<AdaptiveCardRendererProps> = ({
     element
   ]);
 
+  errors?.length && console.warn('botframework-webchat: Failed to render Adaptive Cards.', errors);
+
   return errors?.length ? (
     node_env === 'development' && <ErrorBox error={errors[0]} type={localize('ADAPTIVE_CARD_ERROR_BOX_TITLE_RENDER')} />
   ) : (
