chore: Show scrollbars in selected integration tests (#3021)

cloudscape-design · Dec 12, 2024 · d077d9c · d077d9c
1 parent b46a730
commit d077d9c
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 81 deletions.
diff --git a/pages/app-layout/runtime-drawers-with-updates.page.tsx b/pages/app-layout/runtime-drawers-with-updates.page.tsx
@@ -128,6 +128,7 @@ export default function WithDrawers() {
       tools={<Info helpPathSlug={helpPathSlug} />}
       toolsOpen={isToolsOpen}
       toolsHide={!hasTools}
+      navigationHide={true}
     />
   );
 }

diff --git a/pages/date-picker/positioning.page.tsx b/pages/date-picker/positioning.page.tsx
@@ -14,7 +14,7 @@ export default function DatePickerScenario() {
         style={{
           inlineSize: '180px',
           marginInlineStart: '300px',
-          marginBlockStart: '300px',
+          marginBlockStart: '285px',
         }}
       >
         <DatePicker

diff --git a/src/__integ__/use-browser-with-scrollbars.ts b/src/__integ__/use-browser-with-scrollbars.ts
@@ -4,63 +4,83 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 // Workaround until scrollbars are generally shown in tests (AWSUI-59983)
 
+interface Options {
+  width?: number;
+  height?: number;
+}
+
 interface TestFunction {
   (browser: WebdriverIO.Browser): Promise<void> | void;
 }
 
-const options = {
-  capabilities: {
-    'goog:chromeOptions': {
-      args: [
-        // Same array as in
-        // https://github.com/cloudscape-design/browser-test-tools/blob/4aaed9e410b13e05a7d5dbace17231776d250b97/src/browsers/capabilities.ts
-        // but without --hide-scrollbar.
-        '--disable-background-timer-throttling',
-        '--disable-breakpad',
-        '--disable-client-side-phishing-detection',
-        '--disable-cloud-import',
-        '--disable-default-apps',
-        '--disable-dev-shm-usage',
-        '--disable-extensions',
-        '--disable-gesture-typing',
-        '--disable-hang-monitor',
-        '--disable-infobars',
-        '--disable-notifications',
-        '--disable-offer-store-unmasked-wallet-cards',
-        '--disable-offer-upload-credit-cards',
-        '--disable-popup-blocking',
-        '--disable-print-preview',
-        '--disable-prompt-on-repost',
-        '--disable-setuid-sandbox',
-        '--disable-speech-api',
-        '--disable-sync',
-        '--disable-tab-for-desktop-share',
-        '--disable-translate',
-        '--disable-voice-input',
-        '--disable-wake-on-wifi',
-        '--disk-cache-size=33554432',
-        '--enable-async-dns',
-        '--enable-simple-cache-backend',
-        '--enable-tcp-fast-open',
-        '--enable-webgl',
-        '--ignore-gpu-blacklist',
-        '--media-cache-size=33554432',
-        '--metrics-recording-only',
-        '--mute-audio',
-        '--no-default-browser-check',
-        '--no-first-run',
-        '--no-pings',
-        '--no-zygote',
-        '--password-store=basic',
-        '--prerender-from-omnibox=disabled',
-        '--no-sandbox',
-        '--disable-gpu',
-        '--headless=new',
-      ],
-    },
-  },
-};
+const flags = [
+  // Same array as in
+  // https://github.com/cloudscape-design/browser-test-tools/blob/4aaed9e410b13e05a7d5dbace17231776d250b97/src/browsers/capabilities.ts
+  // but without --hide-scrollbar.
+  '--disable-background-timer-throttling',
+  '--disable-breakpad',
+  '--disable-client-side-phishing-detection',
+  '--disable-cloud-import',
+  '--disable-default-apps',
+  '--disable-dev-shm-usage',
+  '--disable-extensions',
+  '--disable-gesture-typing',
+  '--disable-hang-monitor',
+  '--disable-infobars',
+  '--disable-notifications',
+  '--disable-offer-store-unmasked-wallet-cards',
+  '--disable-offer-upload-credit-cards',
+  '--disable-popup-blocking',
+  '--disable-print-preview',
+  '--disable-prompt-on-repost',
+  '--disable-setuid-sandbox',
+  '--disable-speech-api',
+  '--disable-sync',
+  '--disable-tab-for-desktop-share',
+  '--disable-translate',
+  '--disable-voice-input',
+  '--disable-wake-on-wifi',
+  '--disk-cache-size=33554432',
+  '--enable-async-dns',
+  '--enable-simple-cache-backend',
+  '--enable-tcp-fast-open',
+  '--enable-webgl',
+  '--ignore-gpu-blacklist',
+  '--media-cache-size=33554432',
+  '--metrics-recording-only',
+  '--mute-audio',
+  '--no-default-browser-check',
+  '--no-first-run',
+  '--no-pings',
+  '--no-zygote',
+  '--password-store=basic',
+  '--prerender-from-omnibox=disabled',
+  '--no-sandbox',
+  '--disable-gpu',
+  '--headless=new',
+];
 
-export default function (testFn: TestFunction): () => Promise<void> {
+// Based on browser-test-tools:
+// https://github.com/cloudscape-design/browser-test-tools/blob/4aaed9e410b13e05a7d5dbace17231776d250b97/src/use-browser.ts#L35-L65
+// These changes will be integrated in browser-test-tools and removed from here.
+function useBrowserWithScrollbars(optionsOverride: Options, testFn: TestFunction): () => Promise<void>;
+function useBrowserWithScrollbars(testFn: TestFunction): () => Promise<void>;
+function useBrowserWithScrollbars(...args: [Options, TestFunction] | [TestFunction]) {
+  const optionsOverride = args.length === 1 ? {} : args[0];
+  const { width, height } = optionsOverride;
+  const testFn = args.length === 1 ? args[0] : args[1];
+  const options = {
+    capabilities: {
+      'goog:chromeOptions': {
+        args: flags,
+      },
+    },
+    width,
+    height,
+  };
   return useBrowser(options, testFn);
 }
+
+export const scrollbarThickness = 15;
+
+export default useBrowserWithScrollbars;
diff --git a/src/app-layout/__integ__/app-layout-drawers.test.ts b/src/app-layout/__integ__/app-layout-drawers.test.ts
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
-import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import useBrowser, { scrollbarThickness } from '../../__integ__/use-browser-with-scrollbars';
 import { viewports } from './constants';
 import { testIf } from './utils';
 
@@ -155,9 +155,9 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
         await expect(page.getActiveDrawerWidth()).resolves.toEqual(290 + vrBorderOffsets[theme]);
         await page.dragResizerTo({ x: 0, y: 0 });
         const expectedWidths = {
-          ['classic']: 520,
-          ['refresh']: 447,
-          ['refresh-toolbar']: 593,
+          ['classic']: 505,
+          ['refresh']: 432,
+          ['refresh-toolbar']: 578,
         };
         await expect(page.getActiveDrawerWidth()).resolves.toEqual(expectedWidths[theme]);
       })
