Extend test cases

Author: Rall3n

packages/react-select/src/__tests__/Select.test.tsx

@@ -3120,20 +3120,42 @@ test('renders with custom theme', () => {
   ).toEqual(primary);
 });
 
-test('form validation with `required` prop', () => {
-  const components = (value?: Option) => (
-    <form id="formTest">
-      <Select {...BASIC_PROPS} required value={value || null} />
-    </form>
-  );
+cases(
+  '`required` prop',
+  ({ props = BASIC_PROPS }) => {
+    const components = (value: Option | null | undefined = null) => (
+      <form id="formTest">
+        <Select {...props} required value={value} />
+      </form>
+    );
 
-  const { container, rerender } = render(components());
+    const { container, rerender } = render(components());
 
-  expect(
-    container.querySelector<HTMLFormElement>('#formTest')?.checkValidity()
-  ).toEqual(false);
-  rerender(components(BASIC_PROPS.options[0]));
-  expect(
-    container.querySelector<HTMLFormElement>('#formTest')?.checkValidity()
-  ).toEqual(true);
-});
+    expect(
+      container.querySelector<HTMLFormElement>('#formTest')?.checkValidity()
+    ).toEqual(false);
+    rerender(components(props.options[0]));
+    expect(
+      container.querySelector<HTMLFormElement>('#formTest')?.checkValidity()
+    ).toEqual(true);
+  },
+  {
+    'single select > should validate with value': {
+      props: {
+        ...BASIC_PROPS,
+      },
+    },
+    'single select (isSearchable is false) > should validate with value': {
+      props: {
+        ...BASIC_PROPS,
+        isSearchable: false,
+      },
+    },
+    'multi select > should validate with value': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+      },
+    },
+  }
+);

packages/react-select/src/__tests__/StateManaged.test.tsx

@@ -475,3 +475,23 @@ cases<KeyboardInteractionOpts>(
       },
   }
 );
+
+test('`required` prop > should validate', () => {
+  const { container } = render(
+    <form id="formTest">
+      <Select {...BASIC_PROPS} menuIsOpen required />
+    </form>
+  );
+
+  expect(
+    container.querySelector<HTMLFormElement>('#formTest')?.checkValidity()
+  ).toEqual(false);
+
+  let selectOption = container.querySelectorAll('div.react-select__option')[3];
+
+  userEvent.click(selectOption);
+
+  expect(
+    container.querySelector<HTMLFormElement>('#formTest')?.checkValidity()
+  ).toEqual(true);
+});