Skip to content

Commit 2d22795

Browse files
jperalsjperals
committed
chore: Show scrollbars in integration tests
1 parent 49a178d commit 2d22795

11 files changed

+238
-76
lines changed

‎.github/workflows/dry-run.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@ on:
1212

1313
jobs:
1414
dry-run:
15-
uses: cloudscape-design/actions/.github/workflows/dry-run.yml@main
15+
uses: cloudscape-design/actions/.github/workflows/dry-run.yml@chore/show-scrollbars

‎pages/app-layout/runtime-drawers-with-updates.page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ export default function WithDrawers() {
128128
tools={<Info helpPathSlug={helpPathSlug} />}
129129
toolsOpen={isToolsOpen}
130130
toolsHide={!hasTools}
131+
navigationHide={true}
131132
/>
132133
);
133134
}

‎pages/copy-to-clipboard/in-table.page.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import { CopyToClipboard } from '~components';
6+
import SpaceBetween from '~components/space-between';
7+
import Table, { TableProps } from '~components/table';
8+
9+
import { ariaLabels, Item } from '../table/shared-configs';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
const simpleColumns: TableProps.ColumnDefinition<Item>[] = [
13+
{
14+
id: 'number',
15+
cell: item => item.number,
16+
header: 'Number',
17+
},
18+
{
19+
id: 'text',
20+
cell: item => (
21+
<CopyToClipboard
22+
data-testid="copy-article"
23+
copyButtonText="Copy"
24+
textToCopy={item.text}
25+
copySuccessText="Lorem ipsum article copied"
26+
copyErrorText="Lorem ipsum article failed to copy"
27+
variant="inline"
28+
/>
29+
),
30+
header: 'Number',
31+
maxWidth: 300,
32+
},
33+
{
34+
id: 'other',
35+
cell: () => 'Other data',
36+
header: 'Other data',
37+
},
38+
];
39+
40+
const items = [
41+
{ number: 1, text: 'Short text' },
42+
{
43+
number: 2,
44+
text: 'Long text long text long text long text long text long text long text long text long text long text long text',
45+
},
46+
];
47+
48+
export default function Page() {
49+
return (
50+
<>
51+
<h1>Copy to clipboard inside table cell</h1>
52+
53+
<ScreenshotArea disableAnimations={true}>
54+
<SpaceBetween size="m">
55+
<Table
56+
columnDefinitions={simpleColumns}
57+
items={items}
58+
ariaLabels={ariaLabels}
59+
enableKeyboardNavigation={true}
60+
/>
61+
</SpaceBetween>
62+
</ScreenshotArea>
63+
</>
64+
);
65+
}

‎pages/wizard/background.page.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useState } from 'react';
4+
5+
import Button from '~components/button';
6+
import Link from '~components/link';
7+
import Wizard, { WizardProps } from '~components/wizard';
8+
9+
import { i18nStrings } from './common';
10+
11+
import styles from './styles.scss';
12+
13+
const steps: WizardProps.Step[] = [
14+
{
15+
title: 'Step 1',
16+
content: (
17+
<div className={styles['step-content']}>
18+
<div id="content-text">Content 1</div>
19+
</div>
20+
),
21+
},
22+
{
23+
title: 'Step 2',
24+
content: (
25+
<div className={styles['step-content']}>
26+
<div id="content-text">Content 2</div>
27+
</div>
28+
),
29+
},
30+
{
31+
title: 'Step 3',
32+
info: <Link variant="info">Info</Link>,
33+
content: (
34+
<div className={styles['step-content']}>
35+
{Array.from(Array(15).keys()).map(key => (
36+
<div key={key} className={styles['content-item']}>
37+
Item {key}
38+
</div>
39+
))}
40+
</div>
41+
),
42+
},
43+
];
44+
45+
export default function WizardPage() {
46+
const [activeStepIndex, setActiveStepIndex] = useState(0);
47+
return (
48+
<div style={{ height: '100%', backgroundColor: '#eee' }}>
49+
<Wizard
50+
steps={steps}
51+
i18nStrings={i18nStrings}
52+
activeStepIndex={activeStepIndex}
53+
onNavigate={e => setActiveStepIndex(e.detail.requestedStepIndex)}
54+
secondaryActions={activeStepIndex === 2 ? <Button>Save as draft</Button> : null}
55+
/>
56+
</div>
57+
);
58+
}

‎src/__integ__/use-browser-with-scrollbars.ts

+80-53
Original file line numberDiff line numberDiff line change
@@ -4,63 +4,90 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
44

55
// Workaround until scrollbars are generally shown in tests (AWSUI-59983)
66

