Tests - Legend - Add emit test

Author: graphieros

src/atoms/Legend.cy.js

@@ -1,4 +1,4 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, h, reactive, ref } from 'vue';
 import Legend from './Legend.vue';
 
 describe('<Legend />', () => {
@@ -53,6 +53,7 @@ describe('<Legend />', () => {
             components: { Legend },
             setup() {
                 const legendSet = legend
+                const leg = ref(null);
 
                 const config = reactive({
                     backgroundColor: '#fff',
@@ -62,10 +63,10 @@ describe('<Legend />', () => {
                     cy: 'legend-container'
                 });
 
-                return { legendSet, config };
+                return { legendSet, config, leg };
             },
             template: `
-                <Legend :legendSet="legendSet" :config="config">
+                <Legend ref="leg" :legendSet="legendSet" :config="config">
                     <template #legendTitle>
                         <div data-cy="legend-title" style="width:100%;text-align:center;font-weight:bold;padding:1rem">Legend Title</div>
                     </template>
@@ -74,13 +75,53 @@ describe('<Legend />', () => {
                     </template>
                 </Legend>
             `
-        }));
-
-        cy.get('[data-cy="legend-title"]').should('exist').and('contain', 'Legend Title');
-        cy.get('[data-cy="legend-item"]').as('items').should('have.length', 7);
-        cy.get('@items').each((item, i) => {
-            cy.wrap(item).as('item')
-            cy.get('@item').should('contain', `${legend[i].name} - value:${legend[i].value}`)
+        })).then(({ wrapper }) => {
+            cy.get('[data-cy="legend-title"]').should('exist').and('contain', 'Legend Title');
+            cy.get('[data-cy="legend-item"]').as('items').should('have.length', 7);
+            cy.get('@items').each((item, i) => {
+                cy.wrap(item).as('item')
+                cy.get('@item').should('contain', `${legend[i].name} - value:${legend[i].value}`)
+            })
         })
     });
-});
+
+    it('emits clickMarker with correct payload', () => {
+        const config = {
+            backgroundColor: '#fff',
+            fontSize: 14,
+            color: '#333',
+            paddingBottom: 12,
+            cy: 'legend-container',
+        };
+
+        const handlers = { onMarker: () => {} };
+        cy.spy(handlers, 'onMarker').as('onMarker');
+
+        cy.mount(Legend, {
+            props: {
+                legendSet: legend,
+                config,
+                onClickMarker: handlers.onMarker,
+            },
+            slots: {
+                legendTitle: () =>
+                    h('div', {
+                        'data-cy': 'legend-title',
+                        style: 'width:100%;text-align:center;font-weight:bold;padding:1rem',
+                    }, 'Legend Title'),
+                item: ({ legend: item }) =>
+                    h('div', { 'data-cy': 'legend-item' }, `${item.name} - value:${item.value}`),
+            },
+        });
+
+        cy.get('[data-cy="legend-marker"]').should('have.length', legend.length);
+        cy.get('[data-cy="legend-marker"]').first().click();
+
+        cy.get('@onMarker').should('have.been.calledOnce');
+        cy.get('@onMarker').its('firstCall.args.0').then((payload) => {
+            expect(payload).to.have.property('i', 0);
+            expect(payload.legend).to.include(legend[0]);
+        });
+    });
+
+});

src/atoms/Legend.vue

@@ -44,7 +44,8 @@ function handleClick(legend, i) {
         <slot name="legendTitle" :titleSet="legendSet" />
         <div v-for="(legend, i) in legendSet" :key="`legend_${i}`"
             :class="{ 'vue-data-ui-legend-item': true, 'active': clickable }">
-            <svg 
+            <svg
+                data-cy="legend-marker"
                 v-if="legend.shape" 
                 @click="handleClick(legend, i)" 
                 height="1em"