84 lines
3.2 KiB
JavaScript
84 lines
3.2 KiB
JavaScript
|
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');
|
||
|
|
})
|
||
|
|
});
|