[pickers] Add visual regression tests for open views (#28224)

test/regressions/fixtures/pickers/OpenDatePicker.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { TransitionProps } from '@mui/material/transitions';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import DatePicker from '@mui/lab/DatePicker';
+
+const adapterToUse = new AdapterDateFns();
+
+const NoTransition = React.forwardRef(function NoTransition(
+  props: TransitionProps & { children?: React.ReactNode },
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const { children, in: inProp } = props;
+
+  if (!inProp) {
+    return null;
+  }
+  return (
+    <div ref={ref} tabIndex={-1}>
+      {children}
+    </div>
+  );
+});
+
+export default function OpenDatePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DatePicker
+        onChange={() => {}}
+        open
+        PopperProps={{
+          // @ts-expect-error
+          'data-testid': 'screenshot-target',
+        }}
+        renderInput={(params) => <TextField {...params} />}
+        TransitionComponent={NoTransition}
+        value={adapterToUse.date('2019-01-01T00:00:00.000')}
+      />
+    </LocalizationProvider>
+  );
+}

test/regressions/fixtures/pickers/OpenDateTimePicker.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { TransitionProps } from '@mui/material/transitions';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import DateTimePicker from '@mui/lab/DateTimePicker';
+
+const adapterToUse = new AdapterDateFns();
+
+const NoTransition = React.forwardRef(function NoTransition(
+  props: TransitionProps & { children?: React.ReactNode },
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const { children, in: inProp } = props;
+
+  if (!inProp) {
+    return null;
+  }
+  return (
+    <div ref={ref} tabIndex={-1}>
+      {children}
+    </div>
+  );
+});
+
+export default function OpenDateTimePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DateTimePicker
+        onChange={() => {}}
+        open
+        PopperProps={{
+          // @ts-expect-error
+          'data-testid': 'screenshot-target',
+        }}
+        renderInput={(params) => <TextField {...params} />}
+        TransitionComponent={NoTransition}
+        value={adapterToUse.date('2019-01-01T00:00:00.000')}
+      />
+    </LocalizationProvider>
+  );
+}

test/regressions/fixtures/pickers/OpenDateTimePickerClock.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { TransitionProps } from '@mui/material/transitions';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import DateTimePicker from '@mui/lab/DateTimePicker';
+
+const adapterToUse = new AdapterDateFns();
+
+const NoTransition = React.forwardRef(function NoTransition(
+  props: TransitionProps & { children?: React.ReactNode },
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const { children, in: inProp } = props;
+
+  if (!inProp) {
+    return null;
+  }
+  return (
+    <div ref={ref} tabIndex={-1}>
+      {children}
+    </div>
+  );
+});
+
+export default function OpenDateTimePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DateTimePicker
+        onChange={() => {}}
+        open
+        openTo="hours"
+        PopperProps={{
+          // @ts-expect-error
+          'data-testid': 'screenshot-target',
+        }}
+        renderInput={(params) => <TextField {...params} />}
+        TransitionComponent={NoTransition}
+        value={adapterToUse.date('2019-01-01T00:00:00.000')}
+      />
+    </LocalizationProvider>
+  );
+}

test/regressions/fixtures/pickers/OpenTimePicker.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { TransitionProps } from '@mui/material/transitions';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import TimePicker from '@mui/lab/TimePicker';
+
+const adapterToUse = new AdapterDateFns();
+
+const NoTransition = React.forwardRef(function NoTransition(
+  props: TransitionProps & { children?: React.ReactNode },
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const { children, in: inProp } = props;
+
+  if (!inProp) {
+    return null;
+  }
+  return (
+    <div ref={ref} tabIndex={-1}>
+      {children}
+    </div>
+  );
+});
+
+export default function OpenTimePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <TimePicker
+        onChange={() => {}}
+        open
+        PopperProps={{
+          // @ts-expect-error
+          'data-testid': 'screenshot-target',
+        }}
+        renderInput={(params) => <TextField {...params} />}
+        TransitionComponent={NoTransition}
+        value={adapterToUse.date('2019-01-01T00:00:00.000')}
+      />
+    </LocalizationProvider>
+  );
+}

test/regressions/index.test.js

@@ -66,7 +66,11 @@ async function main() {
   async function takeScreenshot({ testcase, route }) {
     const screenshotPath = path.resolve(screenshotDir, `.${route}.png`);
     await fse.ensureDir(path.dirname(screenshotPath));
-    await testcase.screenshot({ path: screenshotPath, type: 'png' });
+
+    const explicitScreenshotTarget = await page.$('[data-testid="screenshot-target"]');
+    const screenshotTarget = explicitScreenshotTarget || testcase;
+
+    await screenshotTarget.screenshot({ path: screenshotPath, type: 'png' });
   }
 
   // prepare screenshots