microsoft · OEvgeny · Nov 14, 2024 · Nov 30, 2024 · Nov 30, 2024 · Dec 2, 2024
@@ -96,7 +96,7 @@ rules:
   react-hooks/rules-of-hooks: error
   react-hooks/exhaustive-deps:
     - warn
-    - additionalHooks: ^(useLiveRegion|useMemoized)$
+    - additionalHooks: ^(useLiveRegion|useMemoized|useUpdater)$
 
   # Conflicts with Adaptive Card schema.
   # react/forbid-prop-types: error

@@ -0,0 +1,50 @@
+<!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>
+    <template id="messages">
+      <x-message>
+```javascript
+console.log('JavaScript code block using tripple ` delimiters');
+```
+----
+    Code block using indent
+    also has copy button
+    but no highlighting
+      </x-message>
+    </template>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const {
+          WebChat: { renderWebChat, testIds }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        /** @type {HTMLElement[]} */
+        const messages = Array.from(window.messages.content.querySelectorAll('x-message'))
+        for (const message of messages) {
+          await directLine.emulateIncomingActivity({
+            text: message.innerText,
+            type: 'message'
+          });
+          if (!message.hasAttribute('snapshot-ignore')) {
+            await host.snapshot('local');
+          }
+          await pageConditions.numActivitiesShown(messages.indexOf(message) + 1);
+        }
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
+    <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" style="position: relative;"></main>
+    <script type="text/babel">
+      run(async function () {
+        await host.sendDevToolsCommand('Browser.setPermission', {
+          permission: { name: 'clipboard-write' },
+          setting: 'granted'
+        });
+
+        await expect(navigator.permissions.query({ name: 'clipboard-write' })).resolves.toHaveProperty(
+          'state',
+          'granted'
+        );
+
+        const {
+          ReactDOM: { render },
+          WebChat: { ReactWebChat, testIds }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => (
+          <React.Fragment>
+            <ReactWebChat directLine={directLine} store={store} />
+            <div style={{ gap: 8, position: 'absolute', top: 0, width: '100%' }}>
+              <label>
+                <div>Paste box</div>
+                <textarea
+                  data-testid="paste box"
+                  spellCheck={false}
+                  style={{ background: '#f0f0f0', border: 0, height: 100, padding: 0, resize: 'none', width: '100%' }}
+                />
+              </label>
+            </div>
+          </React.Fragment>
+        );
+
+        render(<App />, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          text: `Laboris ut proident dolore nisi sint ullamco proident veniam est.
+
+\`\`\`python
+import numpy as np
+import matplotlib.pyplot as plt
+
+def plot_sine_waves():
+    """Create a beautiful visualization of sine waves with different frequencies."""
+    # Generate time points
+    t = np.linspace(0, 10, 1000)
+\`\`\`
+
+Ea sint elit anim enim voluptate aliquip aliqua nulla veniam.
+
+<pre><code>Ea et pariatur sint Lorem ex veniam adipisicing.
+
+Aliqua magna aliquip nisi quis.
+</code></pre>
+
+Cupidatat nulla duis dolor nulla ut pariatur minim incididunt quis adipisicing velit id Lorem.`,
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // WHEN: Focus on the "Copy" button via keyboard.
+        await host.click(document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`));
+        await host.sendShiftTab(3);
+        await host.sendKeys('ENTER');
+
+        // THEN: Should focus on the "Copy" button
+        const copyButton = document.querySelector(`[data-testid="${WebChat.testIds.codeBlockCopyButton}"]`);
+
+        expect(document.activeElement).toBe(copyButton);
+        await host.snapshot('local');
+
+        // WHEN: Press ENTER on the "Copy" button.
+        await host.sendKeys('ENTER');
+
+        // THEN: The copy button should change to "Copied".
+        await host.snapshot('local');
+
+        // WHEN: Paste into plain text and rich text text box.
+        await host.click(document.querySelector('[data-testid="paste box"]'));
+        await host.sendKeys('+CONTROL', 'v', '-CONTROL');
+
+        await host.click(document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`));
+
+        // Sleep for 1 second for the checkmark to go away.
+        await testHelpers.sleep(500);
+
+        // WHEN: Hiding Web Chat and showing it back.
+        document.getElementById('webchat').style.display = 'none';
+        document.body.offsetWidth; // Need for browser to refresh the layout.
+        document.getElementById('webchat').style.display = '';
+
+        // THEN: The "Copy" button should kept at normal.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -10,16 +10,12 @@
     <main id="webchat"></main>
     <script>
       run(async function () {
-        const clock = lolex.createClock();
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
 
-        const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });
-
-        WebChat.renderWebChat({ directLine, ponyfill: clock, store }, document.getElementById('webchat'));
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
 
         await pageConditions.webChatRendered();
 
-        clock.tick(600);
-
         await pageConditions.uiConnected();
 
         store.dispatch({
@@ -33,6 +29,7 @@
 
         await pageConditions.toastShown(1);
         await pageConditions.toastShown('Please read our privacy policy.');
+        await host.snapshot('local');
 
         store.dispatch({
           type: 'WEB_CHAT/SET_NOTIFICATION',
@@ -43,16 +40,9 @@
           }
         });
 
-        await pageConditions.toastShown(1);
-        await pageConditions.toastShown('Please read our privacy policy.');
-
-        clock.tick(400);
-
-        await pageConditions.toastShown('Please read our privacy policy.');
-
-        clock.tick(600);
 
         await pageConditions.toastShown('Please read our privacy policy again.');
+        await host.snapshot('local');
 
         store.dispatch({
           type: 'WEB_CHAT/DISMISS_NOTIFICATION',
@@ -61,16 +51,8 @@
           }
         });
 
-        await pageConditions.toastShown(1);
-        await pageConditions.toastShown('Please read our privacy policy again.');
-
-        clock.tick(400);
-
-        await pageConditions.toastShown('Please read our privacy policy again.');
-
-        clock.tick(600);
-
         await pageConditions.toastShown(0);
+        await host.snapshot('local');
       });
     </script>
   </body>

@@ -138,6 +138,7 @@
     "prop-types": "15.8.1",
     "punycode": "2.3.1",
     "sanitize-html": "2.13.0",
+    "shiki": "^1.22.2",
     "swiper": "8.4.7",
     "url-search-params-polyfill": "8.2.5",
     "uuid": "8.3.2",