primevue-mirror/components/carousel/Carousel.spec.js

91 lines
3.2 KiB
JavaScript

import { mount } from '@vue/test-utils';
import PrimeVue from 'primevue/config';
import Carousel from './Carousel.vue';
describe('Carousel.vue', () => {
it('should exist', async () => {
const wrapper = mount(Carousel, {
global: {
plugins: [PrimeVue]
},
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="'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');
});
});