import { mount } from '@vue/test-utils';
import Carousel from './Carousel.vue';

describe('Carousel.vue', () => {
    it('should exist', async () => {
        const wrapper = mount(Carousel, {
            props: {
                value: [
                    {
                        "id": "1000",
                        "code": "vbb124btr",
                        "name": "Game Controller",
                        "description": "Product Description",
                        "image": "game-controller.jpg",
                        "price": 99,
                        "category": "Electronics",
                        "quantity": 2,
                        "inventoryStatus": "LOWSTOCK",
                        "rating": 4
                    },
                    {
                        "id": "1001",
                        "code": "nvklal433",
                        "name": "Black Watch",
                        "description": "Product Description",
                        "image": "black-watch.jpg",
                        "price": 72,
                        "category": "Accessories",
                        "quantity": 61,
                        "inventoryStatus": "INSTOCK",
                        "rating": 4
                    },
                    {
                        "id": "1002",
                        "code": "zz21cz3c1",
                        "name": "Blue Band",
                        "description": "Product Description",
                        "image": "blue-band.jpg",
                        "price": 79,
                        "category": "Fitness",
                        "quantity": 2,
                        "inventoryStatus": "LOWSTOCK",
                        "rating": 3
                    },
                    {
                        "id": "1003",
                        "code": "244wgerg2",
                        "name": "Blue T-Shirt",
                        "description": "Product Description",
                        "image": "blue-t-shirt.jpg",
                        "price": 29,
                        "category": "Clothing",
                        "quantity": 25,
                        "inventoryStatus": "INSTOCK",
                        "rating": 5
                    }
                ]
            },
            slots: {
                header: 'Basic',
                item: `<template #item="slotProps">
                    <div class="product-item">
                        <div class="product-item-content">
                            <div class="mb-3">
                                <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                            </div>
                        </div>
                    </div>
                </template>
                `
            }
        });        
        
        expect(wrapper.findAll('.p-carousel-item').length).toBe(4);

        const firstItem = wrapper.findAll('.p-carousel-item')[0];
        expect(firstItem.classes()).toContain('p-carousel-item-active');

        const nextBtn = wrapper.find('.p-carousel-next');
        await nextBtn.trigger('click');

        expect(firstItem.classes()).not.toContain('p-carousel-item-active');
    })
});