test: define comand

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
@@ -23,3 +26,12 @@
 //
 // -- This will overwrite an existing command --
 // 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 });
+});

test/cypress/components/VnTitle.spec.js

@@ -1,20 +1,8 @@
 import VnTitle from 'src/components/common/VnTitle.vue';
-import { Quasar } from 'quasar';
 
 describe('<VnTitle />', () => {
-    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('<VnTitle />', () => {
         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('<VnTitle />', () => {
     });
 
     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('<VnTitle />', () => {
     });
 
     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('<VnTitle />', () => {
     });
 
     it('renders custom icon when icon prop is provided', () => {
-        cy.mount(VnTitle, {
-            ...globalConfig,
+        cy.vnMount(VnTitle, {
             props: {
                 url: 'https://example.com',
                 icon: 'custom_icon',