diff --git a/src/app-layout/__integ__/app-layout-drawers.test.ts b/src/app-layout/__integ__/app-layout-drawers.test.ts index ffbb1cfdf2..fe1218c91e 100644 --- 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 index 4c565e9e1e..1afd9f5bf3 100644 --- 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 index 0d1dc28417..0e9b89ac50 100644 --- 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 index 423775eccd..8906b30cff 100644 --- 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