104 lines
3.1 KiB
JavaScript
104 lines
3.1 KiB
JavaScript
// VnInputDate.spec.js
|
|
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
|
|
|
describe.only('<VnInputDate />', () => {
|
|
beforeEach(() => {
|
|
cy.stub(window, 'useI18n').returns({ t: (key) => key });
|
|
cy.stub(window, 'useValidator').returns({
|
|
validations: () => ({
|
|
required: (isRequired, value) => (isRequired ? !!value : true),
|
|
}),
|
|
});
|
|
});
|
|
|
|
it('renders correctly with default props', () => {
|
|
cy.createWrapper(VnInputDate);
|
|
cy.getComponent('VnDate').should('exist');
|
|
cy.get('input').should('exist');
|
|
});
|
|
|
|
it('formats date correctly', () => {
|
|
const testDate = '2024-03-20';
|
|
cy.createWrapper(VnInputDate, {
|
|
props: {
|
|
modelValue: testDate,
|
|
},
|
|
});
|
|
cy.get('input').should('have.value', '20/03/2024');
|
|
});
|
|
|
|
it('validates required field', () => {
|
|
cy.createWrapper(VnInputDate, {
|
|
attrs: {
|
|
required: true,
|
|
},
|
|
});
|
|
cy.get('input').clear();
|
|
cy.get('.q-field__messages').should('contain', 'Field is required');
|
|
});
|
|
|
|
it('opens date picker popup on click', () => {
|
|
cy.createWrapper(VnInputDate);
|
|
cy.get('input').click();
|
|
cy.get('.q-date').should('be.visible');
|
|
});
|
|
|
|
it('updates model value when date is selected', () => {
|
|
const onModelUpdate = cy.spy().as('modelUpdateSpy');
|
|
cy.createWrapper(VnInputDate, {
|
|
props: {
|
|
'onUpdate:modelValue': onModelUpdate,
|
|
},
|
|
});
|
|
cy.get('input').click();
|
|
cy.get('.q-date__calendar-item').first().click();
|
|
cy.get('@modelUpdateSpy').should('have.been.called');
|
|
});
|
|
|
|
it('applies outlined style when isOutlined is true', () => {
|
|
cy.createWrapper(VnInputDate, {
|
|
props: {
|
|
isOutlined: true,
|
|
},
|
|
});
|
|
cy.get('.q-field--outlined').should('exist');
|
|
});
|
|
|
|
it('handles custom validation rules', () => {
|
|
const customRule = (val) =>
|
|
new Date(val) <= new Date() || 'Date cannot be in the future';
|
|
cy.createWrapper(VnInputDate, {
|
|
attrs: {
|
|
rules: [customRule],
|
|
},
|
|
});
|
|
const futureDate = '31/12/2025';
|
|
cy.get('input').type(futureDate);
|
|
cy.get('.q-field__messages').should('contain', 'Date cannot be in the future');
|
|
});
|
|
|
|
it('shows hover state', () => {
|
|
cy.createWrapper(VnInputDate);
|
|
cy.get('input').trigger('mouseenter');
|
|
cy.get('.q-field--hover').should('exist');
|
|
});
|
|
|
|
it('handles disabled state', () => {
|
|
cy.createWrapper(VnInputDate, {
|
|
attrs: {
|
|
disabled: true,
|
|
},
|
|
});
|
|
cy.get('input').should('be.disabled');
|
|
});
|
|
|
|
it('hides event indicator when showEvent is false', () => {
|
|
cy.createWrapper(VnInputDate, {
|
|
props: {
|
|
showEvent: false,
|
|
},
|
|
});
|
|
cy.get('.q-field__event-indicator').should('not.exist');
|
|
});
|
|
});
|