Tests - Add VueUiWordCloud component test

Author: graphieros

cypress/fixtures/vdui-components.js

@@ -1484,6 +1484,16 @@ export const components = [
     {
         name: 'VueUiWordCloud',
         dataset: 'Lorem ipsum dolor sit amet Lorem Lorem Lorem sit sit ipsum',
+        config: {
+            style: {
+                chart: {
+                    title: {
+                        text: 'Title',
+                        subtitle: { text: 'Subtitle' }
+                    }
+                }
+            }
+        },
         wrapperClass: '.vue-ui-word-cloud'
     },
     {

src/components/vue-ui-word-cloud.cy.js

@@ -0,0 +1,31 @@
+import VueUiWordCloud from "./vue-ui-word-cloud.vue";
+import { components } from "../../cypress/fixtures/vdui-components";
+import { testCommonFeatures } from "../../cypress/fixtures";
+
+const { dataset, config } = components.find(c => c.name === 'VueUiWordCloud');
+
+describe('<VueUiWordCloud />', () => {
+
+    it('renders', () => {
+        cy.viewport(500, 570);
+        cy.mount(VueUiWordCloud, {
+            props: {
+                dataset,
+                config
+            }
+        }).then(() => {
+            
+            testCommonFeatures({
+                userOptions: true,
+                title: true,
+                subtitle: true,
+                dataTable: true,
+                tooltipCallback: () => {
+                    cy.get('[data-cy="datapoint-word"]').first().trigger('mouseover', { force: true })
+                }
+            });
+
+            cy.get('[data-cy="datapoint-word"]').should('exist').and('be.visible').and('have.length', 5);
+        });
+    });
+});

src/components/vue-ui-word-cloud.vue

@@ -530,7 +530,8 @@ function useTooltip(word) {
             <g
                 :transform="`translate(${(svg.width <= 0 ? 10 : svg.width) / 2}, ${(svg.height <= 0 ? 10 : svg.height) / 2})`">
                 <g v-for="(word, index) in positionedWords">
-                    <text 
+                    <text
+                        data-cy="datapoint-word"
                         :fill="word.color" 
                         :font-weight="FINAL_CONFIG.style.chart.words.bold ? 'bold' : 'normal'" :key="index"
                         :x="word.x" :y="word.y" :font-size="word.fontSize"