Add adaptiveCardsParserMaxVersion style options (#3778)

microsoft · Mar 5, 2021 · ef712ba · ef712ba
1 parent e0b9ad6
commit ef712ba
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 5 deletions.
diff --git a/...-adaptive-cards-with-adaptive-cards-parser-max-version-style-options-1-snap.png b/...-adaptive-cards-with-adaptive-cards-parser-max-version-style-options-1-snap.png
diff --git a/...-adaptive-cards-with-adaptive-cards-parser-max-version-style-options-2-snap.png b/...-adaptive-cards-with-adaptive-cards-parser-max-version-style-options-2-snap.png
diff --git a/...-adaptive-cards-with-adaptive-cards-parser-max-version-style-options-3-snap.png b/...-adaptive-cards-with-adaptive-cards-parser-max-version-style-options-3-snap.png
diff --git a/__tests__/html/adaptiveCards.parserMaxVersion.html b/__tests__/html/adaptiveCards.parserMaxVersion.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        conditions,
+        createDirectLineWithTranscript,
+        createStore,
+        expect,
+        host,
+        pageObjects,
+        timeouts,
+        token,
+        updateIn
+      } = window.WebChatTest;
+
+      const directLine = createDirectLineWithTranscript([
+        {
+          attachments: [
+            {
+              contentType: 'application/vnd.microsoft.card.adaptive',
+              content: {
+                type: 'AdaptiveCard',
+                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                version: '1.3',
+                body: [
+                  {
+                    type: 'Input.Text',
+                    placeholder: 'Placeholder text',
+                    isRequired: true,
+                    errorMessage: 'Error message',
+                    label: 'Label',
+                    id: 'id-1'
+                  }
+                ]
+              }
+            }
+          ],
+          from: {
+            id: 'bot',
+            role: 'bot'
+          },
+          id: '1',
+          timestamp: new Date().toISOString(),
+          type: 'message'
+        }
+      ]);
+
+      const store = createStore();
+
+      (async function () {
+        function renderWebChatWithMaxVersion(adaptiveCardsParserMaxVersion) {
+          window.WebChat.renderWebChat(
+            {
+              directLine,
+              store,
+              styleOptions: {
+                adaptiveCardsParserMaxVersion
+              }
+            },
+            document.getElementById('webchat')
+          );
+        }
+
+        renderWebChatWithMaxVersion();
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+
+        // When no maxVersion is specified, it should use the latest.
+        // The screenshot should have the "Label" text.
+        await host.snapshot();
+
+        // When maxVersion is specified, it should use that version.
+        // The screenshot should not have the "Label" text, as it was introduced in 1.3.
+        renderWebChatWithMaxVersion('1.2');
+        await host.snapshot();
+
+        // When maxVersion is specified but invalid, it should use the latest.
+        // The screenshot should have the "Label" text.
+        renderWebChatWithMaxVersion('x.y.z');
+        await host.snapshot();
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/adaptiveCards.parserMaxVersion.js b/__tests__/html/adaptiveCards.parserMaxVersion.js
@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('Adaptive Cards', () => {
+  test('with "adaptiveCardsParserMaxVersion" style options', () =>
+    runHTMLTest('adaptiveCards.parserMaxVersion.html'));
+});
diff --git a/packages/bundle/src/adaptiveCards/hooks/internal/useParseAdaptiveCardJSON.js b/packages/bundle/src/adaptiveCards/hooks/internal/useParseAdaptiveCardJSON.js
@@ -1,9 +1,9 @@
 import { hooks } from 'botframework-webchat-component';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import useAdaptiveCardsPackage from '../useAdaptiveCardsPackage';
 
-const { useDirection } = hooks;
+const { useDirection, useStyleOptions } = hooks;
 
 function updateRTLInline(element, rtl, adaptiveCardsPackage) {
   if (element instanceof adaptiveCardsPackage.Container) {
@@ -25,8 +25,19 @@ function updateRTLInline(element, rtl, adaptiveCardsPackage) {
 export default function useParseAdaptiveCardJSON() {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [direction] = useDirection();
+  const [{ adaptiveCardsParserMaxVersion }] = useStyleOptions();
 
-  const { AdaptiveCard, SerializationContext } = adaptiveCardsPackage;
+  const { AdaptiveCard, SerializationContext, Version } = adaptiveCardsPackage;
+
+  const maxVersion = useMemo(() => {
+    const maxVersion = Version.parse(adaptiveCardsParserMaxVersion, new SerializationContext());
+
+    if (maxVersion && !maxVersion.isValid) {
+      return console.warn('botframework-webchat: "adaptiveCardsParserMaxVersion" specified is not a valid version.');
+    }
+
+    return maxVersion;
+  }, [adaptiveCardsParserMaxVersion]);
 
   return useCallback(
     (content, { ignoreErrors = false } = {}) => {
@@ -36,7 +47,7 @@ export default function useParseAdaptiveCardJSON() {
 
       const card = new AdaptiveCard();
       const errors = [];
-      const serializationContext = new SerializationContext();
+      const serializationContext = new SerializationContext(maxVersion);
 
       card.parse(content, serializationContext);
 
@@ -56,6 +67,6 @@ export default function useParseAdaptiveCardJSON() {
 
       return card;
     },
-    [AdaptiveCard, adaptiveCardsPackage, direction, SerializationContext]
+    [AdaptiveCard, adaptiveCardsPackage, direction, maxVersion, SerializationContext]
   );
 }