added tests

src/components/Select/Select.mdx

@@ -9,7 +9,7 @@ import { Select, Trash2} from '../../index.ts'
 
 # Select
 
-A Select can be used to let the user insert text using key strokes. A crucial form item for building interactive apps.
+A Select can be used to select one or more values from a predetermined list.
 
 ## Best practices
 
@@ -20,13 +20,13 @@ A Select can be used to let the user insert text using key strokes. A crucial fo
 ### Basic usage
 
 <Playground>
-  <Select isMulti options={[{label: <span><Trash2/>Bram</span>, value: 'test'},{label: "Test2", value: 'test2'}]} />
+  <Select options={[{label: 'Option 1', value: '1'},{label: "Option 2", value: '2'}]} />
 </Playground>
 
-### Input with error
+### Multi select
 
 <Playground>
-  <Select name="username" isInvalid />
+  <Select isMulti options={[{label: 'Option 1', value: '1'},{label: "Option 2", value: '2'}]} />
 </Playground>
 
 ## API

src/components/Select/Select.test.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentProps } from 'react';
+import { render } from '@testing-library/react';
+
+import Select from './Select';
+
+describe('Select', () => {
+  const defaultSelectProps: ComponentProps<typeof Select> = {
+    options: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+    ],
+  };
+
+  test('default snapshot', () => {
+    const component = <Select {...defaultSelectProps} />;
+    const { asFragment } = render(component);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('select with default value', () => {
+    const component = (
+      <Select {...defaultSelectProps} defaultValue={defaultSelectProps.options[0]} />
+    );
+    const { asFragment } = render(component);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/Select/Select.tsx

@@ -20,6 +20,7 @@ interface Props {
   isMulti?: boolean;
   isDisabled?: boolean;
   placeholder?: string;
+  noOptionsMessage?: string;
 }
 
 const Input = React.forwardRef<Select<Option>, Props>(
@@ -32,7 +33,8 @@ const Input = React.forwardRef<Select<Option>, Props>(
       className,
       isMulti = false,
       isDisabled = false,
-      placeholder,
+      placeholder = '',
+      noOptionsMessage = '',
     }: Props,
     ref,
   ) => {
@@ -44,6 +46,8 @@ const Input = React.forwardRef<Select<Option>, Props>(
       }
     };
 
+    const showNoOptionsMessage = () => noOptionsMessage;
+
     return (
       <Select
         ref={ref}
@@ -54,6 +58,7 @@ const Input = React.forwardRef<Select<Option>, Props>(
         className={selectClassNames}
         onChange={handleChange}
         isMulti={isMulti}
+        noOptionsMessage={showNoOptionsMessage}
         components={{
           DropdownIndicator: () => null,
           IndicatorSeparator: () => null,

src/components/Select/__snapshots__/Select.test.tsx.snap

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select default snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="ventura select css-2b097c-container"
+  >
+    <span
+      aria-atomic="false"
+      aria-live="polite"
+      aria-relevant="additions text"
+      class="css-1f43avz-a11yText-A11yText"
+    />
+    <div
+      class="ventura-select__control css-yk16xz-control"
+    >
+      <div
+        class="ventura-select__value-container css-g1d714-ValueContainer"
+      >
+        <div
+          class="ventura-select__placeholder css-1wa3eu0-placeholder"
+        />
+        <div
+          class="css-b8ldur-Input"
+        >
+          <div
+            class="ventura-select__input"
+            style="display: inline-block;"
+          >
+            <input
+              aria-autocomplete="list"
+              autocapitalize="none"
+              autocomplete="off"
+              autocorrect="off"
+              id="react-select-2-input"
+              spellcheck="false"
+              style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+              tabindex="0"
+              type="text"
+              value=""
+            />
+            <div
+              style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="ventura-select__indicators css-1hb7zxy-IndicatorsContainer"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Select select with default value 1`] = `
+<DocumentFragment>
+  <div
+    class="ventura select css-2b097c-container"
+  >
+    <span
+      aria-atomic="false"
+      aria-live="polite"
+      aria-relevant="additions text"
+      class="css-1f43avz-a11yText-A11yText"
+    />
+    <div
+      class="ventura-select__control css-yk16xz-control"
+    >
+      <div
+        class="ventura-select__value-container ventura-select__value-container--has-value css-g1d714-ValueContainer"
+      >
+        <div
+          class="ventura-select__single-value css-1uccc91-singleValue"
+        >
+          Option 1
+        </div>
+        <div
+          class="css-b8ldur-Input"
+        >
+          <div
+            class="ventura-select__input"
+            style="display: inline-block;"
+          >
+            <input
+              aria-autocomplete="list"
+              autocapitalize="none"
+              autocomplete="off"
+              autocorrect="off"
+              id="react-select-3-input"
+              spellcheck="false"
+              style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+              tabindex="0"
+              type="text"
+              value=""
+            />
+            <div
+              style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="ventura-select__indicators css-1hb7zxy-IndicatorsContainer"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;