diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 66ea16ef0..85d18bbc4 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -1,3 +1,6 @@ +import { mount } from 'cypress/vue'; +import { Quasar } from 'quasar'; +import Cypress from 'cypress'; // *********************************************** // This example commands.js shows you how to // create various custom commands and overwrite @@ -22,4 +25,13 @@ // // // -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) \ No newline at end of file +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) +Cypress.Commands.add('vnMount', (component, options = {}) => { + const globalConfig = { + global: { + plugins: [Quasar], + }, + }; + console.info(globalConfig); + return mount(component, { ...globalConfig, ...options }); +}); diff --git a/test/cypress/components/VnTitle.spec.js b/test/cypress/components/VnTitle.spec.js index 385608f55..e00f60583 100644 --- a/test/cypress/components/VnTitle.spec.js +++ b/test/cypress/components/VnTitle.spec.js @@ -1,20 +1,8 @@ import VnTitle from 'src/components/common/VnTitle.vue'; -import { Quasar } from 'quasar'; describe('', () => { - const globalConfig = { - global: { - plugins: [Quasar], - }, - }; - - beforeEach(() => { - cy.mount(VnTitle, globalConfig); - }); - it('renders text with link', () => { - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: { url: 'https://example.com', text: 'Example Link', @@ -25,8 +13,7 @@ describe('', () => { cy.get('a').should('contain.text', 'Example Link'); }); it('renders text without link', () => { - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: { text: 'No Link', }, @@ -37,24 +24,21 @@ describe('', () => { }); it('applies correct classes based on url prop', () => { - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: { url: 'https://example.com', }, }); cy.get('a').should('have.class', 'link'); - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: {}, }); cy.get('a').should('have.class', 'color-vn-text'); }); it('displays icon when url is provided', () => { - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: { url: 'https://example.com', }, @@ -63,31 +47,27 @@ describe('', () => { }); it('does not display icon when url is not provided', () => { - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: {}, }); cy.get('.q-icon').should('not.exist'); }); it('applies correct cursor style based on url prop', () => { - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: { url: 'https://example.com', }, }); cy.get('.header-link').should('have.css', 'cursor', 'pointer'); - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: {}, }); cy.get('.header-link').should('have.css', 'cursor', 'default'); }); it('renders default icon when no icon prop is provided', () => { - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: { url: 'https://example.com', }, @@ -96,8 +76,7 @@ describe('', () => { }); it('renders custom icon when icon prop is provided', () => { - cy.mount(VnTitle, { - ...globalConfig, + cy.vnMount(VnTitle, { props: { url: 'https://example.com', icon: 'custom_icon',