VueUiXy VueUiDonut e2e test for pdf & xlsx downloads

Author: graphieros

cypress.config.js

@@ -1,10 +1,31 @@
 import { defineConfig } from "cypress";
 
+import fs from "fs";
+
 export default defineConfig({
   component: {
     devServer: {
       framework: "vue",
       bundler: "vite",
     },
+    setupNodeEvents(on, config) {
+      on('task', {
+        clearDownloads() {
+          const downloadsFolder = 'cypress/downloads';
+    
+          try {
+            fs.readdirSync(downloadsFolder).forEach((file) => {
+              const filePath = `${downloadsFolder}/${file}`;
+              fs.unlinkSync(filePath);
+            });
+            console.log('Downloads folder cleared.');
+            return null;
+          } catch (err) {
+            console.error(`Error clearing downloads folder: ${err}`);
+            return err;
+          }
+        },
+      });
+    }
   },
 });

cypress/support/commands.js

@@ -22,4 +22,8 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('clearDownloads', () => {
+    cy.task('clearDownloads');
+  });

cypress/support/index.js

@@ -0,0 +1 @@
+import '../plugins';

package.json

@@ -58,8 +58,6 @@
     "preview": "vite preview",
     "test": "vitest"
   },
-  "dependencies": {
-  },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
     "cypress": "^13.5.1",

src/components/vue-ui-donut.cy.js

@@ -1,4 +1,4 @@
-import VueUiDonut from './vue-ui-donut.vue'
+import VueUiDonut from './vue-ui-donut.vue';
 
 describe('<VueUiDonut />', () => {
   beforeEach(function () {
@@ -298,6 +298,17 @@ describe('<VueUiDonut />', () => {
           });
         }
       });
+
+      cy.get(`[data-cy="donut-pdf"]`).click();
+      cy.wait(5000);
+      cy.readFile('cypress\\Downloads\\Title.pdf');
+
+      cy.get(`[data-cy="donut-xls"]`).click();
+      cy.wait(3000);
+      cy.readFile('cypress\\Downloads\\Title.xlsx');
+
+      cy.clearDownloads();
+
     });
   });
 })

src/components/vue-ui-donut.vue

@@ -272,7 +272,7 @@ defineExpose({
                     v-model="mutableConfig.showTable">
                     <label :for="`vue-ui-donut-option-table_${uid}`">{{ donutConfig.userOptions.labels.showTable }}</label>
                 </div>
-                <button class="vue-ui-donut-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`background:${donutConfig.style.chart.backgroundColor};color:${donutConfig.style.chart.color}`">
+                <button data-cy="donut-pdf" class="vue-ui-donut-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`background:${donutConfig.style.chart.backgroundColor};color:${donutConfig.style.chart.color}`">
                     <svg class="vue-ui-donut-print-icon" xmlns="http://www.w3.org/2000/svg" v-if="isPrinting" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" :stroke="donutConfig.style.chart.color" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                         <path d="M18 16v.01" />
@@ -283,7 +283,7 @@ defineExpose({
                     </svg>
                     <span v-else>PDF</span>
                 </button>
-                <button class="vue-ui-donut-button" @click="generateXls" :style="`background:${donutConfig.style.chart.backgroundColor};color:${donutConfig.style.chart.color}`">
+                <button data-cy="donut-xls" class="vue-ui-donut-button" @click="generateXls" :style="`background:${donutConfig.style.chart.backgroundColor};color:${donutConfig.style.chart.color}`">
                     XLSX
                 </button>
             </div>

src/components/vue-ui-xy.cy.js

@@ -174,6 +174,19 @@ describe('<VueUiXy />', () => {
       cy.get(`[data-cy="xy-tooltip"]`).should('not.exist');
       cy.get(`[data-cy="xy-tooltip-trap-6"]`).trigger("mouseenter");
       cy.get(`[data-cy="xy-tooltip"]`).should('exist');
+      cy.get(`[data-cy="xy-tooltip-trap-6"]`).trigger("mouseleave");
+
+      cy.get(`[data-cy="xy-summary"]`).click({force:true});
+
+      cy.get(`[data-cy="xy-pdf"]`).click();
+      cy.wait(5000);
+      cy.readFile('cypress\\Downloads\\Title.pdf');
+
+      cy.get(`[data-cy="xy-xls"]`).click();
+      cy.wait(3000);
+      cy.readFile('cypress\\Downloads\\Title.xlsx');
+
+      cy.clearDownloads();
 
     });
   });

src/components/vue-ui-xy.vue

@@ -12,7 +12,7 @@
         </div>
 
         <details class="vue-ui-xy-user-options" :style="`background:${chartConfig.chart.backgroundColor};color:${chartConfig.chart.color}`" data-html2canvas-ignore v-if="chartConfig.chart.userOptions.show" ref="details">
-            <summary :style="`background:${chartConfig.chart.backgroundColor};color:${chartConfig.chart.color}`">{{ chartConfig.chart.userOptions.title }}</summary>
+            <summary data-cy="xy-summary" :style="`background:${chartConfig.chart.backgroundColor};color:${chartConfig.chart.color}`">{{ chartConfig.chart.userOptions.title }}</summary>
             <div class="vue-ui-xy-user-options-items" :style="`background:${chartConfig.chart.backgroundColor};color:${chartConfig.chart.color}`">
                 <div class="vue-ui-xy-user-option-item">
                     <input type="checkbox" :id="`vue-ui-xy-option-datalabels_${uniqueId}`" :name="`vue-ui-xy-option-datalabels_${uniqueId}`"
@@ -34,7 +34,7 @@
                     v-model="mutableConfig.showTable">
                     <label :for="`vue-ui-xy-option-table_${uniqueId}`">{{ chartConfig.chart.userOptions.labels.showTable }}</label>
                 </div>
-                <button class="vue-ui-xy-button" @click="generatePdf" :disabled="isPrinting" :style="`margin-top: 12px; background:${chartConfig.chart.backgroundColor};color:${chartConfig.chart.color}`">
+                <button data-cy="xy-pdf" class="vue-ui-xy-button" @click="generatePdf" :disabled="isPrinting" :style="`margin-top: 12px; background:${chartConfig.chart.backgroundColor};color:${chartConfig.chart.color}`">
                     <svg class="vue-ui-xy-print-icon" xmlns="http://www.w3.org/2000/svg" v-if="isPrinting" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" :stroke="chartConfig.chart.color" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                         <path d="M18 16v.01" />
@@ -45,7 +45,7 @@
                     </svg>
                     <span v-else>PDF</span>
                 </button>
-                <button class="vue-ui-xy-button" @click="generateXls" :style="`background:${chartConfig.chart.backgroundColor};color:${chartConfig.chart.color}`">
+                <button data-cy="xy-xls" class="vue-ui-xy-button" @click="generateXls" :style="`background:${chartConfig.chart.backgroundColor};color:${chartConfig.chart.color}`">
                     XLSX
                 </button>
             </div>