Fix flaky tests (#2812)

mui · Oct 20, 2023 · 1a3960e · 1a3960e
1 parent a9ec6f6
commit 1a3960e
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git a/packages/toolpad-components/src/Chart.tsx b/packages/toolpad-components/src/Chart.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Container, ContainerProps, Skeleton } from '@mui/material';
+import { Box, BoxProps, Skeleton } from '@mui/material';
 
 import {
   XAxis,
@@ -37,7 +37,7 @@ function getBarChartDataSeriesNormalizedYKey(dataSeries: ChartDataSeries, index:
   return `${dataSeries.label}-${dataSeries.yKey}-${index}`;
 }
 
-interface ChartProps extends ContainerProps {
+interface ChartProps extends BoxProps {
   data?: ChartData;
   loading?: boolean;
   error?: Error | string;
@@ -94,7 +94,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) {
   const isDataVisible = !loading && !displayError;
 
   return (
-    <Container disableGutters sx={{ ...sx, position: 'relative' }} aria-busy={loading}>
+    <Box sx={{ ...sx, position: 'relative', width: '100%' }} aria-busy={loading}>
       <ResponsiveContainer width="100%" height={height}>
         <ComposedChart data={barChartData} margin={{ top: 20, right: 80 }}>
           {isDataVisible ? (
@@ -196,7 +196,7 @@ function Chart({ data = [], loading, error, height, sx }: ChartProps) {
           height={height}
         />
       ) : null}
-    </Container>
+    </Box>
   );
 }
 

diff --git a/packages/toolpad-components/src/Form.tsx b/packages/toolpad-components/src/Form.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Container, ContainerProps, Box, Stack, BoxProps } from '@mui/material';
+import { Box, BoxProps, Stack } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import { useNode } from '@mui/toolpad-core';
 import { equalProperties } from '@mui/toolpad-utils/collections';
@@ -15,7 +15,7 @@ export const FormContext = React.createContext<{
   fieldValues: {},
 });
 
-interface FormProps extends ContainerProps {
+interface FormProps extends BoxProps {
   value: FieldValues;
   onChange: (newValue: FieldValues) => void;
   onSubmit?: (data?: FieldValues) => unknown | Promise<unknown>;
@@ -39,7 +39,6 @@ function Form({
   mode = 'onSubmit',
   hasChrome = true,
   sx,
-  ...rest
 }: FormProps) {
   const form = useForm({ mode });
   const { isSubmitSuccessful } = form.formState;
@@ -79,7 +78,7 @@ function Form({
   return (
     <FormContext.Provider value={formContextValue}>
       {hasChrome ? (
-        <Container disableGutters sx={sx} {...rest}>
+        <Box sx={{ ...sx, width: '100%' }}>
           <form onSubmit={form.handleSubmit(handleSubmit)} onReset={handleReset}>
             {children}
 
@@ -118,7 +117,7 @@ function Form({
               </Stack>
             </Box>
           </form>
-        </Container>
+        </Box>
       ) : (
         children
       )}

diff --git a/test/integration/data-grid/basic.spec.ts b/test/integration/data-grid/basic.spec.ts
@@ -27,6 +27,9 @@ test('Column prop updates are not lost on drag interactions', async ({ page }) =
 
   const firstGridLocator = canvasGridLocator.first();
 
+  // Wait for data to load so that datagrid bounding box is stable
+  await expect(editorModel.pageRoot.getByText('Todd Breitenberg')).toBeVisible();
+
   await clickCenter(page, firstGridLocator);
 
   await editorModel.componentEditor.locator('button:has-text("columns")').click();

diff --git a/test/models/ToolpadEditor.ts b/test/models/ToolpadEditor.ts
@@ -137,7 +137,12 @@ export class ToolpadEditor {
 
     await this.componentCatalog.hover();
 
-    const pageRootBoundingBox = await this.pageRoot.boundingBox();
+    let pageRootBoundingBox;
+    await expect(async () => {
+      pageRootBoundingBox = await this.pageRoot.boundingBox();
+      expect(pageRootBoundingBox).toBeTruthy();
+    }).toPass();
+
     if (!moveTargetX) {
       moveTargetX = pageRootBoundingBox!.x + pageRootBoundingBox!.width / 2;
     }
@@ -148,7 +153,7 @@ export class ToolpadEditor {
     const sourceLocator = this.getComponentCatalogItem(componentName);
     await expect(sourceLocator).toBeVisible();
 
-    await this.dragTo(sourceLocator, moveTargetX, moveTargetY, hasDrop);
+    await this.dragTo(sourceLocator, moveTargetX!, moveTargetY!, hasDrop);
 
     await style.evaluate((elm) => elm.parentNode?.removeChild(elm));
   }

diff --git a/test/utils/clickCenter.ts b/test/utils/clickCenter.ts
@@ -1,10 +1,13 @@
 import { Page, Locator, expect } from '@playwright/test';
 
 export default async function clickCenter(page: Page, targetLocator: Locator) {
-  await expect(targetLocator).toBeAttached();
-
-  const targetBoundingBox = await targetLocator.boundingBox();
-  expect(targetBoundingBox).toBeTruthy();
+  let targetBoundingBox;
+  await expect(async () => {
+    targetBoundingBox = await targetLocator.boundingBox();
+    expect(targetBoundingBox).toBeTruthy();
+    expect(targetBoundingBox!.width).toBeGreaterThan(0);
+    expect(targetBoundingBox!.height).toBeGreaterThan(0);
+  }).toPass();
 
   await page.mouse.click(
     targetBoundingBox!.x + targetBoundingBox!.width / 2,