From a97f138d451a2c235c401bdad6e99f4ed55fd2dc Mon Sep 17 00:00:00 2001
From: sai6855 <60743144+sai6855@users.noreply.github.com>
Date: Mon, 24 Jul 2023 18:02:09 +0530
Subject: [PATCH] port tests from #35924

---
 packages/mui-material/src/Card/Card.spec.tsx  | 27 ++++++++
 .../src/CardHeader/CardHeader.spec.tsx        |  2 +
 packages/mui-material/src/Dialog/Dialog.d.ts  |  2 +-
 .../mui-material/src/Dialog/Dialog.spec.tsx   | 19 +++++-
 packages/mui-material/src/Drawer/Drawer.d.ts  |  2 +-
 .../mui-material/src/Drawer/Drawer.spec.tsx   | 19 ++++++
 .../FormHelperText/FormHelperText.spec.tsx    | 61 +++++++++++++++++
 packages/mui-material/src/Grid/Grid.spec.tsx  | 60 ++++++++++++++++-
 packages/mui-material/src/Link/Link.spec.tsx  | 39 ++++++++++-
 .../src/MenuItem/MenuItem.spec.tsx            | 66 +++++++++++++++++++
 .../mui-material/src/Paper/Paper.spec.tsx     | 35 +++++++++-
 .../mui-material/src/Popover/Popover.d.ts     |  2 +-
 .../mui-material/src/Popover/Popover.spec.tsx | 18 +++++
 13 files changed, 342 insertions(+), 10 deletions(-)
 create mode 100644 packages/mui-material/src/Card/Card.spec.tsx
 create mode 100644 packages/mui-material/src/Drawer/Drawer.spec.tsx
 create mode 100644 packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx
 create mode 100644 packages/mui-material/src/MenuItem/MenuItem.spec.tsx
 create mode 100644 packages/mui-material/src/Popover/Popover.spec.tsx

diff --git a/packages/mui-material/src/Card/Card.spec.tsx b/packages/mui-material/src/Card/Card.spec.tsx
new file mode 100644
index 00000000000000..bd7d38c25938ab
--- /dev/null
+++ b/packages/mui-material/src/Card/Card.spec.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import { expectType } from '@mui/types';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+function CardTest() {
+  return (
+    <div>
+      <Card />
+      <Card elevation={4} />
+      <Card
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLDivElement, MouseEvent>, typeof event>(event);
+        }}
+      />
+      <Card component="a" href="test" />
+
+      <Card component={CustomComponent} stringProp="test" numberProp={0} />
+      {/* @ts-expect-error missing stringProp and numberProp */}
+      <Card<typeof CustomComponent> component={CustomComponent} />
+    </div>
+  );
+}
diff --git a/packages/mui-material/src/CardHeader/CardHeader.spec.tsx b/packages/mui-material/src/CardHeader/CardHeader.spec.tsx
index 8bce33b41c52b3..4a2c13fdc6f4c2 100644
--- a/packages/mui-material/src/CardHeader/CardHeader.spec.tsx
+++ b/packages/mui-material/src/CardHeader/CardHeader.spec.tsx
@@ -12,6 +12,8 @@ interface ComponentProp {
   component?: React.ElementType;
 }
 
