117 lines
3.1 KiB
JavaScript
117 lines
3.1 KiB
JavaScript
// VnPaginate.spec.js
|
|
import VnPaginate from 'src/components/common/VnPaginate.vue';
|
|
|
|
describe.only('<VnPaginate />', () => {
|
|
beforeEach(() => {
|
|
cy.stub(window, 'axios').as('axiosStub');
|
|
});
|
|
|
|
const mountComponent = (props = {}) => {
|
|
cy.createWrapper(VnPaginate, {
|
|
props: {
|
|
dataKey: 'test-key',
|
|
...props,
|
|
},
|
|
});
|
|
};
|
|
|
|
it('renders without errors', () => {
|
|
mountComponent();
|
|
cy.get('.vn-paginate').should('exist');
|
|
});
|
|
|
|
it('loads data automatically when autoLoad is true', () => {
|
|
const url = '/api/test';
|
|
mountComponent({
|
|
url,
|
|
autoLoad: true,
|
|
});
|
|
cy.get('@axiosStub').should('have.been.called');
|
|
});
|
|
|
|
it('does not load data automatically when autoLoad is false', () => {
|
|
mountComponent({
|
|
url: '/api/test',
|
|
autoLoad: false,
|
|
});
|
|
cy.get('@axiosStub').should('not.have.been.called');
|
|
});
|
|
|
|
it('handles static data array', () => {
|
|
const testData = [
|
|
{ id: 1, name: 'Test 1' },
|
|
{ id: 2, name: 'Test 2' },
|
|
];
|
|
mountComponent({
|
|
data: testData,
|
|
});
|
|
cy.get('.vn-paginate').should('contain', 'Test 1');
|
|
});
|
|
|
|
it('applies filters correctly', () => {
|
|
const testFilter = { search: 'test' };
|
|
mountComponent({
|
|
url: '/api/test',
|
|
filter: testFilter,
|
|
});
|
|
cy.get('@axiosStub').should(
|
|
'have.been.calledWith',
|
|
Cypress.sinon.match({
|
|
params: Cypress.sinon.match(testFilter),
|
|
})
|
|
);
|
|
});
|
|
|
|
it('handles pagination events', () => {
|
|
mountComponent({
|
|
url: '/api/test',
|
|
});
|
|
cy.get('.pagination-next').click();
|
|
cy.get('@axiosStub').should(
|
|
'have.been.calledWith',
|
|
Cypress.sinon.match({
|
|
params: Cypress.sinon.match({
|
|
page: 2,
|
|
}),
|
|
})
|
|
);
|
|
});
|
|
|
|
it('applies custom classes', () => {
|
|
mountComponent({
|
|
class: 'custom-class',
|
|
});
|
|
cy.get('.vn-paginate').should('have.class', 'custom-class');
|
|
});
|
|
|
|
it('handles user filters', () => {
|
|
const userFilter = { status: 'active' };
|
|
mountComponent({
|
|
url: '/api/test',
|
|
userFilter,
|
|
});
|
|
cy.get('@axiosStub').should(
|
|
'have.been.calledWith',
|
|
Cypress.sinon.match({
|
|
params: Cypress.sinon.match(userFilter),
|
|
})
|
|
);
|
|
});
|
|
|
|
it('watches for filter changes and reloads data', () => {
|
|
// eslint-disable-next-line cypress/no-assigning-return-values
|
|
const wrapper = cy.createWrapper(VnPaginate, {
|
|
props: {
|
|
dataKey: 'test-key',
|
|
url: '/api/test',
|
|
},
|
|
});
|
|
|
|
wrapper.setProps({
|
|
filter: { newFilter: 'value' },
|
|
});
|
|
|
|
cy.get('@axiosStub').should('have.been.calledTwice');
|
|
});
|
|
});
|