From 652a96f1c4cd25bdef51b81efc9cdbf7db36d6da Mon Sep 17 00:00:00 2001
From: Adrian Mucha <kestarumper8@gmail.com>
Date: Fri, 9 Feb 2024 10:53:21 +0100
Subject: [PATCH] WIP: Move antd bootstrap3 TextField tests to suite

---
 .../uniforms-antd/__tests__/TextField.tsx     | 193 ------------------
 .../__tests__/TextField.tsx                   | 189 -----------------
 packages/uniforms/__suites__/TextField.tsx    |  35 ++++
 3 files changed, 35 insertions(+), 382 deletions(-)
 delete mode 100644 packages/uniforms-antd/__tests__/TextField.tsx
 delete mode 100644 packages/uniforms-bootstrap3/__tests__/TextField.tsx

diff --git a/packages/uniforms-antd/__tests__/TextField.tsx b/packages/uniforms-antd/__tests__/TextField.tsx
deleted file mode 100644
index fcaaa22ec..000000000
--- a/packages/uniforms-antd/__tests__/TextField.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { screen } from '@testing-library/react';
-import Input from 'antd/lib/input';
-import React from 'react';
-import { TextField } from 'uniforms-antd';
-import { render } from 'uniforms/__suites__';
-
-import createContext from './_createContext';
-import mount from './_mount';
-
-describe('@RTL - TextField tests', () => {
-  test('<TextField> - renders component with unknown props', () => {
-    const props = {
-      'data-x': 'x',
-      'data-y': 'y',
-      'data-z': 'z',
-    };
-    render(<TextField name="x" {...props} />, { x: String });
-
-    const input = screen.getByRole('textbox');
-    Object.entries(props).forEach(([key, value]) =>
-      expect(input).toHaveAttribute(key, value),
-    );
-  });
-});
-
-test('<TextField> - renders an input', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-});
-
-test('<TextField> - renders an input with correct disabled state', () => {
-  const element = <TextField name="x" disabled />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('disabled')).toBe(true);
-});
-
-test('<TextField> - renders an input with correct readOnly state', () => {
-  const element = <TextField name="x" readOnly />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('readOnly')).toBe(true);
-});
-
-test('<TextField> - renders an input with correct id (inherited)', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('id')).toBeTruthy();
-});
-
-test('<TextField> - renders an input with correct id (specified)', () => {
-  const element = <TextField name="x" id="y" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('id')).toBe('y');
-});
-
-test('<TextField> - renders an input with correct name', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('name')).toBe('x');
-});
-
-test('<TextField> - renders an input with correct placeholder', () => {
-  const element = <TextField name="x" placeholder="y" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('placeholder')).toBe('y');
-});
-
-test('<TextField> - renders an input with correct type', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('type')).toBe('text');
-});
-
-test('<TextField> - renders an input with correct value (default)', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('value')).toBe('');
-});
-
-test('<TextField> - renders an input with correct value (model)', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String } }, { model: { x: 'y' } }),
-  );
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('value')).toBe('y');
-});
-
-test('<TextField> - renders an input with correct value (specified)', () => {
-  const element = <TextField name="x" value="y" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(wrapper.find(Input).prop('value')).toBe('y');
-});
-
-test('<TextField> - renders an input which correctly reacts on change', () => {
-  const onChange = jest.fn();
-
-  const element = <TextField name="x" />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String } }, { onChange }),
-  );
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(
-    wrapper.find(Input).simulate('change', { target: { value: 'y' } }),
-  ).toBeTruthy();
-  expect(onChange).toHaveBeenLastCalledWith('x', 'y');
-});
-
-test('<TextField> - renders an input which correctly reacts on change (empty)', () => {
-  const onChange = jest.fn();
-
-  const element = <TextField name="x" />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String } }, { onChange }),
-  );
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(
-    wrapper.find(Input).simulate('change', { target: { value: '' } }),
-  ).toBeTruthy();
-  expect(onChange).toHaveBeenLastCalledWith('x', '');
-});
-
-test('<TextField> - renders an input which correctly reacts on change (same value)', () => {
-  const onChange = jest.fn();
-
-  const element = <TextField name="x" />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String } }, { model: { x: 'y' }, onChange }),
-  );
-
-  expect(wrapper.find(Input)).toHaveLength(1);
-  expect(
-    wrapper.find(Input).simulate('change', { target: { value: 'y' } }),
-  ).toBeTruthy();
-  expect(onChange).toHaveBeenLastCalledWith('x', 'y');
-});
-
-test('<TextField> - renders a label', () => {
-  const element = <TextField name="x" label="y" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('label')).toHaveLength(1);
-  expect(wrapper.find('label').text()).toBe('y');
-});
-
-test('<TextField> - renders a wrapper with unknown props', () => {
-  const element = <TextField name="x" data-x="x" data-y="y" data-z="z" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input).prop('data-x')).toBe('x');
-  expect(wrapper.find(Input).prop('data-y')).toBe('y');
-  expect(wrapper.find(Input).prop('data-z')).toBe('z');
-});
-
-test('<TextField> - renders a input with correct type prop', () => {
-  const element = <TextField name="x" type="password" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input).prop('type')).toBe('password');
-});
-
-test('<TextField> - renders a input with autocomplete turned off', () => {
-  const element = <TextField name="x" autoComplete="off" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find(Input).prop('autoComplete')).toBe('off');
-});
diff --git a/packages/uniforms-bootstrap3/__tests__/TextField.tsx b/packages/uniforms-bootstrap3/__tests__/TextField.tsx
deleted file mode 100644
index 749c200de..000000000
--- a/packages/uniforms-bootstrap3/__tests__/TextField.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import { screen } from '@testing-library/react';
-import React from 'react';
-import { TextField } from 'uniforms-bootstrap3';
-import { render } from 'uniforms/__suites__';
-
-import createContext from './_createContext';
-import mount from './_mount';
-
-describe('@RTL - TextField tests', () => {
-  test('<TextField> - renders a wrapper with unknown props', () => {
-    const props = {
-      'data-x': 'x',
-      'data-y': 'y',
-      'data-z': 'z',
-    };
-    render(<TextField name="x" {...props} />, { x: String });
-
-    const wrapper = screen.getByRole('textbox').closest('div');
-    Object.entries(props).forEach(([key, value]) =>
-      expect(wrapper).toHaveAttribute(key, value),
-    );
-  });
-});
-
-test('<TextField> - renders an input', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-});
-
-test('<TextField> - renders an input with correct disabled state', () => {
-  const element = <TextField name="x" disabled />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('disabled')).toBe(true);
-});
-
-test('<TextField> - renders an input with correct readOnly state', () => {
-  const element = <TextField name="x" readOnly />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('readOnly')).toBe(true);
-});
-
-test('<TextField> - renders an input with correct id (inherited)', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('id')).toBeTruthy();
-});
-
-test('<TextField> - renders an input with correct id (specified)', () => {
-  const element = <TextField name="x" id="y" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('id')).toBe('y');
-});
-
-test('<TextField> - renders an input with correct name', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('name')).toBe('x');
-});
-
-test('<TextField> - renders an input with correct placeholder', () => {
-  const element = <TextField name="x" placeholder="y" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('placeholder')).toBe('y');
-});
-
-test('<TextField> - renders an input with correct type', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('type')).toBe('text');
-});
-
-test('<TextField> - renders an input with correct value (default)', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('value')).toBe('');
-});
-
-test('<TextField> - renders an input with correct value (model)', () => {
-  const element = <TextField name="x" />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String } }, { model: { x: 'y' } }),
-  );
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('value')).toBe('y');
-});
-
-test('<TextField> - renders an input with correct value (specified)', () => {
-  const element = <TextField name="x" value="y" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('value')).toBe('y');
-});
-
-test('<TextField> - renders an input which correctly reacts on change', () => {
-  const onChange = jest.fn();
-
-  const element = <TextField name="x" />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String } }, { onChange }),
-  );
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(
-    wrapper.find('input').simulate('change', { target: { value: 'y' } }),
-  ).toBeTruthy();
-  expect(onChange).toHaveBeenLastCalledWith('x', 'y');
-});
-
-test('<TextField> - renders an input which correctly reacts on change (empty)', () => {
-  const onChange = jest.fn();
-
-  const element = <TextField name="x" />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String } }, { onChange }),
-  );
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(
-    wrapper.find('input').simulate('change', { target: { value: '' } }),
-  ).toBeTruthy();
-  expect(onChange).toHaveBeenLastCalledWith('x', '');
-});
-
-test('<TextField> - renders an input which correctly reacts on change (same value)', () => {
-  const onChange = jest.fn();
-
-  const element = <TextField name="x" />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String } }, { model: { x: 'y' }, onChange }),
-  );
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(
-    wrapper.find('input').simulate('change', { target: { value: 'y' } }),
-  ).toBeTruthy();
-  expect(onChange).toHaveBeenLastCalledWith('x', 'y');
-});
-
-test('<TextField> - renders a label', () => {
-  const element = <TextField name="x" label="y" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('label')).toHaveLength(1);
-  expect(wrapper.find('label').text()).toBe('y');
-  expect(wrapper.find('label').prop('htmlFor')).toBe(
-    wrapper.find('input').prop('id'),
-  );
-});
-
-test('<TextField> - renders a wrapper with unknown props', () => {
-  const element = <TextField name="x" data-x="x" data-y="y" data-z="z" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('div').at(0).prop('data-x')).toBe('x');
-  expect(wrapper.find('div').at(0).prop('data-y')).toBe('y');
-  expect(wrapper.find('div').at(0).prop('data-z')).toBe('z');
-});
-
-test('<TextField> - renders a input with autocomplete turned off', () => {
-  const element = <TextField name="x" autoComplete="off" />;
-  const wrapper = mount(element, createContext({ x: { type: String } }));
-
-  expect(wrapper.find('div').at(0).prop('autoComplete')).toBeFalsy();
-  expect(wrapper.find('input').prop('autoComplete')).toBe('off');
-});
diff --git a/packages/uniforms/__suites__/TextField.tsx b/packages/uniforms/__suites__/TextField.tsx
index 718bd8d06..68b906c62 100644
--- a/packages/uniforms/__suites__/TextField.tsx
+++ b/packages/uniforms/__suites__/TextField.tsx
@@ -6,6 +6,14 @@ import z from 'zod';
 import { renderWithZod } from './render-zod';
 
 export function testTextField(TextField: ComponentType<any>) {
+  test('<TextField> - renders an input', () => {
+    renderWithZod({
+      element: <TextField name="x" />,
+      schema: z.object({ x: z.string() }),
+    });
+    expect(screen.getByRole('textbox')).toBeTruthy();
+  });
+
   test('<TextField> - renders an input with correct disabled state', () => {
     renderWithZod({
       element: <TextField name="x" disabled />,
@@ -133,4 +141,31 @@ export function testTextField(TextField: ComponentType<any>) {
     });
     expect(screen.getByLabelText(/^Y/)).toBeInTheDocument();
   });
+
+  test('<TextField> - renders a wrapper with unknown props', () => {
+    const props = {
+      'data-x': 'x',
+      'data-y': 'y',
+      'data-z': 'z',
+    };
+    renderWithZod({
+      element: <TextField name="x" {...props} />,
+      schema: z.object({ x: z.string() }),
+    });
+
+    const querySelectorParams = Object.entries(props)
+      .map(([key, value]) => `[${key}="${value}"]`)
+      .join('');
+    const wrapper = screen.getByRole('textbox').closest(querySelectorParams);
+    expect(wrapper).toBeTruthy();
+  });
+
+  test('<TextField> - renders a input with correct type prop (password)', () => {
+    renderWithZod({
+      element: <TextField name="x" type="password" />,
+      schema: z.object({ x: z.string() }),
+    });
+    const wrapper = screen.getByLabelText(/^X( \*)?$/);
+    expect(wrapper).toHaveAttribute('type', 'password');
+  });
 }