VueUiSparkbar add e2e component test

Author: graphieros

cypress/fixtures/sparkbar.json

@@ -0,0 +1,102 @@
+{
+    "dataset": [
+        {
+          "name": "KPI 1",
+          "value": 88.88,
+          "suffix": "%",
+          "prefix": "v.",
+          "rounding": 1
+        },
+        {
+          "name": "KPI 2",
+          "value": 77.77,
+          "suffix": "%",
+          "prefix": "v.",
+          "rounding": 2
+        },
+        {
+          "name": "KPI 3",
+          "value": 66.66,
+          "suffix": "%",
+          "prefix": "v.",
+          "rounding": 0
+        },
+        {
+          "name": "KPI 4",
+          "value": 55.55,
+          "suffix": "%",
+          "prefix": "v.",
+          "rounding": 0
+        },
+        {
+          "name": "KPI 5",
+          "value": 44.44,
+          "suffix": "%",
+          "prefix": "v.",
+          "rounding": 0
+        },
+        {
+          "name": "KPI 6",
+          "value": 33.33,
+          "suffix": "%",
+          "prefix": "v.",
+          "rounding": 0
+        },
+        {
+          "name": "KPI 7",
+          "value": 22.22,
+          "suffix": "%",
+          "prefix": "v.",
+          "rounding": 0
+        },
+        {
+          "name": "KPI 8",
+          "value": 11.11,
+          "suffix": "%",
+          "prefix": "v.",
+          "rounding": 0
+        },
+        {
+          "name": "KPI 9",
+          "value": 0,
+          "suffix": "%",
+          "prefix": "v.",
+          "rounding": 0
+        }
+      ],
+    "config": {
+        "style": {
+            "backgroundColor": "#FFFFFF",
+            "fontFamily": "inherit",
+            "layout": {
+                "independant": true,
+                "percentage": true,
+                "target": 0
+            },
+            "gutter": {
+                "backgroundColor": "#e1e5e8"
+            },
+            "bar": {
+                "gradient": {
+                    "show": true,
+                    "intensity": 40,
+                    "underlayerColor": "#FFFFFF"
+                }
+            },
+            "labels": {
+                "fontSize": 16,
+                "name": {
+                    "position": "top",
+                    "width": "100%",
+                    "color": "#2D353C",
+                    "bold": false
+                },
+                "value": {
+                    "show": true,
+                    "bold": true
+                }
+            },
+            "gap": 4
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+import VueUiSparkbar from './vue-ui-sparkbar.vue'
+
+describe('<VueUiSparkbar />', () => {
+  beforeEach(function () {
+    cy.fixture('sparkbar.json').as('fixture');
+    cy.viewport(1200, 610);
+  });
+
+  it('renders with different config attributes', function () {
+    cy.get('@fixture').then((fixture) => {
+      cy.mount(VueUiSparkbar, {
+        props: {
+          dataset: fixture.dataset,
+          config: fixture.config
+        }
+      });
+
+      for(let i = 0; i < fixture.dataset.length; i += 1) {
+        cy.get(`[data-cy="sparkbar-svg-${i}"]`).should('exist');
+        cy.get(`[data-cy="sparkbar-name-${i}"]`)
+          .should('exist')
+          .contains(fixture.dataset[i].name)
+
+        cy.get(`[data-cy="sparkbar-value-${i}"]`)
+          .should('exist')
+          .contains(`${fixture.dataset[i].prefix}${Number(fixture.dataset[i].value.toFixed(fixture.dataset[i].rounding)).toLocaleString()}${fixture.dataset[i].suffix}`)
+      }
+    });
+  });
+})

src/components/vue-ui-sparkbar.vue

@@ -85,12 +85,12 @@ function ratioTo(val) {
         <template v-for="(bar, i) in drawableDataset">
             <div :style="`display:flex !important;${['left', 'right'].includes(sparkbarConfig.style.labels.name.position) ? 'flex-direction:row !important' : 'flex-direction:column !important'};gap:${sparkbarConfig.style.gap}px !important;${sparkbarConfig.style.labels.name.position === 'right' ? 'row-reverse !important' : ''};align-items:center;${dataset.length > 0 && i !== dataset.length - 1 ? 'margin-bottom:6px' : ''}`">
                 <div :style="`width:${sparkbarConfig.style.labels.name.width};${['right','top'].includes(sparkbarConfig.style.labels.name.position) ? 'text-align:left' : 'text-align:right'};color:${sparkbarConfig.style.labels.name.color};font-size:${sparkbarConfig.style.labels.fontSize}px;font-weight:${sparkbarConfig.style.labels.name.bold ? 'bold' : 'normal'}`">
-                    <span>{{ bar.name }}</span>
-                    <span v-if="sparkbarConfig.style.labels.value.show" :style="`font-weight:${sparkbarConfig.style.labels.value.bold ? 'bold' : 'normal'}`">
+                    <span :data-cy="`sparkbar-name-${i}`">{{ bar.name }}</span>
+                    <span :data-cy="`sparkbar-value-${i}`" v-if="sparkbarConfig.style.labels.value.show" :style="`font-weight:${sparkbarConfig.style.labels.value.bold ? 'bold' : 'normal'}`">
                        : {{ bar.prefix ? bar.prefix : '' }}{{ Number(bar.value.toFixed(bar.rounding ? bar.rounding : 0)).toLocaleString() }}{{ bar.suffix ? bar.suffix : '' }}
                     </span>
                 </div>
-                <svg :viewBox="`0 0 ${svg.width} ${svg.height}`" width="100%">
+                <svg :data-cy="`sparkbar-svg-${i}`" :viewBox="`0 0 ${svg.width} ${svg.height}`" width="100%">
                     <defs>
                         <linearGradient
                             x1="0%"
@@ -107,7 +107,6 @@ function ratioTo(val) {
                     <rect :height="svg.height" :width="svg.width * ratioTo(bar.value)" :x="0" :y="0" :fill="sparkbarConfig.style.bar.gradient.underlayerColor" :rx="svg.height / 2" />
                     <rect :height="svg.height" :width="svg.width * ratioTo(bar.value)" :x="0" :y="0" :fill="sparkbarConfig.style.bar.gradient.show ? `url(#sparkbar_gradient_${i}_${uid})` : bar.color" :rx="svg.height / 2" />
                 </svg>
-                
             </div>
         </template>
     </div>