From 9cd479a9fa1f0eec42b4d0745ab567991ba55c34 Mon Sep 17 00:00:00 2001
From: Adrian Mucha <kestarumper8@gmail.com>
Date: Fri, 9 Feb 2024 18:54:36 +0100
Subject: [PATCH] Move uniforms-material LongTextField test to suite

---
 .../__tests__/LongTextField.tsx               | 73 ------------------
 .../uniforms-material/__tests__/index.tsx     | 15 +++-
 .../uniforms/__suites__/LongTextField.tsx     | 74 ++++++++++++++++++-
 3 files changed, 87 insertions(+), 75 deletions(-)
 delete mode 100644 packages/uniforms-material/__tests__/LongTextField.tsx

diff --git a/packages/uniforms-material/__tests__/LongTextField.tsx b/packages/uniforms-material/__tests__/LongTextField.tsx
deleted file mode 100644
index 9c2708667..000000000
--- a/packages/uniforms-material/__tests__/LongTextField.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
-import ThemeProvider from '@material-ui/styles/ThemeProvider/ThemeProvider';
-import React from 'react';
-import { LongTextField } from 'uniforms-material';
-import { renderWithZod } from 'uniforms/__suites__';
-import z from 'zod';
-
-describe('@RTL - LongTextField tests', () => {
-  test('<LongTextField> - default props are not passed when MUI theme props are specified', () => {
-    const theme = createMuiTheme({
-      props: { MuiTextField: { fullWidth: false, margin: 'normal' } },
-    });
-
-    const { container } = renderWithZod({
-      element: (
-        <ThemeProvider theme={theme}>
-          <LongTextField name="x" />
-        </ThemeProvider>
-      ),
-      schema: z.object({ x: z.string() }),
-    });
-
-    const elements = container.getElementsByClassName(
-      'MuiFormControl-marginNormal',
-    );
-    expect(elements).toHaveLength(1);
-    expect(elements[0]).not.toHaveClass('MuiFormControl-fullWidth');
-  });
-
-  test('<LongTextField> - default props are passed when MUI theme props are absent', () => {
-    const theme = createMuiTheme({});
-
-    const { container } = renderWithZod({
-      element: (
-        <ThemeProvider theme={theme}>
-          <LongTextField name="x" />
-        </ThemeProvider>
-      ),
-      schema: z.object({ x: z.string() }),
-    });
-
-    const elements = container.getElementsByClassName(
-      'MuiFormControl-marginDense',
-    );
-    expect(elements).toHaveLength(1);
-    expect(elements[0]).toHaveClass('MuiFormControl-fullWidth');
-  });
-
-  test('<LongTextField> - explicit props are passed when MUI theme props are specified', () => {
-    const theme = createMuiTheme({
-      props: { MuiTextField: { fullWidth: true, margin: 'dense' } },
-    });
-    const explicitProps = {
-      fullWidth: false,
-      margin: 'normal' as const,
-    };
-
-    const { container } = renderWithZod({
-      element: (
-        <ThemeProvider theme={theme}>
-          <LongTextField name="x" {...explicitProps} />
-        </ThemeProvider>
-      ),
-      schema: z.object({ x: z.string() }),
-    });
-
-    const elements = container.getElementsByClassName(
-      'MuiFormControl-marginNormal',
-    );
-    expect(elements).toHaveLength(1);
-    expect(elements[0]).not.toHaveClass('MuiFormControl-fullWidth');
-  });
-});
diff --git a/packages/uniforms-material/__tests__/index.tsx b/packages/uniforms-material/__tests__/index.tsx
index 1415a3a54..4c3012373 100644
--- a/packages/uniforms-material/__tests__/index.tsx
+++ b/packages/uniforms-material/__tests__/index.tsx
@@ -55,7 +55,20 @@ describe('@RTL', () => {
   suites.testListField(theme.ListField, {
     getListAddField: screen => screen.getByText(/\+/),
   });
-  suites.testLongTextField(theme.LongTextField);
+  suites.testLongTextField(theme.LongTextField, {
+    testPassThemeProps: {
+      ThemeProvider({
+        themeOptions,
+        ...props
+      }: PropsWithChildren<{ themeOptions: ThemeOptions }>) {
+        return (
+          <ThemeProvider {...props} theme={createMuiTheme(themeOptions)}>
+            {props.children}
+          </ThemeProvider>
+        );
+      },
+    },
+  });
   suites.testNestField(theme.NestField, { skipInMuiTests: true });
   suites.testNumField(theme.NumField);
   suites.testQuickForm(theme.QuickForm);
diff --git a/packages/uniforms/__suites__/LongTextField.tsx b/packages/uniforms/__suites__/LongTextField.tsx
index 21cad4259..fced6b2e8 100644
--- a/packages/uniforms/__suites__/LongTextField.tsx
+++ b/packages/uniforms/__suites__/LongTextField.tsx
@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React, { ComponentType } from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import z from 'zod';
 
 import { renderWithZod } from './render-zod';
@@ -10,6 +10,11 @@ export function testLongTextField(
   options?: {
     skipShowInlineErrorTests?: boolean;
     testMinMaxLength?: boolean;
+    testPassThemeProps?: {
+      ThemeProvider: (
+        props: PropsWithChildren<{ themeOptions: any }>,
+      ) => JSX.Element;
+    };
   },
 ) {
   test('<LongTextField> - renders a textarea with correct disabled state', () => {
@@ -135,6 +140,73 @@ export function testLongTextField(
     });
   }
 
+  if (options?.testPassThemeProps) {
+    const { ThemeProvider } = options.testPassThemeProps;
+
+    test('<LongTextField> - default props are not passed when MUI theme props are specified', () => {
+      const themeOptions = {
+        props: { MuiTextField: { fullWidth: false, margin: 'normal' } },
+      };
+      const { container } = renderWithZod({
+        element: (
+          <ThemeProvider themeOptions={themeOptions}>
+            <LongTextField name="x" />
+          </ThemeProvider>
+        ),
+        schema: z.object({ x: z.string() }),
+      });
+
+      const elements = container.getElementsByClassName(
+        'MuiFormControl-marginNormal',
+      );
+      expect(elements).toHaveLength(1);
+      expect(elements[0]).not.toHaveClass('MuiFormControl-fullWidth');
+    });
+
+    test('<LongTextField> - default props are passed when MUI theme props are absent', () => {
+      const themeOptions = {};
+      const { container } = renderWithZod({
+        element: (
+          <ThemeProvider themeOptions={themeOptions}>
+            <LongTextField name="x" />
+          </ThemeProvider>
+        ),
+        schema: z.object({ x: z.string() }),
+      });
+
+      const elements = container.getElementsByClassName(
+        'MuiFormControl-marginDense',
+      );
+      expect(elements).toHaveLength(1);
+      expect(elements[0]).toHaveClass('MuiFormControl-fullWidth');
+    });
+
+    test('<LongTextField> - explicit props are passed when MUI theme props are specified', () => {
+      const themeOptions = {
+        props: { MuiTextField: { fullWidth: true, margin: 'dense' } },
+      };
+      const explicitProps = {
+        fullWidth: false,
+        margin: 'normal' as const,
+      };
+
+      const { container } = renderWithZod({
+        element: (
+          <ThemeProvider themeOptions={themeOptions}>
+            <LongTextField name="x" {...explicitProps} />
+          </ThemeProvider>
+        ),
+        schema: z.object({ x: z.string() }),
+      });
+
+      const elements = container.getElementsByClassName(
+        'MuiFormControl-marginNormal',
+      );
+      expect(elements).toHaveLength(1);
+      expect(elements[0]).not.toHaveClass('MuiFormControl-fullWidth');
+    });
+  }
+
   if (options?.testMinMaxLength) {
     test('<LongTextField> - renders a textarea with minLength and maxLength', () => {
       renderWithZod({