Tests - Add VueUiWheel component test

Author: graphieros

cypress/fixtures/vdui-components.js

@@ -1359,6 +1359,16 @@ export const components = [
     {
         name: 'VueUiWheel',
         dataset: { percentage: 50 },
+        config: {
+            style: {
+                chart: {
+                    title: {
+                        text: 'Title',
+                        subtitle: { text: 'Subtitle' }
+                    }
+                }
+            }
+        },
         wrapperClass: '.vue-ui-wheel'
     },
     {

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

@@ -7,12 +7,16 @@ const { dataset, config } = components.find(c => c.name === 'VueUiTiremarks');
 describe('<VueUiTiremarks />', () => {
 
     it('renders', () => {
+        cy.spy(window, 'requestAnimationFrame').as('rafSpy');
         cy.mount(VueUiTiremarks, {
             props: {
                 dataset,
                 config
             }
         }).then(() => {
+
+            cy.log('Animating');
+            cy.get('@rafSpy').should('have.been.called');
 
             testCommonFeatures({
                 userOptions: true,

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

@@ -0,0 +1,39 @@
+import VueUiWheel from "./vue-ui-wheel.vue";
+import { components } from "../../cypress/fixtures/vdui-components";
+import { testCommonFeatures } from "../../cypress/fixtures";
+
+const { dataset, config } = components.find(c => c.name === 'VueUiWheel');
+
+describe('<VueUiWheel />', () => {
+
+    it('renders', () => {
+        cy.viewport(500, 560);
+        cy.spy(window, 'requestAnimationFrame').as('rafSpy');
+
+        cy.mount(VueUiWheel, {
+            props: {
+                dataset,
+                config
+            }
+        }).then(() => {
+
+            cy.log('Animating');
+            cy.get('@rafSpy').should('have.been.called');
+            
+            testCommonFeatures({
+                userOptions: true,
+                title: true,
+                subtitle: true
+            });
+
+            cy.log('ticks');
+            cy.get('[data-cy="wheel-tick"]').should('exist').and('be.visible').and('have.length', 100);
+
+            cy.log('inner circle');
+            cy.get('[data-cy="inner-circle"]').should('exist').and('be.visible');
+
+            cy.log('data label');
+            cy.get('[data-cy="data-label"]').should('exist').and('be.visible').and('contain', dataset.percentage).and('contain', '%');
+        });
+    });
+});

src/components/vue-ui-wheel.vue

@@ -325,7 +325,8 @@ defineExpose({
             </foreignObject>
 
 
-            <line 
+            <line
+                data-cy="wheel-tick"
                 v-for="(tick, i) in ticks"
                 :x1="tick.x1"
                 :x2="tick.x2"
@@ -336,7 +337,8 @@ defineExpose({
                 :stroke-linecap="FINAL_CONFIG.style.chart.layout.wheel.ticks.rounded ? 'round' : 'butt'"
                 :class="{ 'vue-ui-tick-animated': FINAL_CONFIG.style.chart.animation.use && i <= activeValue }"
             />
-            <circle 
+            <circle
+                data-cy="inner-circle"
                 v-if="FINAL_CONFIG.style.chart.layout.innerCircle.show"
                 :cx="wheel.centerX"
                 :cy="wheel.centerY"
@@ -346,6 +348,7 @@ defineExpose({
                 fill="none"
             />
             <text
+                data-cy="data-label"
                 v-if="FINAL_CONFIG.style.chart.layout.percentage.show"
                 :x="wheel.centerX"
                 :y="wheel.centerY + baseLabelFontSize / 3"