diff --git a/pages/common/flush-response.ts b/pages/common/flush-response.ts new file mode 100644 index 0000000000..697de7e450 --- /dev/null +++ b/pages/common/flush-response.ts @@ -0,0 +1,18 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +export interface WindowWithFlushResponse extends Window { + __pendingCallbacks: Array<() => void>; + __flushServerResponse: () => void; +} +declare const window: WindowWithFlushResponse; + +export function enhanceWindow() { + window.__pendingCallbacks = []; + window.__flushServerResponse = () => { + for (const cb of window.__pendingCallbacks) { + cb(); + } + window.__pendingCallbacks = []; + }; +} diff --git a/pages/dropdown/width.page.tsx b/pages/dropdown/width.page.tsx index cfbc80b404..12b3c3ed88 100644 --- a/pages/dropdown/width.page.tsx +++ b/pages/dropdown/width.page.tsx @@ -9,6 +9,10 @@ import Select, { SelectProps } from '~components/select'; import SpaceBetween from '~components/space-between'; import AppContext, { AppContextType } from '../app/app-context'; +import { enhanceWindow, WindowWithFlushResponse } from '../common/flush-response'; + +declare const window: WindowWithFlushResponse; +enhanceWindow(); type DemoContext = React.Context< AppContextType<{ @@ -18,6 +22,7 @@ type DemoContext = React.Context< virtualScroll: boolean; expandToViewport: boolean; containerWidth: string; + manualServerMock: boolean; }> >; @@ -207,12 +212,17 @@ function CustomSelect({ expandToViewport, loading, onOpen, onClose, virtualScrol export default function () { const { urlParams } = useContext(AppContext as DemoContext); - const { asyncLoading, component, triggerWidth, virtualScroll, expandToViewport, containerWidth } = urlParams; + const { asyncLoading, component, triggerWidth, virtualScroll, expandToViewport, containerWidth, manualServerMock } = + urlParams; const [loading, setLoading] = useState(asyncLoading); const onOpen = () => { if (asyncLoading) { setLoading(true); - setTimeout(() => setLoading(false), 500); + if (manualServerMock) { + window.__pendingCallbacks.push(() => setLoading(false)); + } else { + setTimeout(() => setLoading(false), 500); + } } }; const onClose = () => setLoading(asyncLoading); diff --git a/src/__integ__/page-objects/async-response-page.ts b/src/__integ__/page-objects/async-response-page.ts new file mode 100644 index 0000000000..d4c31b5429 --- /dev/null +++ b/src/__integ__/page-objects/async-response-page.ts @@ -0,0 +1,14 @@ +// 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'; + +interface ExtendedWindow extends Window { + __flushServerResponse: () => void; +} +declare const window: ExtendedWindow; + +export class AsyncResponsePage extends BasePageObject { + flushResponse() { + return this.browser.execute(() => window.__flushServerResponse()); + } +} diff --git a/src/internal/components/dropdown/__integ__/width.test.ts b/src/internal/components/dropdown/__integ__/width.test.ts index 287c84daeb..cd05bcd4c8 100644 --- a/src/internal/components/dropdown/__integ__/width.test.ts +++ b/src/internal/components/dropdown/__integ__/width.test.ts @@ -1,13 +1,13 @@ // 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 { AsyncResponsePage } from '../../../../__integ__/page-objects/async-response-page'; type ComponentId = 'autosuggest' | 'multiselect' | 'select'; -export class DropdownPageObject extends BasePageObject { +export class DropdownPageObject extends AsyncResponsePage { getWrapperAndTrigger(componentId: ComponentId) { const wrapper = createWrapper(); let componentWrapper; @@ -55,7 +55,7 @@ function setupTest( ) { return useBrowser({ width: pageWidth, height: 1000 }, async browser => { await browser.url( - `#/light/dropdown/width?component=${componentId}&expandToViewport=${expandToViewport}&triggerWidth=${triggerWidth}px&asyncLoading=${asyncLoading}` + `#/light/dropdown/width?component=${componentId}&expandToViewport=${expandToViewport}&triggerWidth=${triggerWidth}px&asyncLoading=${asyncLoading}&manualServerMock=${asyncLoading}` ); const page = new DropdownPageObject(browser); await page.waitForVisible(page.getWrapperAndTrigger(componentId).wrapper.toSelector()); @@ -148,9 +148,8 @@ describe('Dropdown width', () => { }); expect(dropdownBox.left + dropdownBox.width).toBeLessThanOrEqual(pageWidth); await expect(page.getText(dropdownSelector)).resolves.toContain('Loading'); - await page.waitUntil(async () => (await page.getText(dropdownSelector)).includes('A very'), { - timeout: 1000, - }); + await page.flushResponse(); + await expect(page.getText(dropdownSelector)).resolves.toContain('A very'); const newBox = await page.getBoundingBox(dropdownSelector); expect(newBox.left + newBox.width).toBeLessThanOrEqual(pageWidth); }