test(fields): add searchable e2e test for MultiSelect

e2e/base/fields/MultiSelect.spec.tsx

@@ -1,6 +1,8 @@
+import { useState } from 'react'
+
+import { Output } from '../../../.storybook/components/Output'
 import { StoryBox } from '../../../.storybook/components/StoryBox'
-import { CustomSearch, type MultiSelectProps } from '../../../src'
-import { _MultiSelect as MultiSelectStory } from '../../../stories/fields/MultiSelect.stories'
+import { CustomSearch, useFieldControl, type MultiSelectProps, MultiSelect } from '../../../src'
 import { mountAndWait, outputShouldBe, outputShouldNotBe } from '../utils'
 
 /* eslint-disable sort-keys-fix/sort-keys-fix */
@@ -23,6 +25,20 @@ const OPTIONS_TYPES = {
 }
 /* eslint-enable sort-keys-fix/sort-keys-fix */
 
+function MultiSelectStory({ value, ...otherProps }: MultiSelectProps) {
+  const [outputValue, setOutputValue] = useState<any>('∅')
+
+  const { controlledOnChange, controlledValue } = useFieldControl(value, setOutputValue)
+
+  return (
+    <StoryBox>
+      <MultiSelect onChange={controlledOnChange} value={controlledValue} {...otherProps} />
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </StoryBox>
+  )
+}
+
 Object.keys(OPTIONS_TYPES).forEach(optionType => {
   context(`With ${optionType} options`, () => {
     const options = OPTIONS_TYPES[optionType]
@@ -59,12 +75,10 @@ Object.keys(OPTIONS_TYPES).forEach(optionType => {
       outputShouldBe(undefined)
     })
 
-    it(`Should fill, change and clear the multiple select with \`value={[${JSON.stringify(
-      options[2].value
-    )}]\``, () => {
+    it('Should fill the multiple select with `isLabelHidden`', () => {
       mountAndWait(
         <StoryBox>
-          <MultiSelectStory {...commonProps} value={[options[2].value]} />
+          <MultiSelectStory {...commonProps} isLabelHidden />
         </StoryBox>
       )
 
@@ -73,20 +87,12 @@ Object.keys(OPTIONS_TYPES).forEach(optionType => {
       cy.fill('A multiple select', [options[0].label])
 
       outputShouldBe([options[0].value])
-
-      cy.fill('A multiple select', [options[1].label, options[2].label])
-
-      outputShouldBe([options[1].value, options[2].value])
-
-      cy.fill('A multiple select', undefined)
-
-      outputShouldBe(undefined)
     })
 
-    it('Should fill the multiple select with `isLabelHidden`', () => {
+    it('Should fill the multiple picker with `searcheable`', () => {
       mountAndWait(
         <StoryBox>
-          <MultiSelectStory {...commonProps} isLabelHidden />
+          <MultiSelectStory {...commonProps} searchable />
         </StoryBox>
       )
 
@@ -95,6 +101,10 @@ Object.keys(OPTIONS_TYPES).forEach(optionType => {
       cy.fill('A multiple select', [options[0].label])
 
       outputShouldBe([options[0].value])
+
+      cy.fill('A multiple select', [options[1].label, options[2].label])
+
+      outputShouldBe([options[1].value, options[2].value])
     })
 
     it('Should NOT call `onChange(undefined)` with `disabled`', () => {