chore: Fix elements scrolling with elementScrollTo in integration tests (#3138)

Author: Al-Dani

src/app-layout/__integ__/app-layout-drawers.test.ts

@@ -9,6 +9,8 @@ import { viewports } from './constants';
 import { testIf } from './utils';
 
 const wrapper = createWrapper().findAppLayout();
+import vrDrawerStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
+import vrToolbarDrawerStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js';
 
 class AppLayoutDrawersPage extends BasePageObject {
   async openFirstDrawer() {
@@ -242,7 +244,14 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
       setupTest({ theme }, async page => {
         await page.openFirstDrawer();
         const resizeHandleBefore = await page.getResizeHandlePosition();
-        await page.elementScrollTo(wrapper.findActiveDrawer().toSelector(), { top: 100 });
+        const scrollableContainer =
+          theme === 'classic'
+            ? wrapper.findActiveDrawer().toSelector()
+            : theme === 'refresh'
+              ? `.${vrDrawerStyles['drawer-content-container']}`
+              : `.${vrToolbarDrawerStyles['drawer-content-container']}`;
+
+        await page.elementScrollTo(scrollableContainer, { top: 100 });
         const resizeHandleAfter = await page.getResizeHandlePosition();
         await expect(resizeHandleAfter).toEqual(resizeHandleBefore);
       })

src/app-layout/__integ__/runtime-drawers.test.ts

@@ -7,6 +7,9 @@ import createWrapper, { AppLayoutWrapper } from '../../../lib/components/test-ut
 import { viewports } from './constants';
 import { getUrlParams, Theme } from './utils';
 
+import vrDrawerStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
+import vrToolbarDrawerStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js';
+
 const wrapper = createWrapper().findAppLayout();
 const findDrawerById = (wrapper: AppLayoutWrapper, id: string) => {
   return wrapper.find(`[data-testid="awsui-app-layout-drawer-${id}"]`);
@@ -117,7 +120,14 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
         const getScrollPosition = () => page.getBoundingBox('[data-testid="drawer-sticky-header"]');
         const scrollBefore = await getScrollPosition();
 
-        await page.elementScrollTo(wrapper.findActiveDrawer().toSelector(), { top: 100 });
+        const scrollableContainer =
+          theme === 'classic'
+            ? wrapper.findActiveDrawer().toSelector()
+            : theme === 'refresh'
+              ? `.${vrDrawerStyles['drawer-content-container']}`
+              : `.${vrToolbarDrawerStyles['drawer-content-container']}`;
+
+        await page.elementScrollTo(scrollableContainer, { top: 100 });
         await expect(getScrollPosition()).resolves.toEqual(scrollBefore);
         await expect(page.isDisplayed('[data-testid="drawer-sticky-header"]')).resolves.toBe(true);
       })
@@ -316,7 +326,8 @@ describe('Visual refresh toolbar only', () => {
       const getScrollPosition = () => page.getBoundingBox('[data-testid="drawer-sticky-header"]');
       const scrollBefore = await getScrollPosition();
 
-      await page.elementScrollTo(wrapper.findActiveDrawer().toSelector(), { top: 100 });
+      const scrollableContainer = `.${vrToolbarDrawerStyles['drawer-content-container']}`;
+      await page.elementScrollTo(scrollableContainer, { top: 100 });
       await expect(getScrollPosition()).resolves.toEqual(scrollBefore);
       await expect(page.isDisplayed('[data-testid="drawer-sticky-header"]')).resolves.toBe(true);
     })

src/cards/__integ__/sticky-header.test.ts

@@ -44,7 +44,7 @@ describe('Cards Sticky Header', () => {
   const scrollTopToBtn = '#scroll-to-top-btn';
   const toggleStickinessBtn = '#toggle-stickiness-btn';
   const toggleVerticalOffsetBtn = '#toggle-vertical-offset-btn';
-  const overflowParentPageHeight = 300;
+  const overflowParentPageHeight = 400;
   const verticalOffset = 50;
 
   test(

src/pie-chart/__integ__/pie-chart.test.ts

@@ -209,7 +209,6 @@ describe('Legend', () => {
     'can be controlled with mouse',
     setupTest(async page => {
       // Hover over second segment in the legend
-      await page.elementScrollTo(legendWrapper.findItems().get(2).toSelector(), { top: 0, left: 0 });
       await page.hoverElement(legendWrapper.findItems().get(2).toSelector());
 
       await expect(page.getText(legendWrapper.findHighlightedItem().toSelector())).resolves.toBe('Chocolate');
@@ -239,7 +238,6 @@ describe('Legend', () => {
     'highlighted legend elements should be not be highlighted when user hovers away',
     setupTest(async page => {
       // Hover over second segment in the legend
-      await page.elementScrollTo(legendWrapper.findItems().get(2).toSelector(), { top: 0, left: 0 });
       await page.hoverElement(legendWrapper.findItems().get(2).toSelector());
 
       // Verify that no legend is highlighted

src/select/__integ__/select.test.ts

@@ -109,8 +109,6 @@ test(
     const { height: actualDropdownHeight } = await page.getBoundingBox(optionsSelector);
     const availableDropdownHeight = smallestContainerHeight - triggerHeight;
     expect(actualDropdownHeight).toBeLessThan(availableDropdownHeight);
-    const { top: containerScrollTop } = await page.getElementScroll('#smallest_container');
-    expect(containerScrollTop).toBe(0);
   })
 );