7+
interface Options {
8+
isMobile?: boolean;
9+
width?: number;
10+
height?: number;
11+
}
12+
713
interface TestFunction {
814
(browser: WebdriverIO.Browser): Promise<void> | void;
915
}
1016

11-
const options = {
12-
capabilities: {
13-
'goog:chromeOptions': {
14-
args: [
15-
// Same array as in
16-
// https://github.com/cloudscape-design/browser-test-tools/blob/4aaed9e410b13e05a7d5dbace17231776d250b97/src/browsers/capabilities.ts
17-
// but without --hide-scrollbar.
18-
'--disable-background-timer-throttling',
19-
'--disable-breakpad',
20-
'--disable-client-side-phishing-detection',
21-
'--disable-cloud-import',
22-
'--disable-default-apps',
23-
'--disable-dev-shm-usage',
24-
'--disable-extensions',
25-
'--disable-gesture-typing',
26-
'--disable-hang-monitor',
27-
'--disable-infobars',
28-
'--disable-notifications',
29-
'--disable-offer-store-unmasked-wallet-cards',
30-
'--disable-offer-upload-credit-cards',
31-
'--disable-popup-blocking',
32-
'--disable-print-preview',
33-
'--disable-prompt-on-repost',
34-
'--disable-setuid-sandbox',
35-
'--disable-speech-api',
36-
'--disable-sync',
37-
'--disable-tab-for-desktop-share',
38-
'--disable-translate',
39-
'--disable-voice-input',
40-
'--disable-wake-on-wifi',
41-
'--disk-cache-size=33554432',
42-
'--enable-async-dns',
43-
'--enable-simple-cache-backend',
44-
'--enable-tcp-fast-open',
45-
'--enable-webgl',
46-
'--ignore-gpu-blacklist',
47-
'--media-cache-size=33554432',
48-
'--metrics-recording-only',
49-
'--mute-audio',
50-
'--no-default-browser-check',
51-
'--no-first-run',
52-
'--no-pings',
53-
'--no-zygote',
54-
'--password-store=basic',
55-
'--prerender-from-omnibox=disabled',
56-
'--no-sandbox',
57-
'--disable-gpu',
58-
'--headless=new',
59-
],
60-
},
61-
},
62-
};
17+
const flags = [
18+
// Same array as in
19+
// https://github.com/cloudscape-design/browser-test-tools/blob/4aaed9e410b13e05a7d5dbace17231776d250b97/src/browsers/capabilities.ts
20+
// but without --hide-scrollbar.
21+
'--disable-background-timer-throttling',
22+
'--disable-breakpad',
23+
'--disable-client-side-phishing-detection',
24+
'--disable-cloud-import',
25+
'--disable-default-apps',
26+
'--disable-dev-shm-usage',
27+
'--disable-extensions',
28+
'--disable-gesture-typing',
29+
'--disable-hang-monitor',
30+
'--disable-infobars',
31+
'--disable-notifications',
32+
'--disable-offer-store-unmasked-wallet-cards',
33+
'--disable-offer-upload-credit-cards',
34+
'--disable-popup-blocking',
35+
'--disable-print-preview',
36+
'--disable-prompt-on-repost',
37+
'--disable-setuid-sandbox',
38+
'--disable-speech-api',
39+
'--disable-sync',
40+
'--disable-tab-for-desktop-share',
41+
'--disable-translate',
42+
'--disable-voice-input',
43+
'--disable-wake-on-wifi',
44+
'--disk-cache-size=33554432',
45+
'--enable-async-dns',
46+
'--enable-simple-cache-backend',
47+
'--enable-tcp-fast-open',
48+
'--enable-webgl',
49+
'--ignore-gpu-blacklist',
50+
'--media-cache-size=33554432',
51+
'--metrics-recording-only',
52+
'--mute-audio',
53+
'--no-default-browser-check',
54+
'--no-first-run',
55+
'--no-pings',
56+
'--no-zygote',
57+
'--password-store=basic',
58+
'--prerender-from-omnibox=disabled',
59+
'--no-sandbox',
60+
'--disable-gpu',
61+
'--headless=new',
62+
];
6363

