@weni/unnnic-system 3.9.3 → 3.9.4-alpha.2

package/src/components/Select/__tests__/SelectItem.spec.js

@@ -0,0 +1,330 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, test } from 'vitest';
+import SelectItem from '../SelectItem.vue';
+
+const createWrapper = (props = {}, slots = {}) => {
+  return mount(SelectItem, {
+    props,
+    slots: slots.default ? { default: slots.default } : {},
+  });
+};
+
+describe('SelectItem.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createWrapper({}, { default: 'Test Item' });
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('renders slot content', () => {
+    const labelElement = wrapper.find('.unnnic-select-item__label');
+    expect(labelElement.exists()).toBe(true);
+    expect(labelElement.text()).toBe('Test Item');
+  });
+
+  test('applies the correct base CSS class', () => {
+    expect(wrapper.classes()).toContain('unnnic-select-item');
+  });
+
+  describe('props validation', () => {
+    test('validates optional size prop', () => {
+      const { size } = wrapper.vm.$options.props;
+      expect(size.required).toBeFalsy();
+      expect(size.type).toBe(String);
+      expect(size.default).toBe('');
+    });
+
+    test('validates optional selectable prop', () => {
+      const { selectable } = wrapper.vm.$options.props;
+      expect(selectable.required).toBeFalsy();
+      expect(selectable.type).toBe(Boolean);
+      expect(selectable.default).toBe(true);
+    });
+
+    test('validates optional active prop', () => {
+      const { active } = wrapper.vm.$options.props;
+      expect(active.required).toBeFalsy();
+      expect(active.type).toBe(Boolean);
+      expect(active.default).toBe(false);
+    });
+
+    test('validates optional textFocused prop', () => {
+      const { textFocused } = wrapper.vm.$options.props;
+      expect(textFocused.required).toBeFalsy();
+      expect(textFocused.type).toBe(Boolean);
+      expect(textFocused.default).toBe(false);
+    });
+  });
+
+  describe('size prop', () => {
+    test('applies md size class when size is md', async () => {
+      await wrapper.setProps({ size: 'md' });
+      const labelElement = wrapper.find('.unnnic-select-item__label');
+      expect(labelElement.classes()).toContain('unnnic-select-item__label--md');
+    });
+
+    test('applies sm size class when size is sm', async () => {
+      await wrapper.setProps({ size: 'sm' });
+      const labelElement = wrapper.find('.unnnic-select-item__label');
+      expect(labelElement.classes()).toContain('unnnic-select-item__label--sm');
+    });
+
+    test('does not apply size class when size is empty', async () => {
+      await wrapper.setProps({ size: '' });
+      const labelElement = wrapper.find('.unnnic-select-item__label');
+      expect(labelElement.classes()).not.toContain(
+        'unnnic-select-item__label--md',
+      );
+      expect(labelElement.classes()).not.toContain(
+        'unnnic-select-item__label--sm',
+      );
+    });
+  });
+
+  describe('selectable prop', () => {
+    test('applies selectable class when selectable is true', async () => {
+      await wrapper.setProps({ selectable: true });
+      expect(wrapper.classes()).toContain('unnnic-select-item--selectable');
+      expect(wrapper.classes()).toContain('unnnic--clickable');
+    });
+
+    test('does not apply selectable class when selectable is false', async () => {
+      await wrapper.setProps({ selectable: false });
+      expect(wrapper.classes()).not.toContain('unnnic-select-item--selectable');
+      expect(wrapper.classes()).not.toContain('unnnic--clickable');
+    });
+  });
+
+  describe('active state', () => {
+    test('applies active class when active prop is true', async () => {
+      await wrapper.setProps({ active: true });
+      expect(wrapper.classes()).toContain('unnnic-select-item__active');
+    });
+
+    test('does not apply active class when active prop is false', async () => {
+      await wrapper.setProps({ active: false });
+      expect(wrapper.classes()).not.toContain('unnnic-select-item__active');
+    });
+  });
+
+  describe('textFocused state', () => {
+    test('applies text-focused class when textFocused prop is true', async () => {
+      await wrapper.setProps({ textFocused: true });
+      expect(wrapper.classes()).toContain('text-focused');
+    });
+
+    test('does not apply text-focused class when textFocused prop is false', async () => {
+      await wrapper.setProps({ textFocused: false });
+      expect(wrapper.classes()).not.toContain('text-focused');
+    });
+  });
+
+  describe('click events', () => {
+    test('emits click event when clicked', async () => {
+      const clickWrapper = createWrapper({}, { default: 'Test Item' });
+      await clickWrapper.trigger('click');
+      expect(clickWrapper.emitted('click')).toBeTruthy();
+      expect(clickWrapper.emitted('click').length).toBeGreaterThanOrEqual(1);
+    });
+
+    test('emits click event even when selectable is false', async () => {
+      const clickWrapper = createWrapper(
+        { selectable: false },
+        { default: 'Test Item' },
+      );
+      await clickWrapper.trigger('click');
+      expect(clickWrapper.emitted('click')).toBeTruthy();
+      expect(clickWrapper.emitted('click').length).toBeGreaterThanOrEqual(1);
+    });
+
+    test('emits multiple click events', async () => {
+      const clickWrapper = createWrapper({}, { default: 'Test Item' });
+      await clickWrapper.trigger('click');
+      await clickWrapper.trigger('click');
+      expect(clickWrapper.emitted('click').length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  describe('combined states', () => {
+    test('can be active and selectable', async () => {
+      await wrapper.setProps({ active: true, selectable: true });
+      expect(wrapper.classes()).toContain('unnnic-select-item__active');
+      expect(wrapper.classes()).toContain('unnnic-select-item--selectable');
+      expect(wrapper.classes()).toContain('unnnic--clickable');
+    });
+
+    test('can be textFocused and active', async () => {
+      await wrapper.setProps({ textFocused: true, active: true });
+      expect(wrapper.classes()).toContain('text-focused');
+      expect(wrapper.classes()).toContain('unnnic-select-item__active');
+    });
+
+    test('renders correctly with all props', async () => {
+      await wrapper.setProps({
+        size: 'md',
+        selectable: true,
+        active: true,
+        textFocused: true,
+      });
+
+      expect(wrapper.classes()).toContain('unnnic-select-item');
+      expect(wrapper.classes()).toContain('unnnic-select-item__active');
+      expect(wrapper.classes()).toContain('unnnic-select-item--selectable');
+      expect(wrapper.classes()).toContain('unnnic--clickable');
+      expect(wrapper.classes()).toContain('text-focused');
+
+      const labelElement = wrapper.find('.unnnic-select-item__label');
+      expect(labelElement.classes()).toContain('unnnic-select-item__label--md');
+    });
+  });
+
+  describe('component structure', () => {
+    test('has correct component name', () => {
+      expect(wrapper.vm.$options.name).toBe('UnnicSelectItem');
+    });
+
+    test('renders a div element', () => {
+      expect(wrapper.element.tagName).toBe('DIV');
+    });
+
+    test('contains a span element for the label', () => {
+      const labelElement = wrapper.find('span.unnnic-select-item__label');
+      expect(labelElement.exists()).toBe(true);
+    });
+  });
+
+  describe('accessibility', () => {
+    test('has proper semantic structure', () => {
+      const div = wrapper.find('.unnnic-select-item');
+      const span = wrapper.find('.unnnic-select-item__label');
+
+      expect(div.exists()).toBe(true);
+      expect(span.exists()).toBe(true);
+      expect(span.element.tagName).toBe('SPAN');
+    });
+
+    test('slot content is accessible', () => {
+      const labelElement = wrapper.find('.unnnic-select-item__label');
+      expect(labelElement.text()).toBe('Test Item');
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles empty slot content', async () => {
+      const emptyWrapper = createWrapper({}, { default: '' });
+      const labelElement = emptyWrapper.find('.unnnic-select-item__label');
+      expect(labelElement.text()).toBe('');
+    });
+
+    test('handles long slot content', async () => {
+      const longText =
+        'This is a very long text content that should be handled properly by the component';
+      const longWrapper = createWrapper({}, { default: longText });
+      const labelElement = longWrapper.find('.unnnic-select-item__label');
+      expect(labelElement.text()).toBe(longText);
+    });
+
+    test('handles special characters in slot content', async () => {
+      const specialText = 'Item with special chars: @#$%^&*()';
+      const specialWrapper = createWrapper({}, { default: specialText });
+      const labelElement = specialWrapper.find('.unnnic-select-item__label');
+      expect(labelElement.text()).toBe(specialText);
+    });
+
+    test('handles HTML content in slot', async () => {
+      const htmlContent = '<strong>Bold text</strong>';
+      const htmlWrapper = createWrapper({}, { default: htmlContent });
+      const labelElement = htmlWrapper.find('.unnnic-select-item__label');
+      expect(labelElement.html()).toContain('<strong>Bold text</strong>');
+    });
+  });
+
+  describe('CSS class combinations', () => {
+    test('applies correct classes for non-selectable inactive item', async () => {
+      await wrapper.setProps({
+        selectable: false,
+        active: false,
+        textFocused: false,
+      });
+
+      expect(wrapper.classes()).toContain('unnnic-select-item');
+      expect(wrapper.classes()).not.toContain('unnnic-select-item--selectable');
+      expect(wrapper.classes()).not.toContain('unnnic--clickable');
+      expect(wrapper.classes()).not.toContain('unnnic-select-item__active');
+      expect(wrapper.classes()).not.toContain('text-focused');
+    });
+
+    test('applies correct classes for selectable active item', async () => {
+      await wrapper.setProps({
+        selectable: true,
+        active: true,
+        textFocused: false,
+      });
+
+      expect(wrapper.classes()).toContain('unnnic-select-item');
+      expect(wrapper.classes()).toContain('unnnic-select-item--selectable');
+      expect(wrapper.classes()).toContain('unnnic--clickable');
+      expect(wrapper.classes()).toContain('unnnic-select-item__active');
+      expect(wrapper.classes()).not.toContain('text-focused');
+    });
+
+    test('applies correct classes for text-focused item', async () => {
+      await wrapper.setProps({
+        selectable: true,
+        active: false,
+        textFocused: true,
+      });
+
+      expect(wrapper.classes()).toContain('unnnic-select-item');
+      expect(wrapper.classes()).toContain('unnnic-select-item--selectable');
+      expect(wrapper.classes()).toContain('unnnic--clickable');
+      expect(wrapper.classes()).not.toContain('unnnic-select-item__active');
+      expect(wrapper.classes()).toContain('text-focused');
+    });
+  });
+
+  describe('snapshot testing', () => {
+    test('matches snapshot with default props', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with active state', async () => {
+      await wrapper.setProps({ active: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with textFocused state', async () => {
+      await wrapper.setProps({ textFocused: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with non-selectable state', async () => {
+      await wrapper.setProps({ selectable: false });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with md size', async () => {
+      await wrapper.setProps({ size: 'md' });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with sm size', async () => {
+      await wrapper.setProps({ size: 'sm' });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with all states combined', async () => {
+      await wrapper.setProps({
+        size: 'md',
+        selectable: true,
+        active: true,
+        textFocused: true,
+      });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+});

package/src/components/Select/__tests__/SelectOption.spec.js

@@ -0,0 +1,174 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, test } from 'vitest';
+import SelectOption from '../SelectOption.vue';
+
+const createWrapper = (props = {}) => {
+  return mount(SelectOption, { props });
+};
+
+describe('SelectOption.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createWrapper({
+      label: 'Test Option',
+    });
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('renders the label text', () => {
+    const labelElement = wrapper.find('.unnnic-select-option__label');
+    expect(labelElement.exists()).toBe(true);
+    expect(labelElement.text()).toBe('Test Option');
+  });
+
+  test('applies the correct base CSS class', () => {
+    expect(wrapper.classes()).toContain('unnnic-select-option');
+  });
+
+  describe('props validation', () => {
+    test('validates required label prop', () => {
+      const { label } = wrapper.vm.$options.props;
+      expect(label.required).toBe(true);
+      expect(label.type).toBe(String);
+    });
+
+    test('validates optional disabled prop', () => {
+      const { disabled } = wrapper.vm.$options.props;
+      expect(disabled.required).toBe(false);
+      expect(disabled.type).toBe(Boolean);
+      expect(disabled.default).toBe(false);
+    });
+
+    test('validates optional active prop', () => {
+      const { active } = wrapper.vm.$options.props;
+      expect(active.required).toBe(false);
+      expect(active.type).toBe(Boolean);
+      expect(active.default).toBe(false);
+    });
+  });
+
+  describe('disabled state', () => {
+    test('applies disabled class when disabled prop is true', async () => {
+      await wrapper.setProps({ disabled: true });
+      expect(wrapper.classes()).toContain('unnnic-select-option--disabled');
+    });
+
+    test('does not apply disabled class when disabled prop is false', async () => {
+      await wrapper.setProps({ disabled: false });
+      expect(wrapper.classes()).not.toContain('unnnic-select-option--disabled');
+    });
+  });
+
+  describe('active state', () => {
+    test('applies active class when active prop is true', async () => {
+      await wrapper.setProps({ active: true });
+      expect(wrapper.classes()).toContain('unnnic-select-option--active');
+    });
+
+    test('does not apply active class when active prop is false', async () => {
+      await wrapper.setProps({ active: false });
+      expect(wrapper.classes()).not.toContain('unnnic-select-option--active');
+    });
+  });
+
+  describe('combined states', () => {
+    test('can be both active and disabled', async () => {
+      await wrapper.setProps({ active: true, disabled: true });
+      expect(wrapper.classes()).toContain('unnnic-select-option--active');
+      expect(wrapper.classes()).toContain('unnnic-select-option--disabled');
+    });
+
+    test('renders correctly with all props', async () => {
+      await wrapper.setProps({
+        label: 'Complex Option',
+        active: true,
+        disabled: false,
+      });
+
+      expect(wrapper.find('.unnnic-select-option__label').text()).toBe(
+        'Complex Option',
+      );
+      expect(wrapper.classes()).toContain('unnnic-select-option--active');
+      expect(wrapper.classes()).not.toContain('unnnic-select-option--disabled');
+    });
+  });
+
+  describe('component structure', () => {
+    test('has correct component name', () => {
+      expect(wrapper.vm.$options.name).toBe('UnnnicSelectOption');
+    });
+
+    test('renders a div element', () => {
+      expect(wrapper.element.tagName).toBe('DIV');
+    });
+
+    test('contains a paragraph element for the label', () => {
+      const labelElement = wrapper.find('p.unnnic-select-option__label');
+      expect(labelElement.exists()).toBe(true);
+    });
+  });
+
+  describe('accessibility', () => {
+    test('has proper semantic structure', () => {
+      const div = wrapper.find('.unnnic-select-option');
+      const p = wrapper.find('.unnnic-select-option__label');
+
+      expect(div.exists()).toBe(true);
+      expect(p.exists()).toBe(true);
+      expect(p.element.tagName).toBe('P');
+    });
+
+    test('label text is accessible', () => {
+      const labelElement = wrapper.find('.unnnic-select-option__label');
+      expect(labelElement.text()).toBe('Test Option');
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles empty label', async () => {
+      await wrapper.setProps({ label: '' });
+      const labelElement = wrapper.find('.unnnic-select-option__label');
+      expect(labelElement.text()).toBe('');
+    });
+
+    test('handles long label text', async () => {
+      const longText =
+        'This is a very long label text that should be handled properly by the component';
+      await wrapper.setProps({ label: longText });
+      const labelElement = wrapper.find('.unnnic-select-option__label');
+      expect(labelElement.text()).toBe(longText);
+    });
+
+    test('handles special characters in label', async () => {
+      const specialText = 'Option with special chars: @#$%^&*()';
+      await wrapper.setProps({ label: specialText });
+      const labelElement = wrapper.find('.unnnic-select-option__label');
+      expect(labelElement.text()).toBe(specialText);
+    });
+  });
+
+  describe('snapshot testing', () => {
+    test('matches snapshot with default props', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with active state', async () => {
+      await wrapper.setProps({ active: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with disabled state', async () => {
+      await wrapper.setProps({ disabled: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with both active and disabled states', async () => {
+      await wrapper.setProps({ active: true, disabled: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+});

package/src/components/Select/__tests__/__snapshots__/Select.spec.js.snap

@@ -0,0 +1,97 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with default props 1`] = `
+"<div data-v-6077efb7="" class="unnnic-select">
+  <section data-v-5a3125ac="" data-v-6077efb7="" class="unnnic-popover">
+    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
+      <div data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form md unnnic-select__input">
+        <!--v-if-->
+        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="">
+          <!--v-if-->
+          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
+        </div>
+        <section data-v-d890ad85="" class="unnnic-form__hints-container">
+          <section data-v-d890ad85="" class="unnnic-form__message-container">
+            <!--v-if-->
+            <!--v-if-->
+          </section>
+          <!--v-if-->
+        </section>
+      </div>
+    </div>
+    <!--v-if-->
+  </section>
+</div>"
+`;
+
+exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with disabled state 1`] = `
+"<div data-v-6077efb7="" class="unnnic-select">
+  <section data-v-5a3125ac="" data-v-6077efb7="" class="unnnic-popover">
+    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
+      <div data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form md unnnic-select__input">
+        <!--v-if-->
+        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="" disabled="">
+          <!--v-if-->
+          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
+        </div>
+        <section data-v-d890ad85="" class="unnnic-form__hints-container">
+          <section data-v-d890ad85="" class="unnnic-form__message-container">
+            <!--v-if-->
+            <!--v-if-->
+          </section>
+          <!--v-if-->
+        </section>
+      </div>
+    </div>
+    <!--v-if-->
+  </section>
+</div>"
+`;
+
+exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enabled 1`] = `
+"<div data-v-6077efb7="" class="unnnic-select">
+  <section data-v-5a3125ac="" data-v-6077efb7="" class="unnnic-popover">
+    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
+      <div data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form md unnnic-select__input">
+        <!--v-if-->
+        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="">
+          <!--v-if-->
+          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
+        </div>
+        <section data-v-d890ad85="" class="unnnic-form__hints-container">
+          <section data-v-d890ad85="" class="unnnic-form__message-container">
+            <!--v-if-->
+            <!--v-if-->
+          </section>
+          <!--v-if-->
+        </section>
+      </div>
+    </div>
+    <!--v-if-->
+  </section>
+</div>"
+`;
+
+exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with selected value 1`] = `
+"<div data-v-6077efb7="" class="unnnic-select">
+  <section data-v-5a3125ac="" data-v-6077efb7="" class="unnnic-popover">
+    <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger">
+      <div data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form md unnnic-select__input">
+        <!--v-if-->
+        <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-select__input unnnic-form-input input-itself" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" hascloudycolor="false" showclear="true" type="text" readonly="" value="Option 1">
+          <!--v-if-->
+          <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="material-symbols-rounded unnnic-icon-scheme--color-gray-700 unnnic-icon-size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
+        </div>
+        <section data-v-d890ad85="" class="unnnic-form__hints-container">
+          <section data-v-d890ad85="" class="unnnic-form__message-container">
+            <!--v-if-->
+            <!--v-if-->
+          </section>
+          <!--v-if-->
+        </section>
+      </div>
+    </div>
+    <!--v-if-->
+  </section>
+</div>"
+`;

package/src/components/Select/__tests__/__snapshots__/SelectItem.spec.js.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SelectItem.vue > snapshot testing > matches snapshot with active state 1`] = `"<div class="unnnic-select-item unnnic-select-item__active unnnic--clickable unnnic-select-item--selectable"><span class="unnnic-select-item__label unnnic-select-item__label--">Test Item</span></div>"`;
+
+exports[`SelectItem.vue > snapshot testing > matches snapshot with all states combined 1`] = `"<div class="unnnic-select-item unnnic-select-item__active unnnic--clickable unnnic-select-item--selectable text-focused"><span class="unnnic-select-item__label unnnic-select-item__label--md">Test Item</span></div>"`;
+
+exports[`SelectItem.vue > snapshot testing > matches snapshot with default props 1`] = `"<div class="unnnic-select-item unnnic--clickable unnnic-select-item--selectable"><span class="unnnic-select-item__label unnnic-select-item__label--">Test Item</span></div>"`;
+
+exports[`SelectItem.vue > snapshot testing > matches snapshot with md size 1`] = `"<div class="unnnic-select-item unnnic--clickable unnnic-select-item--selectable"><span class="unnnic-select-item__label unnnic-select-item__label--md">Test Item</span></div>"`;
+
+exports[`SelectItem.vue > snapshot testing > matches snapshot with non-selectable state 1`] = `"<div class="unnnic-select-item"><span class="unnnic-select-item__label unnnic-select-item__label--">Test Item</span></div>"`;
+
+exports[`SelectItem.vue > snapshot testing > matches snapshot with sm size 1`] = `"<div class="unnnic-select-item unnnic--clickable unnnic-select-item--selectable"><span class="unnnic-select-item__label unnnic-select-item__label--sm">Test Item</span></div>"`;
+
+exports[`SelectItem.vue > snapshot testing > matches snapshot with textFocused state 1`] = `"<div class="unnnic-select-item unnnic--clickable unnnic-select-item--selectable text-focused"><span class="unnnic-select-item__label unnnic-select-item__label--">Test Item</span></div>"`;

package/src/components/Select/__tests__/__snapshots__/SelectOption.spec.js.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SelectOption.vue > snapshot testing > matches snapshot with active state 1`] = `
+"<div data-v-fabf1785="" class="unnnic-select-option unnnic-select-option--active">
+  <p data-v-fabf1785="" class="unnnic-select-option__label">Test Option</p>
+</div>"
+`;
+
+exports[`SelectOption.vue > snapshot testing > matches snapshot with both active and disabled states 1`] = `
+"<div data-v-fabf1785="" class="unnnic-select-option unnnic-select-option--disabled unnnic-select-option--active">
+  <p data-v-fabf1785="" class="unnnic-select-option__label">Test Option</p>
+</div>"
+`;
+
+exports[`SelectOption.vue > snapshot testing > matches snapshot with default props 1`] = `
+"<div data-v-fabf1785="" class="unnnic-select-option">
+  <p data-v-fabf1785="" class="unnnic-select-option__label">Test Option</p>
+</div>"
+`;
+
+exports[`SelectOption.vue > snapshot testing > matches snapshot with disabled state 1`] = `
+"<div data-v-fabf1785="" class="unnnic-select-option unnnic-select-option--disabled">
+  <p data-v-fabf1785="" class="unnnic-select-option__label">Test Option</p>
+</div>"
+`;