Tests - Add VueUiXyCanvas component test

Author: graphieros

cypress/fixtures/vdui-components.js

@@ -1511,6 +1511,16 @@ export const components = [
                 type: 'line'
             }
         ],
+        config: {
+            style: {
+                chart: {
+                    title: {
+                        text: 'Title',
+                        subtitle: { text: 'Subtitle' }
+                    }
+                }
+            }
+        },
         wrapperClass: '.vue-ui-xy-canvas'
     },
     {

src/components/vue-ui-xy-canvas.cy.js

@@ -0,0 +1,38 @@
+import VueUiXyCanvas from "./vue-ui-xy-canvas.vue";
+import { components } from "../../cypress/fixtures/vdui-components";
+import { testCommonFeatures } from "../../cypress/fixtures";
+
+const { dataset, config } = components.find(c => c.name === 'VueUiXyCanvas');
+
+describe('<VueUiXyCanvas />', () => {
+
+    it('renders', () => {
+        cy.viewport(500, 560);
+        cy.mount(VueUiXyCanvas, {
+            props: {
+                dataset,
+                config
+            }
+        }).then(() => {
+            
+            testCommonFeatures({
+                userOptions: true,
+                title: true,
+                subtitle: true,
+                legend: true,
+                dataTable: true,
+                slicer: true,
+                tooltipCallback: () => {
+                    cy.get('[data-cy="canvas"]').trigger('mousemove')
+                }
+            });
+
+            cy.get('[data-cy="canvas"]').then(canvas => {
+                const c = canvas[0];
+                const ctx = c.getContext('2d');
+                const pixelData = ctx.getImageData(10, 10, 1, 1).data;
+                expect(pixelData[3]).to.be.greaterThan(0);
+            });
+        });
+    });
+});

src/components/vue-ui-xy-canvas.vue

@@ -1613,7 +1613,8 @@ defineExpose({
 
         <div class="vue-ui-xy-canvas" :style="`position: relative; aspect-ratio: ${aspectRatio}`"
         ref="container">
-            <canvas 
+            <canvas
+                data-cy="canvas"
                 v-if="isDataset" 
                 ref="canvas" 
                 style="width:100%; height:100%;"