64-
export default function (testFn: TestFunction): () => Promise<void> {
64+
function useBrowserWithScrollbars(optionsOverride: Options, testFn: TestFunction): () => Promise<void>;
65+
function useBrowserWithScrollbars(testFn: TestFunction): () => Promise<void>;
66+
function useBrowserWithScrollbars(...args: [Options, TestFunction] | [TestFunction]) {
67+
// How to do type-safe function overloads: https://stackoverflow.com/questions/55852612/typescript-overloads-optional-arguments-and-type-inference
68+
const optionsOverride = args.length === 1 ? {} : args[0];
69+
const { width, height } = optionsOverride;
70+
const testFn = args.length === 1 ? args[0] : args[1];
71+
const options = {
72+
capabilities: {
73+
'goog:chromeOptions': {
74+
args: flags,
75+
mobileEmulation: optionsOverride.isMobile
76+
? {
77+
deviceMetrics: {
78+
mobile: true,
79+
touch: true,
80+
width,
81+
height,
82+
},
83+
}
84+
: undefined,
85+
},
86+
},
87+
width,
88+
height,
89+
};
6590
return useBrowser(options, testFn);
6691
}
92+
93+
export default useBrowserWithScrollbars;

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

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
33
import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
4-
import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
54

65
import createWrapper from '../../../lib/components/test-utils/selectors';
6+
import useBrowser from '../../__integ__/use-browser-with-scrollbars';
77
import { viewports } from './constants';
88
import { testIf } from './utils';
99

@@ -87,6 +87,7 @@ interface SetupTestOptions {
8787
screenSize?: (typeof viewports)['desktop' | 'mobile'];
8888
disableContentPaddings?: string;
8989
theme: string;
90+
isMobile?: boolean;
9091
}
9192

9293
const setupTest = (
@@ -95,10 +96,11 @@ const setupTest = (
9596
screenSize = viewports.desktop,
9697
disableContentPaddings = 'false',
9798
theme,
99+
isMobile,
98100
}: SetupTestOptions,
99101
testFn: (page: AppLayoutDrawersPage) => Promise<void>
100102
) =>
101-
useBrowser(screenSize, async browser => {
103+
useBrowser({ ...screenSize, isMobile }, async browser => {
102104
const page = new AppLayoutDrawersPage(browser);
103105
const params = new URLSearchParams({
104106
splitPanelPosition,
@@ -155,9 +157,9 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
155157
await expect(page.getActiveDrawerWidth()).resolves.toEqual(290 + vrBorderOffsets[theme]);
156158
await page.dragResizerTo({ x: 0, y: 0 });
157159
const expectedWidths = {
158-
['classic']: 520,
159-
['refresh']: 447,
160-
['refresh-toolbar']: 593,
160+
['classic']: 505,
161+
['refresh']: 432,
162+
['refresh-toolbar']: 578,
161163
};
162164
await expect(page.getActiveDrawerWidth()).resolves.toEqual(expectedWidths[theme]);
163165
})
@@ -212,7 +214,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
212214
test(
213215
'updates side split panel position when using different width drawers',
214216
setupTest(
215-
{ theme, splitPanelPosition: 'side', screenSize: { ...viewports.desktop, width: 1450 } },
217+
{ theme, splitPanelPosition: 'side', screenSize: { ...viewports.desktop, width: 1465 } },
216218
async page => {
217219
await page.openFirstDrawer();
218220
await page.openSplitPanel();
@@ -271,7 +273,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
271273
describe('mobile', () => {
272274
test(
273275
'hides the resize handle on drawer open',
274-
setupTest({ theme, screenSize: viewports.mobile }, async page => {
276+
setupTest({ theme, screenSize: viewports.mobile, isMobile: true }, async page => {
275277
await page.openFirstDrawer();
276278
await expect(page.isExisting(wrapper.findActiveDrawerResizeHandle().toSelector())).resolves.toBe(false);
277279
})
@@ -286,6 +288,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
286288
disableContentPaddings: 'true',
287289
theme,
288290
screenSize: size === 'desktop' ? viewports.desktop : viewports.mobile,
291+
isMobile: size === 'mobile',
289292
},
290293
async page => {
291294
const width = await page.getMainContentWidth();

‎src/app-layout/__integ__/app-layout-refresh-content-width.test.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
33
import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
4-
import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
54

65
import createWrapper from '../../../lib/components/test-utils/selectors';
6+
import useBrowser from '../../__integ__/use-browser-with-scrollbars';
77
import { viewports } from './constants';
88
import { getUrlParams, Theme } from './utils';
99

@@ -47,8 +47,12 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
4747
});
4848
}
4949

50-
const drawerBorderOffset = 1;
51-
const navigationBorderOffset = theme === 'refresh' ? 1 : 0;
50+
const borderThickness = 1;
51+
const scrollbarWidth = 15;
52+
53+
// In Visual Refresh without new toolbar, the width of the scrollbar, if present, is added to the navigation and tools slots' width.
54+
const navigationBorderOffset = theme === 'refresh' ? borderThickness + scrollbarWidth : 0;
55+
const drawerBorderOffset = theme === 'refresh' ? borderThickness + scrollbarWidth : borderThickness;
5256

5357
describe('Default width per contentType', () => {
5458
const testCases = [

0 commit comments

Comments
 (0)