Skip to content

Commit 26b2fdd

Browse files
mxschllmxschll
committed
fix: imports
1 parent bd0ca4e commit 26b2fdd

File tree

6 files changed

+164
-6
lines changed

6 files changed

+164
-6
lines changed

‎pages/dropdown/bugbash.page.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import * as React from 'react';
4+
import { useEffect, useState } from 'react';
5+
6+
import Button from '~components/button';
7+
import Checkbox from '~components/checkbox';
8+
import Dropdown from '~components/dropdown';
9+
import FormField from '~components/form-field';
10+
import Select from '~components/select';
11+
import SpaceBetween from '~components/space-between';
12+
13+
import ListContent from './list-content';
14+
15+
interface OptionType {
16+
label: string;
17+
value: string;
18+
}
19+
20+
export default function DropdownBugbash() {
21+
const [open, setOpen] = useState(false);
22+
const [expandToViewport, setExpandToViewport] = useState(false);
23+
const [hasHeader, setHasHeader] = useState(false);
24+
const [hasFooter, setHasFooter] = useState(false);
25+
26+
const [minWidthOption, setMinWidthOption] = useState<OptionType>({ label: 'None', value: 'none' });
27+
const [maxWidthOption, setMaxWidthOption] = useState<OptionType>({ label: 'None', value: 'none' });
28+
const [contentSize, setContentSize] = useState<OptionType>({ label: 'Medium (20 items)', value: '20' });
29+
const [contentWidth, setContentWidth] = useState<OptionType>({ label: 'Short', value: 'short' });
30+
31+
const widthOptions: OptionType[] = [
32+
{ label: 'None', value: 'none' },
33+
{ label: '200px', value: '200' },
34+
{ label: '400px', value: '400' },
35+
{ label: '600px', value: '600' },
36+
];
37+
38+
const contentSizeOptions: OptionType[] = [
39+
{ label: 'Small (5 items)', value: '5' },
40+
{ label: 'Medium (20 items)', value: '20' },
41+
{ label: 'Large (50 items)', value: '50' },
42+
{ label: 'Extra Large (100 items)', value: '100' },
43+
];
44+
45+
const contentWidthOptions: OptionType[] = [
46+
{ label: 'Short', value: 'short' },
47+
{ label: 'Medium', value: 'medium' },
48+
{ label: 'Long', value: 'long' },
49+
{ label: 'Extra Long', value: 'extra-long' },
50+
];
51+
52+
const getContentRepeat = (width: string) => {
53+
const repeatMap = { short: 1, medium: 5, long: 15, 'extra-long': 30 };
54+
return repeatMap[width as keyof typeof repeatMap] || 1;
55+
};
56+
57+
const getWidthValue = (option: OptionType) => (option.value === 'none' ? undefined : parseInt(option.value, 10));
58+
59+
const minWidth = getWidthValue(minWidthOption);
60+
const maxWidth = getWidthValue(maxWidthOption);
61+
const itemCount = parseInt(contentSize.value, 10);
62+
const contentRepeat = getContentRepeat(contentWidth.value);
63+
64+
useEffect(() => {
65+
setOpen(false);
66+
}, [expandToViewport, minWidth, maxWidth, itemCount, contentRepeat, hasHeader, hasFooter]);
67+
68+
return (
69+
<div style={{ padding: '20px' }}>
70+
<h1>Dropdown Props Test Page</h1>
71+
<p>Use this page to test dropdown behavior with different prop combinations.</p>
72+
73+
<div style={{ display: 'flex', gap: '40px', marginTop: '30px', flexWrap: 'wrap' }}>
74+
<div style={{ minWidth: '300px', flexShrink: 0 }}>
75+
<SpaceBetween size="m">
76+
<h3>Dropdown Props</h3>
77+
78+
<FormField label="Content Size">
79+
<Select
80+
selectedOption={contentSize}
81+
onChange={({ detail }) => setContentSize(detail.selectedOption as OptionType)}
82+
options={contentSizeOptions}
83+
/>
84+
</FormField>
85+
86+
<FormField label="Content Width">
87+
<Select
88+
selectedOption={contentWidth}
89+
onChange={({ detail }) => setContentWidth(detail.selectedOption as OptionType)}
90+
options={contentWidthOptions}
91+
/>
92+
</FormField>
93+
94+
<FormField label="Min Width">
95+
<Select
96+
selectedOption={minWidthOption}
97+
onChange={({ detail }) => setMinWidthOption(detail.selectedOption as OptionType)}
98+
options={widthOptions}
99+
/>
100+
</FormField>
101+
102+
<FormField label="Max Width">
103+
<Select
104+
selectedOption={maxWidthOption}
105+
onChange={({ detail }) => setMaxWidthOption(detail.selectedOption as OptionType)}
106+
options={widthOptions}
107+
/>
108+
</FormField>
109+
110+
<Checkbox checked={expandToViewport} onChange={({ detail }) => setExpandToViewport(detail.checked)}>
111+
expandToViewport
112+
</Checkbox>
113+
114+
<Checkbox checked={hasHeader} onChange={({ detail }) => setHasHeader(detail.checked)}>
115+
Show Header
116+
</Checkbox>
117+
118+
<Checkbox checked={hasFooter} onChange={({ detail }) => setHasFooter(detail.checked)}>
119+
Show Footer
120+
</Checkbox>
121+
</SpaceBetween>
122+
</div>
123+
124+
<div style={{ flex: 1 }}>
125+
<h3>Test Area</h3>
126+
<div style={{ marginTop: '100px', display: 'inline-block' }}>
127+
<Dropdown
128+
trigger={<Button onClick={() => setOpen(!open)}>{open ? 'Close' : 'Open'} Dropdown</Button>}
129+
open={open}
130+
expandToViewport={expandToViewport}
131+
minWidth={minWidth}
132+
maxWidth={maxWidth}
133+
header={hasHeader ? <div style={{ padding: '10px', background: '#f0f0f0' }}>Header</div> : undefined}
134+
footer={hasFooter ? <div style={{ padding: '10px', background: '#f0f0f0' }}>Footer</div> : undefined}
135+
content={<ListContent n={itemCount} repeat={contentRepeat} withSpaces={true} />}
136+
/>
137+
</div>
138+
139+
<div style={{ height: '600px' }} />
140+
<div style={{ padding: '20px', background: '#f5f5f5' }}>
141+
Scroll down to test dropdown positioning at bottom of viewport
142+
</div>
143+
<div style={{ height: '600px' }} />
144+
</div>
145+
</div>
146+
</div>
147+
);
148+
}

