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

@@ -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 = {

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();