@@ -212,7 +212,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
     test(
       'updates side split panel position when using different width drawers',
       setupTest(
-        { theme, splitPanelPosition: 'side', screenSize: { ...viewports.desktop, width: 1450 } },
+        { theme, splitPanelPosition: 'side', screenSize: { ...viewports.desktop, width: 1465 } },
         async page => {
           await page.openFirstDrawer();
           await page.openSplitPanel();
@@ -292,9 +292,9 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
           await page.openFirstDrawer();
           const newWidth = await page.getMainContentWidth();
           if (size === 'desktop') {
-            await expect(width).toBeGreaterThan(newWidth);
+            expect(width).toBeGreaterThan(newWidth);
           } else {
-            await expect(width).toBe(newWidth);
+            expect(width + scrollbarThickness).toBe(newWidth);
           }
         }
       )

diff --git a/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts b/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
-import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import useBrowser, { scrollbarThickness } from '../../__integ__/use-browser-with-scrollbars';
 import { viewports } from './constants';
 import { getUrlParams, Theme } from './utils';
 
@@ -47,8 +47,11 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
     });
   }
 
-  const drawerBorderOffset = 1;
-  const navigationBorderOffset = theme === 'refresh' ? 1 : 0;
+  const borderThickness = 1;
+
+  // In Visual Refresh with the old app layout, if the navigation has a scrollbar, the scrollbar thickness is added to the navigation slot's width.
+  const navigationBorderOffset = theme === 'refresh' ? borderThickness + scrollbarThickness : 0;
+  const drawerBorderOffset = theme === 'refresh' ? borderThickness + scrollbarThickness : borderThickness;
 
   describe('Default width per contentType', () => {
     const testCases = [

diff --git a/src/app-layout/__integ__/app-layout-split-panel.test.ts b/src/app-layout/__integ__/app-layout-split-panel.test.ts
@@ -1,8 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
-
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import useBrowser, { scrollbarThickness } from '../../__integ__/use-browser-with-scrollbars';
 import { viewports } from './constants';
 import { AppLayoutSplitViewPage } from './utils';
 
@@ -31,6 +30,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
   test(
     'slider is accessible by keyboard in side position',
     setupTest(async page => {
+      await page.click(wrapper.findNavigationClose().toSelector());
       await page.openPanel();
       await page.switchPosition('side');
       await page.keys(['Shift', 'Tab', 'Shift']);
@@ -170,15 +170,21 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
         await page.openPanel();
         await page.switchPosition('side');
         const { width } = await page.getViewportSize();
+
+        // Drag the resizer to the right (i.e, make the split panel narrower) as much as possible
         await page.dragResizerTo({ x: width, y: 0 });
         expect((await page.getSplitPanelSize()).width).toEqual(280);
 
+        // Drag the resizer to the left (i.e, make the split panel wider) as much as possible
         await page.dragResizerTo({ x: 0, y: 0 });
+
+        const arePaddingsEnabled = name === 'paddings enabled';
+
         // different design allows for different split panel max width
         const expectedWidth = {
-          classic: 520,
-          refresh: name === 'paddings enabled' ? 445 : 469,
-          'refresh-toolbar': 592,
+          classic: arePaddingsEnabled ? 520 - scrollbarThickness : 520,
+          refresh: arePaddingsEnabled ? 445 - 2 * scrollbarThickness : 469 - scrollbarThickness,
+          'refresh-toolbar': arePaddingsEnabled ? 592 - scrollbarThickness : 592,
         };
         expect((await page.getSplitPanelSize()).width).toEqual(expectedWidth[theme]);
       }, url)

diff --git a/src/app-layout/__integ__/mobile.test.ts b/src/app-layout/__integ__/mobile.test.ts
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
-import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import useBrowser from '../../__integ__/use-browser-with-scrollbars';
 import { viewports } from './constants';
 import { testIf } from './utils';
 
@@ -50,7 +50,7 @@ describe.each(['classic', 'visual-refresh', 'visual-refresh-toolbar'] as const)(
       setupTest(async page => {
         await page.visit(pageName);
         const [documentWidth, windowWidth] = await page.getViewportWidths();
-        expect(documentWidth).toEqual(windowWidth);
+        expect(documentWidth).toBeLessThanOrEqual(windowWidth);
       })
     );
   });

diff --git a/src/app-layout/__integ__/runtime-drawers-with-updates.test.ts b/src/app-layout/__integ__/runtime-drawers-with-updates.test.ts
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
-import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import useBrowser from '../../__integ__/use-browser-with-scrollbars';
 import { getUrlParams, Theme } from './utils';
 
 const wrapper = createWrapper().findAppLayout();
@@ -41,8 +41,6 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
   test(
     'should call update drawer to disable resize',
     setupTest(async page => {
-      // close navigation panel to give drawer more room to resize
-      await page.click(wrapper.findNavigationClose().toSelector());
       await page.click(wrapper.findDrawerTriggerById('security').toSelector());
 
       await expect(page.isExisting(wrapper.findActiveDrawerResizeHandle().toSelector())).resolves.toBe(true);

diff --git a/src/app-layout/__integ__/runtime-drawers.test.ts b/src/app-layout/__integ__/runtime-drawers.test.ts
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
-import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper, { AppLayoutWrapper } from '../../../lib/components/test-utils/selectors';
+import useBrowser from '../../__integ__/use-browser-with-scrollbars';
 import { viewports } from './constants';
 import { getUrlParams, Theme } from './utils';
 
@@ -227,9 +227,10 @@ describe('Visual refresh toolbar only', () => {
     );
 
     test(
-      'first opened drawer should be closed when active drawers can not be shrunk to accommodate it (1330px)',
+      'first opened drawer should be closed when active drawers can not be shrunk to accommodate it (1345px)',
       setupTest(async page => {
-        await page.setWindowSize({ ...viewports.desktop, width: 1330 });
+        // Give the toolbar enough horizontal space to make sure the triggers are not collapsed into a dropdown
+        await page.setWindowSize({ ...viewports.desktop, width: 1345 });
         await page.click(wrapper.findDrawerTriggerById('circle').toSelector());
         await page.click(wrapper.findDrawerTriggerById('security').toSelector());
         await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());

diff --git a/src/cards/__integ__/responsive.test.ts b/src/cards/__integ__/responsive.test.ts
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
-import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper, { CardsWrapper } from '../../../lib/components/test-utils/selectors';
+import useBrowser from '../../__integ__/use-browser-with-scrollbars';
 
 class CardsPage extends BasePageObject {
   wrapper = new CardsWrapper(createWrapper('body').find(`.${CardsWrapper.rootSelector}`).getElement());
@@ -16,7 +16,8 @@ class CardsPage extends BasePageObject {
   };
 
   testCardsPerRow = async (width: number, cardsPerRow: number) => {
-    await this.setWindowSize({ width, height: 500 });
+    // Avoid vertical scrollbar
+    await this.setWindowSize({ width, height: 1200 });
     await this.waitForJsTimers();
     await expect(this.getCardsPerRow()).resolves.toEqual(cardsPerRow);
   };

diff --git a/src/date-picker/__integ__/fit-dropdown.test.ts b/src/date-picker/__integ__/fit-dropdown.test.ts
@@ -2,9 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import { strict as assert } from 'assert';
 
-import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
-
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import useBrowser from '../../__integ__/use-browser-with-scrollbars';
 import DatePickerPage from './page-objects/date-picker-page';
 
 class DatePickerDropdownTestPage extends DatePickerPage {