‎src/dropdown/__integ__/alignment.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
44
import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
55

6-
import createWrapper from '../../../../../lib/components/test-utils/selectors';
6+
import createWrapper from '../../../lib/components/test-utils/selectors';
77

88
describe('Dropdown and trigger element alignment', () => {
99
describe.each(['expandable', 'expandable-iframe'])('%s', pageName => {

‎src/dropdown/__integ__/dropdown-list-placement.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
55
import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
66

7-
import createWrapper from '../../../../../lib/components/test-utils/selectors';
7+
import createWrapper from '../../../lib/components/test-utils/selectors';
88

99
const autosuggest = createWrapper().findAutosuggest();
1010
const select = createWrapper().findSelect();

‎src/dropdown/__integ__/dropdown-page-object.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// SPDX-License-Identifier: Apache-2.0
33
import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
44

5-
import DropdownWrapper from '../../../../../lib/components/test-utils/selectors/internal/dropdown';
5+
import DropdownWrapper from '../../../lib/components/test-utils/selectors/dropdown';
66

77
export class DropdownPageObject extends BasePageObject {
88
private dropdownWrapper: DropdownWrapper;
@@ -24,7 +24,7 @@ export class DropdownPageObject extends BasePageObject {
2424
return this.dropdownWrapper.toSelector();
2525
}
2626
public getTrigger(): string {
27-
return this.dropdownWrapper.find('.trigger').toSelector();
27+
return this.dropdownWrapper.findTrigger().toSelector();
2828
}
2929
public getOpenDropdown(): string {
3030
return this.dropdownWrapper.findOpenDropdown().toSelector();

‎src/dropdown/__integ__/width.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
// SPDX-License-Identifier: Apache-2.0
33
import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
44

5-
import createWrapper from '../../../../../lib/components/test-utils/selectors';
6-
import { AsyncResponsePage } from '../../../../__integ__/page-objects/async-response-page';
5+
import createWrapper from '../../../lib/components/test-utils/selectors';
6+
import { AsyncResponsePage } from '../../__integ__/page-objects/async-response-page';
77

88
type ComponentId = 'autosuggest' | 'multiselect' | 'select';
99

‎src/test-utils/dom/dropdown/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,16 @@ export default class DropdownWrapper extends ComponentWrapper {
5555
return this.findDropdown(options).findContent();
5656
}
5757

58+
/**
59+
* Returns the open dropdown element.
60+
*
61+
* @param options
62+
* * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.
63+
*/
64+
findOpenDropdown(options = { expandToViewport: false }): ElementWrapper | null {
65+
return this.findDropdown(options).findOpenDropdown();
66+
}
67+
5868
/**
5969
* @param options
6070
* * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.

0 commit comments

Comments
 (0)