From 92f2918f2ce83b9986eb9bc195ef66fe85b91929 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 21 Nov 2023 10:56:31 +0100
Subject: [PATCH] VueUiChestnut add e2e component test

---
 cypress/fixtures/chestnut.json       | 432 +++++++++++++++++++++++++++
 src/components/vue-ui-chestnut.cy.js |  92 ++++++
 src/components/vue-ui-chestnut.vue   |  48 ++-
 3 files changed, 546 insertions(+), 26 deletions(-)
 create mode 100644 cypress/fixtures/chestnut.json
 create mode 100644 src/components/vue-ui-chestnut.cy.js

diff --git a/cypress/fixtures/chestnut.json b/cypress/fixtures/chestnut.json
new file mode 100644
index 00000000..14366ff7
--- /dev/null
+++ b/cypress/fixtures/chestnut.json
@@ -0,0 +1,432 @@
+{
+    "dataset": [
+        {
+            "name": "Root1",
+            "branches": [
+                {
+                    "name": "branch 1.1",
+                    "value": 200,
+                    "breakdown": [
+                        {
+                            "name": "break 1.1.1",
+                            "value": 50
+                        },
+                        {
+                            "name": "break 1.1.2",
+                            "value": 25
+                        },
+                        {
+                            "name": "break 1.1.3",
+                            "value": 25
+                        }
+                    ]
+                },
+                {
+                    "name": "branch 1.2",
+                    "value": 100,
+                    "breakdown": [
+                        {
+                            "name": "break 1.2.1",
+                            "value": 10
+                        },
+                        {
+                            "name": "break 1.2.2",
+                            "value": 20
+                        },
+                        {
+                            "name": "break 1.2.3",
+                            "value": 70
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Root2",
+            "branches": [
+                {
+                    "name": "branch 2.1",
+                    "value": 200,
+                    "breakdown": [
+                        {
+                            "name": "break 2.1.1",
+                            "value": 150
+                        },
+                        {
+                            "name": "break 2.1.2",
+                            "value": 25
+                        },
+                        {
+                            "name": "break 2.1.3",
+                            "value": 25
+                        }
+                    ]
+                },
+                {
+                    "name": "branch 2.2",
+                    "value": 300,
+                    "breakdown": [
+                        {
+                            "name": "break 2.2.1",
+                            "value": 100
+                        },
+                        {
+                            "name": "break 2.2.2",
+                            "value": 10
+                        },
+                        {
+                            "name": "break 2.2.3",
+                            "value": 150
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Root3",
+            "branches": [
+                {
+                    "name": "branch 3.1",
+                    "value": 120,
+                    "breakdown": [
+                        {
+                            "name": "break 3.1.1",
+                            "value": 100
+                        },
+                        {
+                            "name": "break 3.1.2",
+                            "value": 10
+                        },
+                        {
+                            "name": "break 3.1.3",
+                            "value": 10
+                        }
+                    ]
+                },
+                {
+                    "name": "branch 3.2",
+                    "value": 90,
+                    "breakdown": [
+                        {
+                            "name": "break 3.2.1",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 3.2.2",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 3.2.3",
+                            "value": 40
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Root4",
+            "branches": [
+                {
+                    "name": "branch 4.1",
+                    "value": 120,
+                    "breakdown": [
+                        {
+                            "name": "break 4.1.1",
+                            "value": 100
+                        },
+                        {
+                            "name": "break 4.1.2",
+                            "value": 10
+                        },
+                        {
+                            "name": "break 4.1.3",
+                            "value": 10
+                        }
+                    ]
+                },
+                {
+                    "name": "branch 4.2",
+                    "value": 90,
+                    "breakdown": [
+                        {
+                            "name": "break 4.2.1",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.2.2",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.2.3",
+                            "value": 40
+                        }
+                    ]
+                },
+                {
+                    "name": "branch 4.3",
+                    "value": 90,
+                    "breakdown": [
+                        {
+                            "name": "break 4.3.1",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.3.2",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.3.3",
+                            "value": 40
+                        }
+                    ]
+                },
+                {
+                    "name": "branch 4.4",
+                    "value": 90,
+                    "breakdown": [
+                        {
+                            "name": "break 4.4.1",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.4.2",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.4.3",
+                            "value": 40
+                        }
+                    ]
+                },
+                {
+                    "name": "branch 4.5",
+                    "value": 90,
+                    "breakdown": [
+                        {
+                            "name": "break 4.5.1",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.5.2",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.5.3",
+                            "value": 40
+                        }
+                    ]
+                },
+                {
+                    "name": "branch 4.6",
+                    "value": 90,
+                    "breakdown": [
+                        {
+                            "name": "break 4.6.1",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.6.2",
+                            "value": 30
+                        },
+                        {
+                            "name": "break 4.6.3",
+                            "value": 40
+                        }
+                    ]
+                },
+                {
+                    "name": "branch 4.7",
+                    "value": 10,
+                    "breakdown": [
+                        {
+                            "name": "break 4.7.1",
+                            "value": 3
+                        },
+                        {
+                            "name": "break 4.7.2",
+                            "value": 3
+                        },
+                        {
+                            "name": "break 4.7.3",
+                            "value": 4
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "config": {
+        "style": {
+            "fontFamily": "inherit",
+            "chart": {
+                "backgroundColor": "#FFFFFF",
+                "color": "#2D353C",
+                "layout": {
+                    "grandTotal": {
+                        "show": true,
+                        "fontSize": 20,
+                        "bold": true,
+                        "suffix": "",
+                        "prefix": "",
+                        "roundingValue": 0,
+                        "color": "#2D353C",
+                        "text": "Grand total",
+                        "offsetY": 0
+                    },
+                    "roots": {
+                        "stroke": "#FFFFFF",
+                        "strokeWidth": 5,
+                        "useGradient": true,
+                        "gradientIntensity": 20,
+                        "underlayerColor": "#FFFFFF",
+                        "labels": {
+                            "show": true,
+                            "fontSize": 16,
+                            "adaptColorToBackground": true,
+                            "color": "#FFFFFF",
+                            "bold": true,
+                            "roundingValue": 0,
+                            "prefix": "",
+                            "suffix": "",
+                            "name": {
+                                "color": "#2D353C",
+                                "fontSize": 16,
+                                "bold": true
+                            }
+                        }
+                    },
+                    "verticalSeparator": {
+                        "stroke": "#FFFFFF",
+                        "strokeWidth": 5
+                    },
+                    "links": {
+                        "opacity": 10
+                    },
+                    "branches": {
+                        "stroke": "#FFFFFF",
+                        "strokeWidth": 0,
+                        "borderRadius": 6,
+                        "useGradient": true,
+                        "gradientIntensity": 20,
+                        "underlayerColor": "#FFFFFF",
+                        "widthRatio": 1.5,
+                        "labels": {
+                            "show": true,
+                            "fontSize": 14,
+                            "color": "#2D353C",
+                            "bold": true,
+                            "dataLabels": {
+                                "show": true,
+                                "hideUnderValue": 5,
+                                "fontSize": 14,
+                                "roundingValue": 0,
+                                "roundingPercentage": 0,
+                                "prefix": "",
+                                "suffix": ""
+                            }
+                        }
+                    },
+                    "nuts": {
+                        "offsetX": 20,
+                        "useGradient": true,
+                        "gradientIntensity": 30,
+                        "selected": {
+                            "useMotion": true,
+                            "useGradient": true,
+                            "gradientIntensity": 40,
+                            "roundingValue": 0,
+                            "roundingPercentage": 0,
+                            "labels": {
+                                "dataLabels": {
+                                    "hideUnderValue": 5,
+                                    "color": "#2D353C",
+                                    "fontSize": 12,
+                                    "bold": true,
+                                    "prefix": "",
+                                    "suffix": ""
+                                },
+                                "core": {
+                                    "total": {
+                                        "color": "#2D353C",
+                                        "fontSize": 24,
+                                        "bold": false
+                                    },
+                                    "value": {
+                                        "color": "#2D353C",
+                                        "fontSize": 24,
+                                        "bold": true,
+                                        "prefix": "",
+                                        "suffix": ""
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    "legend": {
+                        "fontSize": 16,
+                        "color": "#2D353C",
+                        "roundingValue": 0,
+                        "roundingPercentage": 0,
+                        "prefix": "",
+                        "suffix": ""
+                    },
+                    "title": {
+                        "color": "#2D353C",
+                        "fontSize": 20,
+                        "text": "Title",
+                        "bold": true,
+                        "offsetY": 0,
+                        "subtitle": {
+                            "text": "Subtitle",
+                            "color": "#CCCCCC",
+                            "bold": false,
+                            "fontSize": 16,
+                            "offsetY": 0
+                        }
+                    }
+                }
+            }
+        },
+        "table": {
+            "show": false,
+            "th": {
+                "backgroundColor": "#FAFAFA",
+                "color": "#2D353C",
+                "outline": "1px solid #e1e5e8",
+                "translations": {
+                    "rootName": "root name",
+                    "rootValue": "root value",
+                    "rootToTotal": "%/total",
+                    "branchName": "branch name",
+                    "branchValue": "branch value",
+                    "branchToRoot": "%/root",
+                    "branchToTotal": "%/total",
+                    "nutName": "nut name",
+                    "nutValue": "nut value",
+                    "nutToBranch": "%/branch",
+                    "nutToRoot": "%/root",
+                    "nutToTotal": "%/total"
+                }
+            },
+            "td": {
+                "backgroundColor": "#FFFFFF",
+                "color": "#2D353C",
+                "outline": "1px solid #e1e5e8",
+                "roundingValue": 0,
+                "roundingPercentage": 0
+            }
+        },
+        "userOptions": {
+            "show": true,
+            "title": "options",
+            "labels": {
+                "showTable": "Show table"
+            }
+        },
+        "translations": {
+            "total": "Total",
+            "proportionToTree": "of grand total",
+            "of": "of"
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/vue-ui-chestnut.cy.js b/src/components/vue-ui-chestnut.cy.js
new file mode 100644
index 00000000..0589a5ad
--- /dev/null
+++ b/src/components/vue-ui-chestnut.cy.js
@@ -0,0 +1,92 @@
+import VueUiChestnut from './vue-ui-chestnut.vue'
+
+describe('<VueUiChestnut />', () => {
+  beforeEach(function () {
+    cy.fixture('chestnut.json').as('fixture');
+    cy.viewport(1000, 750);
+  });
+
+  it('renders', () => {
+    cy.get('@fixture').then((fixture) => {
+      cy.mount(VueUiChestnut, {
+        props: {
+          dataset: fixture.dataset,
+          config: fixture.config
+        },
+      });
+
+      const rootTotals = fixture.dataset.map((d) => {
+        return d.branches.map((b) => b.value).reduce((a, b) => a + b, 0)
+      }).sort((a, b) => b - a);
+
+      const branchesTotals = fixture.dataset.flatMap((d) => {
+        return d.branches.map((b) => b.value)
+      }).sort((a, b) => b - a);
+
+      cy.get(`[data-cy="chestnut-title"]`)
+        .should('exist')
+        .contains(fixture.config.style.chart.layout.title.text);
+
+      cy.get(`[data-cy="chestnut-subtitle"]`)
+        .should('exist')
+        .contains(fixture.config.style.chart.layout.title.subtitle.text);
+
+      for (let i = 0; i < fixture.dataset.length; i += 1) {
+        cy.get(`[data-cy="chestnut-root-${i}"]`)
+          .should('exist')
+          .wait(50)
+          .click({ force: true })
+
+        cy.get(`[data-cy="chestnut-root-label-${i}"]`)
+          .should('exist')
+          .contains(rootTotals[i])
+      }
+
+      for (let i = 0; i < branchesTotals.length; i += 1) {
+        cy.get(`[data-cy="chestnut-branch-${i}"]`).then(($branch) => {
+          cy.wrap($branch)
+            .should('exist')
+            .wait(50)
+            .click({ force: true });
+
+          if (i === branchesTotals.length - 1) {
+            cy.wrap($branch)
+              .wait(50)
+              .click({ force: true })
+          }
+        });
+
+        cy.get(`[data-cy="chestnut-nut-${i}"]`)
+          .should('exist');
+
+        cy.get(`[data-cy="chestnut-trap-${i}"]`).then(($trap) => {
+          cy.wrap($trap)
+            .wait(50)
+            .click({ force: true });
+
+            if(i === branchesTotals.length - 1) {
+              cy.get(`[data-cy="chestnut-legend"]`).click()
+            }
+        })
+      }
+
+      cy.get(`[data-cy="chestnut-summary"]`).click();
+
+      cy.get(`[data-cy="chestnut-checkbox-table"]`).check();
+      cy.viewport(1000, 1600);
+
+      cy.get(`[data-cy="chestnut-table"]`)
+        .should('exist');
+
+      cy.get(`[data-cy="chestnut-pdf"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.layout.title.text}.pdf`);
+      cy.get(`[data-cy="chestnut-xls"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.layout.title.text}.xlsx`);
+      cy.clearDownloads();
+
+      cy.get(`[data-cy="chestnut-summary"]`).click();
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/components/vue-ui-chestnut.vue b/src/components/vue-ui-chestnut.vue
index f9ef0483..8aedf959 100644
--- a/src/components/vue-ui-chestnut.vue
+++ b/src/components/vue-ui-chestnut.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, computed, onMounted, nextTick } from "vue";
 import { treeShake, palette, opacity, shiftHue, adaptColorToBackground, makeDonut, convertColorToHex, convertConfigColors, makeXls } from "../lib";
 import pdf from "../pdf.js";
 import mainConfig from "../default_configs.json";
@@ -208,13 +208,6 @@ function resetTree() {
     selectedRoot.value = null;
 }
 
-const selectedRootIndex = computed(() => {
-    if(selectedNut.value) {
-        return selectedNut.value.rootIndex;
-    }
-    return null;
-});
-
 function isFocused(part) {
     if(!selectedRoot.value) {
         if(selectedNut.value === null && selectedBranch.value === null) return true;
@@ -336,15 +329,10 @@ function isArcBigEnough(arc) {
     return arc.proportion * 100 > chestnutConfig.value.style.chart.layout.nuts.selected.labels.dataLabels.hideUnderValue;
 }
 
-function displayArcPercentage(arc, stepBreakdown) {
-    return isNaN(arc.value / sumValues(stepBreakdown)) ? 0 : ((arc.value / sumValues(stepBreakdown)) * 100).toFixed(0) + "%";
-}
-
 function sumValues(source) {
     return [...source].map(s => s.value).reduce((a, b) => a + b, 0);
 }
 
-
 onMounted(() => {
     const height = totalBranches.value * (svg.value.branchSize + svg.value.gap) + svg.value.padding.top + svg.value.padding.bottom;
     svg.value.height = height;
@@ -439,14 +427,14 @@ defineExpose({
     >
         <!-- OPTIONS -->
         <details class="vue-ui-chestnut-user-options" :style="`background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`" data-html2canvas-ignore v-if="chestnutConfig.userOptions.show" ref="details">
-            <summary :style="`background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`">{{ chestnutConfig.userOptions.title }}</summary>
+            <summary data-cy="chestnut-summary" :style="`background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`">{{ chestnutConfig.userOptions.title }}</summary>
             <div class="vue-ui-chestnut-user-option-item">
-                    <input type="checkbox" :id="`vue-ui-chestnut-option-table_${uid}`" :name="`vue-ui-chestnut-option-table_${uid}`"
-                    v-model="mutableConfig.showTable">
-                    <label :for="`vue-ui-chestnut-option-table_${uid}`">{{ chestnutConfig.userOptions.labels.showTable }}</label>
-                </div>
+                <input data-cy="chestnut-checkbox-table" type="checkbox" :id="`vue-ui-chestnut-option-table_${uid}`" :name="`vue-ui-chestnut-option-table_${uid}`"
+                v-model="mutableConfig.showTable">
+                <label :for="`vue-ui-chestnut-option-table_${uid}`">{{ chestnutConfig.userOptions.labels.showTable }}</label>
+            </div>
             <div class="vue-ui-chestnut-user-options-items" :style="`background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`">
-                <button class="vue-ui-chestnut-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`color:${chestnutConfig.style.chart.color}`">
+                <button data-cy="chestnut-pdf" class="vue-ui-chestnut-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`color:${chestnutConfig.style.chart.color}`">
                     <svg class="vue-ui-chestnut-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="chestnutConfig.style.chart.color" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                         <path d="M18 16v.01" />
@@ -457,7 +445,7 @@ defineExpose({
                     </svg>
                     <span v-else>PDF</span>
                 </button>
-                <button class="vue-ui-chestnut-button" @click="generateXls" :style="`background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`">
+                <button data-cy="chestnut-xls" class="vue-ui-chestnut-button" @click="generateXls" :style="`background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`">
                     XLSX
                 </button>
             </div>
@@ -468,6 +456,7 @@ defineExpose({
             <!-- TITLE AS G -->
             <g v-if="!selectedNut">
                 <text
+                    data-cy="chestnut-title"
                     v-if="chestnutConfig.style.chart.layout.title.text"
                     text-anchor="middle"
                     :fill="chestnutConfig.style.chart.layout.title.color"
@@ -480,6 +469,7 @@ defineExpose({
                     {{ chestnutConfig.style.chart.layout.title.text }}
                 </text>
                 <text
+                    data-cy="chestnut-subtitle"
                     v-if="chestnutConfig.style.chart.layout.title.subtitle.text"
                     text-anchor="middle"
                     :fill="chestnutConfig.style.chart.layout.title.subtitle.color"
@@ -596,7 +586,8 @@ defineExpose({
                 :style="`cursor:pointer; opacity:${isFocused(root) ? 1 : 0.05}`"
             />
             <circle 
-                v-for="root in roots" 
+                v-for="(root, i) in roots" 
+                :data-cy="`chestnut-root-${i}`"
                 :cx="root.x" 
                 :cy="root.y" 
                 :r="root.r" 
@@ -608,7 +599,8 @@ defineExpose({
             />
             <g v-if="chestnutConfig.style.chart.layout.roots.labels.show">
                 <!-- ROOT TOTAL -->
-                <text v-for="root in roots"
+                <text v-for="(root, i) in roots"
+                    :data-cy="`chestnut-root-label-${i}`"
                     :x="root.x"
                     :y="root.y + chestnutConfig.style.chart.layout.roots.labels.fontSize / 2.6"
                     text-anchor="middle"
@@ -652,7 +644,8 @@ defineExpose({
                 @click="pickBranch(branch)"
             />
             <rect 
-                v-for="branch in branches"
+                v-for="(branch, i) in branches"
+                :data-cy="`chestnut-branch-${i}`"
                 :x="branch.x1"
                 :y="branch.y1"
                 :height="svg.branchSize"
@@ -686,7 +679,7 @@ defineExpose({
 
             <!-- NUTS -->
 
-            <g v-for="branch in branches">
+            <g v-for="(branch, b) in branches">
                 <path 
                     v-for="(arc, i) in makeDonut(
                         { series: branch.breakdown, base:1 },
@@ -694,7 +687,8 @@ defineExpose({
                         branch.y1 + svg.branchSize / 2,
                         svg.branchSize / 3,
                         svg.branchSize / 3
-                    )" 
+                    )"
+                    :data-cy="`chestnut-nut-${b}`"
                     :d="arc.path" 
                     :stroke="arc.color" 
                     :stroke-width="10" 
@@ -713,6 +707,7 @@ defineExpose({
                 />
                 <!-- tooltip trap -->
                 <circle
+                    :data-cy="`chestnut-trap-${b}`"
                     :fill="chestnutConfig.style.chart.layout.nuts.useGradient ? `url(#nut_${uid})` : 'transparent'"
                     :cx="branch.x2 + 24 + chestnutConfig.style.chart.layout.nuts.offsetX"
                     :cy="branch.y1 + svg.branchSize / 2"
@@ -774,6 +769,7 @@ defineExpose({
             <g v-if="selectedNut && openNut">
                 <!-- NUT PICK LEGEND -->
                 <foreignObject
+                    data-cy="chestnut-legend"
                     :x="0"
                     :y="placeLegendTopOrBottom()"
                     :height="svg.height - drawableArea.bottom"
@@ -980,7 +976,7 @@ defineExpose({
         </svg>
         <!-- DATA TABLE -->
         <div @click="closeDetails" class="vue-ui-chestnut-table" :style="`width:100%;overflow-x:auto`" v-if="mutableConfig.showTable">
-            <table>
+            <table data-cy="chestnut-table">
                 <thead>
                     <tr v-if="chestnutConfig.style.chart.layout.title.text">
                         <th colspan="12" :style="`background:${chestnutConfig.table.th.backgroundColor};color:${chestnutConfig.table.th.color};outline:${chestnutConfig.table.th.outline}`">