93 lines
2.9 KiB
JavaScript
93 lines
2.9 KiB
JavaScript
import CardList from 'src/components/ui/CardList.vue';
|
|
|
|
describe('<CardList />', () => {
|
|
const mountComponent = (opt) => {
|
|
const defaultProps = {
|
|
element: { name: 'Item' },
|
|
id: 1,
|
|
isSelected: false,
|
|
title: 'Card Title',
|
|
showCheckbox: true,
|
|
hasInfoIcons: true,
|
|
};
|
|
cy.createWrapper(CardList, {
|
|
props: defaultProps,
|
|
...opt,
|
|
});
|
|
};
|
|
|
|
it('should display title and ID chip', () => {
|
|
mountComponent();
|
|
// Verificar que el título esté presente
|
|
cy.contains('Card Title').should('be.visible');
|
|
|
|
// Verificar que la etiqueta ID esté presente y visible
|
|
cy.contains('ID: 1').should('be.visible');
|
|
});
|
|
|
|
it('should display checkbox when showCheckbox is true', () => {
|
|
mountComponent();
|
|
// Verificar que el checkbox esté visible cuando showCheckbox es verdadero
|
|
cy.get('.q-checkbox').should('exist');
|
|
});
|
|
|
|
it('should emit toggleCardCheck event when checkbox is clicked', () => {
|
|
mountComponent(); // Espiar el evento `toggleCardCheck`
|
|
const onToggleCardCheck = cy.spy().as('toggleCardCheckEvent');
|
|
mountComponent({
|
|
props: {
|
|
element: { name: 'Item' },
|
|
showCheckbox: true,
|
|
},
|
|
listeners: {
|
|
toggleCardCheck: onToggleCardCheck,
|
|
},
|
|
});
|
|
|
|
// Hacer clic en el checkbox
|
|
cy.get('.q-checkbox').click();
|
|
|
|
// Asegurarse de que el evento `toggleCardCheck` se emitió
|
|
cy.get('@toggleCardCheckEvent').should('have.been.calledOnce');
|
|
});
|
|
|
|
it('should display info-icons slot content when hasInfoIcons is true', () => {
|
|
// Montar el componente con el slot info-icons
|
|
mountComponent({
|
|
props: {
|
|
hasInfoIcons: true,
|
|
},
|
|
slots: {
|
|
'info-icons': `<div class="info-icon-slot">Info Icon</div>`,
|
|
},
|
|
});
|
|
|
|
// Verificar que el contenido del slot `info-icons` esté visible
|
|
cy.get('.info-icon-slot').should('be.visible');
|
|
});
|
|
|
|
it('should display list-items slot content', () => {
|
|
// Montar el componente con el slot `list-items`
|
|
mountComponent({
|
|
slots: {
|
|
'list-items': `<div class="list-item-slot">List Item</div>`,
|
|
},
|
|
});
|
|
|
|
// Verificar que el contenido del slot `list-items` esté visible
|
|
cy.get('.list-item-slot').should('be.visible');
|
|
});
|
|
|
|
it('should display actions slot content', () => {
|
|
// Montar el componente con el slot `actions`
|
|
mountComponent({
|
|
slots: {
|
|
actions: `<button class="action-button">Action</button>`,
|
|
},
|
|
});
|
|
|
|
// Verificar que el contenido del slot `actions` esté visible
|
|
cy.get('.action-button').should('be.visible');
|
|
});
|
|
});
|