Tests - Improve VueUiParallelCoordinatePlot component test

Author: graphieros

src/atoms/Shape.vue

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

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

@@ -46,4 +46,36 @@ describe('<VueUiParallelCoordinatePlot />', () => {
             cy.get('[data-cy="datapoint-line"]').should('exist').and('be.visible').and('have.length', dataset.flatMap(d => d.series).length);
         });
     });
+
+    it('emits', () => {
+        cy.mount(VueUiParallelCoordinatePlot, {
+            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('.legend-shape-circle').first().click({ force: true }).then(() => {
+                expect(wrapper.emitted('selectDatapoint')).to.exist;
+                expect(wrapper.emitted('selectDatapoint')[0][0]).to.have.keys(
+                    'axisIndex',
+                    'comment',
+                    'datapointIndex',
+                    'name',
+                    'seriesIndex',
+                    'seriesName',
+                    'value',
+                    'x',
+                    'y'
+                );
+                expect(wrapper.emitted('selectDatapoint')[0][0].axisIndex).to.equal(0);
+                expect(wrapper.emitted('selectDatapoint')[0][0].seriesIndex).to.equal(0);
+            });
+        });
+    });
 });

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

@@ -744,7 +744,7 @@ defineExpose({
                 <g v-for="(serieSet, i) in serie.series">
                     <!-- PLOTS -->
                     <g v-if="FINAL_CONFIG.style.chart.plots.show">
-                        <Shape 
+                        <Shape
                             v-for="dp in serieSet.datapoints"
                             :plot="{ x: dp.x, y: dp.y }"
                             :color="serie.color"
@@ -880,7 +880,7 @@ defineExpose({
                 @clickMarker="({ legend }) => { segregate(legend.id); selectLegend(legend) }"
             >
                 <template #item="{ legend, index }">
-                    <div :data-cy="`legend-item-${index}`" @click="legend.segregate(); selectLegend(legend)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
+                    <div data-cy="legend-item" @click="legend.segregate(); selectLegend(legend)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
                         {{ legend.name }}
                     </div>
                 </template>