import { mount } from '@vue/test-utils';
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
import listButtonHorizontal from '@/ux-components/list-button-horizontal/list-button-horizontal.vue';

/** @ignore */
function setupMocks({ mockData }) {
    const wrapper = mount(listButtonHorizontal, {
        ...mockData,
        propsData: {
            ...mockData.propsData,
            groupName: 'my-group',
            modelValue: mockData.propsData?.isMultiSelect ? ['5'] : '5',
            value: mockData.propsData?.isMultiSelect ? ['4'] : '4'
        },
        mixins: [inputButtonWrapperMixin]
    });

    return { wrapper };
}

describe('list-button-horizontal.vue', () => {
    describe('styling/UI', () => {
        it('Should return screen reader text', async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        screenReaderOnlyText: 'Screen Reader Only Text'
                    }
                }
            });

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

            expect(paragraph.text()).toEqual('Screen Reader Only Text');
        });

        it('Should return text alignment class', async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        textPosition: 'text-center'
                    }
                }
            });

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

            expect(paragraph.attributes('class')).toContain('text-center');
        });

        it('Should return aria-required state', async () => {
            // Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        isRequired: true
                    }
                }
            });

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

            expect(input.attributes()['aria-required']).toEqual('true');
        });

        it("is cash or insurance button => has 'strong' class", () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        additionalButtonStyling: 'listButtonHorizontalStrong'
                    }
                }
            });

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

            expect(label.classes()).toContain('strong');
        });

        test('has buttonLabel => displays buttonLabel', () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        buttonLabel: 'Surprise!'
                    }
                }
            });

            // Assert
            const content = wrapper.find('.list-button-horizontal-content');
            expect(content.isVisible()).toBe(true);
            expect(content.text()).toContain('Surprise!');
        });

        test('has buttonLabelSubCopy => displays buttonLabelSubCopy', () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        buttonLabel: 'Surprise!',
                        buttonLabelSubCopy: 'Super duper surprise :)'
                    }
                }
            });

            // Assert
            const content = wrapper.find('.list-button-horizontal-content');
            expect(content.isVisible()).toBe(true);
            expect(content.text()).toContain('Super duper surprise :)');
        });

        test('has screenReaderOnlyText => displays screenReaderOnlyText', () => {
            // Arrange/Act
            const { wrapper } = setupMocks({
                mockData: {
                    propsData: {
                        buttonLabel: 'Surprise!',
                        buttonLabelSubCopy: 'Super duper surprise :)',
                        screenReaderOnlyText: 'Tests are fun!'
                    }
                }
            });

            // Assert
            const content = wrapper.find('.list-button-horizontal-content');
            const screenReaderOnlyText = wrapper.find('.sr-only');
            expect(content.isVisible()).toBe(true);
            expect(screenReaderOnlyText.exists()).toBe(true);
            expect(screenReaderOnlyText.text()).toContain('Tests are fun!');
        });
    });
});