+<CardHeader component={CustomComponent} stringProp="s" numberProp={2} />;
+
 function createElementBasePropMixedTest() {
   React.createElement<CardHeaderProps<DefaultComponent, ComponentProp>>(CardHeader);
   React.createElement<CardHeaderProps<DefaultComponent, ComponentProp>>(CardHeader, {
diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 45fbf07fd32403..7e37f1e50058aa 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -72,7 +72,7 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
    * @default {}
    */
-  PaperProps?: Partial<PaperProps>;
+  PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * Determine the container for scrolling the dialog.
    * @default 'paper'
diff --git a/packages/mui-material/src/Dialog/Dialog.spec.tsx b/packages/mui-material/src/Dialog/Dialog.spec.tsx
index 50e3c59a898fde..0464e8cf8bcc33 100644
--- a/packages/mui-material/src/Dialog/Dialog.spec.tsx
+++ b/packages/mui-material/src/Dialog/Dialog.spec.tsx
@@ -1,6 +1,19 @@
 import * as React from 'react';
-import { Dialog } from '@mui/material';
+import Dialog from '@mui/material/Dialog';
+import { PaperProps } from '@mui/material/Paper';
+import { expectType } from '@mui/types';
 
-function optionalChildrenTest() {
-  <Dialog open />;
+const paperProps: PaperProps<'span'> = {
+  component: 'span',
+  onClick: (event) => {
+    expectType<React.MouseEvent<HTMLSpanElement, MouseEvent>, typeof event>(event);
+  },
+};
+function Test() {
+  return (
+    <React.Fragment>
+      <Dialog open />;
+      <Dialog open PaperProps={paperProps} />;
+    </React.Fragment>
+  );
 }
diff --git a/packages/mui-material/src/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index c25f3390693d1a..296ca1c0545346 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -46,7 +46,7 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
    * @default {}
    */
-  PaperProps?: Partial<PaperProps>;
+  PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * Props applied to the [`Slide`](/material-ui/api/slide/) element.
    */
diff --git a/packages/mui-material/src/Drawer/Drawer.spec.tsx b/packages/mui-material/src/Drawer/Drawer.spec.tsx
new file mode 100644
index 00000000000000..8a9149262d2433
--- /dev/null
+++ b/packages/mui-material/src/Drawer/Drawer.spec.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Drawer from '@mui/material/Drawer';
+import { PaperProps } from '@mui/material/Paper';
+import { expectType } from '@mui/types';
+
+const paperProps: PaperProps<'span'> = {
+  component: 'span',
+  onClick: (event) => {
+    expectType<React.MouseEvent<HTMLSpanElement, MouseEvent>, typeof event>(event);
+  },
+};
+function Test() {
+  return (
+    <React.Fragment>
+      <Drawer open />;
+      <Drawer open PaperProps={paperProps} />;
+    </React.Fragment>
+  );
+}
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx b/packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx
new file mode 100644
index 00000000000000..c3f1d23cd736f6
--- /dev/null
+++ b/packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import FormHelperText, { FormHelperTextProps } from '@mui/material/FormHelperText';
+import { expectType } from '@mui/types';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props: FormHelperTextProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: FormHelperTextProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLParagraphElement>, typeof event>(event);
+  },
+};
+
+const props4: FormHelperTextProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props5: FormHelperTextProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error
+  inCorrectProp: 3,
+};
+
+// @ts-expect-error
+const props6: FormHelperTextProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
+const TestComponent = () => {
+  return (
+    <React.Fragment>
+      <FormHelperText />
+      <FormHelperText component={'a'} href="/test" />
+
+      <FormHelperText component={CustomComponent} stringProp="s" numberProp={1} />
+      {
+        // @ts-expect-error
+        <FormHelperText component={CustomComponent} />
+      }
+      <FormHelperText
+        component="span"
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+        }}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/mui-material/src/Grid/Grid.spec.tsx b/packages/mui-material/src/Grid/Grid.spec.tsx
index 83e6063587ba69..776ab80aef7a0c 100644
--- a/packages/mui-material/src/Grid/Grid.spec.tsx
+++ b/packages/mui-material/src/Grid/Grid.spec.tsx
@@ -1,7 +1,63 @@
 import * as React from 'react';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid, { GridProps } from '@mui/material/Grid';
+import { expectType } from '@mui/types';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props: GridProps<'span'> = {
+  component: 'span',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+  },
+};
+
+const props2: GridProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props4: GridProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props5: GridProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error
+  inCorrectProp: 3,
+};
+
+// @ts-expect-error
+const props6: GridProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
 
 function ResponsiveTest() {
-  <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square />;
+  return (
+    <React.Fragment>
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square />
+      <Grid item component={'a'} href="/test" />
+
+      <Grid item component={CustomComponent} stringProp="s" numberProp={1} />
+      {
+        // @ts-expect-error
+        <Grid item component={CustomComponent} />
+      }
+      <Grid
+        item
+        component="span"
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+        }}
+      />
+    </React.Fragment>
+  );
 }
