chore: Fixes flakiness in dropdown width test

cloudscape-design · Oct 16, 2024 · fe0fa55 · fe0fa55
1 parent 780d6b5
commit fe0fa55
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 8 deletions.
diff --git a/pages/common/flush-response.ts b/pages/common/flush-response.ts
@@ -0,0 +1,16 @@
+// 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;
+
+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
@@ -9,6 +9,9 @@ import Select, { SelectProps } from '~components/select';
 import SpaceBetween from '~components/space-between';
 
 import AppContext, { AppContextType } from '../app/app-context';
+import { WindowWithFlushResponse } from '../common/flush-response';
+
+declare const window: WindowWithFlushResponse;
 
 type DemoContext = React.Context<
   AppContextType<{
@@ -18,6 +21,7 @@ type DemoContext = React.Context<
     virtualScroll: boolean;
     expandToViewport: boolean;
     containerWidth: string;
+    manualServerMock: boolean;
   }>
 >;
 
@@ -207,12 +211,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
@@ -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
@@ -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);
       }