Tests - Improve VueUiNestedDonuts component test

Author: graphieros

src/atoms/Shape.vue

@@ -84,7 +84,7 @@ const d = computed(() => {
 <template>
     <g data-cy="atom-shape"> 
         <circle
-            class="legend-shape-circle"
+            class="vdui-shape-circle"
             v-if="config && config.points === 1"
             :cx="plot.x"
             :cy="plot.y"
@@ -97,7 +97,7 @@ const d = computed(() => {
             @click="emit('click')"
         />
         <path
-            class="legend-shape-polygon"
+            class="vdui-shape-polygon"
             v-if="config && config.points >= limit"
             :d="d"
             :fill="color"
@@ -108,7 +108,7 @@ const d = computed(() => {
             @click="emit('click')"
         />
         <polygon 
-            class="legend-shape-star"
+            class="vdui-shape-star"
             v-if="starPoints"
             :points="starPoints"
             :fill="color"

src/components/vue-ui-nested-donuts.cy.js

@@ -45,4 +45,51 @@ describe('<VueUiNestedDonuts />', () => {
             cy.get('[data-cy="datapoint-value"]').should('exist').and('be.visible').and('have.length', dataset.map(d => d.series.length).reduce((a, b) => a + b, 0));
         });
     });
+    
+    it('emits', () => {
+        cy.mount(VueUiNestedDonuts, {
+            props: {
+                dataset,
+                config
+            }
+        }).then(({ wrapper }) => {
+            cy.log('@selectLegend');
+            cy.get('[data-cy="legend-item"]').first().click({ force: true }).then(() => {
+                expect(wrapper.emitted('selectLegend')).to.exist;
+            });
+
+            cy.log('@selectDatapoint');
+            cy.get('[data-cy="tooltip-trap"]').first().click({ force: true }).then(() => {
+                expect(wrapper.emitted('selectDatapoint')).to.exist;
+                expect(wrapper.emitted('selectDatapoint')[0][0]).to.have.keys('datapoint', 'index');
+                expect(wrapper.emitted('selectDatapoint')[0][0].index).to.equal(0);
+                expect(wrapper.emitted('selectDatapoint')[0][0].datapoint).to.have.keys(
+                    'absoluteValues',
+                    'arcOf',
+                    'arcOfId',
+                    'arcSlice',
+                    'center',
+                    'color',
+                    'cx',
+                    'cy',
+                    'datasetIndex',
+                    'endX',
+                    'endY',
+                    'firstSeparator',
+                    'id',
+                    'name',
+                    'path',
+                    'proportion',
+                    'ratio',
+                    'separator',
+                    'seriesIndex',
+                    'startX',
+                    'startY',
+                    'value'
+                );
+                expect(wrapper.emitted('selectDatapoint')[0][0].datapoint.datasetIndex).to.equal(0);
+                expect(wrapper.emitted('selectDatapoint')[0][0].datapoint.seriesIndex).to.equal(0);
+            })
+        });
+    });
 });

src/components/vue-ui-nested-donuts.vue

@@ -1075,7 +1075,7 @@ defineExpose({
                     </div>
                 </template>
                 <template #item="{ legend, index }">
-                    <div :data-cy="`legend-item-${index}`" @click="segregateDonut(legend)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
+                    <div data-cy="legend-item" @click="segregateDonut(legend)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
                     {{ legend.name }}: {{ applyDataLabel(
                         FINAL_CONFIG.style.chart.layout.labels.dataLabels.formatter,
                         legend.value,

src/components/vue-ui-parallel-coordinate-plot.cy.js

@@ -60,7 +60,7 @@ describe('<VueUiParallelCoordinatePlot />', () => {
             });
 
             cy.log('@selectDatapoint');
-            cy.get('.legend-shape-circle').first().click({ force: true }).then(() => {
+            cy.get('.vdui-shape-circle').first().click({ force: true }).then(() => {
                 expect(wrapper.emitted('selectDatapoint')).to.exist;
                 expect(wrapper.emitted('selectDatapoint')[0][0]).to.have.keys(
                     'axisIndex',