import { mount } from '@vue/test-utils';
import BmsSelect, { Props } from './BmsSelect.vue';
import { field } from '@/plugins/field';
import { nextTick } from 'vue';

interface PropsAndModel extends Props {
  modelValue: any;
}

const factory = (props: PropsAndModel) => {
  const wrapper = mount(BmsSelect, { props, global: { plugins: [field] } });
  const inputElement = wrapper.find('input');
  const optionsElement = wrapper.find('ul');

  return { wrapper, inputElement, optionsElement };
};

describe('BmsSelect', () => {
  it('should init', () => {
    const { inputElement } = factory({
      modelValue: 'toto',
      options: [{ label: 'toto-label', value: 'toto' }],
    });

    expect(inputElement.element.value).toStrictEqual('toto-label');
  });
  it('should update when click on option', async () => {
    const { inputElement, optionsElement } = factory({
      modelValue: '',
      options: [{ label: 'toto-label', value: 'toto' }],
    });

    expect(inputElement.element.value).toStrictEqual('');
    const totoOptionElement = optionsElement.find('[data-testid="toto"]');
    await totoOptionElement.trigger('click');
    await nextTick();
    expect(inputElement.element.value).toStrictEqual('toto-label');
  });

  it('should not display value if not in options', () => {
    const { inputElement } = factory({
      modelValue: 'toto',
      options: [],
    });

    expect(inputElement.element.value).toStrictEqual('');
  });
});
