Fix flaky tests

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>
  );
 }
 

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
  )}

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();

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));
  }

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,