import { shallowMount } from '@vue/test-utils';
import radio from '@/ux-components/radio/radio.vue';

describe('radio.vue', () => {
    it('Should return group name', async () => {
    // Act
        const wrapper = shallowMount(radio, {
            propsData: {
                groupName: 'radio-button-test'
            }
        });

        // Assert
        const input = wrapper.find('input');

        // Expect
        expect(input.attributes().name).toEqual('radio-button-test');
    });

    it('Should return checkbox id', async () => {
    // Act
        const wrapper = shallowMount(radio, {
            propsData: {
                buttonID: 'Radio ID'
            }
        });

        // Assert
        const input = wrapper.find('input');

        // Expect
        expect(input.attributes().id).toEqual('Radio ID');
    });

    it('Should return label text', async () => {
    // Act
        const wrapper = shallowMount(radio, {
            propsData: {
                buttonLabel: 'label text'
            }
        });

        // Assert
        const paragraph = wrapper.find('p');

        expect(paragraph.text()).toEqual('label text');
    });

    it('Should return label text', async () => {
    // Act
        const wrapper = shallowMount(radio, {
            propsData: {
                screenReaderOnlyText: 'screenreader text'
            }
        });

        // Assert
        const paragraph = wrapper.find('span');

        expect(paragraph.text()).toEqual('screenreader text');
    });

    it('Should emit button value on click', async () => {
    // Act
        const wrapper = shallowMount(radio, {
            global: {
                mocks: {
                    $route: { query: { issPage: 'page-name' } }
                }
            },
            propsData: {
                buttonLabel: 'Windshield',
                value: 'List Card Checkbox',
                buttonID: 'List Card Checkbox',
                groupID: 'radio-demo-1',
                groupName: 'radio 1',
                isRequired: true,
                isWide: false,
                modelValue: ['List Card Checkbox']
            }
        });
        wrapper.vm.handleCheckChange();
        // Assert
        expect(wrapper.emitted().isCheckedChanged[0])
            .toEqual([{ buttonID: 'List Card Checkbox', value: 'List Card Checkbox', checkValue: false }]);
    });

    it('Should set checkValue data if selectedButtonIDs has value(s)', async () => {
    // Act
        const wrapper = shallowMount(radio, {
            global: {
                mocks: {
                    $route: { query: { issPage: 'page-name' } }
                }
            },
            propsData: {
                buttonLabel: 'Windshield',
                buttonID: 'List Card Checkbox',
                groupID: 'radio-demo-1',
                groupName: 'radio 1',
                buttonImage: 'windshield-damage.svg',
                isRequired: true,
                modelValue: ['List Card Checkbox'],
                value: 'Car-Front',
                selectedValues: 'Car-Front'
            }
        });
        // Assert
        expect(wrapper.componentVM.checkValue).toEqual(true);
    });
});