Migrated SelectField tests to @testing-library/react (#1294)

Co-authored-by: Adrian Mucha <[email protected]>
vazco · Apr 5, 2024 · 49715f4 · 49715f4
1 parent 8b3f6f5
commit 49715f4
Show file tree

Hide file tree

Showing 17 changed files with 668 additions and 3,004 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 /.parcel-cache
 /coverage
 /lerna-debug.log
+.DS_Store
 
 /node_modules
 /npm-debug.log

diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts
@@ -60,6 +60,8 @@ describe('@RTL', () => {
   suites.testRadioField(theme.RadioField, { skipHtmlAttributesTest: true });
   // FIXME: AntD has problem with toHaveValue check
   suites.testSubmitField(theme.SubmitField, { skipValueTest: true });
+  // FIXME: AntD select does not work with new RTL test implementation
+  suites.testSelectField(theme.SelectField, { theme: 'antd' });
   suites.testTextField(theme.TextField);
   suites.testValidatedForm(theme.ValidatedForm);
   suites.testValidatedQuickForm(theme.ValidatedQuickForm);

diff --git a/packages/uniforms-antd/src/SelectField.tsx b/packages/uniforms-antd/src/SelectField.tsx
@@ -41,30 +41,33 @@ export type SelectFieldProps = CheckboxesProps | SelectProps;
 
 function Select(props: SelectFieldProps) {
   const Group = props.fieldType === Array ? CheckboxGroup : RadioGroup;
+  const filteredDOMProps = filterDOMProps(props);
   return wrapField(
     props,
     props.checkboxes ? (
-      // @ts-expect-error: Incorrect `value` type.
-      <Group
-        {...filterDOMProps(props)}
-        disabled={props.disabled}
-        name={props.name}
-        onChange={(eventOrValue: any) => {
-          if (!props.readOnly) {
-            props.onChange(
-              // FIXME: Argument type depends on `props.fieldType`.
-              props.fieldType === Array
-                ? eventOrValue
-                : eventOrValue.target.value,
-            );
-          }
-        }}
-        options={props.options?.map(option => ({
-          ...option,
-          label: option.label ?? option.value,
-        }))}
-        value={props.value}
-      />
+      <span {...filteredDOMProps}>
+        {/* @ts-expect-error: Incorrect `value` type. */}
+        <Group
+          {...filteredDOMProps}
+          disabled={props.disabled}
+          name={props.name}
+          onChange={(eventOrValue: any) => {
+            if (!props.readOnly) {
+              props.onChange(
+                // FIXME: Argument type depends on `props.fieldType`.
+                props.fieldType === Array
+                  ? eventOrValue
+                  : eventOrValue.target.value,
+              );
+            }
+          }}
+          options={props.options?.map(option => ({
+            ...option,
+            label: option.label ?? option.value,
+          }))}
+          value={props.value}
+        />
+      </span>
     ) : (
       <SelectAntD<any>
         allowClear={!props.required}
@@ -86,13 +89,14 @@ function Select(props: SelectFieldProps) {
               : []
             : props.value
         }
-        {...filterDOMProps(props)}
+        {...filteredDOMProps}
       >
         {props.options?.map(option => (
           <SelectAntD.Option
             disabled={option.disabled}
             key={option.key ?? option.value}
             value={option.value}
+            id={`${props.id}-${option.key ?? escape(option.value)}`}
           >
             {option.label ?? option.value}
           </SelectAntD.Option>