From 3187b2edc7ba66eacd0650f20301300d029300eb Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 26 May 2022 09:21:48 -0400
Subject: [PATCH] CSR-563 | Alert fix and starting tests

Alert was not always snapping into viewport correctly
Barebones test outline - NOT ready for PR
---
 src/ux-components/alert/alert.spec.js | 17 +++++++++++++++++
 src/ux-components/alert/alert.vue     | 10 +---------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/ux-components/alert/alert.spec.js b/src/ux-components/alert/alert.spec.js
index 59becf922..a0e65b12f 100644
--- a/src/ux-components/alert/alert.spec.js
+++ b/src/ux-components/alert/alert.spec.js
@@ -62,6 +62,23 @@ describe("alert.vue", () => {
     expect(wrapper.vm.alertCopy).toBe("testCopy");
   });
 
+  it("Should run scrollContainerToAlert function when the clientBoundingRect is not entirely in the viewport", () => {
+    // Arrange
+      const wrapper = shallowMount(alert, {
+        computed: {
+          splitAlertCopyForLink: {
+            get() {
+              return "TEST";
+            },
+          }
+        },
+        mixins: [mockMixin]
+      });
+    // Act
+      
+    // Assert
+  });
+
 });
 
 const mockMixin = {
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 5c0d7a270..1d983bd42 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -94,7 +94,7 @@ export default {
       if (this.shouldScrollToOnMount && this.$el.style.display != 'none') {
         var footerHeight = this.getFooterInfoBoxHeight();
         if (!this.isAlertInViewport(footerHeight)) {
-          this.scrollContainerToAlert(footerHeight);
+          this.$el.scrollIntoView(true); // 'true' attempts to scroll element to top of viewport
         }
       }
     },
@@ -106,14 +106,6 @@ export default {
           rect.bottom <= (window.innerHeight - footerHeight || document.documentElement.clientHeight - footerHeight)
       );
     },
-    scrollContainerToAlert(footerHeight) {
-      // alert position on page + height of alert + footer height
-          var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + footerHeight;
-          // find the div wrapped by the form element - this is the scrollable container
-          // should be a more future-proof selector in case of CSS class changes
-          var pageContainerScrollable = document.querySelector('form > div');
-          pageContainerScrollable.scrollTo(0, scrollToHeight);
-    },
   },
   mounted() {
     this.ensureAlertIsInViewPort();