salix-front/test/vitest/__tests__/composables/dataCy.spec.js

69 lines
2.0 KiB
JavaScript

// tests/dataCy.spec.js
import { mount, shallowMount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import { Quasar, QInput, QSelect, QIcon, QBtn } from 'quasar';
import dataCy from 'src/boot/dataCy.js';
const mountWithQuasar = (component, options) => {
return mount(component, {
global: {
plugins: [Quasar],
stubs: {
vDataCy: true,
},
directives: {
dataCy: dataCy,
},
},
...options,
});
};
describe('dataCy directive', () => {
it.only('applies data-cy attribute to QInput', () => {
const wrapper = mountWithQuasar(QInput, {
props: {
label: 'Test Input',
},
});
const input = wrapper.find('input');
dataCy.mounted(input.element, null, {
ctx: {
type: QInput,
attrs: { dataCy: 'Test Input' },
parent: { attrs: { label: 'Test Input' } },
},
});
expect(input.attributes('data-cy')).toBe('Test Input_input');
});
it('applies data-cy attribute to QSelect', () => {
const wrapper = mountWithQuasar(QSelect, {
props: {
label: 'Test Select',
},
});
const select = wrapper.find('.q-field__native');
expect(select.attributes('data-cy')).toBe('Test Select_select');
});
it('applies data-cy attribute to QIcon', () => {
const wrapper = mountWithQuasar(QIcon, {
props: {
name: 'home',
},
});
const icon = wrapper.find('i');
expect(icon.attributes('data-cy')).toBe('home_icon');
});
it('applies data-cy attribute to QBtn', () => {
const wrapper = mountWithQuasar(QBtn, {
props: {
label: 'Test Button',
},
});
const button = wrapper.find('button');
expect(button.attributes('data-cy')).toBe('Test Button_btn');
});
});