chore: Fix elements scrolling with elementScrollTo in integration tests

cloudscape-design · Dec 13, 2024 · 28c6984 · 28c6984
1 parent b46a730
commit 28c6984
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/src/app-layout/__integ__/app-layout-drawers.test.ts b/src/app-layout/__integ__/app-layout-drawers.test.ts
@@ -8,6 +8,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() {
@@ -241,7 +243,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);
       })

diff --git a/src/app-layout/__integ__/runtime-drawers.test.ts b/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);
       })
@@ -315,7 +325,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);
     })

diff --git a/src/cards/__integ__/sticky-header.test.ts b/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(

diff --git a/src/pie-chart/__integ__/pie-chart.test.ts b/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