microsoft · compulim · Jun 29, 2021 · Jun 14, 2021 · Jun 15, 2021 · Jun 15, 2021
@@ -55,6 +55,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#3825](https://github.com/microsoft/BotFramework-WebChat/issues/3825). Add `role="presentation"` to all decorative `<svg>`, by [@compulim](https://github.com/compulim), in PR [#3903](https://github.com/microsoft/BotFramework-WebChat/pull/3903)
 -  Fixes [#3360](https://github.com/microsoft/BotFramework-WebChat/issues/3360) and [#3615](https://github.com/microsoft/BotFramework-WebChat/issues/3615). Use `channelData['webchat:fallback-text']` field for screen reader text, before stripping Markdown from [`activity.text` field](https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#text), by [@compulim](https://github.com/compulim), in PR [#3917](https://github.com/microsoft/BotFramework-WebChat/pull/3917)
 -  Fixes [#3856](https://github.com/microsoft/BotFramework-WebChat/issues/3856). Fix missing typings, by [@compulim](https://github.com/compulim) and [@corinagum](https://github.com/corinagum), in PR [#3931](https://github.com/microsoft/BotFramework-WebChat/pull/3931)
+-  Fixes [#3943](https://github.com/microsoft/BotFramework-WebChat/issues/3943). Auto-scroll should skip invisible activities, such as post back or event activity, by [@compulim](https://github.com/compulim), in PR [#3945](https://github.com/microsoft/BotFramework-WebChat/pull/3945)
 
 ### Changed
 

@@ -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="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      function createActivity(text) {
+        return {
+          from: { role: 'bot' },
+          id: Math.random().toString(36).substr(2, 5),
+          text,
+          timestamp: new Date().toISOString(),
+          type: 'message'
+        };
+      }
+
+      run(async function () {
+        const directLine = await testHelpers.createDirectLineWithTranscript(
+          [
+            createActivity(
+              'Lorem culpa excepteur quis commodo qui mollit. Laboris laboris excepteur esse fugiat sunt id eu esse id fugiat sint. Veniam qui quis mollit ad magna elit ex laborum occaecat labore.'
+            ),
+            createActivity(
+              'Aute deserunt id ullamco excepteur excepteur sint magna deserunt quis. Pariatur excepteur minim aliquip laboris quis eiusmod elit ut. Commodo dolor eu enim sint ex ex voluptate. Consequat duis laboris ad tempor aliqua aliquip et elit dolore do ea. Deserunt aute sit magna dolor sit elit dolor anim. Et reprehenderit adipisicing ea aute et exercitation est excepteur tempor cupidatat occaecat eiusmod eu.'
+            ),
+            createActivity(
+              'Minim deserunt ut tempor minim eiusmod duis labore minim occaecat duis adipisicing proident cupidatat nisi. Aute aliquip qui culpa incididunt. Mollit consequat reprehenderit ex velit ipsum eu anim reprehenderit ad eiusmod veniam.'
+            ),
+            createActivity(
+              'Eiusmod magna eiusmod proident dolor mollit mollit sit cupidatat consectetur est exercitation labore do quis. Esse incididunt duis consectetur consequat aliquip. Exercitation proident ut reprehenderit irure minim incididunt in sint anim.'
+            ),
+            createActivity(
+              'Id cillum ut non quis commodo ex officia consequat duis mollit occaecat proident anim aliqua. Ex commodo anim adipisicing id fugiat adipisicing ut dolor nulla culpa aliquip adipisicing sit laboris. Esse non Lorem aute veniam quis esse quis ipsum reprehenderit deserunt ut do culpa ut. Laborum officia consectetur ad et non aute et nostrud reprehenderit deserunt elit sint.'
+            )
+          ],
+          {
+            overridePostActivity: activity => {
+              const id = Math.random().toString(36).substr(2, 5);
+
+              directLine.activityDeferredObservable.next({
+                ...activity,
+                id,
+                timestamp: new Date().toISOString()
+              });
+
+              return Observable.from([id]);
+            }
+          }
+        );
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store: testHelpers.createStore(),
+            styleOptions: {
+              autoScrollSnapOnActivity: 1
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(5);
+        await pageConditions.scrollToBottomCompleted();
+
+        // We need to send a message to mark all activities as read.
+        await pageObjects.sendMessageViaSendBox('Hello, World!');
+
+        // SETUP: Bot send an event activity, which is INVISIBLE. This should not count towards "autoScrollSnapOnActivity".
+        directLine.activityDeferredObservable.next({
+          from: { role: 'bot' },
+          id: Math.random().toString(36).substr(2, 5),
+          timestamp: new Date().toISOString(),
+          type: 'event'
+        });
+
+        await pageConditions.numActivitiesShown(6);
+        await pageConditions.scrollToBottomCompleted();
+
+        // SETUP: Bot send a text activity, which is VISIBLE. This should count towards "autoScrollSnapOnActivity".
+        directLine.activityDeferredObservable.next(
+          createActivity(
+            'Minim voluptate officia nisi excepteur pariatur tempor duis enim aute consectetur ex ipsum id. Exercitation voluptate proident sunt ad Lorem tempor ex dolore culpa aliquip ipsum eu. Sunt nisi esse esse consequat mollit exercitation incididunt incididunt deserunt culpa incididunt consectetur in. Magna proident aliquip sunt proident in velit cillum commodo minim proident cillum officia mollit consequat.'
+          )
+        );
+
+        await pageConditions.numActivitiesShown(7);
+
+        // EXPECT: Transcript should scroll to bottom and show the "Minim voluptate" activity.
+        await pageConditions.scrollToBottomCompleted();
+
+        const { scrollTop } = pageElements.transcriptScrollable();
+
+        // SETUP: Transcript already reached snap point, it should not scroll further.
+        directLine.activityDeferredObservable.next(
+          createActivity(
+            'Voluptate occaecat sunt est incididunt qui duis in adipisicing. Eu exercitation duis labore reprehenderit. Consectetur elit quis exercitation Lorem quis velit sunt. Irure anim labore officia tempor anim veniam est quis. Cillum et fugiat amet eu. Et sunt non voluptate ea irure dolore elit non ex commodo aute veniam.'
+          )
+        );
+
+        await pageConditions.numActivitiesShown(8);
+
+        // EXPECT: Transcript should not scroll further than the "Minim voluptate" activity.
+        await pageConditions.scrollStabilized(scrollTop);
+
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Auto-scroll with "activity" snap behavior', () => {
+  test('should not pause on invisible activity', () => runHTML('autoScroll.eventActivity.html'));
+});
@@ -0,0 +1,180 @@
+<!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>
+    <div id="webchat"></div>
+    <script>
+      function createActivity(text) {
+        return {
+          from: { role: 'bot' },
+          id: Math.random().toString(36).substr(2, 5),
+          text,
+          timestamp: new Date().toISOString(),
+          type: 'message'
+        };
+      }
+
+      run(async function () {
+        const directLine = await testHelpers.createDirectLineWithTranscript(
+          [
+            createActivity(
+              'Lorem culpa excepteur quis commodo qui mollit. Laboris laboris excepteur esse fugiat sunt id eu esse id fugiat sint. Veniam qui quis mollit ad magna elit ex laborum occaecat labore.'
+            ),
+            createActivity(
+              'Aute deserunt id ullamco excepteur excepteur sint magna deserunt quis. Pariatur excepteur minim aliquip laboris quis eiusmod elit ut. Commodo dolor eu enim sint ex ex voluptate. Consequat duis laboris ad tempor aliqua aliquip et elit dolore do ea. Deserunt aute sit magna dolor sit elit dolor anim. Et reprehenderit adipisicing ea aute et exercitation est excepteur tempor cupidatat occaecat eiusmod eu.'
+            ),
+            createActivity(
+              'Minim deserunt ut tempor minim eiusmod duis labore minim occaecat duis adipisicing proident cupidatat nisi. Aute aliquip qui culpa incididunt. Mollit consequat reprehenderit ex velit ipsum eu anim reprehenderit ad eiusmod veniam.'
+            ),
+            createActivity(
+              'Eiusmod magna eiusmod proident dolor mollit mollit sit cupidatat consectetur est exercitation labore do quis. Esse incididunt duis consectetur consequat aliquip. Exercitation proident ut reprehenderit irure minim incididunt in sint anim.'
+            ),
+            createActivity(
+              'Id cillum ut non quis commodo ex officia consequat duis mollit occaecat proident anim aliqua. Ex commodo anim adipisicing id fugiat adipisicing ut dolor nulla culpa aliquip adipisicing sit laboris. Esse non Lorem aute veniam quis esse quis ipsum reprehenderit deserunt ut do culpa ut. Laborum officia consectetur ad et non aute et nostrud reprehenderit deserunt elit sint.'
+            ),
+            {
+              attachments: [
+                {
+                  contentType: 'application/vnd.microsoft.card.adaptive',
+                  content: {
+                    $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                    type: 'AdaptiveCard',
+                    version: '1.3',
+                    body: [
+                      {
+                        type: 'TextBlock',
+                        text: 'Adaptive Card design session',
+                        size: 'Large',
+                        weight: 'Bolder',
+                        wrap: true
+                      },
+                      {
+                        type: 'TextBlock',
+                        text: ' Conf Room 112/3377 (10) ',
+                        isSubtle: true,
+                        wrap: true
+                      },
+                      {
+                        type: 'TextBlock',
+                        text: '12:30 - 01:30',
+                        isSubtle: true,
+                        spacing: 'None',
+                        wrap: true
+                      },
+                      {
+                        type: 'TextBlock',
+                        text: 'Snooze for',
+                        wrap: true
+                      },
+                      {
+                        type: 'Input.ChoiceSet',
+                        id: 'snooze',
+                        value: '5',
+                        choices: [
+                          {
+                            title: '5 minutes',
+                            value: '5'
+                          },
+                          {
+                            title: '15 minutes',
+                            value: '15'
+                          },
+                          {
+                            title: '30 minutes',
+                            value: '30'
+                          }
+                        ]
+                      }
+                    ],
+                    actions: [
+                      {
+                        type: 'Action.Submit',
+                        title: 'Snooze'
+                      },
+                      {
+                        type: 'Action.Submit',
+                        title: "I'll be late"
+                      }
+                    ]
+                  }
+                }
+              ],
+              from: {
+                id: 'bot',
+                role: 'bot'
+              },
+              id: '1',
+              timestamp: new Date().toISOString(),
+              type: 'message'
+            }
+          ],
+          {
+            overridePostActivity: activity => {
+              // console.log(activity);
+
+              const id = Math.random().toString(36).substr(2, 5);
+
+              directLine.activityDeferredObservable.next({
+                ...activity,
+                id,
+                timestamp: new Date().toISOString()
+              });
+
+              return Observable.from([id]);
+            }
+          }
+        );
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store: testHelpers.createStore(),
+            styleOptions: {
+              autoScrollSnapOnActivity: 1
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(6);
+        await pageConditions.scrollToBottomCompleted();
+
+        // We need to send a message to mark all activities as read.
+        await host.click(document.getElementsByClassName('ac-pushButton')[0]);
+
+        directLine.activityDeferredObservable.next(
+          createActivity(
+            'Minim voluptate officia nisi excepteur pariatur tempor duis enim aute consectetur ex ipsum id. Exercitation voluptate proident sunt ad Lorem tempor ex dolore culpa aliquip ipsum eu. Sunt nisi esse esse consequat mollit exercitation incididunt incididunt deserunt culpa incididunt consectetur in. Magna proident aliquip sunt proident in velit cillum commodo minim proident cillum officia mollit consequat.'
+          )
+        );
+
+        await pageConditions.numActivitiesShown(7);
+
+        // EXPECT: Transcript should continue scroll to reveal "Minim voluptate" activity.
+        await pageConditions.scrollToBottomCompleted();
+
+        // SETUP: Transcript already reached snap point (1 activity), remember the "scrollTop", transcript should not scroll further anymore.
+        const { scrollTop } = pageElements.transcriptScrollable();
+
+        directLine.activityDeferredObservable.next(
+          createActivity(
+            'Voluptate occaecat sunt est incididunt qui duis in adipisicing. Eu exercitation duis labore reprehenderit. Consectetur elit quis exercitation Lorem quis velit sunt. Irure anim labore officia tempor anim veniam est quis. Cillum et fugiat amet eu. Et sunt non voluptate ea irure dolore elit non ex commodo aute veniam.'
+          )
+        );
+
+        await pageConditions.numActivitiesShown(8);
+
+        // EXPECT: Transcript already reached snap point (1 activity), it should not scroll further below.
+        await pageConditions.scrollStabilized(scrollTop);
+
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Auto-scroll with "activity" snap behavior', () => {
+  test('should not pause on post back activity', () => runHTML('autoScroll.withPostBack.activity.html'));
+});