Tests - Add tests for VueUiDag

Author: graphieros

cypress/fixtures/vdui-components.js

@@ -5,6 +5,41 @@
  *
  */
 export const components = [
+    {
+        name: 'VueUiDag',
+        dataset: {
+            nodes: [
+                { id: 'A', label: 'AAA' },
+                { id: 'B', label: 'BBB' },
+                { id: 'C', label: 'CCC' },
+            ],
+            edges: [
+                { from: 'A', to: 'B' },
+                { from: 'A', to: 'C' },
+            ]
+        },
+        config: {
+            style: {
+                chart: {
+                    nodes: {
+                        tooltip: {
+                            showOnClick: true
+                        }
+                    },
+                    midpoints: {
+                        show: true
+                    },
+                    title: {
+                        text: 'Title',
+                        subtitle: {
+                            text: 'Subtitle'
+                        }
+                    }
+                }
+            }
+        },
+        wrapperClass: '.vue-ui-dag'
+    },
     {
         name: 'VueUiChord',
         dataset: {

src/atoms/BaseZoomControls.vue

@@ -44,6 +44,7 @@ const emit = defineEmits(['zoomIn', 'zoomOut', 'resetZoom', 'switchDirection']);
     <button 
         @click="emit('zoomOut')" 
         class="vue-data-ui-zoom-controls-button"
+        data-cy-zoom-out
     >
         <BaseIcon 
             name="zoomMinus" 
@@ -54,6 +55,7 @@ const emit = defineEmits(['zoomIn', 'zoomOut', 'resetZoom', 'switchDirection']);
     <button 
         class="vue-data-ui-zoom-controls-button-zoom"
         @click="emit('resetZoom')"
+        data-cy-zoom-reset
         :style="{
             color: config.style.chart.controls.color,
             width: config.style.chart.controls.fontSize * 4 + 'px',
@@ -65,6 +67,7 @@ const emit = defineEmits(['zoomIn', 'zoomOut', 'resetZoom', 'switchDirection']);
     <button 
         @click="emit('zoomIn')" 
         class="vue-data-ui-zoom-controls-button"
+        data-cy-zoom-in
     >
         <BaseIcon 
             name="zoomPlus" 

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

@@ -0,0 +1,43 @@
+import VueUiDag from "./vue-ui-dag.vue";
+import { components } from '../../cypress/fixtures/vdui-components';
+import { testCommonFeatures } from '../../cypress/fixtures';
+import { h } from "vue";
+
+const { config, dataset } = components.find(c => c.name === 'VueUiDag');
+
+describe('<VueUiDag />', () => {
+    it('renders', () => {
+        cy.mount(VueUiDag, {
+            props: {
+                dataset,
+                config
+            }
+        }).then(() => {
+            testCommonFeatures({
+                userOptions: true,
+                title: true,
+                subtitle: true,
+                legend: false,
+                dataTable: false,
+            });
+
+            cy.get('[data-cy-node]').first().click({ force: true});
+            cy.get('[data-cy-tooltip-node]').should('be.visible').and('contain', 'AAA')
+
+            cy.get('[data-cy-midpoint]').first().trigger('mouseenter')
+            cy.get('[data-cy-tooltip-midpoint]').should('exist').and('contain', 'AAA → BBB')
+
+            cy.get('[data-cy-zoom-in]').click()
+            cy.wait(300)
+            cy.get('[data-cy-zoom-reset]').should('contain', '150%')
+            cy.get('[data-cy-zoom-out]').click()
+            cy.wait(300)
+            cy.get('[data-cy-zoom-reset]').should('contain', '100%')
+            cy.get('[data-cy-zoom-out]').click()
+            cy.wait(300)
+            cy.get('[data-cy-zoom-reset]').should('contain', '67%').click()
+            cy.wait(300)
+            cy.get('[data-cy-zoom-reset]').should('contain', '100%')
+        })
+    })
+})

src/components/vue-ui-dag.vue

@@ -812,7 +812,8 @@ defineExpose({
             <!-- Edges -->
             <g class="vue-ui-dag-edges">
                 <template v-for="edge in layoutData.edges" :key="edge.id">
-                    <path 
+                    <path
+                        data-cy-edge
                         :d="edge.pathData" 
                         fill="none" 
                         :stroke="edge.original.color ?? FINAL_CONFIG.style.chart.edges.stroke"
@@ -822,6 +823,7 @@ defineExpose({
                         style="pointer-events: none; transition: stroke-width 0.2s ease-in-out"
                     />
                     <circle
+                        data-cy-midpoint
                         class="vue-ui-dag-edge-midpoint"
                         v-if="FINAL_CONFIG.style.chart.midpoints.show"
                         :cx="edge.midpoint.x"
@@ -848,7 +850,8 @@ defineExpose({
                     @mouseleave="highlightedNodeId = null"
                 >
                     <template v-if="!$slots.node">
-                        <rect 
+                        <rect
+                            data-cy-node
                             :x="node.x - node.width / 2" 
                             :y="node.y - node.height / 2" 
                             :width="node.width"
@@ -879,6 +882,7 @@ defineExpose({
 
                         <!-- default label, multiline when provided with /n -->
                         <text 
+                            data-cy-node-label
                             v-else
                             :x="node.x" 
                             :y="node.y" 
@@ -940,6 +944,7 @@ defineExpose({
         <Transition name="fade">
             <Teleport :to="isFullscreen ? dagChart : 'body'" v-if="isTooltip">
                 <div
+                    data-cy-tooltip-midpoint
                     ref="tooltipRef"
                     class="vue-ui-dag-tooltip"
                     :style="{
@@ -963,6 +968,7 @@ defineExpose({
         <Transition name="fade">
             <Teleport :to="isFullscreen ? dagChart : 'body'" v-if="isNodeTooltip">
                 <div
+                    data-cy-tooltip-node
                     ref="nodeTooltipRef"
                     class="vue-ui-dag-node-tooltip"
                     :style="{