diff --git a/packages/mui-material/src/Link/Link.spec.tsx b/packages/mui-material/src/Link/Link.spec.tsx
index ab9b7838c4b218..5a493e14de4629 100644
--- a/packages/mui-material/src/Link/Link.spec.tsx
+++ b/packages/mui-material/src/Link/Link.spec.tsx
@@ -1,7 +1,44 @@
 import * as React from 'react';
-import Link from '@mui/material/Link';
+import Link, { LinkProps } from '@mui/material/Link';
 import { expectType } from '@mui/types';
 
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props1: LinkProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: LinkProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLAnchorElement>, typeof event>(event);
+  },
+};
+
+const props4: LinkProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '1',
+  numberProp: 2,
+};
+
+const props5: LinkProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error
+  inCorrectProp: 3,
+};
+
+// @ts-expect-error
+const props6: LinkProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
 <Link
   ref={(elem) => {
     expectType<HTMLAnchorElement | null, typeof elem>(elem);
diff --git a/packages/mui-material/src/MenuItem/MenuItem.spec.tsx b/packages/mui-material/src/MenuItem/MenuItem.spec.tsx
new file mode 100644
index 00000000000000..c89749ccc4ec65
--- /dev/null
+++ b/packages/mui-material/src/MenuItem/MenuItem.spec.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
+import { expectType } from '@mui/types';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props: MenuItemProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: MenuItemProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLLIElement>, typeof event>(event);
+  },
+};
+
+const props4: MenuItemProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props5: MenuItemProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error
+  inCorrectProp: 3,
+};
+
+// @ts-expect-error
+const props6: MenuItemProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
+const TestComponent = () => {
+  return (
+    <React.Fragment>
+      <MenuItem />
+      <MenuItem component={'a'} href="/test" />
+
+      <MenuItem component={CustomComponent} stringProp="s" numberProp={1} />
+      {
+        // @ts-expect-error
+        <MenuItem component={CustomComponent} />
+      }
+      <MenuItem
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLLIElement>, typeof event>(event);
+        }}
+      />
+      <MenuItem
+        component="span"
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+        }}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/mui-material/src/Paper/Paper.spec.tsx b/packages/mui-material/src/Paper/Paper.spec.tsx
index d1ac34ce0d91aa..97314c9f243370 100644
--- a/packages/mui-material/src/Paper/Paper.spec.tsx
+++ b/packages/mui-material/src/Paper/Paper.spec.tsx
@@ -1,11 +1,44 @@
 import * as React from 'react';
-import Paper from '@mui/material/Paper';
+import Paper, { PaperProps } from '@mui/material/Paper';
+import { expectType } from '@mui/types';
 
 const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
   function CustomComponent() {
     return <div />;
   };
 
+const props: PaperProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: PaperProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props4: PaperProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props5: PaperProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error
+  inCorrectProp: 3,
+};
+
+// @ts-expect-error
+const props6: PaperProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
 function PaperTest() {
   return (
     <div>
diff --git a/packages/mui-material/src/Popover/Popover.d.ts b/packages/mui-material/src/Popover/Popover.d.ts
index 3c532098b404f5..8735a0dd97b0c8 100644
--- a/packages/mui-material/src/Popover/Popover.d.ts
+++ b/packages/mui-material/src/Popover/Popover.d.ts
@@ -107,7 +107,7 @@ export interface PopoverProps
    *
    * @default {}
    */
-  PaperProps?: Partial<PaperProps>;
+  PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * The components used for each slot inside.
    *
diff --git a/packages/mui-material/src/Popover/Popover.spec.tsx b/packages/mui-material/src/Popover/Popover.spec.tsx
new file mode 100644
index 00000000000000..7fe61bc3e97d3d
--- /dev/null
+++ b/packages/mui-material/src/Popover/Popover.spec.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Popover, PaperProps } from '@mui/material';
+import { expectType } from '@mui/types';
+
+const paperProps: PaperProps<'span'> = {
+  component: 'span',
+  onClick: (event) => {
+    expectType<React.MouseEvent<HTMLSpanElement, MouseEvent>, typeof event>(event);
+  },
+};
+function Test() {
+  return (
+    <React.Fragment>
+      <Popover open />;
+      <Popover open PaperProps={paperProps} />
+    </React.Fragment>
+  );
+}