import { mount } from '@vue/test-utils';
import PrimeVue from '@/components/config/PrimeVue';
import Galleria from './Galleria.vue';

describe('Gallleria.vue', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(Galleria, {
            global: {
                plugins: [PrimeVue],
                stubs: {
                    teleport: true
                }
            },
            props: {
                value: [
                    {
                        "itemImageSrc": "demo/images/galleria/galleria1.jpg",
                        "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
                        "alt": "Description for Image 1",
                        "title": "Title 1"
                    },
                    {
                        "itemImageSrc": "demo/images/galleria/galleria2.jpg",
                        "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
                        "alt": "Description for Image 2",
                        "title": "Title 2"
                    },
                    {
                        "itemImageSrc": "demo/images/galleria/galleria3.jpg",
                        "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
                        "alt": "Description for Image 3",
                        "title": "Title 3"
                    }
                ],
                numVisible: 2
            },
            slots: {
                item: `
                    <template #item="slotProps">
                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
                    </template>
                `
            }
        });
    });

    it('should exist',() =>  {
        expect(wrapper.find('.p-galleria.p-component').exists()).toBe(true);
        expect(wrapper.findAll('.p-galleria-item-container > .p-galleria-item').length).toBe(1);
        expect(wrapper.findAll('.p-galleria-thumbnail-item-active').length).toBe(2);
    });

    it('should active item change', async() => {
        expect(wrapper.find('.p-galleria-item-container img').attributes().alt).toBe('Description for Image 1');

        wrapper.vm.onActiveItemChange(1);
        await wrapper.setProps({activeIndex: 1});

        expect(wrapper.find('.p-galleria-item-container img').attributes().alt).toBe('Description for Image 2');
        expect(wrapper.emitted()['update:activeIndex'][0]).toEqual([1]);

    });
});