#208 Fix autocomplete tests + story

src/__tests__/OeAutocomplete.cy.ts

@@ -7,7 +7,7 @@ describe('Autocomplete', () => {
   describe('default', () => {
     const TestComponent = defineComponent({
       components: { OeAutocomplete },
-      template: '<OeAutocomplete id="test" />',
+      template: '<OeAutocomplete id="test" custom-attr/>',
     });
 
     it('renders an input field with placeholder', () => {
@@ -70,6 +70,11 @@ describe('Autocomplete', () => {
 
       cy.get('@onUpdateValue').should('have.been.calledWith', { title: 'tes' });
     });
+
+    it('applies fallthrough attributes to the input element', () => {
+      cy.mount(TestComponent);
+      cy.dataCy('autocomplete-input').should('have.attr', 'custom-attr');
+    });
   });
 
   describe('Custom callback', () => {
@@ -212,4 +217,36 @@ describe('Autocomplete', () => {
       cy.dataCy('result').should('be.exist');
     });
   });
+
+  describe('Allow free text', () => {
+    const TestComponent = defineComponent({
+      components: { OeAutocomplete },
+      setup() {
+        const callback = (searchTerm: string): Promise<IAutocompleteOption[]> => {
+          return Promise.resolve(
+            [
+              {
+                title: 'minimal5chars',
+              },
+            ].filter((item) => item.title.includes(searchTerm))
+          );
+        };
+        return {
+          callback,
+        };
+      },
+      template: '<OeAutocomplete id="test" :callbackFn="callback" :min-chars="3" allow-free-text/>',
+    });
+
+    it('selects the freetext input when no options were found', () => {
+      const onUpdateValueSpy = cy.spy().as('onUpdateValueSpy');
+
+      cy.mount(TestComponent, { props: { 'onUpdate:value': onUpdateValueSpy } }).then(() => {
+        cy.dataCy('autocomplete').type('freetext');
+        cy.dataCy('result').should('not.exist');
+
+        cy.get('@onUpdateValueSpy').should('have.been.calledWith', { title: 'freetext', value: 'freetext' });
+      });
+    });
+  });
 });

src/components/dumb/OeAutocomplete.vue

@@ -58,7 +58,7 @@ const props = withDefaults(defineProps<IAutocompleteProps>(), {
   minChars: 3,
   placeholder: 'Type om te zoeken...',
   callbackFn: (searchTerm: string) => Promise.resolve([{ title: searchTerm }]),
-  allowFreeText: true,
+  allowFreeText: false,
 });
 const emit = defineEmits(['update:value']);
 

src/stories/dumb-components/autocomplete.stories.ts

@@ -2,6 +2,7 @@ import '@/scss/main.scss';
 import OeAutocomplete from '../../components/dumb/OeAutocomplete.vue';
 import type { IAutocompleteOption } from '../../models/autocomplete';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { ref } from 'vue';
 
 const meta: Meta<typeof OeAutocomplete> = {
   title: 'Dumb components/Autocomplete',
@@ -46,6 +47,10 @@ const meta: Meta<typeof OeAutocomplete> = {
         type: { summary: 'Should return IAutocompleteOption[]' },
       },
     },
+    allowFreeText: {
+      control: 'boolean',
+      description: 'Allow free text input when no matching results are found',
+    },
   },
 };
 
@@ -132,3 +137,36 @@ export const CustomPlaceholder: Story = {
     placeholder: 'My custom placeholder',
   },
 };
+
+export const AllowFreeText: Story = {
+  render: () => ({
+    components: {
+      OeAutocomplete,
+    },
+    setup() {
+      const selectedValue = ref('');
+      const callback = (searchTerm: string): Promise<IAutocompleteOption[]> => {
+        return new Promise(function (resolve) {
+          // Fake delay to show the loader
+          setTimeout(function () {
+            resolve(
+              [
+                {
+                  title: 'dummy',
+                },
+              ].filter((s) => s.title.includes(searchTerm))
+            );
+          }, 3000);
+        });
+      };
+
+      return { callback, selectedValue };
+    },
+    template: `
+    <oe-autocomplete :callbackFn="callback" allow-free-text @update:value="selectedValue = $event"></oe-autocomplete>
+    <br/>
+    <p>Selected value:</p>
+    <pre>{{selectedValue}}</pre>
+     `,
+  }),
+};