import { mount } from '@vue/test-utils';
import { defineComponent, h } from 'vue';

import { Radio } from 'ant-design-vue';
import { describe, expect, it } from 'vitest';

import FileViewModeSwitch from '../FileViewModeSwitch.vue';

const TooltipStub = defineComponent({
  setup(_, { slots }) {
    return () => h('span', slots.default?.());
  },
});

describe('file view mode switch', () => {
  it('updates the selected view through the radio group', async () => {
    const wrapper = mount(FileViewModeSwitch, {
      props: { value: 'details' },
      global: {
        components: { 'a-radio-button': Radio.Button, 'a-radio-group': Radio.Group },
        stubs: { 'a-tooltip': TooltipStub },
      },
    });

    const radios = wrapper.findAll('input[type="radio"]');
    expect(radios).toHaveLength(2);
    expect((radios[0]!.element as HTMLInputElement).checked).toBe(true);

    await radios[1]!.setValue();
    expect(wrapper.emitted('update:value')?.at(-1)).toEqual(['tiles']);

    await wrapper.setProps({ value: 'tiles' });
    expect((radios[1]!.element as HTMLInputElement).checked).toBe(true);
  });
});