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',